@festo-ui/web-essentials 6.1.0-dev.292 → 6.1.0-dev.294

package/scss/_modal.scss

@@ -11,6 +11,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
   .fwe-modal-body {
     @include custom-scrollbar;
     overflow-x: hidden;
@@ -21,19 +22,8 @@
     margin-top: 0;
     margin-bottom: $spacer-l;
     margin-right: $spacer-l;
-
     overflow: hidden;
     text-overflow: ellipsis;
-
-    .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;
-    }
   }
 
   &-h2 {
@@ -43,25 +33,27 @@
     font-size: $font-size-md;
     line-height: 18px;
     font-weight: $font-weight-bold;
-
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
-    .fwe-icon,
-    .fwe-svg-icon {
-      position: relative;
-      top: 2px;
-      margin-right: $spacer-xxs;
-    }
+    position: relative;
   }
 
-  &-close {
+  &-close-btn {
     position: absolute;
     top: $spacer-l;
     right: $spacer-l;
-    width: $spacer-l;
-    height: $spacer-l;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    min-width: 32px;
+    cursor: pointer;
+    background: $text;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTIxLjQ4IDkuMSAxNiAxNC41OSAxMC41MSA5LjEgOS4xIDEwLjUyIDE0LjU4IDE2IDkuMSAyMS40OWwxLjQxIDEuNDFMMTYgMTcuNDJsNS40OCA1LjQ4IDEuNDItMS40MUwxNy40MSAxNmw1LjQ5LTUuNDgtMS40Mi0xLjQyeiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
+    &:hover {
+      background: $hero;
+    }
   }
 
   &-header {
@@ -75,11 +67,9 @@
     height: 100%;
     overflow: auto;
     margin-bottom: $spacer-l;
-
     p:first-child {
       margin-top: 0;
     }
-
     p:last-child {
       margin-bottom: 0;
     }
@@ -104,44 +94,66 @@
     }
   }
 
-  &--info {
-    button.fwe-btn.fwe-btn-link {
-      color: $text;
-    }
-    .fwe-modal-header {
-      h1,
-      h2 {
-        .fwe-icon,
-        .fwe-svg-icon {
-          color: $hero;
+  &--info,
+  &--warning,
+  &--error {
+    .fwe-modal-h2 {
+      padding-left: 24px;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0px;
+        top: 1px;
+        height: 16px;
+        width: 16px;
+      }
+    }
+
+    @media (max-width: $grid-breakpoint-xs), (max-height: $grid-breakpoint-xs) {
+      .fwe-modal-h1 {
+        padding-left: 32px;
+        position: relative;
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0px;
+          top: 4px;
+          height: 24px;
+          width: 24px;
         }
       }
     }
   }
 
+  &--info {
+    .fwe-modal-h2::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTggMWE3IDcgMCAxIDAgNyA3IDcgNyAwIDAgMC03LTdabTEgMTJIN1Y3aDJabTAtOEg3VjNoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
+    }
+
+    .fwe-modal-h1::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzAwOTFkYyIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
+    }
+  }
+
   &--warning {
     border-color: $orange;
-    .fwe-modal-header {
-      h1,
-      h2 {
-        .fwe-icon,
-        .fwe-svg-icon {
-          color: $orange;
-        }
-      }
+    .fwe-modal-h2::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTE1LjIxNiAxMy41MyA4Ljg4MiAxLjY1M2ExIDEgMCAwIDAtMS43NjQgMEwuNzg0IDEzLjUzQTEgMSAwIDAgMCAxLjY2NyAxNWgxMi42NjZhMSAxIDAgMCAwIC44ODMtMS40N1pNOSAxM0g3di0yaDJabTAtM0g3VjVoMloiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
+    }
+
+    .fwe-modal-h1::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2ZmOTYwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
     }
   }
 
   &--error {
     border-color: $red;
-    .fwe-modal-header {
-      h1,
-      h2 {
-        .fwe-icon,
-        .fwe-svg-icon {
-          color: $red;
-        }
-      }
+    .fwe-modal-h2::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTggMS4wODFhNi45NiA2Ljk2IDAgMSAwIDYuOTYgNi45NkE2Ljk2IDYuOTYgMCAwIDAgOCAxLjA4Wm0yLjM5NyA5Ljk3MUw3Ljk1OCA4LjYxM2wtMi4zNTUgMi4zNTYtLjYzNy0uNjM3IDIuMzU2LTIuMzU1LTIuMjI4LTIuMjI4LjYzNi0uNjM3TDcuOTU4IDcuMzRsMi4zMTEtMi4zMTEuNjM3LjYzNy0yLjMxMSAyLjMxMSAyLjQzOSAyLjQzOFoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
+    }
+
+    .fwe-modal-h1::before {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iI2Q1MDAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+");
     }
   }
 
