@festo-ui/web-essentials 7.3.0-dev.461 → 7.3.0-dev.464

package/dist/scss/_rfs.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 // SCSS RFS mixin
 // Automated responsive font sizes
 // Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
@@ -28,7 +29,7 @@ $rfs-two-dimensional: false !default;
 // Factor of decrease
 $rfs-factor: 10 !default;
 
-@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+@if meta.type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
   @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
 }
 
@@ -45,7 +46,7 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
 $enable-responsive-font-sizes: true !default;
 
 // Cache $rfs-base-font-size unit
-$rfs-base-font-size-unit: unit($rfs-base-font-size);
+$rfs-base-font-size-unit: math.unit($rfs-base-font-size);
 
 // Remove px-unit from $rfs-base-font-size for calculations
 @if $rfs-base-font-size-unit == "px" {
@@ -55,7 +56,7 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == "px" {
@@ -106,7 +107,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 // Responsive font size mixin
 @mixin rfs($fs, $important: false) {
   // Cache $fs unit
-  $fs-unit: if(type-of($fs) == "number", unit($fs), false);
+  $fs-unit: if(meta.type-of($fs) == "number", math.unit($fs), false);
 
   // Add !important suffix if needed
   $rfs-suffix: if($important, " !important", "");

package/dist/scss/_root.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 :root {
   --fwe-black: #000000;
   --fwe-white: #ffffff;
@@ -48,15 +50,15 @@
 
   --fwe-background: #f2f3f5;
 
-  @each $name, $size in $grid-breakpoints {
+  @each $name, $size in variables.$grid-breakpoints {
     --fwe-breakpoint-#{$name}: #{$size};
   }
 
-  @each $name, $size in $grid-breakpoints-min {
+  @each $name, $size in variables.$grid-breakpoints-min {
     --fwe-breakpoint-#{$name}: #{$size};
   }
 
-  @each $spacing, $space in $spacers {
+  @each $spacing, $space in variables.$spacers {
     --fwe-spacer-#{$spacing}: #{$space};
   }
 

package/dist/scss/_scroll.scss

@@ -1,17 +1,20 @@
+@use "mixins";
+@use "variables";
+
 // styles for native browser scrollbar
 .fwe-scrollbar {
-  @include custom-scrollbar;
+  @include mixins.custom-scrollbar;
 }
 
 // styles for js scrollbar (simplebar.js)
 /* stylelint-disable */
 .simplebar-scrollbar::before {
-  background-color: $control-hover;
+  background-color: variables.$control-hover;
 }
 
 .simplebar-dragging {
   .simplebar-scrollbar::before {
-    background-color: $control-active;
+    background-color: variables.$control-active;
   }
 }
 

package/dist/scss/_search-input.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .fwe-search-input {
   display: block;
   position: relative;
@@ -27,13 +29,13 @@
     right: 0px;
     bottom: 9px;
     line-height: 1;
-    background: $control;
+    background: variables.$control;
     border-radius: 50%;
     &:hover {
-      background: $control-hover;
+      background: variables.$control-hover;
     }
     &:active {
-      background: $control-active;
+      background: variables.$control-active;
     }
   }
 
@@ -43,21 +45,21 @@
     border-top: none;
     border-right: none;
     border-radius: 0px;
-    border-bottom: 1px solid $control-border;
+    border-bottom: 1px solid variables.$control-border;
     background: transparent;
     padding: 1px 24px 4px 32px;
     &::placeholder {
-      color: $text;
+      color: variables.$text;
     }
     &:hover:not(:disabled) {
       &::placeholder {
-        color: $hero;
+        color: variables.$hero;
       }
-      border-bottom: 1px solid $hero;
+      border-bottom: 1px solid variables.$hero;
     }
     &:focus {
       outline: none;
-      border-bottom: 1px solid $hero;
+      border-bottom: 1px solid variables.$hero;
       &::placeholder {
         color: transparent !important;
       }
@@ -86,9 +88,9 @@ input[type="search"]::-webkit-search-cancel-button {
   left: 0px;
   right: 0px;
   padding: 8px;
-  background: $white;
-  border-radius: $control-border-radius;
-  box-shadow: $control-box-shadow;
+  background: variables.$white;
+  border-radius: variables.$control-border-radius;
+  box-shadow: variables.$control-box-shadow;
   .fwe-search-suggestion {
     cursor: pointer;
     padding: 8px;
@@ -96,11 +98,11 @@ input[type="search"]::-webkit-search-cancel-button {
     text-overflow: ellipsis;
     strong {
       font-weight: unset;
-      color: $hero;
+      color: variables.$hero;
     }
     &:hover,
     &.fwe-selected {
-      background: $background;
+      background: variables.$background;
     }
   }
 }

package/dist/scss/_segment.scss

@@ -1,8 +1,11 @@
+@use "mixins";
+@use "variables";
+
 @mixin segment-disabled {
-  background-color: $gray-100;
+  background-color: variables.$gray-100;
   color: #3333334d;
-  border-color: $control-disabled;
-  border-right: 1px solid $control-disabled;
+  border-color: variables.$control-disabled;
+  border-right: 1px solid variables.$control-disabled;
 }
 
 .fwe-segment {
@@ -19,24 +22,24 @@
   &-label {
     display: inline-flex;
     align-items: center;
-    height: $spacer-l;
+    height: variables.$spacer-l;
     width: 100%;
     white-space: nowrap;
-    padding: 0 $spacer-m;
-    font-size: $font-size-base;
+    padding: 0 variables.$spacer-m;
+    font-size: variables.$font-size-base;
     text-align: center;
     cursor: pointer;
-    border: 1px solid $gray-300;
-    color: $hero-gray;
-    background-color: $white;
+    border: 1px solid variables.$gray-300;
+    color: variables.$hero-gray;
+    background-color: variables.$white;
 
     &:hover {
-      color: $hero-active;
-      border-color: $hero-active;
-      border-right: 1px solid $hero-active;
+      color: variables.$hero-active;
+      border-color: variables.$hero-active;
+      border-right: 1px solid variables.$hero-active;
       + .fwe-segment-input {
         + .fwe-segment-label {
-          border-left: 1px solid $hero-active;
+          border-left: 1px solid variables.$hero-active;
         }
       }
     }
@@ -49,13 +52,13 @@
   }
 
   &-input {
-    @include visual-hidden();
+    @include mixins.visual-hidden();
     &:disabled {
       ~ .fwe-segment-label {
         pointer-events: none;
         color: #a3b2bc4d;
-        border-color: $control-disabled;
-        border-right: 1px solid $control-disabled;
+        border-color: variables.$control-disabled;
+        border-right: 1px solid variables.$control-disabled;
         &:not(:last-child) {
           border-right: 0;
         }
@@ -64,9 +67,9 @@
     &:checked:not(:disabled) {
       + .fwe-segment-label {
         position: relative;
-        background-color: $caerul;
-        color: $white;
-        border-color: $caerul;
+        background-color: variables.$caerul;
+        color: variables.$white;
+        border-color: variables.$caerul;
         &:not(:last-child) {
           &::after {
             content: "";
@@ -74,9 +77,9 @@
             position: absolute;
             top: -1px;
             right: -1px;
-            height: $spacer-l;
+            height: variables.$spacer-l;
             width: 1px;
-            background-color: $caerul;
+            background-color: variables.$caerul;
           }
         }
       }
@@ -90,13 +93,13 @@
 
   .fwe-segment-label {
     &:nth-child(2) {
-      border-radius: $control-border-radius 0 0 $control-border-radius;
+      border-radius: variables.$control-border-radius 0 0 variables.$control-border-radius;
     }
   }
 
   .fwe-segment-label {
     &:last-child {
-      border-radius: 0 $control-border-radius $control-border-radius 0;
+      border-radius: 0 variables.$control-border-radius variables.$control-border-radius 0;
     }
   }
 
@@ -104,9 +107,9 @@
     .fwe-segment-input {
       &:checked {
         + .fwe-segment-label {
-          background-color: $sucaerul;
-          color: $caerul;
-          border-color: $caerul;
+          background-color: variables.$sucaerul;
+          color: variables.$caerul;
+          border-color: variables.$caerul;
         }
 
         &:disabled {
@@ -123,7 +126,7 @@
 
   &.fwe-segment-icon {
     .fwe-segment-label {
-      padding: 0 $spacer-s;
+      padding: 0 variables.$spacer-s;
       line-height: 30px;
     }
     .fwe-segment-input {

package/dist/scss/_select.scss

@@ -1,14 +1,16 @@
+@use "variables";
+
 %select-description {
   position: absolute;
   bottom: 0px;
   width: 100%;
-  font-size: $font-size-small;
-  line-height: $line-height-base;
-  color: $text-disabled;
+  font-size: variables.$font-size-small;
+  line-height: variables.$line-height-base;
+  color: variables.$text-disabled;
 }
 
 .fwe-select-wrapper {
-  font-family: $font-size-base;
+  font-family: variables.$font-size-base;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -26,10 +28,10 @@
 
   .fwe-select-label {
     order: 1;
-    color: $text;
-    font-size: $font-size-small;
-    line-height: $line-height-base;
-    font-weight: $font-weight-bold;
+    color: variables.$text;
+    font-size: variables.$font-size-small;
+    line-height: variables.$line-height-base;
+    font-weight: variables.$font-weight-bold;
   }
 
   .fwe-select {
@@ -39,33 +41,33 @@
     padding-bottom: 4px;
     padding-top: 4px;
     width: 100%;
-    font-size: $font-size-base;
+    font-size: variables.$font-size-base;
     appearance: none;
     display: block;
     outline: 0;
     background: none;
     border: none;
-    border-bottom: 1px solid $control-border;
+    border-bottom: 1px solid variables.$control-border;
 
     &:hover {
       &:not(:disabled) {
-        color: $hero;
+        color: variables.$hero;
         option {
-          color: $text;
+          color: variables.$text;
         }
-        border-color: $hero;
+        border-color: variables.$hero;
       }
       &:invalid {
-        border-color: $red;
+        border-color: variables.$red;
       }
     }
 
     &:disabled {
       cursor: default;
       ~ .fwe-select-label {
-        color: $text-disabled;
+        color: variables.$text-disabled;
       }
-      border-color: $control-disabled;
+      border-color: variables.$control-disabled;
     }
 
     &::-ms-expand {
@@ -74,7 +76,7 @@
 
     &:invalid {
       box-shadow: none;
-      border-color: $red;
+      border-color: variables.$red;
 
       ~ .fwe-select-invalid {
         display: block;
@@ -92,6 +94,6 @@
   .fwe-select-invalid {
     @extend %select-description;
     display: none;
-    color: $red;
+    color: variables.$red;
   }
 }

package/dist/scss/_sidebar-overlay.scss

@@ -1,7 +1,9 @@
+@use "variables";
+
 $fwe-sidebar-overlay-width: 480px;
 
 .fwe-sidebar-overlay {
-  z-index: $zindex-sticky;
+  z-index: variables.$zindex-sticky;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
   padding: 32px;
   position: fixed;
@@ -9,7 +11,7 @@ $fwe-sidebar-overlay-width: 480px;
   top: 0px;
   bottom: 0px;
   width: $fwe-sidebar-overlay-width;
-  background: $white;
+  background: variables.$white;
   transform: translateX($fwe-sidebar-overlay-width);
   transition: opacity 400ms, transform 400ms;
   opacity: 0;
@@ -31,13 +33,13 @@ $fwe-sidebar-overlay-width: 480px;
     outline: none;
     text-align: right;
     cursor: pointer;
-    background: $text;
+    background: variables.$text;
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
     &:hover {
-      background: $hero;
+      background: variables.$hero;
     }
   }
-  @media (max-width: $breakpoint-xs-min) {
+  @media (max-width: variables.$breakpoint-xs-min) {
     padding: 16px;
     left: 0px;
     width: unset;

package/dist/scss/_slider.scss

@@ -1,9 +1,12 @@
+@use "mixins";
+@use "variables";
+
 label.fwe-slider {
   span {
     margin-bottom: 4px;
     display: inline-block;
-    font-size: $font-size-md;
-    color: $text-light;
+    font-size: variables.$font-size-md;
+    color: variables.$text-light;
   }
 }
 
@@ -17,7 +20,7 @@ input[type="range"].fwe-slider-input {
 
   cursor: pointer;
 
-  @include firefox-only {
+  @include mixins.firefox-only {
     height: 32px;
   }
   &:focus {
@@ -28,7 +31,7 @@ input[type="range"].fwe-slider-input {
     -webkit-appearance: none;
     width: 8px;
     height: 8px;
-    background: $hero;
+    background: variables.$hero;
     cursor: pointer;
     border-radius: 50%;
     margin-top: -3px;
@@ -37,7 +40,7 @@ input[type="range"].fwe-slider-input {
   &::-moz-range-thumb {
     width: 8px;
     height: 8px;
-    background: $hero;
+    background: variables.$hero;
     cursor: pointer;
     border-radius: 50%;
     border: none;
@@ -47,29 +50,29 @@ input[type="range"].fwe-slider-input {
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: $hero;
+    background: variables.$hero;
     cursor: pointer;
-    border: 1px solid $hero;
+    border: 1px solid variables.$hero;
   }
 
   &::-webkit-slider-runnable-track {
     width: 100%;
     height: 2px;
     cursor: pointer;
-    background: $control;
+    background: variables.$control;
     border: none;
   }
   &::-moz-range-track {
     width: 100%;
     height: 2px;
     cursor: pointer;
-    background: $control;
+    background: variables.$control;
     border: none;
   }
   &::-moz-range-progress {
     height: 2px;
     cursor: pointer;
-    background: $hero;
+    background: variables.$hero;
     border: none;
   }
   &::-ms-track {
@@ -82,10 +85,10 @@ input[type="range"].fwe-slider-input {
     color: transparent;
   }
   &::-ms-fill-lower {
-    background: $hero;
+    background: variables.$hero;
   }
   &::-ms-fill-upper {
-    background: $control;
+    background: variables.$control;
   }
 
   &:hover:not(:disabled) {
@@ -99,7 +102,7 @@ input[type="range"].fwe-slider-input {
       width: 16px;
     }
     &::-ms-thumb {
-      box-shadow: 0px 0px 0px 4px $hero;
+      box-shadow: 0px 0px 0px 4px variables.$hero;
     }
   }
 
@@ -111,37 +114,37 @@ input[type="range"].fwe-slider-input {
       box-shadow: 0px 0px 0px 8px rgba(0, 145, 220, 0.3);
     }
     &::-ms-thumb {
-      box-shadow: 0px 0px 0px 4px $hero, 0px 0px 0px 12px rgba(0, 145, 220, 0.3) !important;
+      box-shadow: 0px 0px 0px 4px variables.$hero, 0px 0px 0px 12px rgba(0, 145, 220, 0.3) !important;
     }
   }
 
   &:disabled {
     &::-webkit-slider-runnable-track {
-      background: $control-disabled;
+      background: variables.$control-disabled;
     }
     &::-moz-range-track {
-      background: $control-disabled;
+      background: variables.$control-disabled;
     }
     &::-moz-range-progress {
-      background: $control;
+      background: variables.$control;
     }
     &::-ms-fill-lower {
-      background: $control;
+      background: variables.$control;
     }
     &::-ms-fill-upper {
-      background: $control-disabled;
+      background: variables.$control-disabled;
     }
 
     &::-webkit-slider-thumb {
       cursor: auto;
-      background: $control;
+      background: variables.$control;
     }
     &::-moz-range-thumb {
-      background: $control;
+      background: variables.$control;
     }
     &::-ms-thumb {
-      background: $control;
-      border: 1px solid $control;
+      background: variables.$control;
+      border: 1px solid variables.$control;
     }
   }
 }