@rossigee/clarity-ui 18.2.1-fixed

package/layout/nav/_responsive-nav.clarity.scss

@@ -0,0 +1,488 @@
+/*
+ * 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:map';
+@use 'sass:meta';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables';
+@use '../main-container/variables.header' as header-variables;
+@use '../vertical-nav/mixins.vertical-nav' as vertical-nav-mixins;
+@use 'mixins.header' as header-mixins;
+@use 'variables.responsive-nav' as responsive-nav-variables;
+@use 'mixins.responsive-nav' as responsive-nav-mixins;
+@use '../../styles/variables/variables' as util-variables;
+@use '../../layout/vertical-nav/variables.vertical-nav' as vertical-nav-variables;
+@use '../tabs/tabs.clarity' as tabs;
+@use 'variables.subnav' as nav-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.responsive-nav');
+@include mixins.exports('responsive-nav.clarity') {
+  .clr-nav-close {
+    margin: density.$clr-base-vertical-offset-l density.$clr-base-horizontal-offset-l;
+    background: none;
+    border: none;
+    color: var(--color);
+
+    --color: #{tokens.$cds-global-color-white};
+
+    &:hover,
+    &:focus {
+      --color: #{tokens.$cds-global-color-warm-gray-100};
+    }
+  }
+
+  .header-hamburger-trigger,
+  .header-overflow-trigger {
+    display: none;
+  }
+
+  .header-hamburger-trigger {
+    $trigger-span-pseudo-positioning: calc(-1 * tokens.$cds-global-space-5);
+
+    & > span,
+    & > span::before,
+    & > span::after {
+      display: inline-block;
+      height: tokens.$cds-global-space-2;
+      width: tokens.$cds-global-space-9;
+      background: responsive-nav-variables.$clr-responsive-nav-trigger-bg-color;
+      border-radius: tokens.$cds-alias-object-border-radius-100;
+    }
+
+    & > span {
+      position: relative;
+      vertical-align: middle;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+      }
+
+      &::before {
+        top: $trigger-span-pseudo-positioning;
+      }
+
+      &::after {
+        bottom: $trigger-span-pseudo-positioning;
+      }
+    }
+
+    &.active {
+      @include responsive-nav-mixins.hamburger-menu-trigger-animation();
+    }
+  }
+
+  .header-overflow-trigger {
+    $overflow-trigger-pseudo-positioning: calc(-1 * tokens.$cds-global-space-5);
+
+    & > span,
+    & > span::before,
+    & > span::after {
+      display: inline-block;
+
+      @include mixins.equilateral(tokens.$cds-global-space-3);
+
+      background: responsive-nav-variables.$clr-responsive-nav-trigger-bg-color;
+      // TODO: Use border radius token?
+      border-radius: tokens.$cds-global-space-3;
+    }
+
+    & > span {
+      position: relative;
+      vertical-align: middle;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+      }
+
+      &::before {
+        top: $overflow-trigger-pseudo-positioning;
+      }
+
+      &::after {
+        bottom: $overflow-trigger-pseudo-positioning;
+      }
+    }
+
+    &.active {
+      @include responsive-nav-mixins.overflow-menu-trigger-animation();
+    }
+  }
+
+  @media screen and (max-width: map.get(variables.$clr-grid-breakpoints, lg)) {
+    .main-container {
+      .header-hamburger-trigger,
+      .header-overflow-trigger {
+        display: inline-block;
+        border: none;
+        background: none;
+        cursor: pointer;
+
+        @include mixins.equilateral(header-variables.$clr-header-height);
+
+        // TODO: replace `hamburger` and `dots` to use CDS-ICON `bars` and `ellipsis-vertical` respectively.
+        // 2px to vertically align the trigger lines. display flex was not working on all browsers.
+        padding: 0 0 tokens.$cds-global-space-2 0;
+        text-align: center;
+        white-space: nowrap;
+
+        &:focus {
+          // So that the outline styles aren't hidden because of the browser
+          outline-offset: calc(-1 * tokens.$cds-global-space-4);
+        }
+
+        @include header-mixins.header-nav-appearance();
+      }
+
+      .header-nav.clr-nav-level-1,
+      .subnav.clr-nav-level-1,
+      .sub-nav.clr-nav-level-1,
+      .clr-vertical-nav.clr-nav-level-1 {
+        @include responsive-nav-mixins.sliding-nav-positioning();
+
+        transform: translateX(calc(-1 * #{responsive-nav-variables.$clr-sliding-panel-width}));
+        transition: responsive-nav-variables.$clr-sliding-panel-animation;
+      }
+
+      .header-nav.clr-nav-level-2,
+      .subnav.clr-nav-level-2,
+      .sub-nav.clr-nav-level-2,
+      .clr-vertical-nav.clr-nav-level-2 {
+        @include responsive-nav-mixins.sliding-nav-positioning(0, 0, 0, auto);
+
+        transform: translateX(responsive-nav-variables.$clr-sliding-panel-width);
+        transition: responsive-nav-variables.$clr-sliding-panel-animation;
+      }
+
+      .subnav.clr-nav-level-1,
+      .sub-nav.clr-nav-level-1,
+      .subnav.clr-nav-level-2,
+      .sub-nav.clr-nav-level-2 {
+        .nav,
+        aside {
+          flex-direction: column;
+          align-items: stretch;
+        }
+
+        aside {
+          justify-content: center;
+          width: 100%;
+        }
+
+        //Such deep nesting is unfortunately required here because we don't want
+        //navs which are not subnav to behave in a similar way.
+        // TODO: more specificity in classname is preferable to nesting...
+        .nav {
+          padding-left: 0;
+          gap: density.$clr-base-gap-s;
+
+          .nav-item {
+            height: density.$clr-base-row-height-m;
+            margin-right: 0;
+          }
+
+          .nav-link {
+            padding: vertical-nav-variables.$clr-vertical-nav-item-padding;
+            width: 100%;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            @include vertical-nav-mixins.vertical-nav-link-colors();
+
+            &:hover,
+            &.active {
+              box-shadow: none;
+            }
+
+            &:hover {
+              &:not(.active)::before {
+                content: none;
+              }
+            }
+          }
+        }
+      }
+
+      .clr-vertical-nav.clr-nav-level-1,
+      .clr-vertical-nav.clr-nav-level-2 {
+        border-right: none;
+      }
+    }
+
+    .main-container {
+      .header-overflow-trigger {
+        position: relative;
+
+        &::after {
+          @include header-mixins.header-section-divider();
+        }
+      }
+
+      .header {
+        .branding {
+          max-width: mixins.baselinePx(240);
+          min-width: 0;
+          overflow: hidden;
+        }
+
+        .header-hamburger-trigger + .branding {
+          padding-left: 0;
+          margin-left: calc(-1 * density.$clr-base-horizontal-offset-m);
+
+          //TODO: deprecate .clr-icon, .logo
+          .clr-icon,
+          .logo,
+          cds-icon,
+          clr-icon {
+            display: none;
+          }
+        }
+
+        .branding + .header-overflow-trigger,
+        .header-nav + .header-overflow-trigger,
+        .header-nav + .cdk-visually-hidden + .header-overflow-trigger {
+          margin-left: auto;
+        }
+      }
+    }
+
+    .main-container {
+      &.open-hamburger-menu,
+      &.open-overflow-menu {
+        .header {
+          .header-backdrop {
+            position: fixed;
+            inset: 0;
+            background: tokens.$cds-alias-object-overlay-backdrop-background;
+            cursor: pointer;
+            z-index: responsive-nav-variables.$clr-sliding-panel-backdrop-z-index;
+          }
+
+          .header-nav.clr-nav-level-1,
+          .header-nav.clr-nav-level-2 {
+            .nav-link {
+              flex: 0 0 auto;
+              height: unset;
+              width: 100%;
+
+              .nav-icon,
+              .fa {
+                display: none;
+              }
+
+              .nav-text {
+                display: inline-block;
+                white-space: normal;
+                // color, line-height and font-weight should be removed or refactored in separate JIRA
+                color: responsive-nav-variables.$clr-sliding-panel-text-color;
+              }
+
+              opacity: 1;
+
+              .nav-icon + .nav-text {
+                display: inline-block;
+              }
+
+              @include vertical-nav-mixins.vertical-nav-link-colors();
+
+              &.active > .nav-text {
+                color: inherit;
+              }
+            }
+          }
+        }
+
+        .clr-vertical-nav .nav-trigger {
+          display: none;
+        }
+      }
+
+      &.open-hamburger-menu {
+        .header {
+          .branding {
+            position: fixed;
+            top: 0;
+            left: 0;
+            overflow: hidden;
+            width: responsive-nav-variables.$clr-sliding-panel-width;
+            max-width: responsive-nav-variables.$clr-sliding-panel-width;
+            z-index: responsive-nav-variables.$clr-sliding-panel-z-index + 1;
+            padding-left: density.$clr-base-horizontal-offset-2xl;
+
+            & > .nav-link {
+              overflow: hidden;
+            }
+
+            //deprecate .clr-icon, .logo
+            .clr-icon,
+            .logo,
+            cds-icon,
+            clr-icon {
+              display: inline-block;
+            }
+
+            cds-icon[shape='vm-bug'],
+            clr-icon[shape='vm-bug'],
+            .clr-vmw-logo {
+              background-color: header-variables.$clr-header-bg-color;
+              border-radius: tokens.$cds-alias-object-border-radius-100;
+            }
+
+            .title {
+              color: vertical-nav-variables.$clr-vertical-nav-item-color;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+          }
+        }
+
+        .clr-nav-close {
+          @include responsive-nav-mixins.menu-trigger();
+          @include responsive-nav-mixins.hamburger-menu-trigger-animation();
+        }
+
+        .header-nav.clr-nav-level-1,
+        .subnav.clr-nav-level-1,
+        .sub-nav.clr-nav-level-1,
+        .clr-vertical-nav.clr-nav-level-1 {
+          padding-top: calc(header-variables.$clr-header-height + density.$clr-base-gap-xl);
+          transform: translateX(0);
+          transition: responsive-nav-variables.$clr-sliding-panel-animation;
+        }
+      }
+
+      &.open-overflow-menu {
+        .header-nav.clr-nav-level-2,
+        .subnav.clr-nav-level-2,
+        .sub-nav.clr-nav-level-2,
+        .clr-vertical-nav.clr-nav-level-2 {
+          transform: translateX(0);
+          transition: responsive-nav-variables.$clr-sliding-panel-animation;
+        }
+
+        .header-nav.clr-nav-level-2,
+        .subnav.clr-nav-level-2,
+        .sub-nav.clr-nav-level-2 {
+          padding-top: density.$clr-base-vertical-offset-2xl;
+        }
+
+        .clr-nav-close {
+          @include responsive-nav-mixins.menu-trigger(
+            0,
+            auto,
+            (calc(-1 * #{responsive-nav-variables.$clr-trigger-position}))
+          );
+          @include responsive-nav-mixins.overflow-menu-trigger-animation();
+        }
+      }
+
+      &.open-hamburger-menu {
+        .header-nav.clr-nav-level-1,
+        .subnav.clr-nav-level-1,
+        .sub-nav.clr-nav-level-1,
+        .clr-vertical-nav.clr-nav-level-1 {
+          overflow: inherit;
+          width: responsive-nav-variables.$clr-sliding-panel-width;
+          max-width: responsive-nav-variables.$clr-sliding-panel-width;
+
+          &::before {
+            content: none;
+          }
+
+          & .nav-link {
+            width: 100%;
+          }
+        }
+      }
+
+      &.open-overflow-menu {
+        .header-nav.clr-nav-level-2,
+        .subnav.clr-nav-level-2,
+        .sub-nav.clr-nav-level-2,
+        .clr-vertical-nav.clr-nav-level-2 {
+          width: responsive-nav-variables.$clr-sliding-panel-width;
+          max-width: responsive-nav-variables.$clr-sliding-panel-width;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: map.get(variables.$clr-grid-breakpoints, sm)) {
+    .main-container {
+      .header {
+        .branding {
+          max-width: mixins.baselinePx(144);
+          min-width: 0;
+          overflow: hidden;
+        }
+      }
+
+      .header-nav.clr-nav-level-1,
+      .subnav.clr-nav-level-1,
+      .sub-nav.clr-nav-level-1,
+      .clr-vertical-nav.clr-nav-level-1 {
+        transform: translateX(calc(-1 * #{responsive-nav-variables.$clr-sliding-panel-width-sm}));
+      }
+
+      .header-nav.clr-nav-level-2,
+      .subnav.clr-nav-level-2,
+      .sub-nav.clr-nav-level-2,
+      .clr-vertical-nav.clr-nav-level-2 {
+        transform: translateX(responsive-nav-variables.$clr-sliding-panel-width-sm);
+      }
+    }
+
+    .main-container {
+      &.open-hamburger-menu {
+        .header {
+          .branding {
+            width: responsive-nav-variables.$clr-sliding-panel-width-sm;
+            max-width: responsive-nav-variables.$clr-sliding-panel-width-sm;
+          }
+        }
+
+        .header-nav.clr-nav-level-1,
+        .subnav.clr-nav-level-1,
+        .sub-nav.clr-nav-level-1,
+        .clr-vertical-nav.clr-nav-level-1 {
+          overflow: inherit;
+          width: responsive-nav-variables.$clr-sliding-panel-width-sm;
+          max-width: responsive-nav-variables.$clr-sliding-panel-width-sm;
+        }
+
+        .clr-nav-close {
+          @include responsive-nav-mixins.menu-trigger(auto, 0, responsive-nav-variables.$clr-trigger-position-sm);
+        }
+      }
+
+      &.open-overflow-menu {
+        .header-nav.clr-nav-level-2,
+        .subnav.clr-nav-level-2,
+        .sub-nav.clr-nav-level-2,
+        .clr-vertical-nav.clr-nav-level-2 {
+          width: responsive-nav-variables.$clr-sliding-panel-width-sm;
+          max-width: responsive-nav-variables.$clr-sliding-panel-width-sm;
+        }
+
+        .clr-nav-close {
+          @include responsive-nav-mixins.menu-trigger(
+            0,
+            auto,
+            (calc(-1 * #{responsive-nav-variables.$clr-trigger-position-sm}))
+          );
+        }
+      }
+    }
+  }
+}

package/layout/nav/_subnav.clarity.scss

@@ -0,0 +1,48 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+@use '../../styles/mixins';
+@use 'variables.subnav' as subnav-variables;
+
+@include meta.load-css('properties.subnav');
+@include mixins.exports('subnav.clarity') {
+  /* TODO: deprecated. Remove when the clarity css naming convention is implemented. */
+  .sub-nav,
+  .subnav {
+    display: flex;
+    box-shadow: 0 calc(-1 * #{tokens.$cds-global-space-1}) 0 var(--clr-nav-box-shadow-color) inset;
+    justify-content: space-between; //nav to the first and aside to the very right
+    align-items: center;
+    background-color: subnav-variables.$clr-subnav-bgColor;
+    height: subnav-variables.$clr-subnav-height;
+
+    .nav {
+      flex: 1 1 auto;
+      padding-left: tokens.$cds-global-space-9;
+    }
+
+    .nav-item,
+    .nav-item a {
+      text-decoration: none;
+    }
+
+    aside {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      height: subnav-variables.$clr-subnav-height;
+      padding: 0 tokens.$cds-global-space-9;
+
+      & > :last-child {
+        margin-right: 0;
+        padding-right: 0;
+      }
+    }
+  }
+}

