gent_styleguide 7.1.0 → 7.2.2

package/build/styleguide/sass/11-base/forms/_forms.scss

@@ -2,6 +2,8 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/fonts/icons' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 ////
 /// This file defines general form input fields styling.
 ///
@@ -95,28 +97,33 @@ $field-icon-padding: 50px;
     }
   }
 
-  &::-webkit-input-placeholder { // sass-lint:disable-line no-vendor-prefixes
+  &::-webkit-input-placeholder { // stylelint-disable-line selector-no-vendor-prefix
     @include theme("color", "color-zero", "fields-placeholder-color");
+
     font-weight: normal;
   }
 
-  &:-moz-placeholder { // sass-lint:disable-line no-vendor-prefixes
+  &:-moz-placeholder { // stylelint-disable-line selector-no-vendor-prefix
     @include theme("color", "color-zero", "fields-placeholder-color");
+
     font-weight: normal;
   }
 
-  &::-moz-placeholder { // sass-lint:disable-line no-vendor-prefixes
+  &::-moz-placeholder { // stylelint-disable-line selector-no-vendor-prefix
     @include theme("color", "color-zero", "fields-placeholder-color");
+
     font-weight: normal;
   }
 
-  &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes
+  &:-ms-input-placeholder { // stylelint-disable-line selector-no-vendor-prefix
     @include theme("color", "color-zero", "fields-placeholder-color");
+
     font-weight: normal;
   }
 
   &::placeholder {
     @include theme("color", "color-zero", "fields-placeholder-color");
+
     font-weight: normal;
   }
 
@@ -154,15 +161,15 @@ $field-icon-padding: 50px;
     top: 0;
     left: 0;
     padding-left: 28px;
+    overflow: unset;
     font-weight: normal;
     line-height: 28px;
-    overflow: unset;
 
     &::before,
     &::after {
+      content: "";
       position: absolute;
       top: 3px;
-      content: "";
     }
 
     &::before {
@@ -268,25 +275,26 @@ $field-icon-padding: 50px;
     &:disabled {
       + label {
         color: coloring('gray', -3);
-        font-weight: normal !important; // sass-lint:disable-line no-important
+        font-weight: normal !important; // stylelint-disable-line declaration-no-important
         cursor: not-allowed;
 
         &::before {
           border-color: coloring(
             "gray",
             -5
-          ) !important; // sass-lint:disable-line no-important
+          ) !important; // stylelint-disable-line declaration-no-important
+
           background: coloring(
             "gray",
             -5
-          ) !important; // sass-lint:disable-line no-important
+          ) !important; // stylelint-disable-line declaration-no-important
         }
 
         &::after {
           color: coloring(
             "gray",
             -2
-          ) !important; // sass-lint:disable-line no-important
+          ) !important; // stylelint-disable-line declaration-no-important
 
         }
       }
@@ -303,6 +311,8 @@ $field-icon-padding: 50px;
           @include icon("checkmark-checkbox", "after");
 
           &::after {
+            @include theme("color", "color-primary", "checkbox-checkmark-color");
+
             padding-left: 1px;
             font-size: 1.1rem;
             line-height: 1;
@@ -321,10 +331,6 @@ $field-icon-padding: 50px;
             "checkbox-border-color-checked"
           );
         }
-
-        + label::after {
-          @include theme("color", "color-primary", "checkbox-checkmark-color");
-        }
       }
     }
 
@@ -349,6 +355,7 @@ $field-icon-padding: 50px;
 
         + label::after {
           @include theme("background-color", "color-primary", "radio-checkmark-color");
+
           content: "";
         }
 
@@ -358,7 +365,7 @@ $field-icon-padding: 50px;
               background-color: coloring(
                 "gray",
                 -2
-              ) !important; // sass-lint:disable-line no-important
+              ) !important; // stylelint-disable-line declaration-no-important
             }
           }
         }

package/build/styleguide/sass/11-base/grid/_grid.scss

