gent_styleguide 7.1.0 → 7.2.2

package/build/styleguide/sass/31-molecules/language-switcher/_language-switcher.scss

@@ -19,13 +19,13 @@
 
   .accordion--content {
     position: absolute;
+    z-index: z('language-switcher');
     top: 100%;
     right: 0;
     margin-top: .5rem;
     transition: max-height .3s ease-in-out;
     border-radius: border-radius('radius-1');
     background: coloring('white');
-    z-index: z('language-switcher');
   }
 
   .content {

package/build/styleguide/sass/31-molecules/main-menu/_main-menu.scss

@@ -4,18 +4,18 @@
 @use '../../21-atoms/button/button-styling' as *;
 @use '../../21-atoms/list/list' as *;
 
+/* stylelint-disable max-nesting-depth */
+
 nav.menu {
   margin: 0;
 
   button {
     @include button-icon;
 
-    & {
-      padding: 0;
-      border: 0;
-      background: transparent;
-      font-size: .8rem;
-    }
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font-size: .8rem;
 
     @include tablet {
       display: none;
@@ -42,9 +42,7 @@ nav.menu {
       display: none;
     }
 
-    & {
-      margin: 0;
-    }
+    margin: 0;
 
     li {
       display: inline-block;
@@ -79,10 +77,10 @@ nav.menu {
   .modal-inner {
     .modal-header {
       position: absolute;
+      z-index: 7;
       right: 0;
       margin-top: 20px;
       margin-right: 10px;
-      z-index: 7;
     }
   }
 
@@ -97,16 +95,14 @@ nav.menu {
       &::before {
         @include theme('border-color', 'color-primary-light', 'header-border-bottom');
 
-        & {
-          position: absolute;
-          top: 100%;
-          left: -30px;
-          width: 100vw;
-          height: 20px;
-          margin-top: 12px;
-          border-top: 2px solid;
-          content: '';
-        }
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: -30px;
+        width: 100vw;
+        height: 20px;
+        margin-top: 12px;
+        border-top: 2px solid;
       }
 
       button {
@@ -120,9 +116,7 @@ nav.menu {
       ul {
         @extend %list-no-style;
 
-        & {
-          margin: 0;
-        }
+        margin: 0;
 
         li {
           @include tablet {
@@ -132,10 +126,8 @@ nav.menu {
 
           @include theme('border-color', 'color-primary-light');
 
-          & {
-            margin-bottom: 0;
-            border-bottom: 1px solid;
-          }
+          margin-bottom: 0;
+          border-bottom: 1px solid;
 
           a,
           a[href^="mailto:"],
@@ -177,9 +169,7 @@ nav.menu {
       &:not(:last-child) {
         @include theme('border-color', 'color-primary-light');
 
-        & {
-          border-bottom: 2px solid;
-        }
+        border-bottom: 2px solid;
       }
 
       ul {

package/build/styleguide/sass/31-molecules/modal/_modal.scss

@@ -1,10 +1,12 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 // Needed for smooths scrolling on iphone / ipad inside modals.
 // Placing it on .modal is not sufficient for safari.
 * {
-  -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
+  -webkit-overflow-scrolling: touch; // stylelint-disable-line  property-no-vendor-prefix
 }
 
 .modal {
@@ -16,18 +18,13 @@
     animation: fade .2s ease-in-out;
   }
 
-  & {
-    display: flex;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    max-height: 100vh;
-    visibility: hidden;
-    z-index: z('modal', 'base');
-    overflow-y: auto;
-  }
+  display: flex;
+  visibility: hidden;
+  position: fixed;
+  z-index: z('modal', 'base');
+  inset: 0;
+  max-height: 100vh;
+  overflow-y: auto;
 
   // states
   &.visible {
@@ -45,15 +42,15 @@
     &.visible > .modal-inner {
       max-height: 80vh;
 
-      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { // sass-lint:disable-line no-vendor-prefixes
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { // stylelint-disable-line  property-no-vendor-prefix
         height: 80vh; // IE fix
       }
     }
 
     > .modal-inner {
       > .modal-content {
-        flex-grow: 1;
         z-index: z('modal', 'inner');
+        flex-grow: 1;
         overflow-y: auto;
       }
 
@@ -67,13 +64,13 @@
   &.visible .modal-inner {
     display: flex;
     position: absolute;
+    z-index: z('modal', 'content');
     top: 0;
     left: 0;
     flex-direction: column;
     width: 100%;
     min-height: 100%;
     margin: 0 auto;
-    z-index: z('modal', 'content');
 
     @include tablet {
       right: 0;
@@ -83,9 +80,9 @@
       min-height: 0;
       margin: 10vh auto 0;
       padding-bottom: $gutter-width;
-      opacity: 0;
       animation: fade .2s ease-in-out forwards;
       animation-delay: .1s;
+      opacity: 0;
     }
 
     > * {
@@ -97,8 +94,8 @@
       }
 
       &:last-of-type {
-        border-bottom-left-radius: border-radius('radius-2');
         border-bottom-right-radius: border-radius('radius-2');
+        border-bottom-left-radius: border-radius('radius-2');
       }
     }
   }
@@ -142,14 +139,12 @@
     @include theme('border-color', 'color-primary-light', 'modal-action-border-bottom');
     @include theme('background-color', 'color-none', 'modal-action-background-color');
 
-    & {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      width: 100%;
-      padding: 30px 20px;
-      z-index: z('modal', 'actions');
-    }
+    display: flex;
+    z-index: z('modal', 'actions');
+    flex-shrink: 0;
+    align-items: center;
+    width: 100%;
+    padding: 30px 20px;
 
     @include tablet {
       position: relative;
@@ -164,12 +159,12 @@
   .modal-overlay {
     display: none;
     position: fixed;
+    z-index: z('modal', 'overlay');
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: .9;
-    z-index: z('modal', 'overlay');
 
     &,
     &:hover,

package/build/styleguide/sass/31-molecules/opening-hours/_opening-hours.scss

@@ -3,12 +3,13 @@
 @use '../../11-base/fonts/icons' as *;
 @use '../../21-atoms/list/list' as *;
 
+/* stylelint-disable no-descending-specificity, max-nesting-depth */
 .openinghours-widget {
   @include theme('background-color', 'color-secondary-pastel');
 
   font-size: .8rem;
 
-  @media (max-width: 360px) {
+  @media (width <= 360px) {
     width: calc(100% + 40px);
     margin-left: -20px;
   }
@@ -27,8 +28,8 @@
       font-size: 0;
 
       &::before {
-        font-size: .8rem;
         content: '-';
+        font-size: .8rem;
       }
     }
 
@@ -81,10 +82,8 @@
       @include month-widget-desktop;
     }
 
-    & {
-      font-size: .8rem;
-      line-height: 1.4rem;
-    }
+    font-size: .8rem;
+    line-height: 1.4rem;
 
     & > .openinghours {
       @include tablet {
@@ -113,22 +112,20 @@
         button {
           @include theme('color', 'color-primary', 'opening-hours-color');
 
-          & {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: $month-day-size-mobile;
-            height: $month-day-size-mobile *.5;
-            padding: 0;
-            border: 0;
-            background: transparent;
-            font-size: 0;
-            cursor: pointer;
-          }
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: $month-day-size-mobile;
+          height: $month-day-size-mobile * .5;
+          padding: 0;
+          border: 0;
+          background: transparent;
+          font-size: 0;
+          cursor: pointer;
 
           @include phablet {
             width: $month-day-size;
-            height: $month-day-size *.5;
+            height: $month-day-size * .5;
           }
 
           &.openinghours--prev,
@@ -136,9 +133,7 @@
             &::before {
               @include theme('color', 'color-zero', 'opening-hours-color');
 
-              & {
-                font-size: 1.2rem;
-              }
+              font-size: 1.2rem;
             }
           }
 
@@ -153,16 +148,18 @@
 
         .openinghours--month {
           @include bold-text;
-          line-height: $month-day-size-mobile *.5;
+
+          line-height: $month-day-size-mobile * .5;
 
           @include phablet {
-            line-height: $month-day-size *.5;
+            line-height: $month-day-size * .5;
           }
         }
       }
 
       &--day--day-of-week {
         @include bold-text;
+
         text-transform: uppercase;
       }
 
@@ -207,9 +204,7 @@
           &:hover > span {
             @include theme('border-color', 'color-zero', 'opening-hours-color');
 
-            & {
-              border: 2px solid;
-            }
+            border: 2px solid;
           }
 
           .openinghours--details {
@@ -221,16 +216,14 @@
       &--day-open > span::after {
         @include theme('background-color', 'color-zero', 'opening-hours-color');
 
-        & {
-          display: block;
-          position: relative;
-          bottom: 4px;
-          flex: 0 0 auto;
-          width: 4px;
-          height: 4px;
-          border-radius: 50%;
-          content: "";
-        }
+        content: "";
+        display: block;
+        position: relative;
+        bottom: 4px;
+        flex: 0 0 auto;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
       }
 
       &--details {
@@ -246,6 +239,7 @@
 
       &--date {
         @include bold-text;
+
         margin-bottom: 16px;
       }
 

package/build/styleguide/sass/31-molecules/partner-block/_partner-block.scss

@@ -91,7 +91,7 @@
 
     &[href^="http://"]:not([href*="gent.be"]),
     &[href^="https://"]:not([href*="gent.be"]) {
-      &:not(.no-icon):not(.tag) {
+      &:not(.no-icon, .tag) {
         margin-right: 0;
       }
     }

package/build/styleguide/sass/31-molecules/quote/_quote.scss

@@ -19,6 +19,7 @@ blockquote {
 
   &::before {
     @include spot-image('quote', 2rem);
+
     position: absolute;
     top: 0;
     left: 0;

package/build/styleguide/sass/31-molecules/subscribe/_subscribe.scss

@@ -3,7 +3,7 @@
 @use '../../21-atoms/button/button-styling' as *;
 
 .subscribe {
-  @include medium-text();
+  @include medium-text;
 
   display: flex;
   position: relative;
@@ -19,7 +19,7 @@
 
   ul {
     li {
-      @include medium-text();
+      @include medium-text;
     }
   }
 

package/build/styleguide/sass/31-molecules/table-of-contents/_table-of-contents.scss

@@ -4,6 +4,7 @@
 .table-of-contents {
   @include theme('background-color', 'color-tertiary-light', 'table-of-contents-background-color');
   @include medium-text;
+
   padding: 1.5rem;
   container-type: inline-size;
 
@@ -14,7 +15,8 @@
 
   ul {
     // Override general bigger list style.
-    @include medium-text();
+    @include medium-text;
+
     margin: 0;
     columns: 1;
     column-gap: 45px;

package/build/styleguide/sass/31-molecules/tabs/_tabs.scss

@@ -2,7 +2,6 @@
 @use '../../00-mixins/mixins' as *;
 
 .tabs {
-
   [role='tabpanel'] {
     @include theme('background-color', 'color-secondary-pastel', 'tab-background-color');
 
@@ -66,15 +65,15 @@
           @include theme('color', 'color-zero');
 
           & {
+            content: '';
             display: block;
             bottom: 0;
             left: 0;
             width: 0;
             margin: 0 auto;
+            overflow: visible;
             transition: width 100ms;
             border-bottom: 3px solid;
-            content: '';
-            overflow: visible;
           }
         }
 
@@ -92,9 +91,7 @@
       [role='tab'][aria-selected='true'] {
         @include theme('background-color', 'color-secondary-pastel', 'tab-background-color');
 
-        & {
-          border-bottom: 0;
-        }
+        border-bottom: 0;
       }
     }
   }

package/build/styleguide/sass/31-molecules/tag-list/_tag-list.scss

@@ -3,7 +3,7 @@
 
 .tag-list-wrapper {
   .tag-list {
-    @include small-text();
+    @include small-text;
 
     display: flex;
     flex-wrap: wrap;