gent_styleguide 7.1.0 → 7.2.2

package/build/styleguide/sass/00-mixins/element-styles/_accolade.scss

@@ -23,9 +23,9 @@
 
   display: inline-block;
   position: relative;
+  z-index: 1;
   width: fit-content;
   padding: 2px 10px;
-  z-index: 1;
 
   @if $v-position == bottom {
     margin-bottom: $height;
@@ -39,13 +39,13 @@
       background-size: 100%;
     }
 
+    content: '';
     position: absolute;
     // Correct position with 1 pixel to avoid white line in some browsers.
     #{$v-position}: -$height + 1px;
     #{$h-position}: 0;
     width: $width;
     height: $height;
-    content: '';
     @if $v-position == top {
       transform: rotate(180deg);
     }

package/build/styleguide/sass/00-mixins/element-styles/_read-more-icon-link.scss

@@ -11,7 +11,7 @@
 /// @author Lennart Van Vaerenbergh
 ///
 @mixin read-more-icon-link() {
-  @include large-text();
+  @include large-text;
   @include reset-link-background;
   @include theme('color', 'color-zero', 'button-secondary-color');
   @include theme('background-color', 'color-tertiary', 'button-secondary-background');

package/build/styleguide/sass/00-mixins/general/_mixins.scss

@@ -27,7 +27,11 @@
 @function str-replace($string, $search, $replace: '') {
   $index: string.index($string, $search);
 
-  @return if($index, string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace), $string);
+  @if ($index) {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
 }
 
 ///  Helper function to get a border radius.
@@ -63,8 +67,8 @@
 @mixin clearfix() {
   &::before,
   &::after {
-    display: table; // 2
     content: ' '; // 1
+    display: table; // 2
   }
 
   &::after {
@@ -110,7 +114,7 @@
 ///
 @mixin no-link-style() {
   a {
-    text-decoration: none !important; // sass-lint:disable-line no-important
+    text-decoration: none !important; // stylelint-disable-line declaration-no-important
   }
 }
 
@@ -180,11 +184,19 @@
   $minus: string.slice($value, 1, 1) == '-';
   $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
 
-  @for $i from if($minus, 2, 1) through string.length($value) {
+  $start: 1;
+  @if ($minus) {
+    $start: 2;
+  }
+  @for $i from $start through string.length($value) {
     $character: string.slice($value, $i, $i);
 
     @if not (list.index(map.keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), string.slice($value, $i));
+      $length: $result;
+      @if ($minus) {
+        $length: -$length;
+      }
+      @return to-length($length, string.slice($value, $i));
     }
 
     @if $character == '.' {
@@ -199,7 +211,11 @@
     }
   }
 
-  @return if($minus, -$result, $result);
+  @if ($minus) {
+    @return -$result;
+  }
+
+  @return $result;
 }
 
 ///

package/build/styleguide/sass/00-mixins/grid/_responsive-utilities.scss

@@ -3,7 +3,7 @@
 /// These mixins can be used by multiple components.
 ////
 
-// sass-lint:disable no-important
+// stylelint-disable declaration-no-important
 
 // Responsive utilities
 

package/build/styleguide/sass/00-mixins/link/_link.scss

@@ -95,16 +95,14 @@
   &::after {
     @include theme('color', 'color-primary', 'link-underlined-hover-color');
 
-    & {
-      display: block;
-      position: static;
-      width: 0;
-      margin: 0 auto;
-      transition: width 100ms;
-      border-bottom: 2px solid;
-      content: '';
-      overflow: visible;
-    }
+    content: '';
+    display: block;
+    position: static;
+    width: 0;
+    margin: 0 auto;
+    overflow: visible;
+    transition: width 100ms;
+    border-bottom: 2px solid;
   }
 
   &#{$active-selector},

package/build/styleguide/sass/00-mixins/opening-hours/_opening-hours.scss

@@ -19,9 +19,9 @@ $week-breakpoint: '(min-width: 750px)';
   }
 
   .openinghours--details {
-    top: calc(100% + #{$month-day-size-mobile *.5 + 12px});
-    left: $month-day-size-mobile *.25;
-    padding-top: $month-day-size-mobile *.5;
+    top: calc(100% + #{$month-day-size-mobile * .5 + 12px});
+    left: $month-day-size-mobile * .25;
+    padding-top: $month-day-size-mobile * .5;
   }
 }
 

package/build/styleguide/sass/00-mixins/svg/_spot-images.scss

@@ -25,10 +25,10 @@
     }
   }
 
