gent_styleguide 7.1.0 → 7.2.2

package/build/styleguide/sass/21-atoms/table/_table.scss

@@ -1,6 +1,8 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 div.responsive-table,
 div.table-swiper-wrapper {
   position: relative;
@@ -10,7 +12,7 @@ div.table-swiper-wrapper {
   caption,
   .caption {
     @include theme('color', 'help-text-color', 'table-caption-color');
-    @include small-text();
+    @include small-text;
   }
 }
 
@@ -25,9 +27,9 @@ div.responsive-table {
   }
 
   table {
-    border-bottom: 1px solid coloring('gray', -5);
-    border-collapse: collapse;
     caption-side: bottom;
+    border-collapse: collapse;
+    border-bottom: 1px solid coloring('gray', -5);
 
     th {
       @include semi-bold-text;
@@ -74,6 +76,7 @@ div.responsive-table {
     th,
     td {
       @include theme('color', 'color-zero', 'table-content-color');
+
       padding: 20px;
       text-align: left;
     }
@@ -104,12 +107,12 @@ div.table-swiper-wrapper {
 
     &::before,
     &::after {
+      content: "";
       position: absolute;
       right: 0;
       left: 0;
       height: 1px;
       background-color: coloring('gray-light');
-      content: "";
     }
 
     &::before {
@@ -150,11 +153,11 @@ div.table-swiper-wrapper {
 
     .swiper-wrapper {
       display: flex;
+      box-sizing: border-box;
       width: 100%;
       margin: 0;
       padding: 0;
       gap: 0;
-      box-sizing: border-box;
     }
 
     .swiper-slide {
@@ -207,35 +210,34 @@ div.table-swiper-wrapper {
 
   .table-swiper__fixed-column {
     position: sticky;
+    z-index: 2;
     left: 0;
     flex-shrink: 0;
     width: $fixed-col-width;
-    z-index: 2;
     pointer-events: none;
 
     &::after {
+      content: "";
       position: absolute;
+      z-index: 4;
       top: 0;
       bottom: $pag-nav-wrapper-size;
       left: 100%;
       width: 25px;
       height: auto;
       background: linear-gradient(90deg, rgba(2, 0, 36, .25) 0%, rgba(0, 0, 0, 0) 100%);
-      content: "";
-      z-index: 4;
     }
   }
 
   dt {
     @include theme('background-color', 'color-secondary', 'table-header-color');
     @include theme('border-color', 'color-secondary', 'table-header-color');
-    @include semi-bold-text();
+    @include semi-bold-text;
   }
 
   dd {
-
     &:nth-of-type(n) {
-      @include table-backgrounds();
+      @include table-backgrounds;
     }
   }
 }

package/build/styleguide/sass/21-atoms/tag/_tag.scss

@@ -3,7 +3,7 @@
 
 .tag {
   @include theme('background-color', 'color-secondary', 'tag-background-color');
-  @include medium-text();
+  @include medium-text;
 
   display: inline-flex;
   align-items: center;
@@ -40,13 +40,13 @@
 
 a.tag {
   @include theme('color', 'color-zero', 'tag-color');
-  @include normal-text();
+  @include normal-text;
 
   padding: 8px 15px;
   transition: background-color .2s ease-in-out;
   border: 0;
 
-  &:not([class*=icon])::before {
+  &:not([class*="icon"])::before {
     margin-left: 5px;
   }
 
@@ -60,7 +60,7 @@ a.tag {
 }
 
 span.tag {
-  @include small-text();
+  @include small-text;
 
   height: 30px;
   padding-right: 10px;

package/build/styleguide/sass/31-molecules/accordion/_accordion.scss

@@ -2,6 +2,8 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/fonts/icons' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 .accordion {
   position: relative;
   z-index: 1;
@@ -11,13 +13,11 @@
     @include extra-large-text;
     @include icon(chevron-down);
 
-    & {
-      position: relative;
-      padding-right: 32px;
-      color: inherit;
-      line-height: 26px;
-      text-align: left;
-    }
+    position: relative;
+    padding-right: 32px;
+    color: inherit;
+    line-height: 26px;
+    text-align: left;
 
     &::before {
       position: absolute;
@@ -27,7 +27,7 @@
       line-height: 1.2;
     }
 
-    &[aria-expanded=true] {
+    &[aria-expanded="true"] {
       &::before {
         transform: scaleY(-1);
       }
@@ -36,8 +36,8 @@
 
   .accordion--content {
     max-height: 0;
-    transition: max-height .75s ease-out;
     overflow: hidden;
+    transition: max-height .75s ease-out;
 
     &.accordion--expanded {
       max-height: 9999px;
@@ -64,9 +64,7 @@ dl.accordion {
     & > li {
       @include theme('border-color', 'color-primary-light', 'accordion-border-color');
 
-      & {
-        border-bottom: 2px solid;
-      }
+      border-bottom: 2px solid;
     }
   }
 
@@ -92,21 +90,19 @@ dl.accordion {
     &::before {
       @include theme('background-color', 'color-tertiary-pastel', 'button-secondary-background');
 
-      & {
-        position: relative;
-        right: auto;
-        left: 0;
-        min-width: 36px;
-        min-height: 36px;
-        margin: 0 15px 0 0;
-        padding: 2.5px 5px;
-        transition: transform .2s ease-out-in-out;
-        font-size: 1.2rem;
-        text-align: left;
-      }
+      position: relative;
+      right: auto;
+      left: 0;
+      min-width: 36px;
+      min-height: 36px;
+      margin: 0 15px 0 0;
+      padding: 2.5px 5px;
+      transition: transform .2s ease-out-in-out;
+      font-size: 1.2rem;
+      text-align: left;
     }
 
-    &[aria-expanded=true] {
+    &[aria-expanded="true"] {
       @include icon(minus);
 
       &::before {
@@ -115,7 +111,7 @@ dl.accordion {
       }
     }
 
-    &[aria-expanded=false] {
+    &[aria-expanded="false"] {
       @include icon(plus);
 
       &::before {
@@ -149,12 +145,10 @@ dl.accordion {
     @include theme('color', 'color-tertiary', 'link-color');
     @include link-background('color-primary', 'color-primary', 'link-underline-color', 'link-hover-background');
 
-    & {
-      width: auto;
-      margin-bottom: 20px;
-      line-height: 120%;
-      vertical-align: middle;
-    }
+    width: auto;
+    margin-bottom: 20px;
+    line-height: 120%;
+    vertical-align: middle;
 
     &::before {
       display: none;
@@ -169,7 +163,7 @@ dl.accordion {
       vertical-align: middle;
     }
 
-    &[aria-expanded=true] {
+    &[aria-expanded="true"] {
       i {
         transform: rotate(180deg);
       }
@@ -178,8 +172,8 @@ dl.accordion {
 
   .accordion--link--content {
     max-height: 0;
-    transition: max-height .75s ease-out;
     overflow: hidden;
+    transition: max-height .75s ease-out;
 
     &.accordion--expanded {
       max-height: 9999px;

package/build/styleguide/sass/31-molecules/breadcrumbs/_breadcrumbs.scss

@@ -2,6 +2,7 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/fonts/icons' as *;
 
+/* stylelint-disable max-nesting-depth */
 .breadcrumb {
   margin: 0 0 20px;
   clear: both;
@@ -37,8 +38,8 @@
         margin-right: 0;
 
         &::after {
-          display: none;
           content: '';
+          display: none;
         }
       }
 
@@ -55,7 +56,7 @@
         &,
         &[href^="http://"],
         &[href^="https://"] {
-          &:not(.no-icon):not(.tag) {
+          &:not(.no-icon, .tag) {
             &::after {
               display: none;
             }
@@ -84,7 +85,7 @@
 
       padding: 0 7px;
       border-color: transparent;
-      outline: 2px solid currentColor;
+      outline: 2px solid currentcolor;
       line-height: 19px;
 
       &:hover,
@@ -107,7 +108,7 @@
   &[aria-expanded="false"] {
     ul,
     ol {
-      li:not(.expandable):not(:nth-last-child(-n+3)):not(:nth-child(-n+2)) {
+      li:not(.expandable, :nth-last-child(-n+3), :nth-child(-n+2)) {
         display: none;
       }
 
@@ -120,13 +121,13 @@
 
           a,
           span {
+            overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            overflow: hidden;
           }
         }
 
-        li:not(.expandable):not(:nth-last-child(-n+3)) {
+        li:not(.expandable, :nth-last-child(-n+3)) {
           display: none;
         }
       }

package/build/styleguide/sass/31-molecules/card/_card.scss

@@ -4,9 +4,9 @@
 .card {
   margin: 1.2rem 0;
   border-radius: border-radius('radius-1');
+  box-shadow: 0 .1rem .6rem 0 rgba(35, 51, 58, .25);
   // override li line-height
   line-height: 1.75;
-  box-shadow: 0 .1rem .6rem 0 rgba(35, 51, 58, .25);
 
   > * {
     padding: 1rem;
@@ -14,6 +14,7 @@
 
   .actions {
     @include theme('border-color', 'color-primary-light', 'modal-action-border-bottom');
+
     border-top: 2px solid;
   }
 }

package/build/styleguide/sass/31-molecules/checkboxes-dynamic/_checkboxes-dynamic.scss

@@ -3,7 +3,6 @@
 @use '../../11-base/fonts/icons' as *;
 
 .checkbox-filter-dynamic {
-
   .modal-preview,
   .accordion-preview,
   .checkbox-accordion {
@@ -17,17 +16,16 @@
       // Adjust for checkbox focus outline.
       margin: -4px -4px 0;
       padding: 4px 4px 0;
-
-      transition: max-height .5s ease-in-out;
       overflow: hidden;
+      transition: max-height .5s ease-in-out;
     }
 
     .accordion--button {
-      &[aria-expanded=false] {
+      &[aria-expanded="false"] {
         @include icon(chevron-down);
       }
 
-      &[aria-expanded=true] {
+      &[aria-expanded="true"] {
         @include icon(chevron-up);
       }
     }

package/build/styleguide/sass/31-molecules/checkboxes-with-filter/_checkboxes-with-filter.scss

@@ -25,6 +25,7 @@
     margin: 0 .5rem .5rem 0;
   }
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .checkbox-filter__filter__search-wrapper {
     max-width: 30rem;
 

package/build/styleguide/sass/31-molecules/contact-details/_contact-details.scss

@@ -8,8 +8,7 @@ $avatar-width: 280px;
   &--with-image {
     .contact-details-columns {
       display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
+      flex-flow: row wrap;
       justify-content: flex-start;
     }
 
@@ -19,6 +18,7 @@ $avatar-width: 280px;
 
       @include tablet {
         @include col(6);
+
         margin-right: $gutter-width;
 
         &:last-of-type:not(:first-of-type) {
@@ -43,7 +43,7 @@ $avatar-width: 280px;
   }
 
   ul {
-    @include medium-text();
+    @include medium-text;
 
     max-width: 630px;
     margin-bottom: 45px;

package/build/styleguide/sass/31-molecules/cta-block/_cta-block.scss

@@ -35,9 +35,9 @@
 
   .cta-block__content {
     position: relative;
+    z-index: 1;
     top: -20px;
     width: 100%;
-    z-index: 1;
 
     @include phablet {
       top: 20px;
@@ -61,8 +61,8 @@
   }
 
   &.image-none {
-    max-width: 48.5rem;
     z-index: 1;
+    max-width: 48.5rem;
 
     .cta-block__content {
       @include theme-content('color-info-pastel', 'cta-shadow-color') {

package/build/styleguide/sass/31-molecules/display-switcher/_display-switcher.scss

@@ -2,7 +2,8 @@
 @use '../../00-mixins/mixins' as *;
 
 .display-switcher {
-  @include medium-text();
+  @include medium-text;
+
   align-items: center;
   margin-bottom: 60px;
 
@@ -15,7 +16,8 @@
 
     &.icon-list.inline {
       li {
-        @include medium-text();
+        @include medium-text;
+
         margin-right: 20px;
 
         &:not(.active) {

package/build/styleguide/sass/31-molecules/feature-block/_feature-block.scss

@@ -4,7 +4,7 @@
 .feature-block {
   @include theme('color', 'color-none', 'feature-block-primary-color');
   @include theme('background-color', 'color-primary', 'feature-block-primary-background-color');
-  @include large-text();
+  @include large-text;
 
   padding: 30px;
 

package/build/styleguide/sass/31-molecules/file-upload/_file-upload.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+
 .file-upload {
   &.multiple {
     .file {

package/build/styleguide/sass/31-molecules/form-actions/_form-actions.scss

@@ -2,8 +2,7 @@
 
 .form-actions {
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
   align-items: flex-start;
   margin: 0 -.6rem;
 

package/build/styleguide/sass/31-molecules/form-item/_form-item.scss

@@ -1,6 +1,8 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
+/* stylelint-disable max-nesting-depth */
+
 .form-item {
   width: 100%;
   margin-bottom: 30px;
@@ -35,7 +37,7 @@
     display: block;
   }
 
-  .field-message:not(.error):not(.success) {
+  .field-message:not(.error, .success) {
     margin-bottom: 20px;
   }
 

package/build/styleguide/sass/31-molecules/form-steps/_form-steps.scss

@@ -2,14 +2,16 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/fonts/icons' as *;
 
+/* stylelint-disable no-descending-specificity, max-nesting-depth */
+
 .form-steps {
   ol.form-steps-list {
     display: flex;
     flex-wrap: wrap;
     margin: 0;
     padding: 20px 20px 5px;
-    counter-reset: item;
     list-style-type: none;
+    counter-reset: item;
 
     @include desktop-and-below {
       align-items: center;
@@ -27,19 +29,19 @@
         margin-bottom: 0;
       }
 
-      &:not(:first-child):not(:last-child):not(.active):not(.active + li) {
+      &:not(:first-child, :last-child, .active, .active + li) {
         @include desktop-and-below {
+          // also hide from screenreaders
+          visibility: hidden;
           // clip
           position: absolute;
           width: 1px;
           height: 1px;
           margin: -1px;
           padding: 0;
-          border: 0;
           overflow: hidden;
-          // also hide from screenreaders
-          visibility: hidden;
           clip: rect(0 0 0 0);
+          border: 0;
         }
       }
 
@@ -51,9 +53,9 @@
           height: 1px;
           margin: -1px;
           padding: 0;
-          border: 0;
           overflow: hidden;
           clip: rect(0 0 0 0);
+          border: 0;
         }
       }
 
@@ -61,11 +63,9 @@
         @include reset-link-background;
         @include theme('color', 'color-zero');
 
-        & {
-          display: inline-block;
-          line-height: 175%;
-          vertical-align: middle;
-        }
+        display: inline-block;
+        line-height: 175%;
+        vertical-align: middle;
 
         &:hover,
         &:focus {
@@ -108,7 +108,7 @@
           @include theme('background-color', 'color-primary', 'form-step--active-background-color');
         }
 
-        & + li:not(:nth-last-child(2)):not(:last-child)::after {
+        & + li:not(:nth-last-child(2), :last-child)::after {
           @include desktop-and-below {
             content: '\2026';
           }
@@ -117,9 +117,7 @@
         > span::before {
           @include theme('border-color', 'color-primary', 'form-step--active-border-color');
 
-          & {
-            background-color: transparent;
-          }
+          background-color: transparent;
         }
       }
 
@@ -129,11 +127,9 @@
         &::before {
           @include theme('background-color', 'color-success-pastel');
 
-          & {
-            display: inline-block;
-            line-height: 30px;
-            vertical-align: middle;
-          }
+          display: inline-block;
+          line-height: 30px;
+          vertical-align: middle;
         }
 
         a:hover,
@@ -158,14 +154,12 @@
       li:not(:last-child)::after {
         @include theme('border-color', 'color-tertiary-pastel', 'form-step--active-border-color');
 
-        & {
-          display: inline-block;
-          width: 15px;
-          margin: 0 15px;
-          border-bottom: 2px solid;
-          content: '';
-          vertical-align: middle;
-        }
+        content: '';
+        display: inline-block;
+        width: 15px;
+        margin: 0 15px;
+        border-bottom: 2px solid;
+        vertical-align: middle;
       }
     }
   }
@@ -182,14 +176,12 @@
           &:not(:last-child)::after {
             @include theme('border-color', 'color-tertiary-pastel', 'form-step--active-border-color');
 
-            & {
-              display: block;
-              width: 15px;
-              height: 20px;
-              margin: 15px 0 0;
-              border-right: 2px solid;
-              content: '';
-            }
+            content: '';
+            display: block;
+            width: 15px;
+            height: 20px;
+            margin: 15px 0 0;
+            border-right: 2px solid;
           }
         }
       }

package/build/styleguide/sass/31-molecules/gentinfo/_gentinfo.scss

@@ -6,6 +6,7 @@ $gentinfo-icon-size: 8rem;
 
 .gentinfo {
   @include theme('background-color', 'color-info-light', 'gentinfo-background');
+
   margin: 3rem 0;
   padding: 2rem 1rem;
 
@@ -20,6 +21,7 @@ $gentinfo-icon-size: 8rem;
 
     &::before {
       @include spot-image('gentinfo', $gentinfo-icon-size);
+
       margin: 0 auto 1.5rem;
     }
 

package/build/styleguide/sass/31-molecules/highlight/_highlight.scss

@@ -15,9 +15,7 @@
       }
     }
 
-    & {
-      padding: 30px;
-    }
+    padding: 30px;
 
     @include tablet {
       padding: 60px;
@@ -26,12 +24,10 @@
     & > i {
       @include theme('color', 'color-tertiary', 'highlight-icon-color');
 
-      & {
-        display: inline-block;
-        width: 40px;
-        height: 40px;
-        vertical-align: top;
-      }
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      vertical-align: top;
 
       &::before {
         display: block;