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

package/scss/_navbar-menu.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /*
 ** Basic navbar menu
 */
@@ -16,7 +18,7 @@
 
   position: relative;
   cursor: pointer;
-  color: $text;
+  color: variables.$text;
   height: 32px;
   min-width: 32px;
   display: flex;
@@ -30,12 +32,12 @@
     right: 0px;
     left: 0px;
     bottom: -13px;
-    background: $caerul;
+    background: variables.$caerul;
     transition: height 0.2s;
   }
 
   &.fwe-selected {
-    color: $hero;
+    color: variables.$hero;
 
     &::before {
       height: 4px;
@@ -43,7 +45,7 @@
   }
 
   &:hover {
-    color: $hero;
+    color: variables.$hero;
   }
 }
 
@@ -53,18 +55,18 @@
   top: 45px;
   right: 0px;
   width: 300px;
-  background-color: $white;
+  background-color: variables.$white;
   flex-direction: column;
   box-shadow: 0px 1px 4px #00000029;
-  max-height: calc(100vh - #{$navbar-height});
+  max-height: calc(100vh - #{variables.$navbar-height});
   overflow: visible;
 
-  @media (max-width: $grid-breakpoint-sm - 2) {
+  @media (max-width: variables.$grid-breakpoint-sm - 2) {
     width: 100% !important;
     position: fixed;
-    top: $navbar-height;
+    top: variables.$navbar-height;
     left: 0;
-    height: calc(100vh - #{$navbar-height});
+    height: calc(100vh - #{variables.$navbar-height});
   }
 }
 
@@ -73,38 +75,38 @@
  */
 .fwe-profile-menu {
   .fwe-profile-menu-header {
-    margin-bottom: $spacer-s;
+    margin-bottom: variables.$spacer-s;
     display: flex;
     flex-direction: row;
-    padding: $spacer-l $spacer-m $spacer-m $spacer-m;
+    padding: variables.$spacer-l variables.$spacer-m variables.$spacer-m variables.$spacer-m;
 
     .fwe-profile-image-container {
-      width: $spacer-xl;
-      height: $spacer-xl;
+      width: variables.$spacer-xl;
+      height: variables.$spacer-xl;
       flex-shrink: 0;
       border-radius: 50%;
       overflow: hidden;
-      background-color: $gray-400;
+      background-color: variables.$gray-400;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: $spacer-s;
+      margin-right: variables.$spacer-s;
 
       .fwe-profile-image {
         width: 100%;
       }
 
       .fwe-placeholder-letter {
-        width: $spacer-l;
-        height: $spacer-l;
-        background-color: $gray-100;
+        width: variables.$spacer-l;
+        height: variables.$spacer-l;
+        background-color: variables.$gray-100;
         border-radius: 50%;
         align-items: center;
         justify-content: center;
         text-align: center;
-        border: solid 6px $white;
+        border: solid 6px variables.$white;
         box-sizing: content-box;
-        font-size: $font-size-base;
+        font-size: variables.$font-size-base;
         line-height: 28px;
       }
     }
@@ -115,19 +117,19 @@
 
       .fwe-username {
         overflow-wrap: anywhere;
-        font-weight: $font-weight-bold;
+        font-weight: variables.$font-weight-bold;
       }
 
       .fwe-email {
         overflow-wrap: anywhere;
-        font-size: $font-size-small;
-        margin-top: $spacer-xxxs;
+        font-size: variables.$font-size-small;
+        margin-top: variables.$spacer-xxxs;
       }
     }
   }
 
   .fwe-profile-menu-item {
-    padding: $spacer-xs $spacer-m !important;
+    padding: variables.$spacer-xs variables.$spacer-m !important;
     min-height: auto;
     text-align: left;
     justify-content: unset;
@@ -141,46 +143,46 @@
   .fwe-btn-logout {
     border-radius: 0;
     justify-content: center;
-    margin-top: $spacer-xxl - $spacer-m;
+    margin-top: variables.$spacer-xxl - variables.$spacer-m;
   }
 
-  @media (max-width: $grid-breakpoint-sm - 2) {
+  @media (max-width: variables.$grid-breakpoint-sm - 2) {
     .fwe-profile-menu-header {
-      margin-bottom: $spacer-s;
-      background-color: $background;
-      border-bottom: solid 1px $gray-200;
-      padding: $spacer-m $spacer-s $spacer-m $spacer-s;
+      margin-bottom: variables.$spacer-s;
+      background-color: variables.$background;
+      border-bottom: solid 1px variables.$gray-200;
+      padding: variables.$spacer-m variables.$spacer-s variables.$spacer-m variables.$spacer-s;
 
       .fwe-profile-image-container {
-        width: $spacer-xxl;
-        height: $spacer-xxl;
-        margin-right: $spacer-l;
+        width: variables.$spacer-xxl;
+        height: variables.$spacer-xxl;
+        margin-right: variables.$spacer-l;
 
         .fwe-placeholder-letter {
           width: 42px;
           height: 42px;
-          border: solid 9px $white;
-          font-size: $font-size-xl;
+          border: solid 9px variables.$white;
+          font-size: variables.$font-size-xl;
           line-height: 40px;
         }
       }
     }
 
     .fwe-profile-data-container .fwe-email {
-      font-size: $font-size-base !important;
+      font-size: variables.$font-size-base !important;
     }
 
     .fwe-profile-menu-item {
-      padding: 20px $spacer-s !important;
+      padding: 20px variables.$spacer-s !important;
 
       i {
-        padding-right: $spacer-m !important;
+        padding-right: variables.$spacer-m !important;
       }
     }
 
     .fwe-btn-logout {
-      margin: auto $spacer-s $spacer-l $spacer-s !important;
-      border-radius: $control-border-radius;
+      margin: auto variables.$spacer-s variables.$spacer-l variables.$spacer-s !important;
+      border-radius: variables.$control-border-radius;
     }
   }
 }
@@ -194,171 +196,171 @@
   width: 32px;
 
   &.fwe-info {
-    color: $hero;
-    background: $white;
+    color: variables.$hero;
+    background: variables.$white;
 
     &:has(.fwe-notification-batch) {
-      color: $text;
+      color: variables.$text;
     }
 
     &::before {
-      background: $white;
+      background: variables.$white;
     }
 
     .fwe-notification-batch {
-      background: $hero;
+      background: variables.$hero;
     }
 
     &.fwe-selected {
-      color: $hero;
+      color: variables.$hero;
       &::before {
-        background: $hero;
+        background: variables.$hero;
       }
     }
   }
 
   &.fwe-warning {
-    color: $orange;
-    background: $white;
+    color: variables.$orange;
+    background: variables.$white;
 
     &:has(.fwe-notification-batch) {
-      color: $text;
+      color: variables.$text;
     }
 
     &::before {
-      background: $white;
+      background: variables.$white;
     }
 
     .fwe-notification-batch {
-      background: $orange;
+      background: variables.$orange;
     }
 
     &.fwe-selected {
-      color: $orange;
+      color: variables.$orange;
       &::before {
-        background: $orange;
+        background: variables.$orange;
       }
     }
   }
 
   &.fwe-error {
-    color: $red;
-    background: $white;
+    color: variables.$red;
+    background: variables.$white;
 
     &:has(.fwe-notification-batch) {
-      color: $text;
+      color: variables.$text;
     }
 
     &::before {
-      background: $white;
+      background: variables.$white;
     }
 
     .fwe-notification-batch {
-      background: $red;
+      background: variables.$red;
     }
 
     &.fwe-selected {
-      color: $red;
+      color: variables.$red;
       &::before {
-        background: $red;
+        background: variables.$red;
       }
     }
   }
 
   &:hover {
     &.fwe-info {
-      color: $hero-hover;
-      background: $white;
+      color: variables.$hero-hover;
+      background: variables.$white;
 
       .fwe-notification-batch {
-        background: $hero-hover;
+        background: variables.$hero-hover;
       }
     }
 
     &.fwe-warning {
-      color: $orange-hover;
-      background: $white;
+      color: variables.$orange-hover;
+      background: variables.$white;
 
       .fwe-notification-batch {
-        background: $orange-hover;
+        background: variables.$orange-hover;
       }
     }
 
     &.fwe-error {
-      color: $red-hover;
-      background: $white;
+      color: variables.$red-hover;
+      background: variables.$white;
 
       .fwe-notification-batch {
-        background: $red-hover;
+        background: variables.$red-hover;
       }
     }
   }
 
   &.fwe-notification-button--strong {
     &.fwe-info {
-      color: $white;
-      background: $hero;
+      color: variables.$white;
+      background: variables.$hero;
 
       &::before {
-        background: $hero;
+        background: variables.$hero;
       }
 
       .fwe-notification-batch {
-        background: $text;
+        background: variables.$text;
       }
     }
 
     &.fwe-warning {
-      color: $white;
-      background: $orange;
+      color: variables.$white;
+      background: variables.$orange;
 
       &::before {
-        background: $orange;
+        background: variables.$orange;
       }
 
       .fwe-notification-batch {
-        background: $text;
+        background: variables.$text;
       }
     }
 
     &.fwe-error {
-      color: $white;
-      background: $red;
+      color: variables.$white;
+      background: variables.$red;
 
       &::before {
-        background: $red;
+        background: variables.$red;
       }
 
       .fwe-notification-batch {
-        background: $text;
+        background: variables.$text;
       }
     }
 
     &:hover {
       &.fwe-info {
-        color: $white;
-        background: $hero-hover;
+        color: variables.$white;
+        background: variables.$hero-hover;
 
         &::before {
-          background: $hero-hover;
+          background: variables.$hero-hover;
         }
       }
 
       &.fwe-warning {
-        color: $white;
-        background: $orange-hover;
+        color: variables.$white;
+        background: variables.$orange-hover;
 
         &::before {
-          background: $orange-hover;
+          background: variables.$orange-hover;
         }
       }
 
       &.fwe-error {
-        color: $white;
-        background: $red-hover;
+        color: variables.$white;
+        background: variables.$red-hover;
 
         &::before {
-          background: $red-hover;
+          background: variables.$red-hover;
         }
       }
     }
@@ -368,12 +370,12 @@
     position: absolute;
     border-radius: 50%;
     height: 22px;
-    line-height: calc(#{$font-size-small} + 4px);
+    line-height: calc(#{variables.$font-size-small} + 4px);
     width: 22px;
-    font-size: $font-size-small;
-    color: $white !important;
-    background: $caerul;
-    border: 2px solid $white;
+    font-size: variables.$font-size-small;
+    color: variables.$white !important;
+    background: variables.$caerul;
+    border: 2px solid variables.$white;
     top: -10px;
     right: -10px;
   }
@@ -385,11 +387,11 @@
   .fwe-notification-title {
     display: flex;
     align-items: center;
-    font-weight: $font-weight-bold;
+    font-weight: variables.$font-weight-bold;
     height: 48px;
-    padding-left: $spacer-m;
-    padding-right: $spacer-xxs;
-    border-bottom: 1px solid $border;
+    padding-left: variables.$spacer-m;
+    padding-right: variables.$spacer-xxs;
+    border-bottom: 1px solid variables.$border;
   }
 
   .fwe-notification-footer {
@@ -397,9 +399,9 @@
     align-items: center;
     justify-content: center;
     height: 48px;
-    margin-left: $spacer-m;
-    margin-right: $spacer-m;
-    border-top: 1px solid $border;
+    margin-left: variables.$spacer-m;
+    margin-right: variables.$spacer-m;
+    border-top: 1px solid variables.$border;
   }
 
   .fwe-notification-list {
@@ -414,21 +416,21 @@
       cursor: pointer;
 
       &:hover {
-        background: $background;
+        background: variables.$background;
       }
 
       &.fwe-disabled {
-        color: $text-disabled;
+        color: variables.$text-disabled;
 
         .fwe-notification-item-content {
           &::before {
-            color: $text-disabled;
+            color: variables.$text-disabled;
           }
         }
       }
 
       .fwe-notification-item-content {
-        border-top: 1px solid $border;
+        border-top: 1px solid variables.$border;
       }
 
       &:first-child {
@@ -440,23 +442,23 @@
 
     .fwe-notification-item-content {
       position: relative;
-      margin-left: $spacer-l + $spacer-m;
-      margin-right: $spacer-m;
-      padding-top: $spacer-s;
-      padding-bottom: $spacer-s;
+      margin-left: variables.$spacer-l + variables.$spacer-m;
+      margin-right: variables.$spacer-m;
+      padding-top: variables.$spacer-s;
+      padding-bottom: variables.$spacer-s;
 
       .fwe-item-header {
-        font-weight: $font-weight-bold;
+        font-weight: variables.$font-weight-bold;
         margin-bottom: 4px;
       }
 
       .fwe-item-footer {
-        font-size: $font-size-small;
-        color: $text-disabled;
+        font-size: variables.$font-size-small;
+        color: variables.$text-disabled;
         margin-top: 11px;
       }
 
-      font-family: $font-family-base;
+      font-family: variables.$font-family-base;
 
       &::before {
         content: "";
@@ -489,7 +491,7 @@
 
       &::before {
         background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2Q1MDAwMCIvPjwvZz48L3N2Zz4=");
-        color: $red;
+        color: variables.$red;
       }
     }
   }