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

package/dist/scss/_accordion.scss

@@ -1,29 +1,31 @@
+@use "variables";
+
 .fwe-accordion {
-  background-color: $white;
+  background-color: variables.$white;
 
   &-header {
     display: flex;
     align-items: center;
-    height: $spacer-xl;
-    padding: 0 $spacer-s 0 $spacer-m;
-    font-size: $font-size-md;
-    font-weight: $font-weight-bold;
-    color: $text;
-    border-bottom: 1px solid $gray-100;
+    height: variables.$spacer-xl;
+    padding: 0 variables.$spacer-s 0 variables.$spacer-m;
+    font-size: variables.$font-size-md;
+    font-weight: variables.$font-weight-bold;
+    color: variables.$text;
+    border-bottom: 1px solid variables.$gray-100;
   }
 
   &-item {
     position: relative;
-    padding: 0 $spacer-s 0 $spacer-m;
-    border-top: 1px solid $gray-100;
-    border-bottom: 1px solid $gray-100;
+    padding: 0 variables.$spacer-s 0 variables.$spacer-m;
+    border-top: 1px solid variables.$gray-100;
+    border-bottom: 1px solid variables.$gray-100;
 
     &-header {
       outline: none;
       display: flex;
       align-items: center;
-      padding: $spacer-m $spacer-xxl $spacer-m 0;
-      min-height: $spacer-xl;
+      padding: variables.$spacer-m variables.$spacer-xxl variables.$spacer-m 0;
+      min-height: variables.$spacer-xl;
       cursor: pointer;
     }
 
@@ -37,28 +39,28 @@
       left: 0;
       display: block;
       content: "";
-      width: $spacer-xxxs;
+      width: variables.$spacer-xxxs;
       height: 0px;
-      background-color: $caerul;
+      background-color: variables.$caerul;
     }
 
     &::after {
       position: absolute;
       top: 21px;
-      right: $spacer-s;
+      right: variables.$spacer-s;
       display: block;
-      font-family: $font-family-icons-32;
-      font-size: $font-size-xxl;
+      font-family: variables.$font-family-icons-32;
+      font-size: variables.$font-size-xxl;
       content: "\e900";
-      height: $spacer-l;
-      line-height: $spacer-l;
+      height: variables.$spacer-l;
+      line-height: variables.$spacer-l;
       transition: transform 0.2s ease;
       pointer-events: none;
     }
 
     &[open] {
       .fwe-accordion-item-header {
-        font-weight: $font-weight-bold;
+        font-weight: variables.$font-weight-bold;
       }
 
       &::after {
@@ -71,13 +73,13 @@
     }
 
     &:not([open]) .fwe-accordion-item-header {
-      font-weight: $font-weight-normal;
+      font-weight: variables.$font-weight-normal;
     }
 
     &-body {
       overflow: hidden;
       margin-right: 0;
-      margin-bottom: $spacer-m;
+      margin-bottom: variables.$spacer-m;
 
       > :first-child {
         margin-top: 0 !important;
@@ -96,11 +98,11 @@
   }
 }
 
-@media (min-width: $grid-breakpoint-xs) {
+@media (min-width: variables.$grid-breakpoint-xs) {
   .fwe-accordion {
     &-item {
       &-body {
-        margin-right: $spacer-xxl;
+        margin-right: variables.$spacer-xxl;
       }
     }
   }

package/dist/scss/_badge.scss

@@ -1,46 +1,48 @@
+@use "variables";
+
 .fwe-badge {
   display: inline-block;
   border-radius: 2px;
-  font-size: $font-size-md;
+  font-size: variables.$font-size-md;
   padding-left: 6px;
   padding-right: 6px;
-  color: $white;
+  color: variables.$white;
   max-height: 19px;
   height: 19px;
   line-height: 17px;
-  background-color: $hero;
-  font-weight: $font-weight-bold;
+  background-color: variables.$hero;
+  font-weight: variables.$font-weight-bold;
 
   &.fwe-badge-sm {
-    font-size: $font-size-small;
+    font-size: variables.$font-size-small;
     max-height: 17px;
     height: 17px;
     line-height: 16px;
   }
 
   &.fwe-badge-md {
-    font-size: $font-size-base;
+    font-size: variables.$font-size-base;
     max-height: 22px;
     height: 22px;
     line-height: 20px;
   }
 
   &.fwe-badge-lg {
-    font-size: $font-size-xl;
+    font-size: variables.$font-size-xl;
     max-height: 32px;
     height: 32px;
     line-height: 30px;
   }
 
   &.fwe-badge-xl {
-    font-size: $font-size-xxl;
+    font-size: variables.$font-size-xxl;
     max-height: 44px;
     height: 44px;
     line-height: 42px;
   }
 }
 
-@each $key, $value in $badge-colors {
+@each $key, $value in variables.$badge-colors {
   .fwe-badge-#{$key} {
     background-color: $value !important;
   }

package/dist/scss/_border.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "utils";
+@use "variables";
+
 @function border-name($borderKey) {
   @return if($borderKey != 0, "-#{$borderKey}", null);
 }
@@ -68,15 +72,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 borders($borders);
+    @include borders(variables.$borders);
   } @else {
     @media (min-width: $size) {
-      @include borders($borders, $infix);
+      @include borders(variables.$borders, $infix);
     }
   }
 }

package/dist/scss/_bottom-navigation.scss

@@ -1,10 +1,12 @@
+@use "variables";
+
 .fwe-bottom-navigation {
   width: 100%;
   display: flex;
-  background: $white;
+  background: variables.$white;
   align-items: flex-start;
   justify-content: space-around;
-  border-top: 1px solid $border;
+  border-top: 1px solid variables.$border;
   height: 84px;
   padding: 22px 16px;
   .fwe-bottom-navigation-button {
@@ -18,7 +20,7 @@
     background: none;
     border: none;
     outline: none;
-    color: $hero-gray;
+    color: variables.$hero-gray;
     position: relative;
     :after {
       content: "";
@@ -27,18 +29,18 @@
       left: 0px;
       right: 0px;
       height: 0px;
-      background: $hero;
+      background: variables.$hero;
       transition: height 0.3s ease;
     }
     &.fwe-selected {
-      color: $hero;
+      color: variables.$hero;
       cursor: default;
       :after {
         height: 4px;
       }
     }
     &:active {
-      color: $hero-active;
+      color: variables.$hero-active;
     }
   }
 }

package/dist/scss/_bottom-sheet.scss

@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
 .fwe-bottom-sheet {
   &-header {
     position: relative;
@@ -16,31 +19,31 @@
   }
 
   &-drag-handle {
-    width: $spacer-l;
-    height: $spacer-xxxs;
-    background-color: $hero-gray;
+    width: variables.$spacer-l;
+    height: variables.$spacer-xxxs;
+    background-color: variables.$hero-gray;
     border-radius: 3px;
-    margin: $spacer 0;
+    margin: variables.$spacer 0;
   }
 
   &-toggle-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    left: $spacer-s;
+    left: variables.$spacer-s;
   }
 
   &-close-btn {
-    width: $spacer-m;
-    height: $spacer-m;
+    width: variables.$spacer-m;
+    height: variables.$spacer-m;
     position: absolute;
     right: 20px;
     top: 20px;
     padding: 0;
     border: none;
-    min-width: $spacer-m;
+    min-width: variables.$spacer-m;
     cursor: pointer;
-    background: $text;
+    background: variables.$text;
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
   }
 
@@ -50,7 +53,7 @@
     left: 0;
 
     background: rgba(0, 0, 0, 0.5);
-    z-index: $zindex-modal-backdrop;
+    z-index: variables.$zindex-modal-backdrop;
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 
@@ -66,10 +69,10 @@
     bottom: 0;
     left: 50%;
     right: 50%;
-    background: $white;
+    background: variables.$white;
     box-shadow: 0px 1px 8px #33333333;
-    z-index: $zindex-modal;
-    border-radius: $spacer-xs $spacer-xs 0 0;
+    z-index: variables.$zindex-modal;
+    border-radius: variables.$spacer-xs variables.$spacer-xs 0 0;
     overflow: hidden;
     opacity: 0;
     max-width: 768px;
@@ -105,9 +108,9 @@
   }
 
   &-content {
-    padding: $spacer $spacer-l;
-    height: calc(100% - $spacer-l);
+    padding: variables.$spacer variables.$spacer-l;
+    height: calc(100% - variables.$spacer-l);
     overflow-y: auto;
-    @include custom-scrollbar;
+    @include mixins.custom-scrollbar;
   }
 }

package/dist/scss/_breadcrumb.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .fwe-breadcrumb {
   display: flex;
   flex-wrap: wrap;
@@ -8,20 +10,20 @@
     display: flex;
     align-items: center;
     min-height: 24px;
-    color: $text;
+    color: variables.$text;
     text-decoration: none;
     user-select: none;
-    font-size: $font-size-md;
-    line-height: calc(#{$font-size-md} + 2px);
+    font-size: variables.$font-size-md;
+    line-height: calc(#{variables.$font-size-md} + 2px);
     &:focus {
       outline: none;
     }
     &:not(:last-child) {
       &:hover {
-        color: $hero;
+        color: variables.$hero;
       }
       &:active {
-        color: $hero-active;
+        color: variables.$hero-active;
       }
       cursor: pointer;
       &::after {

package/dist/scss/_button.scss

@@ -1,3 +1,6 @@
+@use "variables";
+@use "icons";
+
 a.fwe-btn,
 button.fwe-btn {
   line-height: normal;
@@ -6,13 +9,13 @@ button.fwe-btn {
   align-items: center;
   text-align: center;
   justify-content: center;
-  font-family: $font-family-base;
-  font-size: $font-size-base;
+  font-family: variables.$font-family-base;
+  font-size: variables.$font-size-base;
   padding: 4px 16px;
   min-height: 32px;
-  color: $text;
-  background: $control;
-  border-radius: $control-border-radius;
+  color: variables.$text;
+  background: variables.$control;
+  border-radius: variables.$control-border-radius;
   cursor: pointer;
   border: none;
 
@@ -23,12 +26,12 @@ button.fwe-btn {
   }
 
   &:hover {
-    color: $text;
-    background: $control-hover;
+    color: variables.$text;
+    background: variables.$control-hover;
   }
 
   &:active {
-    background: $control-active;
+    background: variables.$control-active;
   }
 
   &:focus {
@@ -38,27 +41,27 @@ button.fwe-btn {
   &:disabled,
   &.fwe-disabled {
     cursor: default;
-    background: $control-disabled;
-    color: $text-disabled;
+    background: variables.$control-disabled;
+    color: variables.$text-disabled;
   }
 
   &.fwe-btn-hero {
-    color: $white;
-    background: $hero;
+    color: variables.$white;
+    background: variables.$hero;
 
     &:hover {
-      color: $white;
-      background: $hero-hover;
+      color: variables.$white;
+      background: variables.$hero-hover;
     }
 
     &:active {
-      background: $hero-active;
+      background: variables.$hero-active;
     }
 
     &:disabled,
     &.fwe-disabled {
-      background: $control-disabled;
-      color: $text-disabled;
+      background: variables.$control-disabled;
+      color: variables.$text-disabled;
     }
   }
 
@@ -68,7 +71,7 @@ button.fwe-btn {
 
   &.fwe-btn-link {
     background: none;
-    color: $hero;
+    color: variables.$hero;
     padding: 0;
 
     i[class^="fwe-icon-"],
@@ -78,22 +81,22 @@ button.fwe-btn {
     }
 
     &.fwe-dark {
-      color: $text;
+      color: variables.$text;
     }
 
     &:hover {
       background: none;
-      color: $hero-hover;
+      color: variables.$hero-hover;
     }
 
     &:active {
       background: none;
-      color: $hero-hover;
+      color: variables.$hero-hover;
     }
 
     &:disabled,
     &.fwe-disabled {
-      color: $text-disabled;
+      color: variables.$text-disabled;
     }
   }
 

package/dist/scss/_cards.scss

@@ -1,9 +1,11 @@
+@use "variables";
+
 .fwe-card {
   display: flex;
   flex-direction: column;
-  border: 1px solid $border;
-  background-color: $white;
-  border-radius: $border-radius-m;
+  border: 1px solid variables.$border;
+  background-color: variables.$white;
+  border-radius: variables.$border-radius-m;
 
   .fwe-card-img {
     width: 100%;
@@ -36,8 +38,8 @@
 
     .fwe-card-title {
       h5 {
-        line-height: $font-size-xl;
-        font-size: $font-size-xl;
+        line-height: variables.$font-size-xl;
+        font-size: variables.$font-size-xl;
         margin: 0;
         padding: 0;
       }
@@ -45,8 +47,8 @@
       p {
         padding: 0;
         margin: 0;
-        color: $text-light;
-        font-size: $font-size-md;
+        color: variables.$text-light;
+        font-size: variables.$font-size-md;
       }
     }
   }
@@ -81,9 +83,9 @@
       padding-left: 16px;
 
       h6 {
-        line-height: $font-size-base;
-        font-size: $font-size-base;
-        font-weight: $font-weight-bold;
+        line-height: variables.$font-size-base;
+        font-size: variables.$font-size-base;
+        font-weight: variables.$font-weight-bold;
         margin: 0;
         padding: 0;
       }
@@ -91,7 +93,7 @@
       p {
         padding: 0;
         margin: 0;
-        color: $text;
+        color: variables.$text;
       }
     }
   }

package/dist/scss/_checkbox.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 $defaultHeight: 16px;
 $defaultWidth: 16px;
 $lgHeight: 24px;
@@ -26,7 +28,7 @@ $lgWidth: 24px;
   min-height: $lgHeight;
   width: $lgWidth;
   min-width: $lgWidth;
-  border-radius: $border-radius-s;
+  border-radius: variables.$border-radius-s;
   &:before {
     height: 18px;
     width: 18px;
@@ -77,7 +79,7 @@ label.fwe-checkbox {
     width: $defaultWidth;
     min-width: $defaultWidth;
     border-radius: 2px;
-    border: 1px solid $control-border;
+    border: 1px solid variables.$control-border;
     background-color: white;
     &::before {
       content: "";
@@ -114,11 +116,11 @@ label.fwe-checkbox {
     cursor: pointer;
 
     &:hover ~ .fwe-checkbox-checkmark {
-      background-color: $control;
+      background-color: variables.$control;
     }
 
     &:active ~ .fwe-checkbox-checkmark {
-      background-color: $control-hover;
+      background-color: variables.$control-hover;
     }
 
     &:indeterminate ~ .fwe-checkbox-checkmark {
@@ -129,20 +131,20 @@ label.fwe-checkbox {
 
     &:checked ~ .fwe-checkbox-checkmark,
     &:indeterminate ~ .fwe-checkbox-checkmark {
-      background-color: $hero;
-      border-color: $hero;
+      background-color: variables.$hero;
+      border-color: variables.$hero;
     }
 
     &:hover:checked:not(:disabled) ~ .fwe-checkbox-checkmark,
     &:hover:indeterminate:not(:disabled) ~ .fwe-checkbox-checkmark {
-      background-color: $hero-hover;
-      border-color: $hero-hover;
+      background-color: variables.$hero-hover;
+      border-color: variables.$hero-hover;
     }
 
     &:active:checked:not(:disabled) ~ .fwe-checkbox-checkmark,
     &:active:indeterminate:not(:disabled) ~ .fwe-checkbox-checkmark {
-      background-color: $hero-active;
-      border-color: $hero-active;
+      background-color: variables.$hero-active;
+      border-color: variables.$hero-active;
     }
 
     &:checked ~ .fwe-checkbox-checkmark:before,
@@ -151,15 +153,15 @@ label.fwe-checkbox {
     }
 
     &:disabled ~ .fwe-checkbox-checkmark {
-      background-color: $white;
-      border-color: $control-disabled;
+      background-color: variables.$white;
+      border-color: variables.$control-disabled;
       cursor: not-allowed;
     }
 
     &:disabled:checked ~ .fwe-checkbox-checkmark,
     &:disabled:indeterminate ~ .fwe-checkbox-checkmark {
-      background-color: $control-disabled;
-      border-color: $control-disabled;
+      background-color: variables.$control-disabled;
+      border-color: variables.$control-disabled;
     }
 
     &:disabled {
@@ -167,12 +169,12 @@ label.fwe-checkbox {
     }
 
     &:disabled ~ .fwe-checkbox-label-content {
-      color: $text-disabled;
+      color: variables.$text-disabled;
       cursor: not-allowed;
     }
 
     &:invalid ~ .fwe-checkbox-checkmark {
-      border-color: $red;
+      border-color: variables.$red;
     }
   }
 }