@festo-ui/web-essentials 6.1.0-dev.284 → 6.1.0-dev.286

package/scss/_mobile-flyout.scss

@@ -2,29 +2,42 @@
   position: relative;
 
   .fwe-mobile-flyout-button {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
     padding: 0px;
+    height: 36px;
     border: none;
     background: none;
     outline: none;
     margin-bottom: 8px;
     margin-right: auto;
     cursor: pointer;
+    display: inline-block;
+    &::after {
+      content: "";
+      display: block;
+      height: 24px;
+      width: 24px;
+      background-color: $text;
+    }
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        color: $hero;
+        &::after {
+          background-color: $hero;
+        }
       }
     }
   }
 
   .fwe-burger-button {
     @extend .fwe-mobile-flyout-button;
-    @extend .fwe-icon-menu-menu;
+    &::after {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIi8+PC9nPjxnPjxyZWN0IHg9IjMiIHk9IjYiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iMyIgeT0iMTEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iMyIgeT0iMTYiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==");
+    }
   }
   .fwe-close-button {
     @extend .fwe-mobile-flyout-button;
-    @extend .fwe-icon-menu-close;
+    &::after {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIi8+PHBvbHlnb24gcG9pbnRzPSIxNi45NSA4LjQ2NCAxNS41MzYgNy4wNSAxMiAxMC41ODYgOC40NjQgNy4wNSA3LjA1IDguNDY0IDEwLjU4NiAxMiA3LjA1IDE1LjUzNiA4LjQ2NCAxNi45NSAxMiAxMy40MTQgMTUuNTM2IDE2Ljk1IDE2Ljk1IDE1LjUzNiAxMy40MTQgMTIgMTYuOTUgOC40NjQiIGZpbGw9IiMwMDAiLz48L2c+PC9zdmc+");
+    }
   }
 
   .fwe-mobile-flyout-container {
@@ -73,15 +86,20 @@
     display: flex;
     align-items: center;
     background: $background;
+    position: relative;
+    padding-left: 40px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 16px;
+      top: 19px;
+      height: 16px;
+      width: 16px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMTZWMGgxNnYxNnoiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNMTAuMzU0IDQuMzU0IDYuNzA3IDhsMy42NDcgMy42NDYtLjcwOC43MDhMNS4yOTMgOGw0LjM1My00LjM1NC43MDguNzA4eiIvPjwvc3ZnPg==");
+    }
     &:hover {
       background: $control;
     }
-    i {
-      @extend .fwe-icon;
-      @extend .fwe-icon-arrows-left-2;
-      margin-left: 16px;
-      margin-right: 8px;
-    }
     div {
       margin-top: -1px;
       margin-bottom: 1px;

package/scss/_modal.scss

@@ -1,12 +1,3 @@
-@mixin fwe-modal-icon-base-375 {
-  display: block;
-  position: relative;
-  top: 2px;
-  margin-right: $spacer-xxs;
-  font-size: $font-size-xl;
-  font-family: $font-family-icons-24;
-}
-
 .fwe-modal {
   padding: $spacer-xl;
   z-index: $zindex-modal;
@@ -34,22 +25,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    .fwe-icon-status-check-status {
-      &::before {
-        display: none;
-      }
-    }
-
-    .fwe-icon-status-warning {
-      &::before {
-        display: none;
-      }
-    }
-
-    .fwe-icon-status-failure {
-      &::before {
-        display: none;
-      }
+    .fwe-icon,
+    .fwe-svg-icon {
+      display: none;
+      position: relative;
+      top: 2px;
+      margin-right: $spacer-xxs;
+      font-size: $font-size-xl;
+      font-family: $font-family-icons-24;
     }
   }
 
@@ -65,29 +48,12 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    .fwe-icon {
+    .fwe-icon,
+    .fwe-svg-icon {
       position: relative;
       top: 2px;
       margin-right: $spacer-xxs;
     }
-
-    .fwe-icon-status-check-status {
-      &::before {
-        color: $icon-hero;
-      }
-    }
-
-    .fwe-icon-status-warning {
-      &::before {
-        color: $orange;
-      }
-    }
-
-    .fwe-icon-status-failure {
-      &::before {
-        color: $red;
-      }
-    }
   }
 
   &-close {
@@ -96,12 +62,6 @@
     right: $spacer-l;
     width: $spacer-l;
     height: $spacer-l;
-
-    .fwe-icon {
-      padding-right: 0 !important;
-      font-size: $font-size-xxl;
-      line-height: $font-size-xxl;
-    }
   }
 
   &-header {
@@ -148,14 +108,41 @@
     button.fwe-btn.fwe-btn-link {
       color: $text;
     }
+    .fwe-modal-header {
+      h1,
+      h2 {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: $hero;
+        }
+      }
+    }
   }
 
   &--warning {
     border-color: $orange;
+    .fwe-modal-header {
+      h1,
+      h2 {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: $orange;
+        }
+      }
+    }
   }
 
   &--error {
     border-color: $red;
+    .fwe-modal-header {
+      h1,
+      h2 {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: $red;
+        }
+      }
+    }
   }
 
   &--large {
@@ -202,25 +189,9 @@
       margin-bottom: $spacer-m;
       margin-right: $spacer-s;
 
-      .fwe-icon-status-check-status {
-        &::before {
-          @include fwe-modal-icon-base-375;
-          color: $icon-hero;
-        }
-      }
-
-      .fwe-icon-status-warning {
-        &::before {
-          @include fwe-modal-icon-base-375;
-          color: $orange;
-        }
-      }
-    }
-
-    .fwe-icon-status-failure {
-      &::before {
-        @include fwe-modal-icon-base-375;
-        color: $red;
+      .fwe-icon,
+      .fwe-svg-icon {
+        display: inline-block;
       }
     }
 

package/scss/_navbar-menu.scss

@@ -316,10 +316,12 @@
         color: $text-disabled;
         margin-top: 11px;
       }
