@linzjs/lui 17.41.3 → 17.41.5

package/dist/scss/Components/HeaderV2/header-v2.scss

@@ -39,8 +39,8 @@ $headerElementPadding: spacing.$unit-xs;
     &:after {
       content: none;
     }
-    .LuiHeaderV2-menu-button {
-      .LuiHeaderV2-menu-icon {
+    .LuiHeaderV2-menu-item-button {
+      &-icon {
         color: colors.$surfie;
       }
     }
@@ -61,12 +61,14 @@ $headerElementPadding: spacing.$unit-xs;
   flex-wrap: nowrap;
   flex: 0 1 auto;
   height: 100%;
+  column-gap: $headerPadding;
 }
 
 .LuiHeaderV2-title {
   white-space: nowrap;
   padding-right: $headerElementPadding;
   padding-left: $headerElementPadding;
+
   vertical-align: middle;
 
   h1 {
@@ -98,10 +100,10 @@ $headerElementPadding: spacing.$unit-xs;
 
   @include breakpoint(sm) {
     border-right: 1px solid colors.$persian;
-    padding-right: $headerElementPadding;
+    margin-right: $headerElementPadding;
   }
 
-  & .clickable {
+  .clickable {
     cursor: pointer;
   }
 }
@@ -119,11 +121,8 @@ $headerElementPadding: spacing.$unit-xs;
     height: $headerRowHeightSmV2;
 
     .LuiHeaderV2-col {
-      height: 40px;
-
       .LuiHeaderV2-logo {
         border: none;
-        padding-right: 0;
       }
 
       .LuiHeaderV2-linz-motif {
@@ -140,7 +139,6 @@ $headerElementPadding: spacing.$unit-xs;
           font-size: 20px;
           line-height: 24px;
           @include fonts.font-regular;
-          margin: 0;
         }
       }
     }
@@ -181,30 +179,30 @@ $headerElementPadding: spacing.$unit-xs;
 }
 
 .LuiHeaderV2-menu-item {
-  .LuiHeaderV2-menu-button {
+  display: flex;
+  flex-direction: column;
+
+  &-button {
     @include fonts.font-semibold;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: misc.$borderRadius;
 
     .clickable:hover {
       cursor: pointer;
     }
 
     &.selected {
-      background-color: colors.$teal;
+      background-color: rgba(0, 0, 0, 0.2);
     }
 
     &.unselected:hover {
-      background-color: colors.$sea;
+      background-color: rgba(255, 255, 255, 0.2);
     }
 
-    .lui-icon {
-      fill: colors.$white;
-    }
-
-    .tooltip {
+    .menu-tooltip {
       display: none;
       background-color: black;
       text-align: center;
@@ -218,7 +216,8 @@ $headerElementPadding: spacing.$unit-xs;
       top: 60px;
       z-index: 10;
 
-      box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;
+      @include drop-shadow(sm);
+      border-radius: misc.$borderRadius;
 
       &.dark {
         color: colors.$hint;
@@ -261,12 +260,12 @@ $headerElementPadding: spacing.$unit-xs;
     }
 
     &:hover {
-      .tooltip {
+      .menu-tooltip {
         display: block;
       }
     }
 
-    .LuiHeaderV2-menu-icon {
+    &-icon {
       display: flex;
       align-items: center;
       color: colors.$white;
@@ -279,32 +278,38 @@ $headerElementPadding: spacing.$unit-xs;
       justify-content: center;
     }
 
-    .LuiHeaderV2-menu-label {
+    &-label {
       text-align: left;
-      margin-right: $headerElementPadding;
+      white-space: nowrap;
+      padding-right: $headerElementPadding;
     }
 
-    .LuiHeaderV2-menu-label-only {
-      text-align: left;
-      margin-left: $headerElementPadding;
-      margin-right: $headerElementPadding;
+    &-label-only {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-left: $headerElementPadding;
+      padding-right: $headerElementPadding;
+      white-space: nowrap;
+      height: 48px;
+      @include fonts.font-semibold;
+      font-size: 16px;
     }
 
-    .LuiHeaderV2-badge {
+    &-badge {
       position: absolute;
-      top: 0.3rem;
-      left: 1.75rem;
-      width: 1.25rem;
-      height: 1.25rem;
-      font-size: 0.75em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 4px;
+      left: 25px;
+      width: 20px;
+      height: 20px;
+      font-size: 12px;
+      text-align: center;
+      border-radius: 50%;
+      background: #cc0000;
+      color: white;
     }
   }
 }
-
-.LuiHeaderV2-badge {
-  display: block;
-  text-align: center;
-  border-radius: 50%;
-  background: #cc0000;
-  color: white;
-}

package/dist/scss/Components/MenuV2/menu-v2.scss

@@ -17,102 +17,131 @@ body.LuiHeaderMenuV2-drawer-open {
   overflow-y: hidden;
 }
 
-.LuiHeaderMenuV2-drawer {
-  @include LuiHeaderMenuV2-drop-content;
-  height: 100%;
-  max-width: 100%;
-
-  z-index: 1;
-  top: 0;
-  right: 0px;
-  overflow-x: hidden;
+.LuiHeaderMenuV2-drawer-container {
+  position: relative;
 
-  border-left: 2px solid colors.$lily;
-  border-bottom: 2px solid colors.$lily;
+  &.drawer {
+    right: -(header.$headerPadding);
+  }
 
-  .LuiHeaderV2 & {
-    top: header.$headerHeightMdV2;
-    height: calc(100% - #{header.$headerHeightMdV2});
+  .LuiHeaderMenuV2-drawer {
+    @include LuiHeaderMenuV2-drop-content;
+    height: auto;
+    z-index: 1;
 
-    @include breakpoint(md) {
-      top: header.$headerHeightLgV2;
-      height: calc(100% - #{header.$headerHeightLgV2});
+    &.sm {
+      width: 260px;
+    }
+    &.md {
+      width: 280px;
+    }
+    &.lg {
+      width: 300px;
+    }
+    &.xlg {
+      width: 320px;
     }
-  }
 
-  .LuiHeaderV2-small & {
-    &.non-sticky {
-      border-right: 0.5px solid colors.$lily;
+    // dropdown drawer
+    &.dropdown {
+      display: none;
+      position: absolute;
+      right: 0;
+      &.open {
+        display: block;
+      }
     }
-    top: header.$headerHeightSmV2;
-    height: auto;
-  }
 
-  &.non-sticky {
-    position: absolute;
-  }
+    // sliding drawer
+    .LuiHeaderV2 & {
+      &.drawer {
+        &.sticky {
+          position: fixed;
+          top: header.$headerHeightMdV2;
+        }
+      }
 
-  &.sticky {
-    position: fixed;
-  }
+      &.drawer {
+        &.non-sticky {
+          position: absolute;
+          top: header.$headerPadding;
+        }
+      }
+    }
 
-  // animation
-  transition: right 500ms, visibility 500ms;
-  visibility: hidden;
+    .LuiHeaderV2-small & {
+      &.drawer {
+        &.sticky {
+          position: fixed;
+          top: header.$headerHeightSmV2;
+        }
+      }
 
-  &.sm {
-    width: 260px;
-    right: -260px;
-  }
-  &.md {
-    width: 280px;
-    right: -280px;
-  }
-  &.lg {
-    width: 300px;
-    right: -300px;
-  }
-  &.xlg {
-    width: 320px;
-    right: -320px;
-  }
+      &.drawer {
+        &.non-sticky {
+          position: absolute;
+          top: header.$headerPadding;
+        }
+      }
+    }
 
-  &.open {
-    right: 0px;
-    visibility: visible;
-  }
+    &.drawer {
+      &.sm {
+        right: -260px;
+      }
+      &.md {
+        right: -280px;
+      }
+      &.lg {
+        right: -300px;
+      }
+      &.xlg {
+        right: -320px;
+      }
 
-  &-options {
-    hr {
-      background-color: colors.$lily;
-    }
-  }
+      // animation
+      transition: right 500ms, visibility 500ms;
+      visibility: hidden;
 
-  &-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 16px;
+      &.open {
+        right: 0px;
+        visibility: visible;
+      }
+    }
 
-    &:hover {
-      cursor: pointer;
-      background-color: colors.$polar;
+    // drawer option and options
+    &-options {
+      hr {
+        background-color: colors.$lily;
+      }
     }
 
-    &-label {
+    &-option {
       display: flex;
+      justify-content: space-between;
       align-items: center;
+      padding: 12px 16px;
 
-      .LuiIcon:first-child {
-        margin-right: 10px;
+      &:hover {
+        cursor: pointer;
+        background-color: colors.$polar;
       }
-    }
 
-    &-badge {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-left: 10px;
+      &-label {
+        display: flex;
+        align-items: center;
+
+        .LuiIcon:first-child {
+          margin-right: 10px;
+        }
+      }
+
+      &-badge {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 10px;
+      }
     }
   }
 }
@@ -123,15 +152,6 @@ body.LuiHeaderMenuV2-drawer-open {
   .LuiHeaderMenuV2-dropdown {
     @include LuiHeaderMenuV2-drop-content;
     position: absolute;
-    top: header.$headerPadding;
-
-    // animation
-    transition: transform 250ms ease-in-out;
-    transform: scaleY(0);
-    transform-origin: center top;
-    &.open {
-      transform: scaleY(1);
-    }
 
     z-index: 900; // primary menu
 
@@ -147,16 +167,22 @@ body.LuiHeaderMenuV2-drawer-open {
       right: 0;
     }
 
+    display: none;
+
+    &.open {
+      display: block;
+    }
+
     &.dropdown-xxl {
-      width: 500px;
+      width: 400px;
     }
 
     &.dropdown-xl {
-      width: 400px;
+      width: 360px;
     }
 
     &.dropdown-lg {
-      width: 320px;
+      width: 300px;
     }
 
     &.dropdown-md {
@@ -164,40 +190,41 @@ body.LuiHeaderMenuV2-drawer-open {
     }
 
     &.dropdown-sm {
-      width: 200px;
+      width: 240px;
     }
 
     &.dropdown-xs {
-      width: 150px;
+      width: 160px;
     }
   }
 }
 
 .LuiDrawerMenuSectionV2-header {
   @include fonts.font-semibold;
-  background-color: colors.$hint;
+
   white-space: nowrap;
   padding-left: 16px;
   padding-right: 8px;
-}
 
-.LuiDrawerMenuSectionV2-header {
   .lui-expand-header {
     padding-top: 8px;
     padding-bottom: 8px;
     display: flex;
+    justify-content: start;
+    align-items: center;
+    cursor: revert;
+    @include fonts.font-semibold;
+    font-size: 14px;
+    color: colors.$fuscous;
+    line-height: 20px;
   }
-}
 
-.LuiDrawerMenuSectionV2-header h3 {
-  @include fonts.font-semibold;
-  font-size: fonts.$base-font-size;
-  color: colors.$base-type-color;
-  margin-top: 0;
-  line-height: 32px;
+  .LuiHeaderMenuV2-dropdown & {
+    border-radius: misc.$borderRadius;
+  }
 }
 
 .LuiDrawerMenuDividerV2 {
-  height: 1px;
+  height: 0.25px;
   background-color: colors.$silver;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.41.3",
+  "version": "17.41.5",
   "license": "MIT",
   "repository": {
     "type": "git",