govuk_tech_docs 3.4.5 → 4.0.0

data/node_modules/govuk-frontend/{govuk → dist/govuk}/components/accordion/_index.scss

@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/accordion") {
   $govuk-accordion-base-colour: govuk-colour("black");
-  $govuk-accordion-hover-colour: govuk-colour("light-grey", $legacy: "grey-3");
+  $govuk-accordion-hover-colour: govuk-colour("light-grey");
   $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
   $govuk-accordion-bottom-border-width: 1px;
 
@@ -35,8 +35,8 @@
     margin-bottom: 0;
   }
 
-  // JavaScript enabled
-  .js-enabled {
+  // GOV.UK Frontend JavaScript enabled
+  .govuk-frontend-supported {
     .govuk-accordion {
       // Border at the bottom of the whole accordion
       border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
@@ -89,7 +89,7 @@
       cursor: pointer;
       -webkit-appearance: none;
 
-      @include govuk-media-query ($from: tablet) {
+      @include govuk-media-query($from: tablet) {
         margin-bottom: 14px;
       }
 
@@ -102,10 +102,12 @@
       &:hover {
         color: $govuk-accordion-base-colour;
         background: $govuk-accordion-hover-colour;
-        // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
-        // button. We add a grey box-shadow on hover too, to make the height of the hover state
-        // match the height of the focus state.
-        box-shadow: 0 -2px $govuk-accordion-hover-colour, 0 4px $govuk-accordion-hover-colour;
+        // The focus state adds a box-shadow to the top and bottom of the
+        // button. We add a grey box-shadow on hover too, to make the height of
+        // the hover state match the height of the focus state.
+        box-shadow:
+          0 -2px $govuk-accordion-hover-colour,
+          0 4px $govuk-accordion-hover-colour;
 
         .govuk-accordion__section-toggle-text {
           color: $govuk-accordion-base-colour;
@@ -116,7 +118,7 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-hover-colour;
         }
       }
@@ -128,7 +130,7 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-icon-focus-colour;
         }
       }
@@ -145,7 +147,7 @@
 
       position: relative;
 
-      // Set size using rems to make the icon scale with text if user resizes text in their browser
+      // Set size using rems so icon scales with text
       width: govuk-px-to-rem(20px);
       height: govuk-px-to-rem(20px);
 
@@ -154,15 +156,8 @@
 
       vertical-align: middle;
 
-      // IE8 fallback of icon
-      @include _govuk-if-ie8 {
-        display: inline-block;
-        max-height: 20px;
-        line-height: 1;
-      }
-
       // Create inner chevron arrow
-      &:after {
+      &::after {
         content: "";
         box-sizing: border-box;
         display: block;
@@ -174,52 +169,30 @@
         width: govuk-px-to-rem(6px);
         height: govuk-px-to-rem(6px);
 
-        -webkit-transform: rotate(-45deg);
-
-            -ms-transform: rotate(-45deg);
-
-                transform: rotate(-45deg);
+        transform: rotate(-45deg);
 
         border-top: govuk-px-to-rem(2px) solid;
         border-right: govuk-px-to-rem(2px) solid;
-
-        // IE8 fallback of icon with HTML symbol
-        @include _govuk-if-ie8 {
-          content: "\25B2"; // "▲"
-          position: relative;
-          border: 0;
-        }
       }
     }
 
     // Rotate icon to create "Down" version
     .govuk-accordion-nav__chevron--down {
-      -webkit-transform: rotate(180deg);
-          -ms-transform: rotate(180deg);
-              transform: rotate(180deg);
-
-      // IE8 fallback of arrow icon
-      @include _govuk-if-ie8 {
-        &:after {
-          content: "\25BC"; // "▼"
-          -webkit-transform: none;
-              -ms-transform: none;
-                  transform: none;
-        }
-      }
+      transform: rotate(180deg);
     }
 
     .govuk-accordion__section-button {
       width: 100%;
 
-      padding: govuk-spacing(2) 0 0 0;
+      padding: govuk-spacing(2) 0 0;
 
       border: 0;
 
       border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
 
-      // Visually separate the section from the one underneath when user changes colours in their
-      // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
+      // Visually separate the section from the one underneath when user changes
+      // colours in their browser. See
+      // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
       border-bottom: govuk-spacing(2) solid transparent;
 
       color: $govuk-text-colour;
@@ -230,7 +203,7 @@
       cursor: pointer;
       -webkit-appearance: none;
 
-      @include govuk-media-query ($from: tablet) {
+      @include govuk-media-query($from: tablet) {
         padding-bottom: govuk-spacing(2);
       }
 
@@ -252,14 +225,14 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-hover-colour;
         }
       }
 
       &:focus {
-        // Remove default focus border around button as
-        // styling is being applied to inner text elements that receive focus
+        // Remove default focus border around button as styling is being applied
+        // to inner text elements that receive focus
         outline: 0;
 
         .govuk-accordion__section-heading-text-focus,
@@ -273,7 +246,7 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-icon-focus-colour;
         }
       }
@@ -285,24 +258,25 @@
       }
     }
 
