Align details component indent line with arrow down icon (#3423)

ONSdigital · Nov 19, 2024 · 6b7c00c · 6b7c00c
1 parent 14ad695
commit 6b7c00c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2 deletions.
diff --git a/...ce/ds-vr-test__components_details_example-details-open_0_document_0_desktop.png b/...ce/ds-vr-test__components_details_example-details-open_0_document_0_desktop.png
diff --git a/...nce/ds-vr-test__components_details_example-details-open_0_document_1_tablet.png b/...nce/ds-vr-test__components_details_example-details-open_0_document_1_tablet.png
diff --git a/...nce/ds-vr-test__components_details_example-details-open_0_document_2_mobile.png b/...nce/ds-vr-test__components_details_example-details-open_0_document_2_mobile.png
diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss
@@ -68,15 +68,14 @@ $details-caret-width: 1.75rem;
 
     &--open & {
         &__icon {
-            left: -0.1rem;
             top: 0.2rem;
             transform: rotate(90deg);
         }
 
         &__content {
             border-left: 4px solid var(--ons-color-borders-indent);
             display: block;
-            margin: 1rem 0 0;
+            margin: 1rem 0 0 0.5rem;
             padding: 0 0 0 1.5rem;
         }
     }

diff --git a/src/components/details/example-details-open.njk b/src/components/details/example-details-open.njk
@@ -0,0 +1,10 @@
+{% from "components/details/_macro.njk" import onsDetails %}
+
+{{
+    onsDetails({
+        "id": "details-example",
+        "title": "What is a photovoltaic system?",
+        "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>",
+        "open": true
+    })
+}}