gent_styleguide 7.1.0 → 7.2.2

package/build/styleguide/sass/21-atoms/fieldset/_fieldset.scss

@@ -1,14 +1,14 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 .fieldset-wrapper fieldset,
 fieldset {
   @include theme('border-color', 'color-primary', 'fieldset-border-color');
 
-  & {
-    max-width: 820px;
-    margin-bottom: 24px;
-  }
+  max-width: 820px;
+  margin-bottom: 24px;
 
   .form-item {
     margin-bottom: 16px;
@@ -24,14 +24,14 @@ fieldset {
     margin-bottom: 4px;
 
     &::before {
+      content: '';
       position: absolute;
+      z-index: 1;
       top: 0;
       bottom: 0;
       left: 0;
       width: 100%;
       margin: auto;
-      content: '';
-      z-index: 1;
     }
 
     .legend-title {
@@ -40,12 +40,10 @@ fieldset {
     }
 
     .label-optional {
-      @include optional-label();
+      @include optional-label;
 
-      & {
-        position: relative;
-        z-index: 2;
-      }
+      position: relative;
+      z-index: 2;
     }
 
     + .field-message,
@@ -68,33 +66,27 @@ fieldset {
       &::before {
         @include theme('background-color', 'color-zero', 'fieldset-legend-background-color');
 
-        & {
-          height: 2px;
-        }
+        height: 2px;
       }
 
       .legend-title {
         @include theme('color', 'color-none', 'fieldset-legend-color');
         @include theme('background-color', 'color-primary', 'fieldset-legend-background-color');
+        @include semi-bold-text;
+        @include medium-text;
 
-        & {
-          @include semi-bold-text;
-          @include medium-text;
-          padding: 1px 10px;
-        }
+        padding: 1px 10px;
       }
     }
   }
 
   &.webform-type-fieldset,
   &:not(.webform-type-fieldset) {
-    fieldset:not(.webform-type-radios):not(.webform-type-checkboxes):not(.webform-type-webform-radios-other):not(.webform-type-webform-checkboxes-other) {
+    fieldset:not(.webform-type-radios, .webform-type-checkboxes, .webform-type-webform-radios-other, .webform-type-webform-checkboxes-other) {
       @include theme('border-color', 'color-zero', 'inner-fieldset-border-color');
 
-      & {
-        padding: 20px 20px 12px;
-        border: 1px dashed;
-      }
+      padding: 20px 20px 12px;
+      border: 1px dashed;
 
       legend {
         display: flex;
@@ -105,19 +97,15 @@ fieldset {
           @include theme('background-color', 'color-none', 'inner-fieldset-legend-background-color');
           @include theme('border-color', 'color-zero', 'inner-fieldset-border-color');
 
-          & {
-            height: 1px;
-            border-bottom: 1px dashed;
-          }
+          height: 1px;
+          border-bottom: 1px dashed;
         }
 
         .legend-title {
           @include theme('color', 'color-zero', 'inner-fieldset-legend-color');
           @include theme('background-color', 'color-none', 'inner-fieldset-legend-background-color');
 
-          & {
-            padding: 1px 10px;
-          }
+          padding: 1px 10px;
         }
       }
     }
@@ -130,9 +118,7 @@ fieldset {
     legend {
       @include label;
 
-      & {
-        max-width: 410px;
-      }
+      max-width: 410px;
 
       &::before {
         display: none;
@@ -142,9 +128,7 @@ fieldset {
         @include theme('background-color', 'color-none');
         @include theme('color', 'color-primary');
 
-        & {
-          padding-left: 0;
-        }
+        padding-left: 0;
       }
     }
   }

package/build/styleguide/sass/21-atoms/figcaption/_figcaption.scss

@@ -2,7 +2,7 @@
 @use '../../00-mixins/mixins' as *;
 
 figcaption {
-  @include accolade();
+  @include accolade;
   @include medium-text;
   @include normal-text;
 

package/build/styleguide/sass/21-atoms/file/_file.scss

@@ -16,22 +16,22 @@
     @include button-small;
     @include button-hover;
 
+    content: attr(data-text);
     max-width: 100%;
     margin: 0 .75rem 0 0;
     padding: .4rem .75rem;
-    content: attr(data-text);
   }
 
   &::after {
     @include theme('color', 'default-text-color', 'no-file-selected-text-color');
 
+    content: attr(data-file);
     max-width: 100%;
     margin: .5rem .5rem 0;
+    overflow: hidden;
     font-size: .7rem;
     font-style: italic;
     text-overflow: ellipsis;
-    content: attr(data-file);
-    overflow: hidden;
 
     @include phablet {
       margin: 0;
@@ -44,9 +44,9 @@
     left: 0;
     width: 100%;
     height: 100%;
+    opacity: 0;
     line-height: 1.4rem;
     cursor: pointer;
-    opacity: 0;
 
     &:disabled {
       pointer-events: none;
@@ -60,12 +60,14 @@
     &:focus + .file__button,
     &:focus-within + .file__button {
       @include theme('color', 'color-quaternary', 'button-secondary-hover-color');
+
       background-size: 100% 100%;
     }
 
     &:active + .file__button {
       @include theme('background-color', 'color-tertiary-pastel', 'button-secondary-active-background');
       @include theme('color', 'color-primary', 'button-secondary-active-color');
+
       background-image: none;
       box-shadow: none;
     }
@@ -77,6 +79,7 @@
 
   +.help-text {
     @include theme('color', 'help-text-color', 'help-text-color');
+
     display: block;
     margin-top: .5rem;
     font-size: .7rem;

package/build/styleguide/sass/21-atoms/form-label/_form-label.scss

@@ -2,13 +2,11 @@
 @use '../../00-mixins/mixins' as *;
 
 label {
-  @include label();
+  @include label;
 
   .label-optional {
-    @include optional-label();
+    @include optional-label;
 
-    & {
-      margin: 0 0 3px 5px;
-    }
+    margin: 0 0 3px 5px;
   }
 }

package/build/styleguide/sass/21-atoms/heading/_heading-styling.scss

@@ -1,6 +1,8 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 h1,
 .h1,
 %h1,

package/build/styleguide/sass/21-atoms/heading/css/_background-title.scss

@@ -1,6 +1,8 @@
 @use '../../../00-settings/settings' as *;
 @use '../../../00-mixins/mixins' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 h1,
 h2,
 h3,

package/build/styleguide/sass/21-atoms/heading/css/_heading-1.scss

@@ -5,7 +5,7 @@ h1,
 .h1,
 %h1 {
   @include theme('color', 'color-zero', 'heading-1-color');
-  @include extra-bold-text();
+  @include extra-bold-text;
 
   font-size: 2rem;
   line-height: 130%;

package/build/styleguide/sass/21-atoms/heading/css/_heading-2.scss

@@ -4,7 +4,7 @@
 h2,
 .h2,
 %h2 {
-  @include bold-text();
+  @include bold-text;
   @include theme('color', 'color-primary', 'heading-2-color');
 
   & {

package/build/styleguide/sass/21-atoms/image/_image.scss

@@ -25,17 +25,14 @@ figure {
       @include theme('color', 'color-primary', 'image-spot-shadow');
       $image-icon-svg: svg-icon('image', coloring('cyan'), 70, 70);
 
+      content: "";
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       max-width: 3rem;
       max-height: 3rem;
       margin: auto;
       background-image: svg-url($image-icon-svg);
       background-size: contain;
-      content: "";
 
       @include tablet {
         max-width: 5rem;
@@ -61,16 +58,17 @@ figure {
     &::before {
       @include theme('background-color', 'color-zero-light', 'broken-image-background-color');
 
+      content: "";
       display: block;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      content: "";
     }
 
     &::after {
+      content: "Image could not be loaded:\A" attr(alt);
       display: flex;
       position: absolute;
       top: 50%;
@@ -86,7 +84,6 @@ figure {
       line-height: 1rem;
       text-align: center;
       white-space: pre;
-      content: "Image could not be loaded:\A" attr(alt);
     }
 
     html[lang="nl"] &::after {

package/build/styleguide/sass/21-atoms/input/_input.scss

@@ -16,8 +16,8 @@ input[type="url"] {
   &::placeholder {
     @include theme('color', 'help-text-color');
 
-    font-style: initial;
     opacity: .5;
+    font-style: initial;
   }
 }
 
@@ -37,33 +37,29 @@ input[type="password"] {
   }
 }
 
-input[type=date] {
+input[type="date"] {
   padding-right: 0;
   // Fixes vertical alignment on mobile safari.
   line-height: 2.4rem;
 
-  &::-webkit-calendar-picker-indicator { // sass-lint:disable-line no-vendor-prefixes
+  &::-webkit-calendar-picker-indicator { // stylelint-disable-line selector-no-vendor-prefix
     @include theme('background-color', 'button-secondary-background');
 
-    & {
-      width: 1.2rem;
-      height: 1.2rem;
-      padding: .5rem;
-      background-image: svg-as-background('calendar', coloring('gray'), 30, 30);
-    }
+    width: 1.2rem;
+    height: 1.2rem;
+    padding: .5rem;
+    background-image: svg-as-background('calendar', coloring('gray'), 30, 30);
 
     &:hover {
       @include theme('background-color', 'button-secondary-hover-background');
 
-      & {
-        cursor: pointer;
-      }
+      cursor: pointer;
     }
   }
 
-  &::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
+  &::-webkit-inner-spin-button { // stylelint-disable-line selector-no-vendor-prefix
     margin-left: .5rem;
-    -webkit-appearance: none;  // sass-lint:disable-line no-vendor-prefixes
+    -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
   }
 }
 

package/build/styleguide/sass/21-atoms/input-submit/_input-submit.scss

@@ -5,7 +5,7 @@ input[type="submit"],
 button[type="submit"] {
   @extend %button-secondary;
 
-  &:not(.button-secondary):not(.button-success):not(.button-alert) {
+  &:not(.button-secondary, .button-success, .button-alert) {
     @extend %button-primary;
   }
 }

package/build/styleguide/sass/21-atoms/label/_label.scss

@@ -3,7 +3,7 @@
 
 .label {
   @include theme('background-color', 'color-none', 'label-background-color');
-  @include small-text();
+  @include small-text;
 
   display: inline-flex;
   align-items: center;

package/build/styleguide/sass/21-atoms/link/_link.scss

@@ -7,6 +7,8 @@
 
 $link-padding: .2em;
 
+/* stylelint-disable scss/percent-placeholder-pattern */
+
 %a,
 a {
   @include semi-bold-text;
@@ -84,7 +86,7 @@ a {
     }
   }
 
-  &.button:not(.no-icon):not([class^="icon-"]):not([download]) {
+  &.button:not(.no-icon, [class^="icon-"], [download]) {
     &[href^="http://"]:not([href*="gent.be"]),
     &[href^="https://"]:not([href*="gent.be"]) {
       @include button-icon;
@@ -147,7 +149,7 @@ a {
   &[href^="https://"]:not(.no-icon):not(.tag):not([href*="gent.be"]) {
     @include icon(arrow-right-top, after);
 
-    &[download]:not(.button):not(.no-icon) {
+    &[download]:not(.button, .no-icon) {
       @include icon(download, after);
     }
   }
@@ -155,6 +157,7 @@ a {
   &.refresh:not(.no-icon),
   &.back:not(.no-icon) {
     @extend %a-arrow-animation--left;
+
     margin-left: 32px;
     padding-left: 0;
 
@@ -207,7 +210,7 @@ a {
       animation-fill-mode: forwards;
 
       // Animation causes pointer flickering in IE.
-      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // stylelint-disable-line property-no-vendor-prefix
         animation: none;
       }
     }
@@ -253,7 +256,7 @@ a {
       animation-fill-mode: forwards;
 
       // Animation causes pointer flickering in IE.
-      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // stylelint-disable-line property-no-vendor-prefix
         animation: none;
       }
     }
@@ -291,7 +294,7 @@ a {
 %a-remove-indicator {
   &[href^="http://"]:not([href*="gent.be"]),
   &[href^="https://"]:not([href*="gent.be"]) {
-    &:not([download]):not(.standalone-link) {
+    &:not([download], .standalone-link) {
       margin-right: 0;
 
       &::after {

package/build/styleguide/sass/21-atoms/list/_list.scss

@@ -2,9 +2,12 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/fonts/icons' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 ul,
 ol {
-  @include large-text();
+  @include large-text;
+
   position: relative;
 
   ul {
@@ -66,6 +69,7 @@ ol {
 
   &.comma-separated-list {
     @extend %list-no-style;
+
     margin: 0;
     padding: 0;
 
@@ -75,9 +79,9 @@ ol {
       padding: 0;
 
       &:not(:last-of-type)::after {
+        content: ',';
         display: inline;
         padding: 0 4px 0 0;
-        content: ',';
       }
     }
 
@@ -122,7 +126,7 @@ ul {
   }
 
   &.icon-list {
-    @include large-text();
+    @include large-text;
 
     margin: 0 0 40px;
     list-style-type: none;
@@ -180,14 +184,15 @@ ul {
 
   &.dash-separated-list {
     @extend %list-no-style;
+
     display: flex;
     flex-wrap: wrap;
     margin: 0;
 
     > li:not(:last-of-type)::after {
+      content: "\2014";
       display: inline-block;
       padding: 0 .2em;
-      content: "\2014";
     }
   }
 
@@ -253,6 +258,7 @@ ol {
       @include theme('background-color', 'color-tertiary-pastel');
       @include semi-bold-text;
 
+      content: counter(item);
       display: inline-block;
       position: absolute;
       top: 2px;
@@ -263,7 +269,6 @@ ol {
       font-size: .9rem;
       line-height: 177.778%;
       text-align: center;
-      content: counter(item);
     }
 
     & > h1,

package/build/styleguide/sass/21-atoms/logo/_logo.scss

@@ -5,20 +5,16 @@ a.site-logo {
   @include reset-link-background;
   @include theme('color', 'color-tertiary', 'default-text-color');
 
-  & {
-    display: inline-flex;
-    align-items: center;
-    font-size: 0;
-  }
+  display: inline-flex;
+  align-items: center;
+  font-size: 0;
 
   &::before {
     @include spot-image('logo', 80px);
 
-    & {
-      width: 63.3px;
-      height: 44px;
-      margin-left: 0;
-    }
+    width: 63.3px;
+    height: 44px;
+    margin-left: 0;
 
     .is-frontpage & {
       width: 63.3px;

package/build/styleguide/sass/21-atoms/open-today/_open-today.scss

@@ -4,14 +4,16 @@
 
 $breakpoint-openinghours: '(min-width: 750px)';
 
+/* stylelint-disable no-descending-specificity */
+
 // ===
 // Day view
 // ===
 .openinghours-widget {
   &[data-type="day"] {
     display: block;
-    border-radius: border-radius('radius-1');
     overflow: hidden;
+    border-radius: border-radius('radius-1');
 
     &:has(> *) {
       margin-bottom: 20px;
@@ -28,8 +30,8 @@ $breakpoint-openinghours: '(min-width: 750px)';
       font-size: 0;
 
       &::after {
-        display: inline-block;
         content: " ";
+        display: inline-block;
       }
 
       &:nth-of-type(n + 2) {
@@ -60,15 +62,16 @@ $breakpoint-openinghours: '(min-width: 750px)';
       padding: 8px 10px 8px 42px;
 
       &::before {
+        content: '';
         position: absolute;
         top: 10px;
         left: 10px;
         font-size: 1.2rem;
-        content: '';
       }
 
       &:first-of-type {
         @include icon(clock);
+
         margin-top: 0;
       }
 

package/build/styleguide/sass/21-atoms/paragraph/_paragraph.scss

@@ -2,7 +2,7 @@
 @use '../../00-mixins/mixins' as *;
 
 p {
-  @include large-text();
+  @include large-text;
 
   margin-top: 20px;
   margin-bottom: 20px;

package/build/styleguide/sass/21-atoms/pubdate/_pubdate.scss

@@ -2,8 +2,9 @@
 @use '../../00-mixins/mixins' as *;
 
 time[pubdate] {
-  @include small-text();
+  @include small-text;
   @include theme('color', 'color-zero', 'default-text-color');
+
   line-height: 1.71;
 
   h1 + & {

package/build/styleguide/sass/21-atoms/select/_input-select.scss

@@ -22,6 +22,7 @@ select {
 
       &:hover {
         $button-hover-color: set-themified-property($colors, 'color-tertiary', 'button-secondary-hover-background');
+
         background-image: svg-url($svg-shevron-down), svg-as-background("square", $button-hover-color, 44, 44);
         cursor: pointer;
       }
@@ -37,12 +38,13 @@ select {
     }
   }
 
-  &::-ms-expand { // sass-lint:disable-line no-vendor-prefixes
+  &::-ms-expand { // stylelint-disable-line selector-no-vendor-prefix
     display: none;
   }
 
-  &::-ms-value { // sass-lint:disable-line no-vendor-prefixes
+  &::-ms-value { // stylelint-disable-line selector-no-vendor-prefix
     @include theme('color', 'color-tertiary', 'default-text-color');
+
     background: none; // remove blue background on ie10/ie11 when selected
   }
 }

package/build/styleguide/sass/21-atoms/skiplink/_skiplink.scss

@@ -4,14 +4,12 @@
 a.skiplink {
   @include reset-link-background;
 
-  & {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    padding: .5rem 2rem;
-    background-color: coloring('white');
-    z-index: z('skiplink');
-  }
+  position: absolute;
+  z-index: z('skiplink');
+  bottom: 100%;
+  left: 0;
+  padding: .5rem 2rem;
+  background-color: coloring('white');
 
   &:focus {
     top: 0;

package/build/styleguide/sass/21-atoms/spinner/_spinner.scss

@@ -9,10 +9,10 @@
   div {
     @include spot-image('spinner', 3rem);
 
-    text-indent: 200%;
-    white-space: nowrap;
     overflow: hidden;
     animation: spin 2s cubic-bezier(.75, .25, .25, .75) infinite;
+    text-indent: 200%;
+    white-space: nowrap;
   }
 }
 

package/build/styleguide/sass/21-atoms/status/_status.scss

@@ -3,12 +3,12 @@
 
 @mixin status {
   &::before {
+    content: '';
     display: inline-block;
     width: 1.2rem;
     height: 1.2rem;
     margin-right: .4rem;
     border-radius: 50%;
-    content: '';
     vertical-align: middle;
   }
 }