gent_styleguide 7.1.0 → 7.2.2

package/build/styleguide/sass/31-molecules/teaser/_teaser.scss

@@ -2,6 +2,8 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/fonts/icons' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 //
 // Basic teaser theming.
 //
@@ -11,15 +13,13 @@
 
   h3.bg-none {
     position: relative;
-    margin: -13px 0 20px;
     z-index: 3;
+    margin: -13px 0 20px;
 
     span {
       @include theme('background-color', 'color-secondary');
 
-      & {
-        padding: 2.5px 10px;
-      }
+      padding: 2.5px 10px;
     }
   }
 
@@ -31,24 +31,20 @@
   }
 
   .date {
-    @include small-text();
+    @include small-text;
     @include theme('color', 'color-zero', 'help-text-color');
 
-    & {
-      position: relative;
-      margin: 10px 0;
-      z-index: 3;
-    }
+    position: relative;
+    z-index: 3;
+    margin: 10px 0;
 
     span {
       @include icon('calendar');
 
-      & {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        line-height: 1;
-      }
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      line-height: 1;
 
       &::before {
         position: relative;
@@ -81,28 +77,23 @@
   }
 
   a.read-more {
-    @include bold-text();
+    @include bold-text;
   }
 
   a.teaser-overlay-link {
     @include reset-link-background;
     @include element-states(transparent, transparent, background-color);
 
-    & {
-      position: absolute;
-      top: -20px;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      text-indent: 200%;
-      white-space: nowrap;
-      overflow: hidden;
-      z-index: z('teaser', 'overlay-link');
-    }
+    position: absolute;
+    z-index: z('teaser', 'overlay-link');
+    inset: -20px 0 0;
+    overflow: hidden;
+    text-indent: 200%;
+    white-space: nowrap;
   }
 
   .teaser-content {
-    @include medium-text();
+    @include medium-text;
 
     display: flex;
     flex-direction: column;
@@ -120,13 +111,12 @@
       .tags-label-wrapper {
         display: flex;
         position: absolute;
+        z-index: 3;
         top: -15px;
         left: 20px;
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
         margin: 0;
         padding: 0 20px 0 0;
-        z-index: 3;
 
         .label {
           margin: 0 10px 10px 0;
@@ -207,9 +197,7 @@
     .content__second {
       @include theme('background-color', 'color-none');
 
-      & {
-        padding: 0 20px 20px;
-      }
+      padding: 0 20px 20px;
     }
 
     &.no-image,
@@ -253,17 +241,15 @@
       }
 
       .date {
-        margin: 0;
         z-index: 1;
+        margin: 0;
 
         span {
           @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
 
-          & {
-            padding: 5px 10px;
-            line-height: 1.2;
-            box-decoration-break: clone;
-          }
+          padding: 5px 10px;
+          line-height: 1.2;
+          box-decoration-break: clone;
         }
 
         &::before {
@@ -272,13 +258,11 @@
       }
 
       .read-more {
-        @include read-more-icon-link();
+        @include read-more-icon-link;
 
-        & {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-        }
+        position: absolute;
+        right: 0;
+        bottom: 0;
       }
     }
   }
@@ -310,10 +294,8 @@
     .content__second {
       @include theme('background-color', 'color-none');
 
-      & {
-        position: static;
-        padding: 20px 60px 20px 20px;
-      }
+      position: static;
+      padding: 20px 60px 20px 20px;
 
       @include phablet {
         padding: 30px 60px 30px 30px;
@@ -356,13 +338,11 @@
       }
 
       .read-more {
-        @include read-more-icon-link();
+        @include read-more-icon-link;
 
-        & {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-        }
+        position: absolute;
+        right: 0;
+        bottom: 0;
       }
     }
 
@@ -380,11 +360,9 @@
   &.teaser--wide {
     @include theme('border-color', 'color-primary', 'teaser-wide-border-color');
 
-    & {
-      margin: 0 0 40px;
-      padding: 0 0 30px;
-      border-bottom: 1px solid coloring('blue');
-    }
+    margin: 0 0 40px;
+    padding: 0 0 30px;
+    border-bottom: 1px solid coloring('blue');
 
     h3 {
       margin: 0 0 20px;
@@ -401,12 +379,10 @@
 
     .icon-list,
     .location {
-      @include small-text();
+      @include small-text;
       @include theme('color', 'help-text-color', 'teaser-location-color');
 
-      & {
-        margin: 0 0 10px;
-      }
+      margin: 0 0 10px;
     }
 
     .location {
@@ -421,8 +397,7 @@
 
     .teaser-content {
       display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
+      flex-flow: row wrap;
 
       @include tablet {
         flex-wrap: nowrap;
@@ -450,12 +425,10 @@
       padding: 0;
 
       .dash-separated-list {
-        @include medium-text();
+        @include medium-text;
         @include theme('color', 'default-text-color', 'help-text-color');
 
-        & {
-          margin: 10px 0;
-        }
+        margin: 10px 0;
 
         li {
           margin-bottom: 0;
@@ -463,7 +436,8 @@
       }
 
       p {
-        @include medium-text();
+        @include medium-text;
+
         margin-top: 10px;
       }
     }

package/build/styleguide/sass/31-molecules/video/_video.scss

@@ -3,11 +3,12 @@
 
 .video {
   @include clearfix;
+
   width: 100%;
 
   .responsive-video {
     position: relative;
-    padding-bottom: calc(100% / (16/9));
+    padding-bottom: calc(100% / (16 / 9));
 
     iframe {
       position: absolute;

package/build/styleguide/sass/41-organisms/banner/_banner.scss

@@ -3,7 +3,7 @@
 
 .banner-image {
   position: relative;
-  max-width: calc($bp-container + $container-padding*2);
+  max-width: calc($bp-container + $container-padding * 2);
   margin: 0 auto;
   padding: 0 $container-padding;
   text-align: center;

package/build/styleguide/sass/41-organisms/collection/_collection.scss

@@ -5,8 +5,8 @@
 // Dynamic system with different gutters and items spanning multiple columns.
 // Calculation at the bottom.
 
-ul[class^=grid-] {
-  @include row();
+ul[class^="grid-"] {
+  @include row;
 
   > li {
     width: 100%;
@@ -76,7 +76,7 @@ ul.grid-4 {
   ul.grid-#{$col} {
     > li {
       @include desktop {
-        @include col(calc($grid-columns/$col));
+        @include col(calc($grid-columns / $col));
       }
     }
   }

package/build/styleguide/sass/41-organisms/content-header/_content-header.scss

@@ -1,6 +1,7 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
+/* stylelint-disable no-descending-specificity */
 .content-header-container {
   @include theme('background-color', 'color-primary', 'content-header-container-background-primary');
 
@@ -125,7 +126,8 @@
       margin: 30px 0 0;
 
       p {
-        @include large-text();
+        @include large-text;
+
         line-height: 177.778%;
       }
 
@@ -165,7 +167,7 @@
       text-align: right;
     }
 
-    @media only screen and (min-width: 1400px) {
+    @media only screen and (width >= 1400px) {
       flex: 0 0 470px;
       height: calc(470px - 190px);
     }

package/build/styleguide/sass/41-organisms/filter/_filter.scss

@@ -3,10 +3,11 @@
 @use '../../21-atoms/heading/heading' as *;
 @use '../../21-atoms/list/list' as *;
 
+/* stylelint-disable no-descending-specificity */
 .filter {
   .result-section {
     .filter-page-label {
-      @include semi-bold-text();
+      @include semi-bold-text;
     }
 
     .result__show-filters {
@@ -75,10 +76,10 @@
 .sidebar.filter-section {
   @include desktop {
     position: static;
+    z-index: auto;
     height: auto;
-    box-shadow: none;
     overflow: visible;
-    z-index: auto;
+    box-shadow: none;
   }
 
   main & {
@@ -91,8 +92,8 @@
 
   &.visible {
     @include breakpoint(max-width $bp-desktop) {
-      padding: 0;
       visibility: visible;
+      padding: 0;
 
       > .modal-inner > .modal-header {
         display: block;
@@ -113,10 +114,10 @@
 
     @include desktop {
       position: relative;
+      z-index: auto;
       top: 0;
       left: 0;
       transform: none;
-      z-index: auto;
       filter: none;
     }
 
@@ -154,9 +155,7 @@
       @extend %h4;
       @include theme('color', 'color-primary', 'heading-2-color');
 
-      & {
-        margin-bottom: 16px;
-      }
+      margin-bottom: 16px;
     }
 
     fieldset {

package/build/styleguide/sass/41-organisms/footer/_footer.scss

@@ -5,10 +5,11 @@
 @use 'css/gentinfo_island';
 @use 'css/social-list';
 
+/* stylelint-disable no-descending-specificity */
 .footer {
   margin: 60px -20px 0;
 
-  @include desktop() {
+  @include desktop {
     margin-top: 280px;
   }
 
@@ -49,10 +50,8 @@
       @include theme('background-color', 'color-tertiary-light', 'footer-background-color');
       @include col(12);
 
-      & {
-        flex: 0 0 auto;
-        padding: 20px 20px 60px;
-      }
+      flex: 0 0 auto;
+      padding: 20px 20px 60px;
 
       // Gentinfo column.
       &:first-of-type {
@@ -75,11 +74,9 @@
         &:first-of-type {
           @include col(12);
 
-          & {
-            margin-top: 0;
-            padding-top: 0;
-            background-color: transparent;
-          }
+          margin-top: 0;
+          padding-top: 0;
+          background-color: transparent;
         }
       }
 
@@ -111,10 +108,8 @@
         &:first-of-type {
           @include col(6);
 
-          & {
-            order: 1;
-            margin-top: 0;
-          }
+          order: 1;
+          margin-top: 0;
         }
       }
 
@@ -159,7 +154,8 @@
     }
 
     ul {
-      @include small-text();
+      @include small-text;
+
       margin: 0;
       list-style: none;
     }
@@ -178,7 +174,8 @@
     }
 
     .partnership {
-      @include small-text();
+      @include small-text;
+
       line-height: 150%;
 
       i.icon-district09 {

package/build/styleguide/sass/41-organisms/footer/css/_gentinfo_island.scss

@@ -5,12 +5,10 @@
   @include accolade('bottom', 'left', 100px, 36px, 'color-none', 'color-primary');
   @include theme('background-color', 'color-primary', 'gentinfo-block-background');
 
-  & {
-    position: relative;
-    padding: 1.5rem;
-    font-size: .8rem;
-    line-height: 1.75;
-  }
+  position: relative;
+  padding: 1.5rem;
+  font-size: .8rem;
+  line-height: 1.75;
 
   @include desktop {
     margin: -8.4rem 0 0;
@@ -64,7 +62,8 @@
   }
 
   .gentinfo-chat-button {
-    @include semi-bold-text();
+    @include semi-bold-text;
+
     width: auto;
     margin-top: 1rem;
 

package/build/styleguide/sass/41-organisms/footer/css/_social-list.scss

@@ -36,8 +36,8 @@
         }
 
         &::after {
-          display: none;
           content: '';
+          display: none;
         }
       }
     }

package/build/styleguide/sass/41-organisms/header/_header.scss

@@ -53,14 +53,14 @@ header.header {
         margin-bottom: 0;
       }
 
-      input[type=submit],
-      button[type=submit] {
+      input[type="submit"],
+      button[type="submit"] {
         max-width: 0;
         padding-right: 0;
         padding-left: 0;
         transition: opacity .2s ease-in-out, max-width .2s ease-in-out, padding .2s ease-in-out, background-size .3s;
-        box-shadow: none;
         opacity: 0;
+        box-shadow: none;
 
         &:focus {
           max-width: 9999px;
@@ -70,8 +70,8 @@ header.header {
         }
       }
 
-      input[type=search],
-      input[type=text] {
+      input[type="search"],
+      input[type="text"] {
         flex: 0 1 auto;
         width: 100%;
         min-width: 0;
@@ -88,8 +88,8 @@ header.header {
           max-width: 440px;
           margin: 0 0 0 8px;
 
-          ~ input[type=submit],
-          ~ button[type=submit] {
+          ~ input[type="submit"],
+          ~ button[type="submit"] {
             max-width: 9999px;
             padding-right: 15px;
             padding-left: 15px;
@@ -111,10 +111,10 @@ header.header {
       min-width: 44px;
       max-width: calc(16px + 32px);
       height: 44px;
+      overflow: hidden;
       border-bottom: 0;
       background: svg-as-background('search', coloring('white'), 24, 24) no-repeat left 10px center;
       text-indent: -9999px;
-      overflow: hidden;
 
       @include tablet {
         display: none;
@@ -144,9 +144,7 @@ header.header {
         margin-left: 0;
       }
 
-      & {
-        line-height: 1;
-      }
+      line-height: 1;
     }
   }
 
@@ -158,10 +156,8 @@ header.header {
       display: none;
     }
 
-    & {
-      margin: 16px 0 8px;
-      font-size: .9rem;
-    }
+    margin: 16px 0 8px;
+    font-size: .9rem;
   }
 
   &--menu > .content-container {

package/build/styleguide/sass/41-organisms/image-collections/_image-collections.scss

@@ -1,7 +1,6 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
-// sass-lint:disable no-important
 ul.image-wall,
 ul.image-gallery {
   list-style: none;
@@ -13,16 +12,14 @@ ul.image-gallery {
   a.gallery-link {
     @include reset-link-background;
 
-    & {
-      display: block;
-      margin: 0;
-      padding: 0;
-      font-weight: normal;
-      text-decoration: none;
-    }
+    display: block;
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    text-decoration: none;
 
     &::after {
-      content: none !important;
+      content: none !important; // stylelint-disable-line declaration-no-important
     }
 
     &:hover,

package/build/styleguide/sass/41-organisms/image-gallery/_image-gallery.scss

@@ -1,9 +1,9 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
-// sass-lint:disable no-important
+/* stylelint-disable no-descending-specificity */
 .image-gallery {
-  @include clearfix();
+  @include clearfix;
 
   position: relative;
   margin: 0;
@@ -43,14 +43,12 @@
     @include theme('color', 'color-zero', 'image-gallery-show-more-color');
     @include theme('background-color', 'color-tertiary-pastel', 'image-gallery-show-more-background-color');
 
-    & {
-      position: absolute;
-      top: 50%;
-      padding: .4rem .75rem;
-      transform: translate(0, -50%);
-      line-height: 1;
-      text-align: center;
-    }
+    position: absolute;
+    top: 50%;
+    padding: .4rem .75rem;
+    transform: translate(0, -50%);
+    line-height: 1;
+    text-align: center;
 
     .show-more__total {
       display: none;
@@ -65,17 +63,15 @@
   a.gallery-link {
     @include reset-link-background;
 
-    & {
-      display: block;
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      font-weight: normal;
-      text-decoration: none;
-    }
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    text-decoration: none;
 
     &::after {
-      content: none !important;
+      content: none !important; // stylelint-disable-line declaration-no-important
     }
 
     &:hover,
@@ -171,10 +167,8 @@
           margin: calc(#{$gutter-width} / 2) 0 0;
         }
 
-        & {
-          width: 100%;
-          margin: 1vw 0 $gutter-width;
-        }
+        width: 100%;
+        margin: 1vw 0 $gutter-width;
       }
     }
 

package/build/styleguide/sass/41-organisms/programme/_programme.scss

@@ -4,9 +4,7 @@
 .programme-wrapper {
   @include theme('background-color', 'color-tertiary-light');
 
-  & {
-    padding: 24px;
-  }
+  padding: 24px;
 
   @include desktop {
     padding: 120px 135px;