+  content: '';
   display: block;
   width: $size;
   height: $size;
   background: no-repeat center center;
   background-size: 100%;
-  content: '';
 }

package/build/styleguide/sass/00-settings/_vars.scss

@@ -246,7 +246,7 @@ $default-font-weight: 400 !default;
 /// @access public
 /// @author Gert-Jan Meire
 ///
-$default-font-size: 20px !default; //px
+$default-font-size: 20px !default;
 
 ///
 /// Defines the default line height.

package/build/styleguide/sass/11-base/base/_base.scss

@@ -16,14 +16,14 @@ html {
   @include theme('background', 'color-none');
 
   display: grid;
+  box-sizing: border-box;
   height: 100%;
   font: $default-font-weight $default-font-size $default-font-family;
   line-height: $default-line-height;
-  box-sizing: border-box;
 }
 
 body {
-  @include large-text();
+  @include large-text;
 
   position: relative;
   min-height: 100%;
@@ -92,7 +92,7 @@ strong {
   @include bold-text;
 }
 
-input[type=button],
+input[type="button"],
 button {
   font: $default-font-weight $default-font-size $default-font-family;
 }

package/build/styleguide/sass/11-base/base/_helper-classes.scss

@@ -31,9 +31,9 @@
   height: 1px;
   margin: -1px;
   padding: 0;
-  border: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
+  border: 0;
 }
 
 ///

package/build/styleguide/sass/11-base/base/_invisible.scss

