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

package/scss/_snackbar.scss

@@ -1,10 +1,13 @@
+@use "sass:map";
+@use "variables";
+
 .fwe-snackbar {
-  padding: $spacer-xs;
-  background-color: $hero-bg;
-  border: 1px solid $hero;
-  border-radius: $control-border-radius;
+  padding: variables.$spacer-xs;
+  background-color: variables.$hero-bg;
+  border: 1px solid variables.$hero;
+  border-radius: variables.$control-border-radius;
   margin: auto;
-  margin-bottom: $spacer-m;
+  margin-bottom: variables.$spacer-m;
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -19,7 +22,7 @@
   }
 
   &.fwe-snackbar-shadow {
-    box-shadow: $control-box-shadow;
+    box-shadow: variables.$control-box-shadow;
   }
 
   .fwe-snackbar-close-btn {
@@ -29,13 +32,13 @@
     width: 24px;
     min-width: 24px;
     cursor: pointer;
-    background: $hero;
+    background: variables.$hero;
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE2Ljk1IDguNDY0IDE1LjUzNiA3LjA1IDEyIDEwLjU4NiA4LjQ2NCA3LjA1IDcuMDUgOC40NjQgMTAuNTg2IDEyIDcuMDUgMTUuNTM2bDEuNDE0IDEuNDE0TDEyIDEzLjQxNGwzLjUzNiAzLjUzNiAxLjQxNC0xLjQxNEwxMy40MTQgMTJsMy41MzYtMy41MzZ6Ii8+PC9zdmc+");
   }
 
   .fwe-snackbar-link-btn {
     background: none;
-    color: $hero;
+    color: variables.$hero;
     border: none;
     padding: 0px 12px;
     cursor: pointer;
@@ -60,44 +63,44 @@
 
   &.fwe-snackbar-info {
     span::before {
-      background-color: $hero;
+      background-color: variables.$hero;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIvPjwvZz48L3N2Zz4=");
     }
   }
 
   &.fwe-snackbar-warning {
-    border-color: $orange;
-    background-color: $orange-bg;
+    border-color: variables.$orange;
+    background-color: variables.$orange-bg;
     span::before {
-      background-color: $orange;
+      background-color: variables.$orange;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
     }
     .fwe-snackbar-close-btn {
-      background-color: $orange;
+      background-color: variables.$orange;
     }
     .fwe-snackbar-separator {
-      background-color: $orange;
+      background-color: variables.$orange;
     }
     .fwe-snackbar-link-btn {
-      color: $orange;
+      color: variables.$orange;
     }
   }
 
   &.fwe-snackbar-error {
-    border-color: $red;
-    background-color: $red-bg;
+    border-color: variables.$red;
+    background-color: variables.$red-bg;
     span::before {
-      background-color: $red;
+      background-color: variables.$red;
       mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
     }
     .fwe-snackbar-close-btn {
-      background-color: $red;
+      background-color: variables.$red;
     }
     .fwe-snackbar-separator {
-      background-color: $red;
+      background-color: variables.$red;
     }
     .fwe-snackbar-link-btn {
-      color: $red;
+      color: variables.$red;
     }
   }
 
@@ -105,82 +108,82 @@
     height: 24px;
     width: 1px;
     margin: 0px 12px;
-    background: $hero;
+    background: variables.$hero;
   }
 
   &.fwe-snackbar-b {
     border: none;
-    background-color: $white;
+    background-color: variables.$white;
 
     span::before {
-      background-color: $text;
+      background-color: variables.$text;
     }
 
     .fwe-snackbar-close-btn {
-      background-color: $text;
+      background-color: variables.$text;
       &:hover {
-        background-color: $hero-hover;
+        background-color: variables.$hero-hover;
       }
     }
     .fwe-snackbar-separator {
-      background-color: $text;
+      background-color: variables.$text;
     }
     .fwe-snackbar-link-btn {
-      color: $hero;
+      color: variables.$hero;
       &:hover {
-        color: $hero-hover;
+        color: variables.$hero-hover;
       }
     }
   }
 
   &.fwe-snackbar-c {
     border: none;
-    color: $white;
-    background-color: $hero;
+    color: variables.$white;
+    background-color: variables.$hero;
 
     &.fwe-snackbar-warning {
-      background-color: $orange;
+      background-color: variables.$orange;
     }
 
     &.fwe-snackbar-error {
-      background-color: $red;
+      background-color: variables.$red;
     }
 
     span::before {
-      background-color: $white;
+      background-color: variables.$white;
     }
 
     .fwe-snackbar-close-btn {
-      background-color: $white;
+      background-color: variables.$white;
 
       &:hover {
-        background-color: $background;
+        background-color: variables.$background;
       }
     }
     .fwe-snackbar-separator {
-      background-color: $white;
+      background-color: variables.$white;
     }
     .fwe-snackbar-link-btn {
-      color: $white;
+      color: variables.$white;
       &:hover {
-        color: $background;
+        color: variables.$background;
       }
     }
   }
 }
 
 .fwe-snackbar-container {
-  padding-left: $spacer-m;
-  padding-right: $spacer-m;
+  padding-left: variables.$spacer-m;
+  padding-right: variables.$spacer-m;
   max-width: 1000px;
   position: fixed;
-  z-index: $zindex-modal;
+  z-index: variables.$zindex-modal;
   bottom: 0;
   left: 50%;
   width: 100%;
   transform: translateX(-50%);
-  @media (max-width: map-get($grid-breakpoints,sm)) {
-    padding-left: $spacer-xxs;
-    padding-right: $spacer-xxs;
+  @media (max-width: map.get(variables.$grid-breakpoints,sm)) {
+    padding-left: variables.$spacer-xxs;
+    padding-right: variables.$spacer-xxs;
   }
 }

package/scss/_spacing.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "utils";
+@use "variables";
+
 @mixin spacings($spacers, $infix: "") {
   @each $spacing, $space in $spacers {
     @each $property, $abrev in (margin: "fwe-m", padding: "fwe-p") {
@@ -33,15 +37,15 @@
   }
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @if $size == 0 {
-    @include spacings($spacers);
+    @include spacings(variables.$spacers);
   } @else {
     @media (min-width: $size) {
-      @include spacings($spacers, $infix);
+      @include spacings(variables.$spacers, $infix);
     }
   }
 }

package/scss/_stepper-horizontal.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .fwe-stepper-horizontal {
   width: 100%;
   height: 54px;
@@ -19,7 +21,7 @@
       left: 4px;
       right: 28px;
       top: 11px;
-      background: $text-disabled;
+      background: variables.$text-disabled;
       transition: background-color 0.3s, color 0.3s;
     }
     .fwe-step {
@@ -27,51 +29,51 @@
       padding-bottom: 1px;
       position: relative;
       border-radius: 50%;
-      border: 2px solid $text-disabled;
+      border: 2px solid variables.$text-disabled;
       width: 24px;
       height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-feature-settings: $font-feature-settings;
-      font-variant-numeric: $font-variant-numeric;
+      font-feature-settings: variables.$font-feature-settings;
+      font-variant-numeric: variables.$font-variant-numeric;
       transition: border-color 0.3s, background-color 0.3s, color 0.3s;
 
       .fwe-step-no {
-        color: $text-disabled;
-        font-size: $font-size-md;
-        font-weight: $font-weight-bold;
+        color: variables.$text-disabled;
+        font-size: variables.$font-size-md;
+        font-weight: variables.$font-weight-bold;
       }
 
       .fwe-step-name {
-        font-family: $font-family-base;
-        @media (max-width: 900px) {
-          display: none;
-        }
-        font-size: $font-size-md;
+        font-family: variables.$font-family-base;
+        font-size: variables.$font-size-md;
         position: absolute;
         top: 30px;
         left: 50%;
         transform: translateX(-50%);
-        color: $text-disabled;
+        color: variables.$text-disabled;
         white-space: pre;
         transition: color 0.3s;
+        @media (max-width: 900px) {
+          display: none;
+        }
       }
     }
 
     &.fwe-step-active,
     &.fwe-step-done {
       &::after {
-        background: $hero;
+        background: variables.$hero;
       }
       .fwe-step {
-        background: $hero;
-        border-color: $hero;
+        background: variables.$hero;
+        border-color: variables.$hero;
         .fwe-step-no {
           color: #ffffff;
         }
         .fwe-step-name {
-          color: $hero;
+          color: variables.$hero;
         }
       }
     }
@@ -79,7 +81,7 @@
     &.fwe-step-active {
       .fwe-step {
         .fwe-step-name {
-          font-weight: $font-weight-bold;
+          font-weight: variables.$font-weight-bold;
         }
       }
     }
@@ -88,8 +90,8 @@
       .fwe-step {
         cursor: pointer;
         &:hover {
-          background: $hero-active;
-          border-color: $hero-active;
+          background: variables.$hero-active;
+          border-color: variables.$hero-active;
         }
         .fwe-step-no {
           display: none;

package/scss/_stepper-vertical.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 $vertical-step-height: 300px;
 
 .fwe-stepper-vertical {
@@ -16,7 +18,7 @@ $vertical-step-height: 300px;
       padding-bottom: 1px;
       position: relative;
       border-radius: 50%;
-      border: 2px solid $text-disabled;
+      border: 2px solid variables.$text-disabled;
       width: 24px;
       height: 24px;
       display: flex;
@@ -25,17 +27,17 @@ $vertical-step-height: 300px;
       transition: border-color 0.3s, background-color 0.3s, color 0.3s;
 
       .fwe-step-no {
-        color: $text-disabled;
-        font-size: $font-size-md;
-        font-weight: $font-weight-bold;
+        color: variables.$text-disabled;
+        font-size: variables.$font-size-md;
+        font-weight: variables.$font-weight-bold;
       }
 
       .fwe-step-name {
-        font-family: $font-family-base;
-        font-size: $font-size-md;
+        font-family: variables.$font-family-base;
+        font-size: variables.$font-size-md;
         position: absolute;
         left: 36px;
-        color: $text-disabled;
+        color: variables.$text-disabled;
         white-space: pre;
         transition: color 0.3s;
       }
@@ -52,7 +54,7 @@ $vertical-step-height: 300px;
       transition: height 0.3s;
       margin-top: 4px;
       margin-bottom: 4px;
-      border-left: 2px solid $text-disabled;
+      border-left: 2px solid variables.$text-disabled;
       padding-left: 26px;
       margin-left: 11px;
       text-align: left;
@@ -63,16 +65,16 @@ $vertical-step-height: 300px;
     &.fwe-step-active,
     &.fwe-step-done {
       .fwe-step-content-container {
-        border-color: $hero;
+        border-color: variables.$hero;
       }
       .fwe-step {
-        background: $hero;
-        border-color: $hero;
+        background: variables.$hero;
+        border-color: variables.$hero;
         .fwe-step-no {
-          color: $white;
+          color: variables.$white;
         }
         .fwe-step-name {
-          color: $hero;
+          color: variables.$hero;
         }
       }
     }
@@ -86,7 +88,7 @@ $vertical-step-height: 300px;
       }
       .fwe-step {
         .fwe-step-name {
-          font-weight: $font-weight-bold;
+          font-weight: variables.$font-weight-bold;
         }
       }
     }
@@ -95,8 +97,8 @@ $vertical-step-height: 300px;
       .fwe-step {
         cursor: pointer;
         &:hover {
-          background: $hero-active;
-          border-color: $hero-active;
+          background: variables.$hero-active;
+          border-color: variables.$hero-active;
         }
         .fwe-step-no {
           display: none;

package/scss/_switch.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 $defaultHeight: 16px;
 $lgHeight: 24px;
 
@@ -38,7 +40,7 @@ label.fwe-switch {
     height: $defaultHeight;
     width: $defaultHeight * 2;
     border: none;
-    background-color: $control-border;
+    background-color: variables.$control-border;
     border-radius: $defaultHeight * 0.5;
     margin-top: 4px;
     margin-bottom: 4px;
@@ -49,7 +51,7 @@ label.fwe-switch {
       left: 3px;
       height: $defaultHeight - 6px;
       width: $defaultHeight - 6px;
-      background: $white;
+      background: variables.$white;
       border-radius: 50%;
       transition: left 0.2s;
     }
@@ -98,35 +100,35 @@ label.fwe-switch {
     position: absolute;
 
     &:hover ~ .fwe-switch-track {
-      background-color: $control-border-hover;
+      background-color: variables.$control-border-hover;
     }
 
     &:active ~ .fwe-switch-track {
-      background-color: $control-border-active;
+      background-color: variables.$control-border-active;
     }
 
     &:checked ~ .fwe-switch-track {
-      background-color: $caerul;
+      background-color: variables.$caerul;
       &:after {
         left: $defaultHeight + 3px;
       }
     }
 
     &:hover:checked ~ .fwe-switch-track {
-      background-color: $hero-hover;
+      background-color: variables.$hero-hover;
     }
 
     &:active:checked ~ .fwe-switch-track {
-      background-color: $hero-active;
+      background-color: variables.$hero-active;
     }
 
     &:disabled ~ .fwe-switch-track {
-      background-color: $control-disabled;
+      background-color: variables.$control-disabled;
       cursor: not-allowed;
     }
 
     &:disabled:checked ~ .fwe-switch-track {
-      background-color: $hero-bg;
+      background-color: variables.$hero-bg;
       cursor: not-allowed;
     }
 
@@ -135,7 +137,7 @@ label.fwe-switch {
     }
 
     &:disabled ~ .fwe-switch-label-content {
-      color: $text-disabled;
+      color: variables.$text-disabled;
       cursor: not-allowed;
     }
   }

package/scss/_table.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .fwe-table-responsive {
   display: block;
   width: 100%;
@@ -10,13 +12,13 @@ table.fwe-table {
 
   tr {
     th {
-      background-color: $white;
-      border-bottom: 2px solid $background;
+      background-color: variables.$white;
+      border-bottom: 2px solid variables.$background;
       padding-top: 18px;
       padding-bottom: 9px;
       padding-left: 16px;
       padding-right: 16px;
-      font-size: $font-size-md;
+      font-size: variables.$font-size-md;
       text-align: left;
       vertical-align: text-bottom;
 
@@ -25,9 +27,9 @@ table.fwe-table {
         user-select: none;
         white-space: nowrap;
         direction: rtl;
-        font-family: $font-family-base;
+        font-family: variables.$font-family-base;
         display: table-cell;
-        font-size: $font-size-md;
+        font-size: variables.$font-size-md;
 
         &::before {
           content: "";
@@ -37,7 +39,7 @@ table.fwe-table {
           background-size: cover;
           position: relative;
           top: 2px;
-          left: $spacer-xs;
+          left: variables.$spacer-xs;
         }
 
         &::before {
@@ -58,7 +60,7 @@ table.fwe-table {
       }
 
       &.fwe-active {
-        color: $hero;
+        color: variables.$hero;
       }
     }
 
@@ -75,8 +77,8 @@ table.fwe-table {
         white-space: nowrap;
       }
 
-      background-color: $white;
-      border-bottom: 2px solid $background;
+      background-color: variables.$white;
+      border-bottom: 2px solid variables.$background;
       padding-top: 12px;
       padding-bottom: 12px;
       padding-left: 16px;

package/scss/_text-input.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 label.fwe-input-text {
   position: relative;
   display: flex;
@@ -9,10 +11,10 @@ label.fwe-input-text {
   .fwe-input-text-label {
     height: 18px;
     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;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -23,15 +25,15 @@ label.fwe-input-text {
     position: absolute;
     top: 51px;
     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-input-text-invalid {
     @extend .fwe-input-text-info;
     display: none;
-    color: $red;
+    color: variables.$red;
   }
 
   input[type="text"],
@@ -49,7 +51,7 @@ label.fwe-input-text {
     background: none;
     border-bottom-width: 1px;
     border-bottom-style: solid;
-    border-color: $control-border;
+    border-color: variables.$control-border;
     width: 100%;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -59,25 +61,25 @@ label.fwe-input-text {
     }
 
     &::placeholder {
-      color: $text-disabled;
+      color: variables.$text-disabled;
     }
 
     &:hover:valid:not(:disabled) {
-      border-color: $hero;
+      border-color: variables.$hero;
     }
 
     &:hover:not(:disabled) {
-      color: $hero;
+      color: variables.$hero;
     }
 
     &:focus {
       outline: none;
-      border-color: $hero;
-      color: $text !important;
+      border-color: variables.$hero;
+      color: variables.$text !important;
     }
 
     &:invalid {
-      border-color: $red;
+      border-color: variables.$red;
       & ~ .fwe-input-text-info {
         display: none;
       }
@@ -88,16 +90,16 @@ label.fwe-input-text {
 
     &:disabled {
       background: none;
-      color: $text-disabled;
-      border-color: $control-disabled;
+      color: variables.$text-disabled;
+      border-color: variables.$control-disabled;
 
       & ~ .fwe-input-text-label,
       & ~ .fwe-input-text-invalid,
       & ~ .fwe-input-text-info {
-        color: $text-disabled;
+        color: variables.$text-disabled;
 
         &::before {
-          color: $text-disabled;
+          color: variables.$text-disabled;
         }
       }
     }
@@ -113,13 +115,13 @@ label.fwe-input-text {
       color: transparent;
       background: none;
       display: block;
-      font-family: $font-family-icons-16;
+      font-family: variables.$font-family-icons-16;
       width: 16px;
       height: 16px;
       position: absolute;
       top: 6px;
       right: 0px;
-      color: $text;
+      color: variables.$text;
     }
     &::-webkit-calendar-picker-indicator {
       color: transparent;
@@ -150,7 +152,7 @@ label.fwe-input-text {
     @for $i from 2 through 10 {
       &.fwe-row-#{$i} {
         // height = rowcount * rowheight + margin-top + margin-bottom + 1px-line
-        height: calc(#{$i} * #{$textarea-row-const});
+        height: calc(#{$i} * #{variables.$textarea-row-const});
       }
     }