@@ -177,7 +189,7 @@
     }
     padding: $spacer-m;
 
-    &-close {
+    &-close-btn {
       top: $spacer-xs;
       right: $spacer-xs;
     }
@@ -188,11 +200,6 @@
       margin-top: 0;
       margin-bottom: $spacer-m;
       margin-right: $spacer-s;
-
-      .fwe-icon,
-      .fwe-svg-icon {
-        display: inline-block;
-      }
     }
 
     &-h2 {

package/scss/_snackbar.scss

@@ -12,133 +12,123 @@
   min-height: 48px;
 
   span {
+    display: block;
+    margin-right: auto;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .fwe-icon {
-    padding-right: $spacer-s;
-    vertical-align: middle;
-    font-size: $font-size-xl;
-    line-height: $font-size-xl;
-
-    &.fwe-icon-close-small {
-      padding-right: 0px;
-      &::before {
-        vertical-align: middle;
-      }
-    }
+  &.fwe-snackbar-shadow {
+    box-shadow: $control-box-shadow;
   }
 
-  > .fwe-icon:nth-of-type(1) {
-    color: $hero;
-    font-size: 22px;
-    line-height: 22px;
+  .fwe-snackbar-close-btn {
+    border: none;
+    padding: 0;
+    height: 24px;
+    width: 24px;
+    min-width: 24px;
+    cursor: pointer;
+    background: $hero;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE2Ljk1IDguNDY0IDE1LjUzNiA3LjA1IDEyIDEwLjU4NiA4LjQ2NCA3LjA1IDcuMDUgOC40NjQgMTAuNTg2IDEyIDcuMDUgMTUuNTM2bDEuNDE0IDEuNDE0TDEyIDEzLjQxNGwzLjUzNiAzLjUzNiAxLjQxNC0xLjQxNEwxMy40MTQgMTJsMy41MzYtMy41MzZ6Ii8+PC9zdmc+");
   }
 
-  .fwe-btn {
+  .fwe-snackbar-link-btn {
+    background: none;
     color: $hero;
-    min-height: 24px;
-    i {
-      height: 24px;
-      display: flex;
-    }
-    &:hover {
-      color: $hero-dark;
-    }
+    border: none;
+    padding: 0px 12px;
+    cursor: pointer;
   }
 
-  .fwe-btn:nth-of-type(1) {
-    margin-left: auto;
-    padding-right: $spacer-s;
-    padding-left: $spacer-s;
-
-    &:last-child {
-      padding-right: 0px;
+  &.fwe-snackbar-info,
+  &.fwe-snackbar-warning,
+  &.fwe-snackbar-error {
+    span {
+      position: relative;
+      padding-left: 36px;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 24px;
+        width: 24px;
+      }
     }
   }
 
-  .fwe-btn:nth-of-type(2) {
-    position: relative;
-    border-left: 1px solid rgba(0, 0, 0, 0.5);
-    border-radius: 0px;
-    padding-left: $spacer-s;
-  }
-
-  &.fwe-snackbar-shadow {
-    box-shadow: $control-box-shadow;
+  &.fwe-snackbar-info {
+    span::before {
+      background-color: $hero;
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDMyIDExLjAzMiAwIDAgMCAxMiAxWm0xIDE4aC0ydi05aDJabTAtMTJoLTJWNWgyWiIvPjwvZz48L3N2Zz4=");
+    }
   }
 
   &.fwe-snackbar-warning {
     border-color: $orange;
     background-color: $snackbar-warning-bg;
-
-    > .fwe-icon:nth-of-type(1) {
-      color: $orange;
+    span::before {
+      background-color: $orange;
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIyLjQgMTkuODYgMTMuMjczIDIuNzQzYTEuNDQxIDEuNDQxIDAgMCAwLTIuNTQ0IDBMMS42IDE5Ljg2YTEuNDQxIDEuNDQxIDAgMCAwIDEuMjcyIDIuMTJIMjEuMTNhMS40NDEgMS40NDEgMCAwIDAgMS4yNzItMi4xMlpNMTEgN2gydjhoLTJabTIuMDA1IDExLjk2NWgtMi4wMXYtMi4wMWgyLjAxWiIvPjwvZz48L3N2Zz4=");
     }
-
-    .fwe-btn {
-      color: $orange;
-
-      &:hover {
-        color: $orange-dark;
-      }
+    .fwe-snackbar-close-btn {
+      background-color: $orange;
     }
-
-    .fwe-btn:nth-of-type(2) {
-      border-color: $orange;
+    .fwe-snackbar-separator {
+      background-color: $orange;
+    }
+    .fwe-snackbar-link-btn {
+      color: $orange;
     }
   }
 
   &.fwe-snackbar-error {
     border-color: $red;
     background-color: $snackbar-error-bg;
-
-    > .fwe-icon:nth-of-type(1) {
-      color: $red;
+    span::before {
+      background-color: $red;
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDFhMTEgMTEgMCAxIDAgMTEgMTFBMTEgMTEgMCAwIDAgMTIgMVptNS43IDE1LjItMS41IDEuNS00LjItNC4zLTQuMiA0LjMtMS41LTEuNSA0LjMtNC4yLTQuMy00LjIgMS41LTEuNSA0LjIgNC4zIDQuMi00LjMgMS41IDEuNS00LjMgNC4yWiIvPjwvZz48L3N2Zz4=");
     }
-
-    .fwe-btn {
+    .fwe-snackbar-close-btn {
+      background-color: $red;
+    }
+    .fwe-snackbar-separator {
+      background-color: $red;
+    }
+    .fwe-snackbar-link-btn {
       color: $red;
-
-      &:hover {
-        color: $red-dark;
-      }
     }
+  }
 
-    .fwe-btn:nth-of-type(2) {
-      border-color: $red;
-    }
+  .fwe-snackbar-separator {
+    height: 24px;
+    width: 1px;
+    margin: 0px 12px;
+    background: $hero;
   }
 
   &.fwe-snackbar-b {
     border: none;
     background-color: $white;
 
-    .fwe-icon {
-      color: $icon-black;
+    span::before {
+      background-color: $text;
     }
 
-    .fwe-btn {
-      color: $hero;
-
+    .fwe-snackbar-close-btn {
+      background-color: $text;
       &:hover {
-        color: $hero-dark;
-
-        .fwe-icon {
-          color: $hero-dark;
-        }
+        background-color: $hero-dark;
       }
     }
-
-    .fwe-btn:nth-of-type(2) {
-      border-color: rgba(0, 0, 0, 0.7);
+    .fwe-snackbar-separator {
+      background-color: $text;
     }
-
-    &.fwe-snackbar-warning,
-    &.fwe-snackbar-error {
-      .fwe-icon {
-        color: $icon-black;
+    .fwe-snackbar-link-btn {
+      color: $hero;
+      &:hover {
+        color: $hero-dark;
       }
     }
   }
@@ -148,38 +138,33 @@
     color: $white;
     background-color: $hero;
 
-    .fwe-btn:nth-of-type(2) {
-      border-left: 1px solid rgba(255, 255, 255, 0.5);
+    &.fwe-snackbar-warning {
+      background-color: $orange;
     }
 
-    .fwe-icon {
-      color: $white;
+    &.fwe-snackbar-error {
+      background-color: $red;
     }
 
-    .fwe-btn-link {
-      color: $white;
+    span::before {
+      background-color: $white;
+    }
 
-      &:hover {
-        color: $white-dark;
+    .fwe-snackbar-close-btn {
+      background-color: $white;
 
-        .fwe-icon {
-          color: $white-dark;
-        }
+      &:hover {
+        background-color: $background;
       }
     }
-
-    &.fwe-snackbar-warning {
-      .fwe-icon {
-        color: $white;
-      }
-      background-color: $orange;
+    .fwe-snackbar-separator {
+      background-color: $white;
     }
-
-    &.fwe-snackbar-error {
-      .fwe-icon {
-        color: $white;
+    .fwe-snackbar-link-btn {
+      color: $white;
+      &:hover {
+        color: $background;
       }
-      background-color: $red;
     }
   }
 }