package/layout/nav/_variables.nav.scss

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+// Usage: ../styles/_reboot.scss
+// Link colors
+$clr-link-active-color: var(--clr-link-active-color) !default;
+$clr-link-color: var(--clr-link-color) !default;
+$clr-link-hover-color: var(--clr-link-hover-color) !default;
+$clr-link-visited-color: var(--clr-link-visited-color) !default;
+$clr-link-visited-color-hover: var(--clr-link-visited-color-hover) !default;

package/layout/nav/_variables.responsive-nav.scss

@@ -0,0 +1,28 @@
+/*
+ * 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:map';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+$clr-sliding-panel-text-color: var(--clr-sliding-panel-text-color) !default;
+
+$clr-responsive-nav-trigger-bg-color: var(--clr-responsive-nav-trigger-bg-color) !default;
+
+$clr-sliding-panel-width: mixins.baselinePx(360) !default;
+$clr-sliding-panel-width-sm: mixins.baselinePx(288) !default;
+$clr-trigger-position: calc(#{mixins.baselinePx(360)} + #{tokens.$cds-global-space-6}) !default;
+$clr-trigger-position-sm: calc(#{mixins.baselinePx(288)} + #{tokens.$cds-global-space-6}) !default;
+
+$clr-sliding-panel-z-index: map.get(variables.$clr-layers, sidepanel);
+$clr-sliding-panel-backdrop-z-index: map.get(variables.$clr-layers, sidepanel-bg) !default;
+$clr-sliding-transition-time: 0.3s !default;
+$clr-transition-style: ease !default;
+
+$clr-trigger-animation: transform (2 * $clr-sliding-transition-time) $clr-transition-style;
+$clr-sliding-panel-animation: transform $clr-sliding-transition-time $clr-transition-style;

package/layout/nav/_variables.subnav.scss

@@ -0,0 +1,21 @@
+/*
+ * 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 '../../styles/variables/variables';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+// Usage: ../layout/nav/_subnav.clarity.scss
+// TODO: would be nice to key text color in subnav off of the bgColor...
+$clr-subnav-bgColor: var(--clr-subnav-bg-color) !default;
+
+// Usage: ../layout/nav/_subnav.clarity.scss
+// Usage: ../layout/nav/_nav.clarity.scss
+$clr-subnav-height: density.$clr-base-row-height-m !default;
+
+// Usage: ../layout/nav/_subnav.clarity.scss
+$clr-nav-shadow: 0 calc(-1 * #{tokens.$cds-alias-object-border-width-100}) 0 var(--clr-nav-box-shadow-color) inset !default;

package/layout/tabs/_mixins.tabs.scss

@@ -0,0 +1,41 @@
+/*
+ * 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 '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@mixin nav-link-border-appearance($position, $left-inset: false) {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border: none;
+    border-#{$position}: tokens.$cds-alias-object-border-width-300 solid transparent;
+    transition: border-#{$position} tokens.$cds-global-animation-duration-quick
+      tokens.$cds-global-animation-easing-in-out;
+
+    // overrides for left inset
+    @if ($left-inset) {
+      margin: density.$clr-base-vertical-offset-xs 0;
+      left: density.$clr-base-horizontal-offset-xs;
+      width: tokens.$cds-alias-object-border-width-100;
+      border-width: tokens.$cds-alias-object-border-width-400;
+      border-radius: tokens.$cds-alias-object-border-radius-100;
+    }
+  }
+
+  &:hover {
+    &::before {
+      border-color: tokens.$cds-alias-object-interaction-background-highlight;
+    }
+  }
+}

package/layout/tabs/_properties.tabs.scss

@@ -0,0 +1,25 @@
+/*
+ * 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 '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('tab.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [cds-theme] {
+      --clr-nav-box-shadow-color: #{tokens.$cds-alias-object-border-color};
+      --clr-nav-active-bg-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-nav-selected-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-nav-hover-bg-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-nav-selected-hover-background-color: var(--cds-alias-object-interaction-background-selected-hover);
+      --clr-nav-selected-active-background-color: var(--cds-alias-object-interaction-background-selected-active);
+      --clr-nav-link-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-nav-link-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+    }
+  }
+}