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

package/scss/_grid.scss

@@ -1,9 +1,13 @@
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@use "sass:map";
+@use "utils";
+@use "variables";
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @media (min-width: $size) {
-    @for $i from 1 through $grid-columns {
+    @for $i from 1 through variables.$grid-columns {
       .fwe-col#{$infix}-#{$i} {
         grid-column-end: span $i;
       }
@@ -12,7 +16,7 @@
         grid-column-start: 1;
       }
 
-      @if $i < $grid-columns {
+      @if $i < variables.$grid-columns {
         .fwe-offset#{$infix}-#{$i} {
           grid-column-start: $i + 1;
         }
@@ -23,8 +27,8 @@
 
 .fwe-grid {
   display: grid;
-  grid-template-columns: repeat($grid-columns, 1fr);
-  gap: $grid-gap;
+  grid-template-columns: repeat(variables.$grid-columns, 1fr);
+  gap: variables.$grid-gap;
 
   &.fwe-no-gap {
     gap: 0px;

package/scss/_icons.scss

@@ -1,6 +1,8 @@
+@use "variables";
+
 .fwe-icon {
-  font-family: $font-family-icons-16; // this is needed to center the icons vertically
-  font-size: $font-size-base;
+  font-family: variables.$font-family-icons-16; // this is needed to center the icons vertically
+  font-size: variables.$font-size-base;
   display: inline-block;
   &:before {
     line-height: 1;
@@ -12,35 +14,35 @@
     text-transform: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: $font-family-icons-16;
+    font-family: variables.$font-family-icons-16;
   }
 }
 
 .fwe-icon-lg {
   font-size: 24px;
   &:before {
-    font-family: $font-family-icons-24 !important;
+    font-family: variables.$font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-2x {
   font-size: 32px;
   &:before {
-    font-family: $font-family-icons-32 !important;
+    font-family: variables.$font-family-icons-32 !important;
   }
 }
 
 .fwe-icon-3x {
   font-size: 48px;
   &:before {
-    font-family: $font-family-icons-24 !important;
+    font-family: variables.$font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-4x {
   font-size: 64px;
   &:before {
-    font-family: $font-family-icons-32 !important;
+    font-family: variables.$font-family-icons-32 !important;
   }
 }
 

package/scss/_layout.scss

@@ -1,12 +1,15 @@
+@use "sass:map";
+@use "variables";
+
 .fwe-container {
-  padding: $container-padding;
+  padding: variables.$container-padding;
   box-sizing: border-box;
   width: 100%;
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $padding: map-get($container-paddings, $breakpoint);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $padding: map.get(variables.$container-paddings, $breakpoint);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @if $size != 0 {
     @media (min-width: $size) {
@@ -26,15 +29,15 @@
     max-width: 1920px - 128;
     margin-right: 64px;
     margin-left: 64px;
-    @media (max-width: $grid-breakpoint-lg) {
+    @media (max-width: variables.$grid-breakpoint-lg) {
       margin-right: 32px;
       margin-left: 32px;
     }
-    @media (max-width: $grid-breakpoint-sm) {
+    @media (max-width: variables.$grid-breakpoint-sm) {
       margin-right: 16px;
       margin-left: 16px;
     }
-    @media (max-width: $grid-breakpoint-xs) {
+    @media (max-width: variables.$grid-breakpoint-xs) {
       margin-right: 8px;
       margin-left: 8px;
     }

package/scss/_list.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 ul.fwe-list-group {
   margin: 0;
   padding: 0;
@@ -44,7 +46,7 @@ ul.fwe-list-group {
       display: flex;
       flex-grow: 1;
       width: 100%;
-      font-weight: $font-weight-bold;
+      font-weight: variables.$font-weight-bold;
       margin-bottom: 24px;
       margin-top: 16px;
     }
@@ -56,7 +58,7 @@ ul.fwe-list-group {
 
     .fwe-list-group-item-footer {
       width: 100%;
-      font-size: $font-size-small;
+      font-size: variables.$font-size-small;
       margin-bottom: 16px;
     }
 
@@ -67,7 +69,7 @@ ul.fwe-list-group {
       bottom: 0;
       width: 1px;
       left: 0;
-      background-color: $hero;
+      background-color: variables.$hero;
       transform-origin: left top;
       transform: scaleX(0);
       transition: transform 0.3s;
@@ -79,25 +81,25 @@ ul.fwe-list-group {
       }
 
       .fwe-list-group-item-head {
-        color: $hero;
+        color: variables.$hero;
       }
     }
 
     &.fwe-disabled {
-      color: $text-disabled;
+      color: variables.$text-disabled;
       &::before {
-        background-color: $control-hover;
+        background-color: variables.$control-hover;
       }
     }
   }
 
   a.fwe-list-group-item {
     cursor: pointer;
-    color: $text;
+    color: variables.$text;
 
     &:not(.fwe-disabled):hover {
-      color: $text;
-      background-color: $sucanul;
+      color: variables.$text;
+      background-color: variables.$sucanul;
     }
   }
 
@@ -110,14 +112,14 @@ ul.fwe-list-group {
     cursor: pointer;
 
     &:not(.fwe-disabled):hover {
-      background-color: $sucanul;
+      background-color: variables.$sucanul;
     }
   }
 
   &.fwe-list-group-border {
     .fwe-list-group-item,
     button.fwe-list-group-item {
-      border-bottom: 1px solid $border;
+      border-bottom: 1px solid variables.$border;
       &:last-child {
         border-bottom: none;
       }
@@ -150,28 +152,28 @@ ul.fwe-list-group {
         right: 0;
         width: 100%;
         height: 1px;
-        background-color: $hero;
+        background-color: variables.$hero;
         transform-origin: center bottom;
         transform: scaleY(0);
         transition: transform 0.3s;
       }
 
       &.fwe-active {
-        color: $hero;
+        color: variables.$hero;
 
         &::before {
           transform: scaleY(4);
         }
 
         .fwe-list-group-item-head {
-          color: $hero;
+          color: variables.$hero;
         }
       }
 
       &.fwe-disabled {
-        color: $text-disabled;
+        color: variables.$text-disabled;
         &::before {
-          background-color: $control-hover;
+          background-color: variables.$control-hover;
         }
       }
     }
@@ -189,7 +191,7 @@ ul.fwe-list-group {
       width: auto;
 
       &:not(.fwe-disabled):hover {
-        color: $hero;
+        color: variables.$hero;
         background-color: unset;
       }
     }
@@ -200,7 +202,7 @@ ul.fwe-list-group {
   display: flex;
   align-items: center;
   padding: 14px 24px;
-  border-bottom: 1px solid $border;
+  border-bottom: 1px solid variables.$border;
 
   button {
     margin-left: auto;

package/scss/_loading-indicator.scss

@@ -1,10 +1,12 @@
+@use "variables";
+
 $spinner-duration: 3s;
 $pulsing-duration: 1s;
 
 @media (prefers-reduced-motion: reduce) {
   .fwe-waiting-circle-1 {
     animation: non-motion-animation $pulsing-duration infinite alternate !important;
-    border-color: $hero !important;
+    border-color: variables.$hero !important;
   }
 
   .fwe-waiting-circle-2,
@@ -23,7 +25,7 @@ $pulsing-duration: 1s;
   align-items: center;
   .fwe-waiting-content-container {
     margin-top: 12px;
-    color: $hero;
+    color: variables.$hero;
   }
 }
 
@@ -47,9 +49,9 @@ $pulsing-duration: 1s;
     position: absolute;
     width: 96px;
     height: 96px;
-    border: 8px solid $hero;
+    border: 8px solid variables.$hero;
     border-radius: 50%;
-    border-color: $hero transparent transparent transparent;
+    border-color: variables.$hero transparent transparent transparent;
   }
   .fwe-waiting-circle-1 {
     animation: fwe-wi-animation-1 $spinner-duration linear infinite;

package/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 @mixin firefox-only {
   @at-root {
     @-moz-document url-prefix() {
@@ -24,7 +26,7 @@
 @mixin custom-scrollbar {
   @-moz-document url-prefix() {
     scrollbar-width: thin;
-    scrollbar-color: $control-scrollbar transparent;
+    scrollbar-color: variables.$control-scrollbar transparent;
   }
   @media (pointer: fine) {
     &::-webkit-scrollbar {
@@ -37,7 +39,7 @@
 
     &::-webkit-scrollbar-thumb {
       overflow: visible;
-      background-color: $control-scrollbar;
+      background-color: variables.$control-scrollbar;
       // use $gray-100 with opacity 0 for effect of margins of scrollbar
       border: 3px solid rgba(242, 243, 245, 0);
       // hide the background with background clip

package/scss/_mobile-flyout.scss

@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
 .fwe-mobile-flyout {
   position: relative;
 
@@ -16,12 +19,12 @@
       display: block;
       height: 24px;
       width: 24px;
-      background-color: $text;
+      background-color: variables.$text;
     }
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         &::after {
-          background-color: $hero;
+          background-color: variables.$hero;
         }
       }
     }
@@ -43,20 +46,19 @@
   .fwe-mobile-flyout-container {
     position: fixed;
     display: flex;
-    top: $navbar-height;
+    top: variables.$navbar-height;
     left: 0px;
     width: 384px;
-    height: calc(100vh - #{$navbar-height});
-    background-color: $white;
+    height: calc(100vh - #{variables.$navbar-height});
+    background-color: variables.$white;
     flex-direction: column;
     box-shadow: 0px 1px 4px #00000029;
     overflow: hidden;
     transform: translateX(-105%);
-
-    @media (max-width: $grid-breakpoint-xs) {
+    transition: transform 0.3s ease;
+    @media (max-width: variables.$grid-breakpoint-xs) {
       width: 100% !important;
     }
-    transition: transform 0.3s ease;
     &.fwe-opened {
       transform: translateX(0%);
     }
@@ -64,7 +66,7 @@
 }
 
 .fwe-mobile-flyout-page {
-  background: $white;
+  background: variables.$white;
   position: absolute;
   left: 0;
   top: 0;
@@ -72,9 +74,9 @@
   bottom: 0;
   transform: translateX(100%);
   transition: transform 0.3s ease;
-  @include custom-scrollbar;
   overflow-x: hidden;
   overflow-y: auto;
+  @include mixins.custom-scrollbar;
 
   &.fwe-opened {
     transform: translateX(0%);
@@ -85,7 +87,7 @@
     height: 53px;
     display: flex;
     align-items: center;
-    background: $background;
+    background: variables.$background;
     position: relative;
     padding-left: 40px;
     &::after {
@@ -98,7 +100,7 @@
       background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMTZWMGgxNnYxNnoiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNMTAuMzU0IDQuMzU0IDYuNzA3IDhsMy42NDcgMy42NDYtLjcwOC43MDhMNS4yOTMgOGw0LjM1My00LjM1NC43MDguNzA4eiIvPjwvc3ZnPg==");
     }
     &:hover {
-      background: $control;
+      background: variables.$control;
     }
     div {
       margin-top: -1px;
@@ -108,19 +110,19 @@
 
   .fwe-mobile-flyout-item-container {
     padding: 24px;
-    @media (max-width: $grid-breakpoint-xs) {
+    @media (max-width: variables.$grid-breakpoint-xs) {
       padding: 16px;
     }
   }
 }
 
 .fwe-mobile-flyout-item {
-  color: $text;
+  color: variables.$text;
   cursor: pointer;
   display: flex;
   align-items: center;
   height: 56px;
   &.fwe-active {
-    color: $hero;
+    color: variables.$hero;
   }
 }

package/scss/_modal.scss

@@ -1,7 +1,10 @@
+@use "mixins";
+@use "variables";
+
 .fwe-modal {
-  padding: $spacer-xl;
-  z-index: $zindex-modal;
-  background-color: $white;
+  padding: variables.$spacer-xl;
+  z-index: variables.$zindex-modal;
+  background-color: variables.$white;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   position: relative;
   width: 92vw;
@@ -13,26 +16,26 @@
   overflow: hidden;
 
   .fwe-modal-body {
-    @include custom-scrollbar;
     overflow-x: hidden;
     overflow-y: auto;
+    @include mixins.custom-scrollbar;
   }
 
   &-h1 {
     margin-top: 0;
-    margin-bottom: $spacer-l;
-    margin-right: $spacer-l;
+    margin-bottom: variables.$spacer-l;
+    margin-right: variables.$spacer-l;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   &-h2 {
     margin-top: 0;
-    margin-bottom: $spacer-xs;
-    margin-right: $spacer-l;
-    font-size: $font-size-md;
+    margin-bottom: variables.$spacer-xs;
+    margin-right: variables.$spacer-l;
+    font-size: variables.$font-size-md;
     line-height: 18px;
-    font-weight: $font-weight-bold;
+    font-weight: variables.$font-weight-bold;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -41,18 +44,18 @@
 
   &-close-btn {
     position: absolute;
-    top: $spacer-l;
-    right: $spacer-l;
+    top: variables.$spacer-l;
+    right: variables.$spacer-l;
     width: 32px;
     height: 32px;
     padding: 0;
     border: none;
     min-width: 32px;
     cursor: pointer;
-    background: $text;
+    background: variables.$text;
     mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
     &:hover {
-      background: $hero;
+      background: variables.$hero;
     }
   }
 
@@ -66,7 +69,7 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-    margin-bottom: $spacer-l;
+    margin-bottom: variables.$spacer-l;
     p:first-child {
       margin-top: 0;
     }
@@ -78,18 +81,18 @@
   &-buttons {
     flex-shrink: 0;
     display: grid;
-    grid-column-gap: $spacer-xs;
+    grid-column-gap: variables.$spacer-xs;
     grid-auto-flow: column;
     grid-auto-columns: minmax(0, 1fr);
   }
 
   &--with-indicator-bar {
-    border-left: 8px solid $hero;
+    border-left: 8px solid variables.$hero;
 
     &.fwe-modal--warning,
     &.fwe-modal--error {
       button.fwe-btn.fwe-btn-link {
-        color: $text;
+        color: variables.$text;
       }
     }
   }
@@ -109,7 +112,7 @@
       }
     }
 
-    @media (max-width: $grid-breakpoint-xs), (max-height: $grid-breakpoint-xs) {
+    @media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
       .fwe-modal-h1 {
         padding-left: 32px;
         position: relative;
@@ -136,7 +139,7 @@
   }
 
   &--warning {
-    border-color: $orange;
+    border-color: variables.$orange;
     .fwe-modal-h2::before {
       background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTE1LjIxNiAxMy41MyA4Ljg4MiAxLjY1M2ExIDEgMCAwIDAtMS43NjQgMEwuNzg0IDEzLjUzQTEgMSAwIDAgMCAxLjY2NyAxNWgxMi42NjZhMSAxIDAgMCAwIC44ODMtMS40N1pNOSAxM0g3di0yaDJabTAtM0g3VjVoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
     }
@@ -147,7 +150,7 @@
   }
 
   &--error {
-    border-color: $red;
+    border-color: variables.$red;
     .fwe-modal-h2::before {
       background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTggMS4wODFhNi45NiA2Ljk2IDAgMSAwIDYuOTYgNi45NkE2Ljk2IDYuOTYgMCAwIDAgOCAxLjA4Wm0yLjM5NyA5Ljk3MUw3Ljk1OCA4LjYxM2wtMi4zNTUgMi4zNTYtLjYzNy0uNjM3IDIuMzU2LTIuMzU1LTIuMjI4LTIuMjI4LjYzNi0uNjM3TDcuOTU4IDcuMzRsMi4zMTEtMi4zMTEuNjM3LjYzNy0yLjMxMSAyLjMxMSAyLjQzOSAyLjQzOFoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
     }
@@ -169,45 +172,45 @@
 
 .fwe-modal-backdrop {
   position: fixed;
-  background-color: $background-modal;
+  background-color: variables.$background-modal;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: $zindex-modal-backdrop;
+  z-index: variables.$zindex-modal-backdrop;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-@media (max-width: $grid-breakpoint-xs), (max-height: $grid-breakpoint-xs) {
+@media (max-width: variables.$grid-breakpoint-xs), (max-height: variables.$grid-breakpoint-xs) {
   .fwe-modal {
     // always use block buttons on this width
+    padding: variables.$spacer-m;
     &-buttons {
       justify-content: unset !important;
       grid-auto-columns: minmax(0, 1fr) !important;
     }
-    padding: $spacer-m;
 
     &-close-btn {
-      top: $spacer-xs;
-      right: $spacer-xs;
+      top: variables.$spacer-xs;
+      right: variables.$spacer-xs;
     }
 
     &-h1 {
-      font-size: $font-size-xl;
-      line-height: $spacer-l;
+      font-size: variables.$font-size-xl;
+      line-height: variables.$spacer-l;
       margin-top: 0;
-      margin-bottom: $spacer-m;
-      margin-right: $spacer-s;
+      margin-bottom: variables.$spacer-m;
+      margin-right: variables.$spacer-s;
     }
 
     &-h2 {
-      @include visual-hidden();
+      @include mixins.visual-hidden();
     }
 
     &-body {
-      margin-bottom: $spacer-m;
+      margin-bottom: variables.$spacer-m;
     }
   }
 }