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

package/dist/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;
     }
   }
 }