@festo-ui/web-essentials 7.0.0-dev.319 → 7.0.0-dev.342

package/scss/_navbar-menu.scss

@@ -9,9 +9,11 @@
   padding: 0;
   border: none;
   background: none;
+
   span {
     margin-left: 4px; // separate icon from label
   }
+
   position: relative;
   cursor: pointer;
   color: $text;
@@ -20,6 +22,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   &::before {
     content: "";
     position: absolute;
@@ -30,12 +33,15 @@
     background: $caerul;
     transition: height 0.2s;
   }
+
   &.fwe-selected {
     color: $hero;
+
     &::before {
       height: 4px;
     }
   }
+
   &:hover {
     color: $hero;
   }
@@ -125,6 +131,7 @@
     min-height: auto;
     text-align: left;
     justify-content: unset;
+
     .fwe-icon,
     .fwe-svg-icon {
       margin-right: 12px !important;
@@ -165,6 +172,7 @@
 
     .fwe-profile-menu-item {
       padding: 20px $spacer-s !important;
+
       i {
         padding-right: $spacer-m !important;
       }
@@ -184,67 +192,191 @@
   @extend .fwe-navbar-menu-button;
 
   width: 32px;
-  &.fwe-selected {
-    .fwe-warning {
-      color: $orange;
+
+  &.fwe-info {
+    color: $hero;
+    background: $white;
+
+    &:has(.fwe-notification-batch) {
+      color: $text;
     }
-    .fwe-error {
-      color: $red;
+
+    &::before {
+      background: $white;
     }
-  }
 
-  .fwe-notification-batch {
-    position: absolute;
-    border-radius: 50%;
-    height: 22px;
-    line-height: calc(#{$font-size-small} + 4px);
-    width: 22px;
-    font-size: $font-size-small;
-    color: $white !important;
-    background: $caerul;
-    border: 2px solid $white;
-    top: -10px;
-    right: -10px;
+    .fwe-notification-batch {
+      background: $hero;
+    }
+
+    &.fwe-selected {
+      color: $hero;
+      &::before {
+        background: $hero;
+      }
+    }
   }
 
   &.fwe-warning {
-    color: $white;
-    background: $orange;
+    color: $orange;
+    background: $white;
+
+    &:has(.fwe-notification-batch) {
+      color: $text;
+    }
+
     &::before {
-      background: $orange;
+      background: $white;
     }
+
     .fwe-notification-batch {
-      background: $text;
+      background: $orange;
+    }
+
+    &.fwe-selected {
+      color: $orange;
+      &::before {
+        background: $orange;
+      }
     }
   }
 
   &.fwe-error {
-    color: $white;
-    background: $red;
+    color: $red;
+    background: $white;
+
+    &:has(.fwe-notification-batch) {
+      color: $text;
+    }
+
     &::before {
-      background: $red;
+      background: $white;
     }
+
     .fwe-notification-batch {
-      background: $text;
+      background: $red;
+    }
+
+    &.fwe-selected {
+      color: $red;
+      &::before {
+        background: $red;
+      }
     }
   }
 
   &:hover {
+    &.fwe-info {
+      color: $hero-hover;
+      background: $white;
+
+      .fwe-notification-batch {
+        background: $hero-hover;
+      }
+    }
+
+    &.fwe-warning {
+      color: $orange-hover;
+      background: $white;
+
+      .fwe-notification-batch {
+        background: $orange-hover;
+      }
+    }
+
+    &.fwe-error {
+      color: $red-hover;
+      background: $white;
+
+      .fwe-notification-batch {
+        background: $red-hover;
+      }
+    }
+  }
+
+  &.fwe-notification-button--strong {
+    &.fwe-info {
+      color: $white;
+      background: $hero;
+
+      &::before {
+        background: $hero;
+      }
+
+      .fwe-notification-batch {
+        background: $text;
+      }
+    }
+
     &.fwe-warning {
       color: $white;
-      background: $orange-hover;
+      background: $orange;
+
       &::before {
-        background: $orange-hover;
+        background: $orange;
+      }
+
+      .fwe-notification-batch {
+        background: $text;
       }
     }
+
     &.fwe-error {
       color: $white;
-      background: $red-hover;
+      background: $red;
+
       &::before {
+        background: $red;
+      }
+
+      .fwe-notification-batch {
+        background: $text;
+      }
+    }
+
+    &:hover {
+      &.fwe-info {
+        color: $white;
+        background: $hero-hover;
+
+        &::before {
+          background: $hero-hover;
+        }
+      }
+
+      &.fwe-warning {
+        color: $white;
+        background: $orange-hover;
+
+        &::before {
+          background: $orange-hover;
+        }
+      }
+
+      &.fwe-error {
+        color: $white;
         background: $red-hover;
+
+        &::before {
+          background: $red-hover;
+        }
       }
     }
   }
+
+  .fwe-notification-batch {
+    position: absolute;
+    border-radius: 50%;
+    height: 22px;
+    line-height: calc(#{$font-size-small} + 4px);
+    width: 22px;
+    font-size: $font-size-small;
+    color: $white !important;
+    background: $caerul;
+    border: 2px solid $white;
+    top: -10px;
+    right: -10px;
+  }
 }
 
 .fwe-notification-menu {
@@ -280,20 +412,25 @@
       flex-direction: column;
       display: flex;
       cursor: pointer;
+
       &:hover {
         background: $background;
       }
+
       &.fwe-disabled {
         color: $text-disabled;
+
         .fwe-notification-item-content {
           &::before {
             color: $text-disabled;
           }
         }
       }
+
       .fwe-notification-item-content {
         border-top: 1px solid $border;
       }
+
       &:first-child {
         .fwe-notification-item-content {
           border-top: none;
@@ -312,12 +449,15 @@
         font-weight: $font-weight-bold;
         margin-bottom: 4px;
       }
+
       .fwe-item-footer {
         font-size: $font-size-small;
         color: $text-disabled;
         margin-top: 11px;
       }
+
       font-family: $font-family-base;
+
       &::before {
         content: "";
         position: absolute;
@@ -330,12 +470,15 @@
 
     .fwe-notification-info {
       @extend .fwe-notification-item-content;
+
       &::before {
         background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTgsLjk5OTg4YTcuMDAwMDYsNy4wMDAwNiwwLDEsMCw3LjAwMDA2LDcuMDAwMDZBNy4wMDAwNyw3LjAwMDA3LDAsMCwwLDgsLjk5OTg4Wk05LDEyLjk5OTk0SDd2LTZIOVptMC04SDd2LTJIOVoiIGZpbGw9IiMwMDkxZGMiLz48L2c+PC9zdmc+");
       }
     }
+
     .fwe-notification-warning {
       @extend .fwe-notification-item-content;
+
       &::before {
         background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2ZmOTYwMCIvPjwvZz48L3N2Zz4=");
       }
@@ -343,6 +486,7 @@
 
     .fwe-notification-error {
       @extend .fwe-notification-item-content;
+
       &::before {
         background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2Q1MDAwMCIvPjwvZz48L3N2Zz4=");
         color: $red;