-    // Remove the transparent border when the section is expanded to make it clear that the heading
-    // relates to the content below. Adjust padding to maintain the height of the element.
-    // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
+    // Remove the transparent border when the section is expanded to make it
+    // clear that the heading relates to the content below. Adjust padding to
+    // maintain the height of the element. See
+    // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
     .govuk-accordion__section--expanded .govuk-accordion__section-button {
       padding-bottom: govuk-spacing(3);
       border-bottom: 0;
 
-      @include govuk-media-query ($from: tablet) {
+      @include govuk-media-query($from: tablet) {
         padding-bottom: govuk-spacing(4);
       }
     }
 
-    // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
-    // Styling adds some spacing
+    // As Chevron icon is vertically aligned it overlaps with the focus state
+    // bottom border – this adds some spacing
     .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
       padding-bottom: 3px;
 
-      @include govuk-media-query ($from: desktop) {
+      @include govuk-media-query($from: desktop) {
         padding-bottom: 2px;
       }
     }
@@ -322,14 +296,14 @@
 
     // Add toggle link with Chevron icon on left.
     .govuk-accordion__section-toggle {
-      @include govuk-typography-responsive($size: 19);
+      @include govuk-font-size($size: 19);
       @include govuk-typography-weight-regular;
       color: $govuk-link-colour;
     }
 
-    // Add space between the icon and text.
-    // Avoid applying spacing directly to the icon as the use of `transform` will change the
-    // placement of any margins.
+    // Add space between the icon and text. Avoid applying spacing directly to
+    // the icon as the use of `transform` will change the placement of any
+    // margins.
     .govuk-accordion__show-all-text,
     .govuk-accordion__section-toggle-text {
       margin-left: govuk-spacing(1);
@@ -338,23 +312,25 @@
 
     // Background colour adjustment when user changes colours in Firefox
     //
-    // When user changes colours in Firefox, text colour inside <button> is always black
-    // (regardless of the custom colours the user has set). This is fine when the text in the
-    // button is not nested inside another element because when user changes colours in Firefox,
-    // the immediate background colour of buttons is always white (again, regardless of user's
-    // custom colours).
+    // When user changes colours in Firefox, text colour inside <button> is
+    // always black (regardless of the custom colours the user has set). This is
+    // fine when the text in the button is not nested inside another element
+    // because when user changes colours in Firefox, the immediate background
+    // colour of buttons is always white (again, regardless of user's custom
+    // colours).
     //
-    // However, when the text inside <button> is wrapped inside another element AND that element
-    // sets a background colour, the text colour is still black but the background of that nested
-    // element gets the user's custom background colour. When the custom background is a lighter
-    // hue, the contrast might be sufficient. But if the user's custom background colour is a
-    // darker colour, the contrast with the text might not be sufficient.
+    // However, when the text inside <button> is wrapped inside another element
+    // AND that element sets a background colour, the text colour is still black
+    // but the background of that nested element gets the user's custom
+    // background colour. When the custom background is a lighter hue, the
+    // contrast might be sufficient. But if the user's custom background colour
+    // is a darker colour, the contrast with the text might not be sufficient.
     //
-    // To ensure sufficient contrast, override the background colour set by the focus state on the
-    // nested elements to be transparent.
+    // To ensure sufficient contrast, override the background colour set by the
+    // focus state on the nested elements to be transparent.
     //
-    // Also override the background colour of the Show/Hide chevrons which set a background colour
-    // on hover.
+    // Also override the background colour of the Show/Hide chevrons which set a
+    // background colour on hover.
     @media screen and (forced-colors: active) {
       .govuk-accordion__show-all:hover,
       .govuk-accordion__section-button:hover {
@@ -390,3 +366,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */