dso-toolkit 84.1.0 → 85.0.0

package/src/components/button/button.mixins.scss

@@ -25,20 +25,15 @@
     @include base($modifiers);
   }
 
-  & {
-    @include _shared-variant($defaults-map, $variant);
-  }
+  @include _shared-variant($defaults-map, $variant);
 
-  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-  & {
-    border-width: 1px;
-    border-style: solid;
-    border-radius: button-variables.$border-radius;
-    line-height: typography.$line-height-base;
-    min-inline-size: button-variables.$min-inline-size;
-    padding-block: button-variables.$block-padding;
-    padding-inline: button-variables.$inline-padding;
-  }
+  border-width: 1px;
+  border-style: solid;
+  border-radius: button-variables.$border-radius;
+  line-height: typography.$line-height-base;
+  min-inline-size: button-variables.$min-inline-size;
+  padding-block: button-variables.$block-padding;
+  padding-inline: button-variables.$inline-padding;
 
   &:hover {
     @include _shared-variant($defaults-map, $variant, $hover-map, "-hover");
@@ -61,10 +56,8 @@
 
   &.dso-extra-small {
     @include small();
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      padding-block: 9px;
-    }
+
+    padding-block: 9px;
   }
 
   @if ($icon-only) {
@@ -141,9 +134,7 @@
 }
 
 @mixin small() {
-  & {
-    line-height: typography.$root-font-size-base;
-  }
+  line-height: typography.$root-font-size-base;
 
   dso-icon,
   &.extern::after,
@@ -361,13 +352,11 @@
     @include base($modifiers);
   }
 
-  & {
-    border: 0;
-    color: button-variables.$tertiary-color;
-    line-height: 1;
-    padding: 0;
-    background-color: transparent;
-  }
+  border: 0;
+  color: button-variables.$tertiary-color;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
 
   &[disabled] {
     color: colors.$grasgroen-40;
@@ -456,26 +445,24 @@
 @mixin map() {
   @include secondary($modifiers: false);
 
-  & {
-    @include map-box-shadow();
+  @include map-box-shadow();
 
-    border: 0;
-    font-weight: 600;
-    margin-inline-end: units.$u2;
-    padding-block: units.$u1;
-    padding-inline: units.$u2;
-    white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- No word wrapping in buttons on maps
-
-    &:focus,
-    &:focus-visible {
-      outline-offset: -1px;
-    }
+  border: 0;
+  font-weight: 600;
+  margin-inline-end: units.$u2;
+  padding-block: units.$u1;
+  padding-inline: units.$u2;
+  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- No word wrapping in buttons on maps
 
-    &:has(span.sr-only):has(dso-icon) {
-      padding: units.$u1;
-      min-inline-size: auto;
-      block-size: button-variables.$map-size;
-      inline-size: button-variables.$map-size;
-    }
+  &:focus,
+  &:focus-visible {
+    outline-offset: -1px;
+  }
+
+  &:has(span.sr-only):has(dso-icon) {
+    padding: units.$u1;
+    min-inline-size: auto;
+    block-size: button-variables.$map-size;
+    inline-size: button-variables.$map-size;
   }
 }

package/src/components/context/context.scss

@@ -48,16 +48,13 @@
       @include form-control.root();
       @include di.variant("caret-down");
 
-      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-      & {
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        background-position: calc(100% - #{units.$u1});
-        background-repeat: no-repeat;
-        background-size: icon.$size icon.$size;
-        padding-inline-end: units.$u4;
-        inline-size: auto;
-      }
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      background-position: calc(100% - #{units.$u1});
+      background-repeat: no-repeat;
+      background-size: icon.$size icon.$size;
+      padding-inline-end: units.$u4;
+      inline-size: auto;
     }
   }
 }

package/src/components/definition-list/definition-list.scss

@@ -58,10 +58,7 @@ dl {
     @include rich-content.children();
     @include utilities.clearfix();
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      margin-inline-start: 0;
-    }
+    margin-inline-start: 0;
 
     &:last-of-type {
       margin-inline-end: 0;

package/src/components/delete/delete.mixins.scss

@@ -6,12 +6,10 @@
 @mixin root($strikethrough: true) {
   @include set-colors.apply(colors.$rood-20, "delete");
 
-  & {
-    --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 
-    @if ($strikethrough) {
-      @include strikethrough();
-    }
+  @if ($strikethrough) {
+    @include strikethrough();
   }
 }
 
@@ -24,8 +22,6 @@
   // stylelint-disable media-feature-name-no-unknown -- counter line-through displaying as underline in firefox
   // http://browserhacks.com/#hack-48ca6fc2947b7850c571a2f69bdbffbd
   @media screen and (min--moz-device-pixel-ratio: 0) {
-    & {
-      font-family: sans-serif;
-    }
+    font-family: sans-serif;
   }
 }

package/src/components/description/description.scss

@@ -12,10 +12,8 @@ $content-selector: ".dso-description-content";
       &::before {
         @include di.base("times-zwart");
 
-        & {
-          content: "";
-          display: block;
-        }
+        content: "";
+        display: block;
       }
     }
   }

package/src/components/document-header/document-header.scss

@@ -14,12 +14,9 @@
 .dso-document-header {
   @include set-colors.apply(colors.$grijs-5, "document-header");
 
-  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-  & {
-    padding-block: units.$u1 calc(grid-variables.$grid-gutter-width * 0.5);
-    padding-inline: units.$u3;
-    margin-inline: -#{units.$u2} -#{units.$u2};
-  }
+  padding-block: units.$u1 calc(grid-variables.$grid-gutter-width * 0.5);
+  padding-inline: units.$u3;
+  margin-inline: -#{units.$u2} -#{units.$u2};
 
   &:has(.dso-document-header-status) {
     padding-block-start: 0;
@@ -96,10 +93,8 @@
         &::after {
           @include di.base("chevron-up-bosgroen");
 
-          & {
-            content: "";
-            display: inline-block;
-          }
+          content: "";
+          display: inline-block;
         }
 
         span {
@@ -164,11 +159,8 @@
   .dso-document-header-toggle-status {
     @include button.tertiary();
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      color: colors.$zwart;
-      font-weight: normal;
-    }
+    color: colors.$zwart;
+    font-weight: normal;
   }
 
   .dso-document-header-map-action {

package/src/components/dropdown-menu/dropdown-menu.mixins.scss

@@ -80,18 +80,15 @@
       button {
         @include link.reverse();
 
-        // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-        & {
-          clear: both;
-          color: dropdown-menu-variables.$link-color;
-          display: block;
-          font-weight: 400;
-          line-height: 1.5;
-          padding-block: 3px;
-          padding-inline: dropdown-menu-variables.$inline-padding;
-          text-decoration: none;
-          white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- We don't want wrapping in Dropdown items
-        }
+        clear: both;
+        color: dropdown-menu-variables.$link-color;
+        display: block;
+        font-weight: 400;
+        line-height: 1.5;
+        padding-block: 3px;
+        padding-inline: dropdown-menu-variables.$inline-padding;
+        text-decoration: none;
+        white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- We don't want wrapping in Dropdown items
 
         &:hover,
         &:focus {

package/src/components/dropdown-menu/dropdown-menu.scss

@@ -28,12 +28,9 @@
     &::after {
       @include di.base("chevron-down");
 
-      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-      & {
-        margin-inline-start: units.$u1 * 0.5;
-        position: relative;
-        inset-block-start: -2px;
-      }
+      margin-inline-start: units.$u1 * 0.5;
+      position: relative;
+      inset-block-start: -2px;
     }
 
     &:hover {
@@ -79,10 +76,7 @@
   @include dropdown-menu.children();
   @include icons();
 
-  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-  & {
-    position: relative;
-  }
+  position: relative;
 
   &.dso-open {
     @include icons-open();
@@ -98,14 +92,11 @@
           &::before {
             @include di.base("check-wit", units.$u3);
 
-            // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-            & {
-              content: "";
-              display: block;
-              float: inline-start;
-              margin-inline-start: units.$u4 * -1;
-              margin-inline-end: units.$u1;
-            }
+            content: "";
+            display: block;
+            float: inline-start;
+            margin-inline-start: units.$u4 * -1;
+            margin-inline-end: units.$u1;
           }
         }
       }
@@ -146,14 +137,11 @@ dso-dropdown-menu {
           &::before {
             @include di.base("check-wit", units.$u3);
 
-            // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-            & {
-              content: "";
-              display: block;
-              float: inline-start;
-              margin-inline-start: units.$u4 * -1;
-              margin-inline-end: units.$u1;
-            }
+            content: "";
+            display: block;
+            float: inline-start;
+            margin-inline-start: units.$u4 * -1;
+            margin-inline-end: units.$u1;
           }
         }
       }

package/src/components/footer/footer.scss

@@ -14,14 +14,11 @@ footer {
 
   @include set-colors.apply(colors.$grijs-5, "footer");
 
-  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-  & {
-    border-block-start: 1px solid css-footer-variables.$border-color;
-    display: block;
-    margin-block-start: units.$u6;
-    padding-block-end: units.$u6;
-    padding-block-start: units.$u3;
-  }
+  border-block-start: 1px solid css-footer-variables.$border-color;
+  display: block;
+  margin-block-start: units.$u6;
+  padding-block-end: units.$u6;
+  padding-block-start: units.$u3;
 
   .dso-link-list {
     @include link-list.exotic();

package/src/components/form/form-group-collection.scss

@@ -10,10 +10,8 @@
     margin-block-end: units.$u2;
 
     > legend {
-      & {
-        border-block-end: 0;
-        margin-block-end: form-variables.$fieldset-separator-unit;
-      }
+      border-block-end: 0;
+      margin-block-end: form-variables.$fieldset-separator-unit;
 
       &,
       h1,

package/src/components/form-control/form-control.mixins.scss

@@ -7,23 +7,21 @@
 @use "form-control.variables" as form-control-variables;
 
 @mixin root() {
-  & {
-    display: block;
-    inline-size: 100%;
-    block-size: form-control-variables.$block-size;
-    padding-block: units.$padding-base-block;
-    padding-inline: (units.$padding-base-inline + 2);
-    font-size: typography.$root-font-size-base;
-    line-height: typography.$line-height-base;
-    color: colors.$input-color;
-    background-color: colors.$input-bg;
-    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-    border: form-control-variables.$border-width solid colors.$input-border;
-    border-radius: form-control-variables.$input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
-    transition:
-      border-color ease-in-out 0.15s,
-      box-shadow ease-in-out 0.15s;
-  }
+  display: block;
+  inline-size: 100%;
+  block-size: form-control-variables.$block-size;
+  padding-block: units.$padding-base-block;
+  padding-inline: (units.$padding-base-inline + 2);
+  font-size: typography.$root-font-size-base;
+  line-height: typography.$line-height-base;
+  color: colors.$input-color;
+  background-color: colors.$input-bg;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: form-control-variables.$border-width solid colors.$input-border;
+  border-radius: form-control-variables.$input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+  transition:
+    border-color ease-in-out 0.15s,
+    box-shadow ease-in-out 0.15s;
 
   @include utilities.placeholder(colors.$input-color-placeholder);
 

package/src/components/form-group/form-group.scss

@@ -137,13 +137,10 @@
       &::before {
         @include di.base("status-error", form-group-variables.$field-invalid-icon-size);
 
-        // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-        & {
-          content: "";
-          display: block;
-          inset-inline-start: 0;
-          position: absolute;
-        }
+        content: "";
+        display: block;
+        inset-inline-start: 0;
+        position: absolute;
       }
     }
   }

package/src/components/form-group/select/form-group-select.scss

@@ -21,15 +21,12 @@
   select:not([multiple]) {
     @include di.variant("caret-down");
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      background-position: calc(100% - #{units.$u1});
-      background-repeat: no-repeat;
-      background-size: icon.$size icon.$size;
-      padding-inline-end: units.$u4;
-    }
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    background-position: calc(100% - #{units.$u1});
+    background-repeat: no-repeat;
+    background-size: icon.$size icon.$size;
+    padding-inline-end: units.$u4;
 
     &:disabled {
       @include di.variant("caret-down-disabled");

package/src/components/grid/grid.scss

@@ -83,11 +83,8 @@ form {
       }
     }
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      display: flex;
-      flex-wrap: wrap;
-    }
+    display: flex;
+    flex-wrap: wrap;
   }
 
   &.dso-banner {
@@ -99,16 +96,12 @@ form {
 
     min-block-size: 352px;
     overflow: hidden;
+    background-size: 0; // background image killed off here, to be shown in the ::before
 
     @media only screen and (min-width: media-query-breakpoints.$screen-sm-min) {
       padding-block-start: units.$u3;
     }
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      background-size: 0; // background image killed off here, to be shown in the ::before
-    }
-
     &.no-button-banner {
       min-block-size: 296px;
     }

package/src/components/heading/heading.mixins.scss

@@ -36,9 +36,7 @@
   font-weight: 700;
 
   @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {
-    & {
-      font-size: units.$font-size-h2;
-    }
+    font-size: units.$font-size-h2;
   }
 }
 
@@ -48,9 +46,7 @@
   font-weight: 600;
 
   @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {
-    & {
-      font-size: units.$font-size-h3;
-    }
+    font-size: units.$font-size-h3;
   }
 }
 

package/src/components/highlight-box/highlight-box.mixins.scss

@@ -62,9 +62,7 @@
   &#{$border-selector}:not(#{$grey-selector}, #{$yellow-selector}) {
     @include set-colors.apply(colors.$wit, "highlight-box");
 
-    & {
-      border-color: colors.$grijs-20;
-    }
+    border-color: colors.$grijs-20;
   }
 
   &#{$has-counter-selector} {
@@ -83,15 +81,11 @@
     max-inline-size: unset;
 
     @container (min-width: 360px) and (max-width: 470px) {
-      & {
-        aspect-ratio: 3 / 1;
-      }
+      aspect-ratio: 3 / 1;
     }
 
     @container (min-width: 471px) {
-      & {
-        aspect-ratio: 3.5 / 1;
-      }
+      aspect-ratio: 3.5 / 1;
     }
   }
 

package/src/components/highlight-box/highlight-box.scss

@@ -19,12 +19,9 @@
 
   @include step-counter.step-counter();
 
-  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-  & {
-    container-type: inline-size;
-    position: relative;
-    z-index: 1;
-  }
+  container-type: inline-size;
+  position: relative;
+  z-index: 1;
 
   &.dso-yellow,
   &:not(.dso-border):not(.dso-white) {

package/src/components/info/info.scss

@@ -20,11 +20,8 @@
     &::before {
       @include di.base("times-zwart");
 
-      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-      & {
-        content: "";
-        display: inline-block;
-      }
+      content: "";
+      display: inline-block;
     }
   }
 }

package/src/components/insert/insert.mixins.scss

@@ -10,9 +10,7 @@
 @mixin root() {
   @include set-colors.apply(colors.$lime-20, "insert");
 
-  & {
-    box-shadow: insert-variables.$box-shadow;
+  box-shadow: insert-variables.$box-shadow;
 
-    --_dso-ozon-content-toggletip-color: colors.$zwart;
-  }
+  --_dso-ozon-content-toggletip-color: colors.$zwart;
 }

package/src/components/label/label.mixins.scss

@@ -19,9 +19,7 @@
     text-decoration: line-through;
   }
 
-  & {
-    @include set-colors.apply(label-variables.$default-bg-color, "label");
-  }
+  @include set-colors.apply(label-variables.$default-bg-color, "label");
 
   &.dso-label-info {
     @include set-colors.apply(label-variables.$info-bg-color, "label");
@@ -46,11 +44,8 @@
   &.dso-label-bright {
     @include set-colors.apply(label-variables.$bright-bg-color, "label");
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      outline: 1px solid label-variables.$bright-border-color;
-      outline-offset: -1px;
-    }
+    outline: 1px solid label-variables.$bright-border-color;
+    outline-offset: -1px;
   }
 
   &.dso-label-attention {
@@ -60,10 +55,7 @@
   &.dso-label-filter {
     @include set-colors.apply(label-variables.$filter-bg-color, "label");
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      border-inline-start: 5px solid label-variables.$filter-border-color;
-    }
+    border-inline-start: 5px solid label-variables.$filter-border-color;
   }
 
   &.dso-label-toegevoegd {

package/src/components/link/link.mixins.scss

@@ -99,16 +99,29 @@
     background-position: bottom 0 right 0;
   }
 
-  $icon: if(
-    map.has-key($link-map, "icon-color"),
-    map.get($link-map, "icon") + "-" + map.get($link-map, "icon-color"),
-    map.get($link-map, "icon")
-  );
-  $icon-hover: if(
-    map.has-key($link-map, "icon-hover-color"),
-    map.get($link-map, "icon") + "-" + map.get($link-map, "icon-hover-color"),
-    map.get($link-map, "icon")
-  );
+  $icon: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-color") {
+    $icon: $icon + "-" + map.get($link-map, "icon-color");
+  }
+
+  $icon-hover: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-hover-color") {
+    $icon-hover: $icon-hover + "-" + map.get($link-map, "icon-hover-color");
+  }
+
+  $icon: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-color") {
+    $icon: $icon + "-" + map.get($link-map, "icon-color");
+  }
+
+  $icon-hover: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-hover-color") {
+    $icon-hover: $icon-hover + "-" + map.get($link-map, "icon-hover-color");
+  }
 
   @include di.variant($icon);