@@ -8,27 +8,27 @@
 
 // Grid classes.
 .row {
-  @include row();
+  @include row;
 }
 
 .row.reverse {
-  @include row-reverse();
+  @include row-reverse;
 }
 
 .row.natural-height {
-  @include row-natural-height();
+  @include row-natural-height;
 }
 
 .row.flex-column {
-  @include row-flex-column();
+  @include row-flex-column;
 }
 
 .col {
-  @include col();
+  @include col;
 }
 
 .col.reverse {
-  @include col-reverse();
+  @include col-reverse;
 }
 
 .first {
@@ -126,27 +126,19 @@
 
   @if $this-prefix == "xs" {
     @include col-factory($this-prefix);
-  }
-
-  @else if $this-prefix == "sm" {
+  } @else if $this-prefix == "sm" {
     @media #{$breakpoint-sm-up} {
       @include col-factory($this-prefix);
     }
-  }
-
-  @else if $this-prefix == "md" {
+  } @else if $this-prefix == "md" {
     @media #{$breakpoint-md-up} {
       @include col-factory($this-prefix);
     }
-  }
-
-  @else if $this-prefix == "lg" {
+  } @else if $this-prefix == "lg" {
     @media #{$breakpoint-lg-up} {
       @include col-factory($this-prefix);
     }
-  }
-
-  @else if $this-prefix == "xl" {
+  } @else if $this-prefix == "xl" {
     @media #{$breakpoint-xl-up} {
       @include col-factory($this-prefix);
     }

package/build/styleguide/sass/11-base/grid/flexbox-grid/mixins/_grid-mixins.scss

@@ -15,8 +15,7 @@
 @mixin row($full-width: "false", $gap: $grid-gutter-width) {
   display: flex;
   flex: 0 1 auto;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   width: 100%;
   margin: 0 auto;
   gap: $gap;

package/build/styleguide/sass/11-base/grid/flexbox-grid/mixins/_visibility-mixins.scss

@@ -4,110 +4,74 @@
   @if $breakpoint == "xs" {
     @if $row == "true" or $row == "row" {
       display: flex;
-    }
-
-    @else {
+    } @else {
       display: block;
     }
-  }
-
-  @else if $breakpoint == "xs-only" {
+  } @else if $breakpoint == "xs-only" {
     @media #{$breakpoint-xs-only} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else if $breakpoint == "sm" {
+  } @else if $breakpoint == "sm" {
     @media #{$breakpoint-sm-up} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else if $breakpoint == "sm-only" {
+  } @else if $breakpoint == "sm-only" {
     @media #{$breakpoint-sm-only} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else if $breakpoint == "md" {
+  } @else if $breakpoint == "md" {
     @media #{$breakpoint-md-up} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else if $breakpoint == "md-only" {
+  } @else if $breakpoint == "md-only" {
     @media #{$breakpoint-md-only} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else if $breakpoint == "lg" {
+  } @else if $breakpoint == "lg" {
     @media #{$breakpoint-lg-up} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else if $breakpoint == "lg-only" {
+  } @else if $breakpoint == "lg-only" {
     @media #{$breakpoint-lg-only} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else if $breakpoint == "xl" {
+  } @else if $breakpoint == "xl" {
     @media #{$breakpoint-xl-up} {
       @if $row == "true" or $row == "row" {
         display: flex;
-      }
-
-      @else {
+      } @else {
         display: block;
       }
     }
-  }
-
-  @else {
+  } @else {
     @warn "show mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})";
   }
 }
@@ -115,57 +79,39 @@
 @mixin hide($breakpoint) {
   @if $breakpoint == "xs" {
     display: none;
-  }
-
-  @else if $breakpoint == "xs-only" {
+  } @else if $breakpoint == "xs-only" {
     @media #{$breakpoint-xs-only} {
       display: none;
     }
-  }
-
-  @else if $breakpoint == "sm" {
+  } @else if $breakpoint == "sm" {
     @media #{$breakpoint-sm-up} {
       display: none;
     }