@@ -1,5 +1,3 @@
-// sass-lint:disable no-important
-
 // For anything you want to hide on page load when JS is enabled, so
 // that you can use the JS to control visibility and avoid flicker.
 html.js .js-hide {
@@ -23,7 +21,7 @@ html.js .js-hide {
 /// manner should be kept concise, to avoid unnecessary burden on the user.
 /// '!important' is used to prevent unintentional overrides.
 .element-invisible {
-  position: absolute !important;
+  position: absolute !important; // stylelint-disable-line declaration-no-important
   width: 1px;
   height: 1px;
   overflow: hidden;
@@ -34,7 +32,7 @@ html.js .js-hide {
 // the element to be focusable when navigated to via the keyboard.
 .element-invisible.element-focusable:active,
 .element-invisible.element-focusable:focus {
-  position: static !important;
+  position: static !important; // stylelint-disable-line declaration-no-important
   height: auto;
   overflow: visible;
   clip: auto;

package/build/styleguide/sass/11-base/fonts/_fonts.scss

@@ -6,9 +6,6 @@
 /// This is enough to support all European languages when using the translate function in the browser
 ////
 
-// 03-06-2022 : switching to locally hosted fonts in favor of GDPR - see : https://district09.atlassian.net/browse/DTGB-874
-// @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700;800&display=swap'); // sass-lint:disable-line no-url-protocols
-
 // fira-sans-regular - latin-ext_latin //
 @font-face {
   font-family: 'Fira Sans';

package/build/styleguide/sass/11-base/fonts/_icons.scss

@@ -161,279 +161,282 @@ $id: math.random(1000);
     @if $filename == environment {
       $char: "\E022";
     }
-    @if $filename == euro {
+    @if $filename == euro-filled {
       $char: "\E023";
     }
-    @if $filename == exclamation-circle {
+    @if $filename == euro {
       $char: "\E024";
     }
-    @if $filename == exclamation {
+    @if $filename == exclamation-circle {
       $char: "\E025";
     }
-    @if $filename == facebook {
+    @if $filename == exclamation {
       $char: "\E026";
     }
-    @if $filename == favicon {
+    @if $filename == facebook {
       $char: "\E027";
     }
-    @if $filename == fax {
+    @if $filename == favicon {
       $char: "\E028";
     }
-    @if $filename == filter {
+    @if $filename == fax {
       $char: "\E029";
     }
-    @if $filename == flickr {
+    @if $filename == filter {
       $char: "\E02A";
     }
-    @if $filename == for-children {
+    @if $filename == flickr {
       $char: "\E02B";
     }
-    @if $filename == fullscreen-enter {
+    @if $filename == for-children {
       $char: "\E02C";
     }
-    @if $filename == fullscreen-exit {
+    @if $filename == fullscreen-enter {
       $char: "\E02D";
     }
-    @if $filename == ghent {
+    @if $filename == fullscreen-exit {
       $char: "\E02E";
     }
-    @if $filename == globe {
+    @if $filename == ghent {
       $char: "\E02F";
     }
-    @if $filename == googleplus {
+    @if $filename == globe {
       $char: "\E030";
     }
-    @if $filename == gsport {
+    @if $filename == googleplus {
       $char: "\E031";
     }
-    @if $filename == hamburger {
+    @if $filename == gsport {
       $char: "\E032";
     }
-    @if $filename == health {
+    @if $filename == hamburger {
       $char: "\E033";
     }
-    @if $filename == heart {
+    @if $filename == health {
       $char: "\E034";
     }
-    @if $filename == home {
+    @if $filename == heart {
       $char: "\E035";
     }
-    @if $filename == image {
+    @if $filename == home {
       $char: "\E036";
     }
-    @if $filename == info-circle {
+    @if $filename == image {
       $char: "\E037";
     }
-    @if $filename == info {
+    @if $filename == info-circle {
       $char: "\E038";
     }
-    @if $filename == instagram {
+    @if $filename == info {
       $char: "\E039";
     }
-    @if $filename == layers {
+    @if $filename == instagram {
       $char: "\E03A";
     }
-    @if $filename == level {
+    @if $filename == layers {
       $char: "\E03B";
     }
-    @if $filename == lightning {
+    @if $filename == level {
       $char: "\E03C";
     }
-    @if $filename == link {
+    @if $filename == lightning {
       $char: "\E03D";
     }
-    @if $filename == linkedin {
+    @if $filename == link {
       $char: "\E03E";
     }
-    @if $filename == living {
+    @if $filename == linkedin {
       $char: "\E03F";
     }
-    @if $filename == lock-closed {
+    @if $filename == living {
       $char: "\E040";
     }
-    @if $filename == lock-open {
+    @if $filename == lock-closed {
       $char: "\E041";
     }
-    @if $filename == logo-en {
+    @if $filename == lock-open {
       $char: "\E042";
     }
-    @if $filename == logo-es {
+    @if $filename == logo-en {
       $char: "\E043";
     }
-    @if $filename == logo-fr {
+    @if $filename == logo-es {
       $char: "\E044";
     }
-    @if $filename == logo-nl {
+    @if $filename == logo-fr {
       $char: "\E045";
     }
-    @if $filename == logo-sp {
+    @if $filename == logo-nl {
       $char: "\E046";
     }
-    @if $filename == map {
+    @if $filename == logo-sp {
       $char: "\E047";
     }
-    @if $filename == marker {
+    @if $filename == map {
       $char: "\E048";
     }
-    @if $filename == minus {
+    @if $filename == marker {
       $char: "\E049";
     }
-    @if $filename == mobility {
+    @if $filename == minus {
       $char: "\E04A";
     }
-    @if $filename == music {
+    @if $filename == mobility {
       $char: "\E04B";
     }
-    @if $filename == next {
+    @if $filename == music {
       $char: "\E04C";
     }
-    @if $filename == normalphone {
+    @if $filename == next {
       $char: "\E04D";
     }
-    @if $filename == parking {
+    @if $filename == normalphone {
       $char: "\E04E";
     }
-    @if $filename == pause {
+    @if $filename == parking {
       $char: "\E04F";
     }
-    @if $filename == pencil {
+    @if $filename == pause {
       $char: "\E050";
     }
-    @if $filename == phone {
+    @if $filename == pencil {
       $char: "\E051";
     }
-    @if $filename == pinterest {
+    @if $filename == phone {
       $char: "\E052";
     }
-    @if $filename == play {
+    @if $filename == pinterest {
       $char: "\E053";
     }
-    @if $filename == plus {
+    @if $filename == play {
       $char: "\E054";
     }
-    @if $filename == previous {
+    @if $filename == plus {
       $char: "\E055";
     }
-    @if $filename == question-circle {
+    @if $filename == previous {
       $char: "\E056";
     }
-    @if $filename == question {
+    @if $filename == question-circle {
       $char: "\E057";
     }
-    @if $filename == readspeaker {
+    @if $filename == question {
       $char: "\E058";
     }
-    @if $filename == refresh {
+    @if $filename == readspeaker {
       $char: "\E059";
     }
-    @if $filename == search {
+    @if $filename == refresh {
       $char: "\E05A";
     }
-    @if $filename == settings {
+    @if $filename == search {
       $char: "\E05B";
     }
-    @if $filename == share {
+    @if $filename == settings {
       $char: "\E05C";
     }
-    @if $filename == shopping {
+    @if $filename == share {
       $char: "\E05D";
     }
-    @if $filename == sign-language {
+    @if $filename == shopping {
       $char: "\E05E";
     }
-    @if $filename == sign-out {
+    @if $filename == sign-language {
       $char: "\E05F";
     }
-    @if $filename == size {
+    @if $filename == sign-out {
       $char: "\E060";
     }
-    @if $filename == spoken-language {
+    @if $filename == size {
       $char: "\E061";
     }
-    @if $filename == sportclub {
+    @if $filename == spoken-language {
       $char: "\E062";
     }
-    @if $filename == star-empty {
+    @if $filename == sportclub {
       $char: "\E063";
     }
-    @if $filename == star-full {
+    @if $filename == star-empty {
       $char: "\E064";
     }
-    @if $filename == star-half {
+    @if $filename == star-full {
       $char: "\E065";
     }
-    @if $filename == stop {
+    @if $filename == star-half {
       $char: "\E066";
     }
-    @if $filename == subscribe {
+    @if $filename == stop {
       $char: "\E067";
     }
-    @if $filename == tag {
+    @if $filename == subscribe {
       $char: "\E068";
     }
-    @if $filename == target {
+    @if $filename == tag {
       $char: "\E069";
     }
-    @if $filename == threads {
+    @if $filename == target {
       $char: "\E06A";
     }
-    @if $filename == tiktok {
+    @if $filename == threads {
       $char: "\E06B";
     }
-    @if $filename == trashcan {
+    @if $filename == tiktok {
       $char: "\E06C";
     }
-    @if $filename == twitter-outline {
+    @if $filename == trashcan {
       $char: "\E06D";
     }
-    @if $filename == twitter {
+    @if $filename == twitter-outline {
       $char: "\E06E";
     }
-    @if $filename == uit-met-vlieg {
+    @if $filename == twitter {
       $char: "\E06F";
     }
-    @if $filename == uitpas {
+    @if $filename == uit-met-vlieg {
       $char: "\E070";
     }
-    @if $filename == update {
+    @if $filename == uitpas {
       $char: "\E071";
     }
-    @if $filename == url {
+    @if $filename == update {
       $char: "\E072";
     }
-    @if $filename == user {
+    @if $filename == url {
       $char: "\E073";
     }
-    @if $filename == users {
+    @if $filename == user {
       $char: "\E074";
     }
-    @if $filename == view-grid {
+    @if $filename == users {
       $char: "\E075";
     }
-    @if $filename == view-list {
+    @if $filename == view-grid {
       $char: "\E076";
     }
-    @if $filename == vimeo {
+    @if $filename == view-list {
       $char: "\E077";
     }
-    @if $filename == virus {
+    @if $filename == vimeo {
       $char: "\E078";
     }
-    @if $filename == whatsapp {
+    @if $filename == virus {
       $char: "\E079";
     }
-    @if $filename == wheelchair-no {
+    @if $filename == whatsapp {
       $char: "\E07A";
     }
-    @if $filename == wheelchair {
+    @if $filename == wheelchair-no {
       $char: "\E07B";
     }
-    @if $filename == work {
+    @if $filename == wheelchair {
       $char: "\E07C";
     }
-    @if $filename == youtube {
+    @if $filename == work {
       $char: "\E07D";
     }
+    @if $filename == youtube {
+      $char: "\E07E";
+    }
 
     @return $char;
 }
@@ -571,6 +574,9 @@ $id: math.random(1000);
 .icon-environment {
   @include icon(environment);
 }
+.icon-euro-filled {
+  @include icon(euro-filled);
+}
 .icon-euro {
   @include icon(euro);
 }