govuk_publishing_components 35.15.5 → 35.16.1

data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -18,7 +18,7 @@
   color: govuk-colour("white");
 }
 
-.gem-c-breadcrumbs--inverse .govuk-breadcrumbs__list-item:before {
+.gem-c-breadcrumbs--inverse .govuk-breadcrumbs__list-item::before {
   border-color: govuk-colour("white");
 }
 
@@ -40,11 +40,11 @@
       padding-bottom: 14px;
     }
 
-    .govuk-breadcrumbs__list-item:before {
+    .govuk-breadcrumbs__list-item::before {
       top: 18px;
     }
 
-    .govuk-breadcrumbs__link:after {
+    .govuk-breadcrumbs__link::after {
       content: "";
       position: absolute;
       top: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss

@@ -65,7 +65,7 @@
     text-decoration: none;
   }
 
-  &:before {
+  &::before {
     content: none;
   }
 }
@@ -97,7 +97,7 @@
     text-decoration: none;
   }
 
-  &:before {
+  &::before {
     content: none;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_cards.scss

@@ -65,7 +65,7 @@
 
 .gem-c-cards__link {
   // Make the entire list item area clickable
-  &:after {
+  &::after {
     bottom: 0;
     content: "";
     left: 0;
@@ -74,7 +74,7 @@
     top: 0;
   }
 
-  &:before {
+  &::before {
     $dimension: 7px;
     $width: 3px;
 
@@ -90,13 +90,13 @@
   }
 
   &:hover {
-    &:before {
+    &::before {
       border-color: $govuk-link-hover-colour;
     }
   }
 
   &:focus {
-    &:before {
+    &::before {
       border-color: $govuk-focus-text-colour;
     }
   }
@@ -120,7 +120,7 @@
     margin-bottom: govuk-spacing(1);
   }
 
-  .gem-c-cards__link:before {
+  .gem-c-cards__link::before {
     display: none;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -50,7 +50,7 @@
   padding-left: $contents-spacing;
   padding-right: $contents-spacing;
 
-  &:before {
+  &::before {
     content: "—";
     position: absolute;
     left: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -37,7 +37,7 @@
   border-top: 7px solid #fed700;
   position: relative;
 
-  &:before {
+  &::before {
     content: "";
     position: absolute;
     left: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -135,7 +135,7 @@
   padding-left: govuk-spacing(5);
   padding-top: govuk-spacing(2);
 
-  &:before {
+  &::before {
     content: "—";
     position: absolute;
     left: 0;
@@ -146,7 +146,7 @@
     padding: 0;
     padding-bottom: govuk-spacing(2);
 
-    &:before {
+    &::before {
       display: none;
     }
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -41,6 +41,13 @@
   }
 }
 
+@include govuk-media-query($from: tablet) {
+  .gem-c-image-card.gem-c-image-card--two-thirds {
+    margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
+    display: block;
+  }
+}
+
 @include govuk-media-query($from: mobile, $until: tablet) {
   .gem-c-image-card {
     margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
@@ -53,6 +60,25 @@
   .gem-c-image-card__text-wrapper {
     @include govuk-grid-column($width: one-half, $at: mobile);
   }
+
+  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
+    @include govuk-grid-column($width: one-third, $float: right, $at: mobile);
+  }
+
+  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
+    @include govuk-grid-column($width: two-thirds, $float: right, $at: mobile);
+  }
+}
+
+@include govuk-media-query($from: tablet) {
+  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
+    @include govuk-grid-column($width: one-third, $float: right, $at: tablet);
+  }
+
+  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
+    @include govuk-grid-column($width: two-thirds, $float: right, $at: tablet);
+    padding-left: 0;
+  }
 }
 
 .gem-c-image-card__image {
@@ -77,7 +103,7 @@
   // the after element extends the link to cover the image, removing the
   // need for a duplicate link. Other elements apart from the image are given
   // position relative and a higher z-index to put them above the after element
-  &:after {
+  &::after {
     content: "";
     position: absolute;
     z-index: 1;
@@ -91,7 +117,7 @@
   }
 
   @include govuk-media-query($from: mobile, $until: tablet) {
-    &:after {
+    &::after {
       left: govuk-spacing(3);
       right: govuk-spacing(3);
     }
@@ -150,7 +176,7 @@
     .gem-c-image-card__list-item {
       position: relative;
 
-      &:before { // stylelint-disable-line max-nesting-depth
+      &::before { // stylelint-disable-line max-nesting-depth
         content: "-";
         position: absolute;
         left: (- govuk-spacing(3));
@@ -200,7 +226,7 @@
     padding-bottom: govuk-spacing(2);
   }
 
-  .gem-c-image-card__title-link:after {
+  .gem-c-image-card__title-link::after {
     left: 0;
     right: 0;
   }
@@ -263,7 +289,7 @@
 .gem-c-image-card__youtube-thumbnail-image-container {
   position: relative;
 
-  &:before {
+  &::before {
     background: url("govuk_publishing_components/youtube-play-icon.png");
     background: url("govuk_publishing_components/youtube-play-icon.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -182,7 +182,7 @@ $after-button-padding-left: govuk-spacing(4);
       }
     }
 
-    &:after {
+    &::after {
       @include make-selectable-area-bigger;
       @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding);
     }
@@ -193,14 +193,14 @@ $after-button-padding-left: govuk-spacing(4);
     font-size: govuk-px-to-rem(16px);
     height: govuk-spacing(4);
 
-    &:before {
+    &::before {
       @include chevron(govuk-colour("white"), true);
     }
 
     &:hover {
       color: govuk-colour("mid-grey");
 
-      &:after {
+      &::after {
         background: govuk-colour("mid-grey");
       }
     }
@@ -216,7 +216,7 @@ $after-button-padding-left: govuk-spacing(4);
         box-shadow: none;
         color: $govuk-focus-text-colour;
 
-        &:after {
+        &::after {
           background: $govuk-focus-text-colour;
         }
       }
@@ -235,12 +235,12 @@ $after-button-padding-left: govuk-spacing(4);
       &:hover {
         color: govuk-colour("mid-grey");
 
-        &:after {
+        &::after {
           background: govuk-colour("mid-grey");
         }
       }
 
-      &:after {
+      &::after {
         background: none;
       }
     }
@@ -255,14 +255,14 @@ $after-button-padding-left: govuk-spacing(4);
       padding: 0;
       margin: 0;
 
-      &:after {
+      &::after {
         @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: 100%);
       }
     }
     // stylelint-enable max-nesting-depth
   }
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 }
@@ -299,7 +299,7 @@ $after-button-padding-left: govuk-spacing(4);
     &:hover {
       background: govuk-colour("black");
 
-      &:before {
+      &::before {
         left: 0;
         right: 0;
       }
@@ -308,12 +308,12 @@ $after-button-padding-left: govuk-spacing(4);
     &:focus {
       background: $govuk-focus-colour;
 
-      &:before {
+      &::before {
         content: none;
       }
     }
 
-    &:after {
+    &::after {
       left: 0;
       right: 0;
       width: 100%;
@@ -332,8 +332,8 @@ $after-button-padding-left: govuk-spacing(4);
         background: $govuk-focus-colour;
       }
 
-      &:after,
-      &:hover:after {
+      &::after,
+      &:hover::after {
         background: $govuk-focus-colour;
       }
     }
@@ -364,19 +364,19 @@ $after-button-padding-left: govuk-spacing(4);
   @include govuk-link-style-no-visited-state;
   @include govuk-link-style-no-underline;
 
-  &:after {
+  &::after {
     @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right);
   }
 
   &:hover {
     color: govuk-colour("mid-grey");
 
-    &:after {
+    &::after {
       background: govuk-colour("mid-grey");
     }
 
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-      &:before {
+      &::before {
         border-color: govuk-colour("mid-grey");
       }
     }
@@ -411,11 +411,11 @@ $after-button-padding-left: govuk-spacing(4);
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
         color: govuk-colour("black");
 
-        &:after {
+        &::after {
           background: govuk-colour("black");
         }
 
-        &:before {
+        &::before {
           @include chevron(govuk-colour("black"), true);
         }
       }
@@ -428,22 +428,23 @@ $after-button-padding-left: govuk-spacing(4);
     box-shadow: none;
 
     &:hover {
-      &:after {
+      &::after {
         background-color: govuk-colour("black");
       }
     }
 
-    &:after {
+    &::after {
       background-color: govuk-colour("black");
     }
-
+    // stylelint-disable max-nesting-depth
     .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
       border-color: $govuk-focus-colour;
 
-      &:before {
+      &::before {
         @include chevron(govuk-colour("black"), true);
       }
     }
+    // stylelint-enable max-nesting-depth
   }
 
   // Undoes the :focus styles *only* for browsers that support :focus-visible.
@@ -453,16 +454,17 @@ $after-button-padding-left: govuk-spacing(4);
     box-shadow: none;
     color: govuk-colour("white");
 
+    // stylelint-disable max-nesting-depth
     &:hover {
       .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        &:before {
+        &::before {
           @include chevron(govuk-colour("mid-grey"), true);
         }
 
         color: govuk-colour("mid-grey");
       }
 
-      &:after {
+      &::after {
         background: govuk-colour("mid-grey");
       }
     }
@@ -471,11 +473,12 @@ $after-button-padding-left: govuk-spacing(4);
       border-color: $button-pipe-colour;
 
       @include govuk-media-query($from: 360px) {
-        &:before {
+        &::before {
           @include chevron(govuk-colour("white"), true);
         }
       }
     }
+    // stylelint-enable max-nesting-depth
   }
 
   // Open button modifier
@@ -485,7 +488,7 @@ $after-button-padding-left: govuk-spacing(4);
       @include govuk-focused-text;
       box-shadow: none;
 
-      &:after {
+      &::after {
         background-color: govuk-colour("black");
       }
 
@@ -494,7 +497,7 @@ $after-button-padding-left: govuk-spacing(4);
         border-color: $govuk-focus-colour;
 
         @include govuk-media-query($from: 360px) {
-          &:before {
+          &::before {
             @include chevron(govuk-colour("black"), true);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
@@ -505,7 +508,7 @@ $after-button-padding-left: govuk-spacing(4);
     @include focus-not-focus-visible {
       background: govuk-colour("light-grey");
 
-      &:after {
+      &::after {
         background-color: $govuk-link-colour;
       }
 
@@ -514,7 +517,7 @@ $after-button-padding-left: govuk-spacing(4);
         border-color: govuk-colour("light-grey");
 
         @include govuk-media-query($from: 360px) {
-          &:before {
+          &::before {
             @include chevron($govuk-link-colour);
             @include prefixed-transform($rotate: 225deg, $translateY: 1px);
           }
@@ -533,7 +536,7 @@ $after-button-padding-left: govuk-spacing(4);
   padding: govuk-spacing(1) govuk-spacing(4);
 
   @include govuk-media-query($from: 360px) {
-    &:before {
+    &::before {
       @include chevron(govuk-colour("white"));
     }
   }
@@ -597,11 +600,13 @@ $after-button-padding-left: govuk-spacing(4);
       box-shadow: none;
       color: $govuk-focus-colour;
 
+      // stylelint-disable max-nesting-depth
       @include govuk-media-query($from: 360px) {
-        &:before {
+        &::before {
           @include chevron($govuk-focus-colour, true);
         }
       }
+      // stylelint-enable max-nesting-depth
     }
 
     @include focus-not-focus-visible {
@@ -708,14 +713,14 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 
   @include govuk-media-query($from: "desktop") {
     padding: 0;
 
-    &:after {
+    &::after {
       @include make-selectable-area-bigger;
     }
   }
@@ -726,7 +731,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   font-weight: bold;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
     height: calc(100% - 20px);
   }
@@ -756,7 +761,7 @@ $after-button-padding-left: govuk-spacing(4);
   font-size: govuk-px-to-rem(16px);
   padding: 0;
 
-  &:after {
+  &::after {
     @include make-selectable-area-bigger;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -0,0 +1,172 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-option-select {
+  position: relative;
+  padding: 0 0 govuk-spacing(2);
+  margin-bottom: govuk-spacing(2);
+  border-bottom: 1px solid $govuk-border-colour;
+
+  @include govuk-media-query($from: desktop) {
+    // Redefine scrollbars on desktop where these lists are scrollable
+    // so they are always visible in option lists
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 7px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+
+      background-color: rgba(0, 0, 0, .5);
+      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .87);
+    }
+  }
+
+  .gem-c-checkboxes {
+    margin: 0;
+  }
+}
+
+.gem-c-option-select__title {
+  @include govuk-font(19);
+  margin: 0;
+}
+
+.gem-c-option-select__button {
+  z-index: 1;
+  background: none;
+  border: 0;
+  text-align: left;
+  padding: 0;
+  cursor: pointer;
+  color: $govuk-link-colour;
+
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: .1em;
+    @include govuk-link-hover-decoration;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:focus {
+    outline: none;
+    text-decoration: none;
+    @include govuk-focused-text;
+  }
+
+  &[disabled] {
+    background-image: none;
+    color: inherit;
+  }
+
+  // Extend the touch area of the button to span the heading
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
+}
+
+.gem-c-option-select__icon {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 9px;
+  width: 30px;
+  height: 40px;
+  fill: govuk-colour("black");
+}
+
+.gem-c-option-select__container {
+  position: relative;
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: govuk-colour("white");
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.gem-c-option-select__container--large {
+  max-height: 600px;
+}
+
+.gem-c-option-select__container-inner {
+  padding: govuk-spacing(1) 13px;
+}
+
+.gem-c-option-select__filter {
+  position: relative;
+  background: govuk-colour("white");
+  padding: 13px 13px govuk-spacing(2) 13px;
+}
+
+.gem-c-option-select__filter-input {
+  @include govuk-font(19);
+  background: image-url("option-select/input-icon.svg") govuk-colour("white") no-repeat -5px -3px;
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font(16);
+  }
+}
+
+.gem-c-option-select__filter-input.govuk-input {
+  padding-left: 33px;
+}
+
+.js-enabled {
+  .gem-c-option-select__heading {
+    position: relative;
+    padding: 10px 8px 5px 43px;
+    margin: 0;
+  }
+
+  [aria-expanded="true"] ~ .gem-c-option-select__icon--up {
+    display: block;
+  }
+
+  [aria-expanded="false"] ~ .gem-c-option-select__icon--down {
+    display: block;
+  }
+
+  .gem-c-option-select__container {
+    height: 200px;
+  }
+
+  .gem-c-option-select__container--large {
+    height: 600px;
+  }
+
+  [data-closed-on-load="true"] .gem-c-option-select__container {
+    display: none;
+  }
+}
+
+.gem-c-option-select__selected-counter {
+  @include govuk-font($size: 14);
+  color: $govuk-text-colour;
+  margin-top: 3px;
+}
+
+.gem-c-option-select.js-closed {
+  .gem-c-option-select__filter,
+  .gem-c-option-select__container {
+    display: none;
+  }
+}
+
+.gem-c-option-select.js-opened {
+  .gem-c-option-select__filter,
+  .gem-c-option-select__container {
+    display: block;
+  }
+}