@rossigee/clarity-ui 18.2.1-fixed

package/layout/vertical-nav/_vertical-nav.clarity.scss

@@ -0,0 +1,469 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:meta';
+@use '../../styles/a11y';
+@use '../../styles/mixins';
+@use 'variables.vertical-nav' as vertical-nav-variables;
+@use 'mixins.vertical-nav' as vertical-nav-mixins;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.vertical-nav');
+@include mixins.exports('vertical-nav.clarity') {
+  .clr-vertical-nav {
+    //Display
+    display: flex;
+    flex-direction: column;
+
+    //Dims
+    width: mixins.baselinePx(240);
+    min-width: density.$clr-base-layout-space-3xl;
+
+    //Others
+    background-color: vertical-nav-variables.$clr-vertical-nav-bg-color;
+    will-change: width;
+    transition: width 0.2s ease-in-out;
+
+    .nav-divider {
+      @include vertical-nav-mixins.vertical-nav-divider();
+    }
+
+    .nav-content {
+      //display
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+
+      //Others
+      overflow: hidden auto;
+    }
+
+    .nav-group {
+      //Display
+      display: block;
+      flex: 0 0 auto;
+
+      //Dims
+      height: auto;
+      min-height: vertical-nav-variables.$clr-vertical-nav-item-height;
+    }
+
+    .nav-group-content {
+      //Display
+      display: flex;
+
+      //Others
+
+      @include vertical-nav-mixins.vertical-nav-link-colors();
+
+      .nav-link {
+        //Display
+        flex: 1 1 auto;
+
+        //Dims
+        padding-left: 0;
+        min-width: 0; //Chrome nested flex box ellipsis fix
+      }
+
+      .nav-icon {
+        //Dims
+        margin-left: density.$clr-base-horizontal-offset-xl;
+      }
+
+      .nav-text {
+        //Dims
+        padding-left: density.$clr-base-horizontal-offset-l;
+      }
+
+      .nav-icon + .nav-text {
+        //Dims
+        padding-left: 0;
+      }
+
+      .nav-link + .nav-group-text {
+        //Display
+        display: none;
+      }
+
+      > .nav-link {
+        &.active,
+        &:active {
+          font-weight: vertical-nav-variables.$clr-vertical-nav-item-active-font-weight;
+        }
+      }
+    }
+
+    .nav-group-children {
+      overflow-y: hidden;
+    }
+
+    .nav-trigger,
+    .nav-group-trigger {
+      //Display
+      flex: 0 0 vertical-nav-variables.$clr-vertical-nav-toggle-button-size;
+
+      //Dims
+      border: none;
+      height: vertical-nav-variables.$clr-vertical-nav-toggle-button-size;
+      padding: 0;
+
+      //Others
+      cds-icon[shape='angle-double'],
+      clr-icon[shape='angle-double'] {
+        color: vertical-nav-variables.$clr-vertical-nav-toggle-icon-color;
+
+        &:hover {
+          color: vertical-nav-variables.$clr-vertical-nav-toggle-icon-hover-color;
+        }
+
+        &:active {
+          color: vertical-nav-variables.$clr-vertical-nav-toggle-icon-active-color;
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        cds-icon[shape='angle-double'],
+        clr-icon[shape='angle-double'] {
+          color: vertical-nav-variables.$clr-vertical-nav-toggle-icon-disabled-color;
+        }
+      }
+
+      background-color: transparent;
+      cursor: pointer;
+      outline-offset: calc(-1 * #{mixins.baselinePx(5)});
+    }
+
+    .nav-trigger {
+      //Display
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      //Dims
+      height: vertical-nav-variables.$clr-vertical-nav-item-height;
+      padding: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-xl;
+
+      cds-icon,
+      clr-icon {
+        margin-right: 0;
+
+        &:not([size]) {
+          @include mixins.equilateral(density.$clr-base-icon-size-s);
+        }
+      }
+
+      &.on-collapse {
+        cds-icon,
+        clr-icon {
+          margin: 0;
+        }
+      }
+    }
+
+    //Parent .nav-group-content
+    .nav-group-trigger {
+      //Display
+      //flex: 0 0 $clr-vertical-nav-item-height;
+      display: flex;
+      flex: 1 1 auto;
+
+      //Others
+      color: inherit;
+      overflow: hidden;
+      text-align: left;
+
+      .nav-group-trigger-icon {
+        //Display
+        flex-shrink: 0;
+
+        //Dims
+        width: vertical-nav-variables.$clr-vertical-nav-icon-size;
+        margin: density.$clr-base-vertical-offset-m density.$clr-base-horizontal-offset-m;
+        align-self: center;
+
+        //Others
+        transition: all 0.2s ease-in-out;
+      }
+    }
+
+    //Parent .nav-trigger
+    .nav-trigger-icon {
+      //Others
+      transition: all 0.2s ease-in-out;
+    }
+
+    .nav-trigger + .nav-content {
+      //Dims
+
+      @include vertical-nav-mixins.vertical-nav-divider();
+    }
+
+    .nav-group-text,
+    .nav-link {
+      //Dims
+      height: vertical-nav-variables.$clr-vertical-nav-item-height;
+      padding: vertical-nav-variables.$clr-vertical-nav-item-padding;
+
+      //Others
+
+      @include mixins.generate-typography-token('BODY-14-RG-CPT');
+
+      display: flex;
+      align-items: center;
+      outline-offset: calc(-1 * #{mixins.baselinePx(5)});
+    }
+
+    .nav-group-text,
+        /*Parent .nav-link*/
+        .nav-text {
+      //Display
+      flex: 1 1 auto;
+      //Mixins
+
+      @include mixins.overflow-ellipsis();
+    }
+
+    .nav-link {
+      //Display
+      display: flex;
+      text-decoration: none;
+
+      //Others
+
+      @include vertical-nav-mixins.vertical-nav-link-colors();
+    }
+
+    .nav-header {
+      //Dims
+      padding: vertical-nav-variables.$clr-vertical-nav-header-padding;
+      min-height: vertical-nav-variables.$clr-vertical-nav-item-height;
+
+      //Others
+
+      @include mixins.generate-typography-token(
+        'SECTION-12-SB-CPT',
+        (
+          font-weight: vertical-nav-variables.$clr-vertical-nav-header-font-weight,
+        )
+      );
+    }
+
+    //Parent .nav-text
+    .nav-icon {
+      //Display
+      flex: 0 0 vertical-nav-variables.$clr-vertical-nav-icon-size;
+      align-self: center;
+
+      //Dims
+
+      @include mixins.min-equilateral(vertical-nav-variables.$clr-vertical-nav-icon-size);
+
+      margin-right: density.$clr-base-gap-xs;
+
+      //Others
+      vertical-align: middle;
+    }
+
+    clr-vertical-nav-group-children {
+      display: block;
+    }
+
+    .nav-btn {
+      //Display
+      flex: 1 1 auto;
+
+      //Dims
+      padding: 0;
+      margin: 0;
+
+      //Others
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      outline-offset: calc(-1 * #{mixins.baselinePx(5)});
+    }
+
+    & > .nav-link,
+    .nav-content > .nav-link {
+      //Display
+      flex: 0 0 vertical-nav-variables.$clr-vertical-nav-toggle-button-size;
+    }
+
+    .nav-link + .nav-group-trigger {
+      //Display
+      flex: 0 0 vertical-nav-variables.$clr-vertical-nav-toggle-button-size;
+
+      .nav-group-text {
+        display: none;
+      }
+    }
+
+    .nav-icon + .nav-group-text {
+      padding-left: 0;
+    }
+
+    ///////
+    //////
+    ////
+    // Interactions
+    ////
+    //////
+    ///////
+    &.has-nav-groups {
+      .nav-content > .nav-link,
+      .nav-group .nav-group-text,
+      .nav-group .nav-group-trigger {
+        font-weight: vertical-nav-variables.$clr-vertical-nav-item-top-level-font-weight;
+      }
+
+      .nav-group-children .nav-link {
+        padding: vertical-nav-variables.$clr-vertical-nav-item-child-padding;
+      }
+    }
+
+    &.has-icons {
+      .nav-group-children .nav-link {
+        padding: vertical-nav-variables.$clr-vertical-nav-item-child-padding;
+      }
+    }
+
+    .nav-group.active:not(.is-expanded) {
+      .nav-group-content {
+        background-color: vertical-nav-variables.$clr-vertical-nav-selected-bg-color;
+
+        //Horrible Nesting but nothing I can do.
+        .nav-icon {
+          fill: vertical-nav-variables.$clr-vertical-nav-icon-active-color;
+        }
+      }
+    }
+
+    .nav-group-content {
+      .nav-link.active ~ .nav-group-trigger {
+        background-color: vertical-nav-variables.$clr-vertical-nav-selected-bg-color;
+      }
+
+      .nav-link:hover ~ .nav-group-trigger {
+        background-color: vertical-nav-variables.$clr-vertical-nav-hover-bg-color;
+      }
+
+      .nav-link:active ~ .nav-group-trigger {
+        background-color: vertical-nav-variables.$clr-vertical-nav-active-bg-color;
+      }
+
+      .nav-link.active:hover ~ .nav-group-trigger {
+        background-color: vertical-nav-variables.$clr-vertical-nav-selected-hover-bg-color;
+      }
+
+      .nav-link.active:active ~ .nav-group-trigger {
+        background-color: vertical-nav-variables.$clr-vertical-nav-selected-active-bg-color;
+      }
+    }
+
+    // horizontally center the expand icon
+    &:not(.is-collapsed) .nav-link + .nav-group-trigger {
+      justify-content: center;
+    }
+
+    .main-container:not([class*='open-overflow-menu'], [class*='open-hamburger-menu']) &.is-collapsed {
+      //Dims
+      width: vertical-nav-variables.$clr-vertical-nav-min-width;
+      min-width: vertical-nav-variables.$clr-vertical-nav-min-width;
+      // ATM - adress scroll when more items are available, otherwise the content gets hidden
+      max-width: calc(#{vertical-nav-variables.$clr-vertical-nav-min-width} + #{mixins.baselinePx(14)});
+
+      //Others
+      cursor: pointer;
+
+      .nav-icon {
+        //Dims
+        margin: density.$clr-base-vertical-offset-m 0 density.$clr-base-vertical-offset-m
+          density.$clr-base-horizontal-offset-xl;
+      }
+
+      .nav-group-content {
+        .nav-link {
+          //Display
+          flex: 0 0 vertical-nav-variables.$clr-vertical-nav-min-width;
+        }
+
+        .nav-link ~ .nav-group-trigger {
+          //Display
+          flex: 0 0
+            calc(
+              #{vertical-nav-variables.$clr-vertical-nav-collapsed-caret-size} +
+                #{vertical-nav-variables.$clr-vertical-nav-icon-right-margin}
+            );
+
+          //Others
+          transform: translateX(calc(-1 * #{vertical-nav-variables.$clr-vertical-nav-icon-size}));
+          pointer-events: none;
+        }
+      }
+
+      .nav-link,
+      .nav-group-trigger {
+        //Dims
+        padding: 0;
+      }
+
+      .nav-group-trigger {
+        //Display
+        //flex: 0 0 $clr-vertical-nav-collapsed-caret-size + $clr-vertical-nav-icon-right-margin;
+
+        //Dims
+        padding-left: 0;
+
+        cds-icon,
+        clr-icon {
+          &.nav-group-trigger-icon {
+            width: density.$clr-base-icon-size-s;
+            margin: 0;
+          }
+        }
+      }
+
+      //If no icon present then hide the nav-group and nav-links.
+      .nav-group,
+      .nav-link {
+        display: none;
+      }
+
+      //When the nav has icons just hide the nav-text
+      &.has-icons {
+        .nav-group {
+          display: block;
+        }
+
+        .nav-link {
+          display: flex;
+        }
+
+        .nav-group-text,
+        .nav-text {
+          @include mixins.screen-reader-only();
+        }
+      }
+    }
+
+    &.nav-trigger--bottom {
+      .nav-trigger {
+        order: 2;
+        margin-top: 0;
+      }
+
+      .nav-trigger + .nav-content {
+        //Dims
+        border-top: 0;
+
+        @include vertical-nav-mixins.vertical-nav-divider('border-bottom');
+      }
+    }
+  }
+}

package/main.scss

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+// OG Theme: This is for generating the OG Clarity Theme
+
+// Clarity component code (consumes the variables and theme overrides)
+@use 'styles/components.clarity';
+
+// Metropolis font
+@use 'typography/font-metropolis';