-      @extend .fwe-icon;
       font-family: $font-family-base;
       &::before {
+        content: "";
         position: absolute;
+        height: 16px;
+        width: 16px;
         left: -32px;
         top: 21px;
       }
@@ -327,23 +329,21 @@
 
     .fwe-notification-info {
       @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-info;
       &::before {
-        color: $caerul;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTgsLjk5OTg4YTcuMDAwMDYsNy4wMDAwNiwwLDEsMCw3LjAwMDA2LDcuMDAwMDZBNy4wMDAwNyw3LjAwMDA3LDAsMCwwLDgsLjk5OTg4Wk05LDEyLjk5OTk0SDd2LTZIOVptMC04SDd2LTJIOVoiIGZpbGw9IiMwMDkxZGMiLz48L2c+PC9zdmc+");
       }
     }
     .fwe-notification-warning {
       @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-warning;
       &::before {
-        color: $orange;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2ZmOTYwMCIvPjwvZz48L3N2Zz4=");
       }
     }
 
     .fwe-notification-error {
       @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-warning;
       &::before {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2Q1MDAwMCIvPjwvZz48L3N2Zz4=");
         color: $red;
       }
     }

package/scss/_pagination.scss

@@ -1,8 +1,12 @@
 .fwe-pagination {
   display: flex;
   .fwe-navigate-btn {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
+    &::before {
+      content: "";
+      height: 24px;
+      width: 24px;
+      background-color: $text;
+    }
     line-height: normal;
     box-sizing: border-box;
     display: inline-flex;
@@ -12,17 +16,20 @@
     padding: 0px;
     height: 24px;
     width: 24px;
-    color: $text;
     background: transparent;
     cursor: pointer;
     border: none;
 
     &:hover {
-      color: $hero;
+      &::before {
+        background-color: $hero;
+      }
     }
 
     &:active {
-      color: $hero-dark;
+      &::before {
+        background-color: $hero-dark;
+      }
     }
 
     &:focus {
@@ -32,16 +39,22 @@
     &:disabled,
     &.fwe-disabled {
       cursor: default;
-      color: $text-disabled;
+      &::before {
+        background-color: $text-disabled;
+      }
     }
   }
   .fwe-navigate-btn-up {
     @extend .fwe-navigate-btn;
-    @extend .fwe-icon-arrows-right-2;
+    &::before {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik05LjE3MiAxOC4zNjQgMTUuNTM2IDEyIDkuMTcyIDUuNjM2bC0uNzA4LjcwN0wxNC4xMjEgMTJsLTUuNjU3IDUuNjU3LjcwOC43MDd6Ii8+PC9zdmc+");
+    }
   }
   .fwe-navigate-btn-down {
     @extend .fwe-navigate-btn;
-    @extend .fwe-icon-arrows-left-2;
+    &::before {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik0xNC44MjggNS42MzYgOC40NjQgMTJsNi4zNjQgNi4zNjQuNzA4LS43MDdMOS44NzkgMTJsNS42NTctNS42NTctLjcwOC0uNzA3eiIvPjwvc3ZnPg==");
+    }
   }
 
   .fwe-page-dot {

package/scss/_root.scss

@@ -75,6 +75,10 @@
     --fwe-breakpoint-#{$name}: #{$size};
   }
 
+  @each $name, $size in $grid-breakpoints-min {
+    --fwe-breakpoint-#{$name}: #{$size};
+  }
+
   @each $spacing, $space in $spacers {
     --fwe-spacer-#{$spacing}: #{$space};
   }

package/scss/_search-input.scss

@@ -2,17 +2,26 @@
   display: inline-block;
   position: relative;
   .fwe-search-icon {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
-    @extend .fwe-icon-file-search;
+    height: 16px;
+    width: 16px;
+
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PGcgZmlsbD0iIzMzMyIgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBkPSJNMTAgMmE0IDQgMCAxIDEtNCA0IDQuMDA0IDQuMDA0IDAgMCAxIDQtNG0wLTFhNSA1IDAgMSAwIDUgNSA1LjAwNiA1LjAwNiAwIDAgMC01LTVaTTEuMjkzIDEzLjI5M2wzLjgyMi0zLjgyMmE2LjA0MyA2LjA0MyAwIDAgMCAxLjQxNCAxLjQxNGwtMy44MjIgMy44MjJhMSAxIDAgMCAxLTEuNDE0LTEuNDE0WiIvPjwvZz48L3N2Zz4=");
     position: absolute;
     line-height: 1;
     left: 0px;
-    bottom: 2px;
+    bottom: 8px;
   }
   .fwe-clear-icon {
-    @extend .fwe-icon;
-    @extend .fwe-icon-close-small;
+    height: 16px;
+    width: 16px;
+    &::after {
+      position: absolute;
+      content: "";
+      height: 16px;
+      width: 16px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0xMC4yNCA1LjA1IDggNy4zIDUuNzUgNS4wNWwtLjcuNzFMNy4yOSA4bC0yLjI0IDIuMjUuNy43TDggOC43MWwyLjI0IDIuMjQuNzEtLjdMOC43IDhsMi4yNS0yLjI0LS43MS0uNzF6IiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCIvPjwvc3ZnPg==");
+    }
+
     cursor: pointer;
     position: absolute;
     right: 0px;

package/scss/_segment.scss

@@ -122,12 +122,6 @@
   }
 
   &.fwe-segment-icon {
-    .fwe-icon {
-      &::before {
-        position: relative;
-        top: 1px;
-      }
-    }
     .fwe-segment-label {
       padding: 0 $spacer-s;
       line-height: 30px;

package/scss/_select.scss

@@ -13,14 +13,15 @@
   display: flex;
   flex-direction: column;
   padding-bottom: 18px;
-  @extend .fwe-icon;
-  @extend .fwe-icon-lg;
-  @extend .fwe-icon-arrows-collapse;
   &::before {
     pointer-events: none;
     position: absolute;
     bottom: 22px;
     left: calc(100% - 24px);
+    content: "";
+    height: 24px;
+    width: 24px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
   }
 
   .fwe-select-label {

package/scss/_stepper-horizontal.scss

@@ -94,13 +94,14 @@
         .fwe-step-no {
           display: none;
         }
-        @extend .fwe-icon;
-        @extend .fwe-icon-menu-check;
         &:before {
+          content: "";
           position: absolute;
           left: 2px;
           top: 2px;
-          color: $white;
+          height: 16px;
+          width: 16px;
+          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYuMTQxIDEyLjgxNCAxLjkzNCA4LjYwN2wxLjQxNC0xLjQxNCAyLjc5MyAyLjc5MyA2Ljc5My02Ljc5MyAxLjQxNCAxLjQxNC04LjIwNyA4LjIwN3oiLz48L2c+PC9zdmc+");
         }
       }
     }

package/scss/_stepper-vertical.scss

@@ -101,13 +101,14 @@ $vertical-step-height: 300px;
         .fwe-step-no {
           display: none;
         }
-        @extend .fwe-icon;
-        @extend .fwe-icon-menu-check;
         &:before {
+          content: "";
           position: absolute;
           left: 2px;
           top: 2px;
-          color: $white;
+          height: 16px;
+          width: 16px;
+          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYuMTQxIDEyLjgxNCAxLjkzNCA4LjYwN2wxLjQxNC0xLjQxNCAyLjc5MyAyLjc5MyA2Ljc5My02Ljc5MyAxLjQxNCAxLjQxNC04LjIwNyA4LjIwN3oiLz48L2c+PC9zdmc+");
         }
       }
     }

package/scss/_variables.scss

@@ -189,6 +189,24 @@ $grid-breakpoints: (
   xxl: $grid-breakpoint-xxl
 ) !default;
 
+$breakpoint-xxs-min: $grid-breakpoint-xxs - 1;
+$breakpoint-xs-min: $grid-breakpoint-xs - 1;
+$breakpoint-sm-min: $grid-breakpoint-sm - 1;
+$breakpoint-md-min: $grid-breakpoint-md - 1;
+$breakpoint-lg-min: $grid-breakpoint-lg - 1;
+$breakpoint-xl-min: $grid-breakpoint-xl - 1;
+$breakpoint-xxl-min: $grid-breakpoint-xxl - 1;
+
+$grid-breakpoints-min: (
+  xxs-min: $breakpoint-xxs-min,
+  xs-min: $breakpoint-xs-min,
+  sm-min: $breakpoint-sm-min,
+  md-min: $breakpoint-md-min,
+  lg-min: $breakpoint-lg-min,
+  xl-min: $breakpoint-xl-min,
+  xxl-min: $breakpoint-xxl-min
+) !default;
+
 $navbar-height: 64px;
 $navbar-bottom-box-height: 48px;