-  }
-
-  @else if $breakpoint == "sm-only" {
+  } @else if $breakpoint == "sm-only" {
     @media #{$breakpoint-sm-only} {
       display: none;
     }
-  }
-
-  @else if $breakpoint == "md" {
+  } @else if $breakpoint == "md" {
     @media #{$breakpoint-md-up} {
       display: none;
     }
-  }
-
-  @else if $breakpoint == "md-only" {
+  } @else if $breakpoint == "md-only" {
     @media #{$breakpoint-md-only} {
       display: none;
     }
-  }
-
-  @else if $breakpoint == "lg" {
+  } @else if $breakpoint == "lg" {
     @media #{$breakpoint-lg-up} {
       display: none;
     }
-  }
-
-  @else if $breakpoint == "lg-only" {
+  } @else if $breakpoint == "lg-only" {
     @media #{$breakpoint-lg-only} {
       display: none;
     }
-  }
-
-  @else if $breakpoint == "xl" {
+  } @else if $breakpoint == "xl" {
     @media #{$breakpoint-xl-up} {
       display: none;
     }
-  }
-
-  @else {
+  } @else {
     @warn "Hide mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})";
   }
 }

package/build/styleguide/sass/21-atoms/accolade/_accolade.scss

@@ -14,13 +14,14 @@ $span-end: math.percentage(math.div(3, 12));
   max-width: $bp-max-content;
   height: 1rem;
   margin: 0;
-  border: 0;
   overflow: visible;
