@festo-ui/web-essentials 4.0.3-pre-20221124.8 → 5.0.0-dev.17

package/scss/_navbar-menu.scss

@@ -1,351 +1,351 @@
-/*
-** Basic navbar menu
-*/
-.fwe-navbar-menu {
-  position: relative;
-}
-
-.fwe-navbar-menu-button {
-  padding: 0;
-  border: none;
-  background: none;
-  span {
-    margin-left: 4px; // separate icon from label
-  }
-  position: relative;
-  cursor: pointer;
-  color: $text;
-  height: 32px;
-  min-width: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &::before {
-    content: "";
-    position: absolute;
-    height: 0px;
-    right: 0px;
-    left: 0px;
-    bottom: -13px;
-    background: $caerul;
-    transition: height 0.2s;
-  }
-  &.fwe-selected {
-    color: $hero;
-    &::before {
-      height: 4px;
-    }
-  }
-  &:hover {
-    color: $hero;
-  }
-}
-
-.fwe-navbar-menu-container {
-  position: absolute;
-  display: flex;
-  top: 45px;
-  right: 0px;
-  width: 300px;
-  background-color: $white;
-  flex-direction: column;
-  box-shadow: 0px 1px 4px #00000029;
-  max-height: calc(100vh - #{$navbar-height});
-  overflow: visible;
-
-  @media (max-width: $grid-breakpoint-sm - 2) {
-    width: 100% !important;
-    position: fixed;
-    top: $navbar-height;
-    left: 0;
-    height: calc(100vh - #{$navbar-height});
-  }
-}
-
-/**
- * Profile menu
- */
-.fwe-profile-menu {
-  .fwe-profile-menu-header {
-    margin-bottom: $spacer-s;
-    display: flex;
-    flex-direction: row;
-    padding: $spacer-l $spacer-m $spacer-m $spacer-m;
-
-    .fwe-profile-image-container {
-      width: $spacer-xl;
-      height: $spacer-xl;
-      flex-shrink: 0;
-      border-radius: 50%;
-      overflow: hidden;
-      background-color: $gray-400;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: $spacer-s;
-
-      .fwe-profile-image {
-        width: 100%;
-      }
-
-      .fwe-placeholder-letter {
-        width: $spacer-l;
-        height: $spacer-l;
-        background-color: $gray-100;
-        border-radius: 50%;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        border: solid 6px $white;
-        box-sizing: content-box;
-        font-size: $font-size-base;
-        line-height: 28px;
-      }
-    }
-
-    .fwe-profile-data-container {
-      display: flex;
-      flex-direction: column;
-
-      .fwe-username {
-        overflow-wrap: anywhere;
-        font-weight: $font-weight-bold;
-      }
-
-      .fwe-email {
-        overflow-wrap: anywhere;
-        font-size: $font-size-small;
-        margin-top: $spacer-xxxs;
-      }
-    }
-  }
-
-  .fwe-profile-menu-item {
-    padding: $spacer-xs $spacer-m !important;
-    min-height: auto;
-    text-align: left;
-    justify-content: unset;
-    i {
-      padding-right: $spacer-xs !important;
-    }
-  }
-
-  .fwe-btn-logout {
-    border-radius: 0;
-    justify-content: center;
-    margin-top: $spacer-xxl - $spacer-m;
-  }
-
-  @media (max-width: $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;
-
-      .fwe-profile-image-container {
-        width: $spacer-xxl;
-        height: $spacer-xxl;
-        margin-right: $spacer-l;
-
-        .fwe-placeholder-letter {
-          width: 42px;
-          height: 42px;
-          border: solid 9px $white;
-          font-size: $font-size-xl;
-          line-height: 40px;
-        }
-      }
-    }
-
-    .fwe-profile-data-container .fwe-email {
-      font-size: $font-size-base !important;
-    }
-
-    .fwe-profile-menu-item {
-      padding: 20px $spacer-s !important;
-      i {
-        padding-right: $spacer-m !important;
-      }
-    }
-
-    .fwe-btn-logout {
-      margin: auto $spacer-s $spacer-l $spacer-s !important;
-      border-radius: $control-border-radius;
-    }
-  }
-}
-
-/**
- * Notification menu
- */
-.fwe-notification-button {
-  @extend .fwe-navbar-menu-button;
-
-  width: 32px;
-  &.fwe-selected {
-    .fwe-warning {
-      color: $orange;
-    }
-    .fwe-error {
-      color: $red;
-    }
-  }
-
-  .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-warning {
-    color: $white;
-    background: $orange;
-    &::before {
-      background: $orange;
-    }
-    .fwe-notification-batch {
-      background: $text;
-    }
-  }
-
-  &.fwe-error {
-    color: $white;
-    background: $red;
-    &::before {
-      background: $red;
-    }
-    .fwe-notification-batch {
-      background: $text;
-    }
-  }
-
-  &:hover {
-    &.fwe-warning {
-      color: $white;
-      background: $orange-dark;
-      &::before {
-        background: $orange-dark;
-      }
-    }
-    &.fwe-error {
-      color: $white;
-      background: $red-dark;
-      &::before {
-        background: $red-dark;
-      }
-    }
-  }
-}
-
-.fwe-notification-menu {
-  width: 400px;
-
-  .fwe-notification-title {
-    display: flex;
-    align-items: center;
-    font-weight: $font-weight-bold;
-    height: 48px;
-    padding-left: $spacer-m;
-    padding-right: $spacer-xxs;
-    border-bottom: 1px solid $border;
-  }
-
-  .fwe-notification-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 48px;
-    margin-left: $spacer-m;
-    margin-right: $spacer-m;
-    border-top: 1px solid $border;
-  }
-
-  .fwe-notification-list {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-
-    .fwe-notification-item {
-      align-items: stretch;
-      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;
-        }
-      }
-    }
-
-    .fwe-notification-item-content {
-      position: relative;
-      margin-left: $spacer-l + $spacer-m;
-      margin-right: $spacer-m;
-      padding-top: $spacer-s;
-      padding-bottom: $spacer-s;
-
-      .fwe-item-header {
-        font-weight: $font-weight-bold;
-        margin-bottom: 4px;
-      }
-      .fwe-item-footer {
-        font-size: $font-size-small;
-        color: $text-disabled;
-        margin-top: 11px;
-      }
-      @extend .fwe-icon;
-      font-family: $font-family-base;
-      &::before {
-        position: absolute;
-        left: -32px;
-        top: 21px;
-      }
-    }
-
-    .fwe-notification-info {
-      @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-info;
-      &::before {
-        color: $caerul;
-      }
-    }
-    .fwe-notification-warning {
-      @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-warning;
-      &::before {
-        color: $orange;
-      }
-    }
-
-    .fwe-notification-error {
-      @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-warning;
-      &::before {
-        color: $red;
-      }
-    }
-  }
-}
+/*
+** Basic navbar menu
+*/
+.fwe-navbar-menu {
+  position: relative;
+}
+
+.fwe-navbar-menu-button {
+  padding: 0;
+  border: none;
+  background: none;
+  span {
+    margin-left: 4px; // separate icon from label
+  }
+  position: relative;
+  cursor: pointer;
+  color: $text;
+  height: 32px;
+  min-width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &::before {
+    content: "";
+    position: absolute;
+    height: 0px;
+    right: 0px;
+    left: 0px;
+    bottom: -13px;
+    background: $caerul;
+    transition: height 0.2s;
+  }
+  &.fwe-selected {
+    color: $hero;
+    &::before {
+      height: 4px;
+    }
+  }
+  &:hover {
+    color: $hero;
+  }
+}
+
+.fwe-navbar-menu-container {
+  position: absolute;
+  display: flex;
+  top: 45px;
+  right: 0px;
+  width: 300px;
+  background-color: $white;
+  flex-direction: column;
+  box-shadow: 0px 1px 4px #00000029;
+  max-height: calc(100vh - #{$navbar-height});
+  overflow: visible;
+
+  @media (max-width: $grid-breakpoint-sm - 2) {
+    width: 100% !important;
+    position: fixed;
+    top: $navbar-height;
+    left: 0;
+    height: calc(100vh - #{$navbar-height});
+  }
+}
+
+/**
+ * Profile menu
+ */
+.fwe-profile-menu {
+  .fwe-profile-menu-header {
+    margin-bottom: $spacer-s;
+    display: flex;
+    flex-direction: row;
+    padding: $spacer-l $spacer-m $spacer-m $spacer-m;
+
+    .fwe-profile-image-container {
+      width: $spacer-xl;
+      height: $spacer-xl;
+      flex-shrink: 0;
+      border-radius: 50%;
+      overflow: hidden;
+      background-color: $gray-400;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: $spacer-s;
+
+      .fwe-profile-image {
+        width: 100%;
+      }
+
+      .fwe-placeholder-letter {
+        width: $spacer-l;
+        height: $spacer-l;
+        background-color: $gray-100;
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border: solid 6px $white;
+        box-sizing: content-box;
+        font-size: $font-size-base;
+        line-height: 28px;
+      }
+    }
+
+    .fwe-profile-data-container {
+      display: flex;
+      flex-direction: column;
+
+      .fwe-username {
+        overflow-wrap: anywhere;
+        font-weight: $font-weight-bold;
+      }
+
+      .fwe-email {
+        overflow-wrap: anywhere;
+        font-size: $font-size-small;
+        margin-top: $spacer-xxxs;
+      }
+    }
+  }
+
+  .fwe-profile-menu-item {
+    padding: $spacer-xs $spacer-m !important;
+    min-height: auto;
+    text-align: left;
+    justify-content: unset;
+    i {
+      padding-right: $spacer-xs !important;
+    }
+  }
+
+  .fwe-btn-logout {
+    border-radius: 0;
+    justify-content: center;
+    margin-top: $spacer-xxl - $spacer-m;
+  }
+
+  @media (max-width: $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;
+
+      .fwe-profile-image-container {
+        width: $spacer-xxl;
+        height: $spacer-xxl;
+        margin-right: $spacer-l;
+
+        .fwe-placeholder-letter {
+          width: 42px;
+          height: 42px;
+          border: solid 9px $white;
+          font-size: $font-size-xl;
+          line-height: 40px;
+        }
+      }
+    }
+
+    .fwe-profile-data-container .fwe-email {
+      font-size: $font-size-base !important;
+    }
+
+    .fwe-profile-menu-item {
+      padding: 20px $spacer-s !important;
+      i {
+        padding-right: $spacer-m !important;
+      }
+    }
+
+    .fwe-btn-logout {
+      margin: auto $spacer-s $spacer-l $spacer-s !important;
+      border-radius: $control-border-radius;
+    }
+  }
+}
+
+/**
+ * Notification menu
+ */
+.fwe-notification-button {
+  @extend .fwe-navbar-menu-button;
+
+  width: 32px;
+  &.fwe-selected {
+    .fwe-warning {
+      color: $orange;
+    }
+    .fwe-error {
+      color: $red;
+    }
+  }
+
+  .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-warning {
+    color: $white;
+    background: $orange;
+    &::before {
+      background: $orange;
+    }
+    .fwe-notification-batch {
+      background: $text;
+    }
+  }
+
+  &.fwe-error {
+    color: $white;
+    background: $red;
+    &::before {
+      background: $red;
+    }
+    .fwe-notification-batch {
+      background: $text;
+    }
+  }
+
+  &:hover {
+    &.fwe-warning {
+      color: $white;
+      background: $orange-dark;
+      &::before {
+        background: $orange-dark;
+      }
+    }
+    &.fwe-error {
+      color: $white;
+      background: $red-dark;
+      &::before {
+        background: $red-dark;
+      }
+    }
+  }
+}
+
+.fwe-notification-menu {
+  width: 400px;
+
+  .fwe-notification-title {
+    display: flex;
+    align-items: center;
+    font-weight: $font-weight-bold;
+    height: 48px;
+    padding-left: $spacer-m;
+    padding-right: $spacer-xxs;
+    border-bottom: 1px solid $border;
+  }
+
+  .fwe-notification-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    margin-left: $spacer-m;
+    margin-right: $spacer-m;
+    border-top: 1px solid $border;
+  }
+
+  .fwe-notification-list {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    .fwe-notification-item {
+      align-items: stretch;
+      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;
+        }
+      }
+    }
+
+    .fwe-notification-item-content {
+      position: relative;
+      margin-left: $spacer-l + $spacer-m;
+      margin-right: $spacer-m;
+      padding-top: $spacer-s;
+      padding-bottom: $spacer-s;
+
+      .fwe-item-header {
+        font-weight: $font-weight-bold;
+        margin-bottom: 4px;
+      }
+      .fwe-item-footer {
+        font-size: $font-size-small;
+        color: $text-disabled;
+        margin-top: 11px;
+      }
+      @extend .fwe-icon;
+      font-family: $font-family-base;
+      &::before {
+        position: absolute;
+        left: -32px;
+        top: 21px;
+      }
+    }
+
+    .fwe-notification-info {
+      @extend .fwe-notification-item-content;
+      @extend .fwe-icon-status-info;
+      &::before {
+        color: $caerul;
+      }
+    }
+    .fwe-notification-warning {
+      @extend .fwe-notification-item-content;
+      @extend .fwe-icon-status-warning;
+      &::before {
+        color: $orange;
+      }
+    }
+
+    .fwe-notification-error {
+      @extend .fwe-notification-item-content;
+      @extend .fwe-icon-status-warning;
+      &::before {
+        color: $red;
+      }
+    }
+  }
+}