+  border: 0;
 
   &::before,
   &::after {
     @include theme('background', 'color-none');
 
+    content: '';
     position: absolute;
     top: 0;
     width: 100%;
@@ -28,7 +29,6 @@ $span-end: math.percentage(math.div(3, 12));
     margin-top: 0;
     border-top: 2px solid;
     border-color: transparent;
-    content: '';
   }
 
   &::before {
@@ -97,6 +97,7 @@ $span-end: math.percentage(math.div(3, 12));
 
     &::before,
     &::after {
+      content: '';
       position: absolute;
       top: 0;
       width: 1rem;
@@ -105,7 +106,6 @@ $span-end: math.percentage(math.div(3, 12));
       border-left: 2px solid;
       border-color: transparent;
       background: coloring('white');
-      content: '';
     }
 
     &::before {
@@ -165,6 +165,7 @@ $accolade-width: 2rem;
 $accolade-height: 1rem;
 
 .accolade-inverse {
+  content: '';
   position: absolute;
   width: $accolade-width;
   height: $accolade-height;
@@ -172,7 +173,6 @@ $accolade-height: 1rem;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
-  content: '';
 
   &.bottom-left,
   &.bottom-center,
@@ -207,14 +207,14 @@ $accolade-height: 1rem;
   &.left-top,
   &.left-center,
   &.left-bottom {
-    left: -($accolade-height*.5);
+    left: -($accolade-height * .5);
     transform: rotate(90deg);
   }
 
   &.right-top,
   &.right-center,
   &.right-bottom {
-    right: -($accolade-height*.5);
+    right: -($accolade-height * .5);
     transform: rotate(-90deg);
   }
 

package/build/styleguide/sass/21-atoms/button/_button-styling.scss

@@ -20,7 +20,8 @@
 /// @author Gert-Jan Meire
 ///
 @mixin button-small {
-  @include medium-text();
+  @include medium-text;
+
   padding: 4px 10px;
   line-height: 175%;
 }
@@ -34,7 +35,8 @@
 /// @author Gert-Jan Meire
 ///
 @mixin button-medium {
-  @include medium-text();
+  @include medium-text;
+
   line-height: 175%;
 }
 
@@ -47,7 +49,8 @@
 /// @author Gert-Jan Meire
 ///
 @mixin button-large {
-  @include large-text();
+  @include large-text;
+
   padding: 10px 20px;
   line-height: 177.778%;
 
@@ -66,7 +69,7 @@
 /// @author Thomas De Vriese
 ///
 @mixin button-extra-large {
-  @include large-text();
+  @include large-text;
 
   padding: 25px 26px;
   line-height: 177.778%;
@@ -86,8 +89,8 @@
 /// @require color
 ///
 @mixin button-disabled {
-  @include theme('color', 'color-zero');
-  @include theme('background-color', 'color-zero');
+  // @include theme('color', 'color-zero');
+  // @include theme('background-color', 'color-zero');
 
   & {
     border: 0;
@@ -98,9 +101,7 @@
     @include theme('color', 'color-zero');
     @include theme('background-color', 'color-zero');
 
-    & {
-      cursor: not-allowed;
-    }
+    cursor: not-allowed;
   }
 }
 
@@ -227,5 +228,5 @@ input[type="button"] {
   @include button;
   @include button-hover;
 
-  -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/button/css/_button-alert.scss

@@ -16,7 +16,8 @@
   @include button-icon;
   @include theme-content('color-tertiary', 'button-secondary-hover-background') {
     $theme-color: coloring('red', 2);
-    background-image: linear-gradient(0, $theme-color, $theme-color);
+
+    background-image: linear-gradient(0deg, $theme-color, $theme-color);
   };
 
   & {

package/build/styleguide/sass/21-atoms/button/css/_button-primary.scss

@@ -12,7 +12,7 @@
   @include theme('background-color', 'button-primary-background');
   @include theme('color', 'button-primary-color');
   @include theme-content('button-primary-background', 'button-primary-hover-background') {
-    background-image: linear-gradient(0, $theme-color, $theme-color);
+    background-image: linear-gradient(0deg, $theme-color, $theme-color);
   };
 
   & {

package/build/styleguide/sass/21-atoms/button/css/_button-secondary-alert.scss

@@ -15,7 +15,8 @@
   @include button-icon;
   @include theme-content('color-tertiary', 'button-secondary-hover-background') {
     $theme-color: coloring('red', -5);
-    background-image: linear-gradient(0, $theme-color, $theme-color);
+
+    background-image: linear-gradient(0deg, $theme-color, $theme-color);
   };
 
   & {

package/build/styleguide/sass/21-atoms/button/css/_button-secondary.scss

@@ -13,7 +13,7 @@
   @include theme('background-color', 'button-secondary-background');
   @include theme('color', 'button-secondary-color');
   @include theme-content('button-secondary-background', 'button-secondary-hover-background') {
-    background-image: linear-gradient(0, $theme-color, $theme-color);
+    background-image: linear-gradient(0deg, $theme-color, $theme-color);
   };
 
   & {

package/build/styleguide/sass/21-atoms/button/css/_button-success.scss

@@ -15,7 +15,8 @@
 .button-success {
   @include theme-content('color-tertiary', 'button-secondary-hover-background') {
     $theme-color: coloring('green', -5);
-    background-image: linear-gradient(0, $theme-color, $theme-color);
+
+    background-image: linear-gradient(0deg, $theme-color, $theme-color);
   };
 
   & {

package/build/styleguide/sass/21-atoms/field-message/_field-message.scss

@@ -88,9 +88,7 @@
     @include theme('background-color', 'color-success-light', 'success-message-background');
     @include theme('border-color', 'color-success', 'success-message-icon-color');
 
-    & {
-      padding-left: 58px;
-    }
+    padding-left: 58px;
 
     &::before {
       @include theme('color', 'color-success', 'success-message-icon-color');
@@ -106,9 +104,7 @@
     @include theme('background-color', 'color-error-light', 'error-message-background');
     @include theme('border-color', 'color-error', 'error-message-icon-color');
 
-    & {
-      padding-left: 58px;
-    }
+    padding-left: 58px;
 
     &::before {
       @include theme('color', 'color-error', 'error-message-icon-color');