@rossigee/clarity-ui 18.2.1-fixed

package/layout/grid/utilities/_flex.scss

@@ -0,0 +1,222 @@
+/*
+ * 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/variables/variables.layout';
+@use '../mixins/breakpoint';
+
+// Custom styles for additional flex alignment options.
+@each $breakpoint in map.keys(variables.$clr-grid-breakpoints) {
+  @include breakpoint.clr-media-breakpoint-up($breakpoint) {
+    $infix: breakpoint.clr-breakpoint-infix($breakpoint, variables.$clr-grid-breakpoints);
+
+    .clr-flex#{$infix}-row {
+      flex-direction: row !important;
+    }
+
+    .clr-flex#{$infix}-column {
+      flex-direction: column !important;
+    }
+
+    .clr-flex#{$infix}-row-reverse {
+      flex-direction: row-reverse !important;
+    }
+
+    .clr-flex#{$infix}-column-reverse {
+      flex-direction: column-reverse !important;
+    }
+
+    .clr-flex#{$infix}-wrap {
+      flex-wrap: wrap !important;
+    }
+
+    .clr-flex#{$infix}-nowrap {
+      flex-wrap: nowrap !important;
+    }
+
+    .clr-flex#{$infix}-wrap-reverse {
+      flex-wrap: wrap-reverse !important;
+    }
+
+    .clr-flex#{$infix}-fill {
+      flex: 1 1 auto !important;
+    }
+
+    .clr-flex#{$infix}-grow-0 {
+      flex-grow: 0 !important;
+    }
+
+    .clr-flex#{$infix}-grow-1 {
+      flex-grow: 1 !important;
+    }
+
+    .clr-flex#{$infix}-shrink-0 {
+      flex-shrink: 0 !important;
+    }
+
+    .clr-flex#{$infix}-shrink-1 {
+      flex-shrink: 1 !important;
+    }
+
+    .clr-justify-content#{$infix}-start {
+      justify-content: flex-start !important;
+    }
+
+    .clr-justify-content#{$infix}-end {
+      justify-content: flex-end !important;
+    }
+
+    .clr-justify-content#{$infix}-center {
+      justify-content: center !important;
+    }
+
+    .clr-justify-content#{$infix}-between {
+      justify-content: space-between !important;
+    }
+
+    .clr-justify-content#{$infix}-around {
+      justify-content: space-around !important;
+    }
+
+    .clr-align-items#{$infix}-start {
+      align-items: flex-start !important;
+    }
+
+    .clr-align-items#{$infix}-end {
+      align-items: flex-end !important;
+    }
+
+    .clr-align-items#{$infix}-center {
+      align-items: center !important;
+    }
+
+    .clr-align-items#{$infix}-baseline {
+      align-items: baseline !important;
+    }
+
+    .clr-align-items#{$infix}-stretch {
+      align-items: stretch !important;
+    }
+
+    .clr-align-content#{$infix}-start {
+      align-content: flex-start !important;
+    }
+
+    .clr-align-content#{$infix}-end {
+      align-content: flex-end !important;
+    }
+
+    .clr-align-content#{$infix}-center {
+      align-content: center !important;
+    }
+
+    .clr-align-content#{$infix}-between {
+      align-content: space-between !important;
+    }
+
+    .clr-align-content#{$infix}-around {
+      align-content: space-around !important;
+    }
+
+    .clr-align-content#{$infix}-stretch {
+      align-content: stretch !important;
+    }
+
+    .clr-align-self#{$infix}-auto {
+      align-self: auto !important;
+    }
+
+    .clr-align-self#{$infix}-start {
+      align-self: flex-start !important;
+    }
+
+    .clr-align-self#{$infix}-end {
+      align-self: flex-end !important;
+    }
+
+    .clr-align-self#{$infix}-center {
+      align-self: center !important;
+    }
+
+    .clr-align-self#{$infix}-baseline {
+      align-self: baseline !important;
+    }
+
+    .clr-align-self#{$infix}-stretch {
+      align-self: stretch !important;
+    }
+  }
+}
+@each $breakpoint in map.keys(variables.$clr-grid-breakpoints) {
+  // Flex column reordering
+  @include breakpoint.clr-media-breakpoint-up($breakpoint) {
+    .clr-flex-#{$breakpoint}-first {
+      order: -1;
+    }
+
+    .clr-flex-#{$breakpoint}-last {
+      order: 1;
+    }
+
+    .clr-flex-#{$breakpoint}-unordered {
+      order: 0;
+    }
+  }
+
+  // Alignment for every item
+  @include breakpoint.clr-media-breakpoint-up($breakpoint) {
+    .clr-flex-items-#{$breakpoint}-top {
+      align-items: flex-start;
+    }
+
+    .clr-flex-items-#{$breakpoint}-middle {
+      align-items: center;
+    }
+
+    .clr-flex-items-#{$breakpoint}-bottom {
+      align-items: flex-end;
+    }
+  }
+
+  // Alignment per item
+  @include breakpoint.clr-media-breakpoint-up($breakpoint) {
+    .clr-flex-#{$breakpoint}-top {
+      align-self: flex-start;
+    }
+
+    .clr-flex-#{$breakpoint}-middle {
+      align-self: center;
+    }
+
+    .clr-flex-#{$breakpoint}-bottom {
+      align-self: flex-end;
+    }
+  }
+
+  // Horizontal alignment of item
+  @include breakpoint.clr-media-breakpoint-up($breakpoint) {
+    .clr-flex-items-#{$breakpoint}-left {
+      justify-content: flex-start;
+    }
+
+    .clr-flex-items-#{$breakpoint}-center {
+      justify-content: center;
+    }
+
+    .clr-flex-items-#{$breakpoint}-right {
+      justify-content: flex-end;
+    }
+
+    .clr-flex-items-#{$breakpoint}-around {
+      justify-content: space-around;
+    }
+
+    .clr-flex-items-#{$breakpoint}-between {
+      justify-content: space-between;
+    }
+  }
+}

package/layout/grid/utilities/_float.scss

@@ -0,0 +1,26 @@
+/*
+ * 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/variables/variables.layout';
+@use '../mixins/breakpoint';
+
+@each $breakpoint in map.keys(variables.$clr-grid-breakpoints) {
+  @include breakpoint.clr-media-breakpoint-up($breakpoint) {
+    .clr-float-#{$breakpoint}-left {
+      float: left !important;
+    }
+
+    .clr-float-#{$breakpoint}-right {
+      float: right !important;
+    }
+
+    .clr-float-#{$breakpoint}-none {
+      float: none !important;
+    }
+  }
+}

package/layout/grid/utilities/_visibility.scss

@@ -0,0 +1,60 @@
+/*
+ * 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/variables/variables.layout';
+@use '../mixins/breakpoint';
+
+// Responsive visibility utilities
+.clr-invisible {
+  visibility: hidden !important;
+}
+
+@each $bp in map.keys(variables.$clr-grid-breakpoints) {
+  .clr-hidden-#{$bp}-up {
+    @include breakpoint.clr-media-breakpoint-up($bp) {
+      display: none !important;
+    }
+  }
+
+  .clr-hidden-#{$bp}-down {
+    @include breakpoint.clr-media-breakpoint-down($bp) {
+      display: none !important;
+    }
+  }
+}
+
+// Print utilities
+.clr-visible-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+
+.clr-visible-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+
+.clr-visible-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.clr-hidden-print {
+  @media print {
+    display: none !important;
+  }
+}

package/layout/main-container/_layout.clarity.scss

@@ -0,0 +1,87 @@
+/*
+ * 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;
+@use '../../styles/variables/variables.global';
+@use '../nav/variables.subnav' as subnav-variables;
+@use 'variables.header' as header-variables;
+
+@include mixins.exports('layout.clarity') {
+  .main-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: variables.$clr-global-app-background;
+
+    .alert.alert-app-level {
+      flex: 0 0 auto;
+      overflow-x: hidden;
+    }
+
+    header,
+    .header {
+      flex: 0 0 header-variables.$clr-header-height;
+    }
+
+    .sub-nav,
+    .subnav {
+      flex: 0 0 subnav-variables.$clr-subnav-height;
+    }
+
+    //This is a utility class which mimics the main-container class
+    //and occupies the remaining space inside of the main-container
+    //after the header just in case our users app layout requires
+    //that the .subnav and the .content-container be inside of an
+    //angular component
+    .u-main-container {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+      overflow: hidden;
+    }
+
+    .content-container {
+      display: flex;
+      flex: 1 1 auto;
+      min-height: tokens.$cds-global-space-1;
+
+      .content-area {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        padding: variables.$clr-content-area-padding-top variables.$clr-content-area-padding-right
+          variables.$clr-content-area-padding-bottom variables.$clr-content-area-padding-left;
+
+        & > :first-child {
+          margin-top: 0;
+        }
+      }
+
+      .clr-vertical-nav {
+        flex: 0 0 auto;
+        order: -1;
+      }
+    }
+  }
+
+  @media print {
+    .main-container {
+      height: auto;
+    }
+  }
+
+  body.no-scrolling,
+  body[cds-layout='no-scrolling'] {
+    overflow: hidden;
+
+    // The selector below targets Clarity-UI and is provided for compatibility
+    .main-container .content-container .content-area {
+      overflow: hidden;
+    }
+  }
+}

package/layout/main-container/_properties.header.scss

@@ -0,0 +1,39 @@
+/*
+ * 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/variables/variables';
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('header.properties') {
+  @include mixins.root-or-host() {
+    --clr-header-title-font-weight: #{tokens.$cds-alias-typography-subsection-font-weight};
+    --clr-header-title-font-family: #{variables.$clr-font};
+    --clr-header-search-input-font-color: #{tokens.$cds-global-color-white};
+    --clr-header-search-placeholder-font-weight: #{tokens.$cds-alias-typography-font-weight-regular};
+    --clr-header-search-placeholder-text-color: #{tokens.$cds-global-color-construction-400};
+    --clr-header-search-border-active: #{tokens.$cds-alias-object-border-width-100} solid Highlight;
+    --clr-header-search-border-hover: #{tokens.$cds-alias-object-border-width-100} solid
+      #{tokens.$cds-global-color-construction-400};
+    --clr-header-divider-color: #{tokens.$cds-global-color-construction-600};
+    --clr-header-bg-color: #{tokens.$cds-global-color-cool-gray-1000};
+    --clr-header-2-bg-color: #{tokens.$cds-global-color-construction-800};
+    --clr-header-3-bg-color: #{tokens.$cds-global-color-azure-900};
+    --clr-header-font-color: #{tokens.$cds-global-color-construction-100};
+    --clr-header-font-color-hover: #{tokens.$cds-global-color-construction-50};
+
+    &,
+    & [clr-density] {
+      --clr-header-height: #{density.$clr-base-header-height};
+      --clr-header-search-icon-size: #{density.$clr-base-icon-size-l};
+      --clr-header-search-margin-left: #{density.$clr-base-horizontal-offset-m};
+      --clr-header-search-margin-right: #{density.$clr-base-horizontal-offset-l};
+      --clr-header-search-gap: #{density.$clr-base-gap-s};
+    }
+  }
+}

package/layout/main-container/_variables.header.scss

@@ -0,0 +1,32 @@
+/*
+ * 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.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+$clr-logo-width: tokens.$cds-global-space-11 !default;
+$clr-header-outline-offset: calc(-1 * #{tokens.$cds-global-space-4}) !default;
+$clr-header-clarity-icons-size: #{density.$clr-base-icon-size-l} !default;
+
+$clr-header-height: var(--clr-header-height) !default;
+$clr-header-divider-color: var(--clr-header-divider-color) !default;
+$clr-header-bg-color: var(--clr-header-bg-color) !default;
+$clr-header-2-bg-color: var(--clr-header-2-bg-color) !default;
+$clr-header-3-bg-color: var(--clr-header-3-bg-color) !default;
+$clr-header-font-color: var(--clr-header-font-color) !default;
+$clr-header-font-color-hover: var(--clr-header-font-color-hover) !default;
+$clr-header-title-color: $clr-header-font-color !default;
+$clr-header-title-font-weight: var(--clr-header-title-font-weight) !default;
+$clr-header-title-font-family: var(--clr-header-title-font-family) !default;
+$clr-header-search-icon-size: var(--clr-header-search-icon-size) !default;
+$clr-header-search-margin-left: var(--clr-header-search-margin-left) !default;
+$clr-header-search-margin-right: var(--clr-header-search-margin-right) !default;
+$clr-header-search-gap: var(--clr-header-search-gap) !default;
+$clr-header-search-input-font-color: var(--clr-header-search-input-font-color) !default;
+$clr-header-search-placeholder-text-color: var(--clr-header-search-placeholder-text-color) !default;
+$clr-header-search-border-active: var(--clr-header-search-border-active) !default;
+$clr-header-search-border-hover: var(--clr-header-search-border-hover) !default;

package/layout/nav/_header.clarity.scss

@@ -0,0 +1,40 @@
+/*
+ * 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 'mixins.header' as header-mixins;
+
+@include meta.load-css('../main-container/properties.header');
+@include mixins.exports('header.clarity') {
+  // TODO: rename to follow clr naming convention
+  header,
+  .header {
+    display: flex;
+    color: header-variables.$clr-header-font-color;
+    background-color: header-variables.$clr-header-bg-color;
+    height: header-variables.$clr-header-height;
+    white-space: nowrap;
+
+    @include header-mixins.header-backgrounds();
+    @include header-mixins.header-branding();
+    @include header-mixins.header-links();
+    @include header-mixins.header-nav();
+    @include header-mixins.header-actions();
+    @include header-mixins.header-search();
+  }
+
+  @media screen and (max-width: map.get(variables.$clr-grid-breakpoints, md)) {
+    header,
+    .header {
+      @include header-mixins.header-search-md();
+    }
+  }
+}

package/layout/nav/_links.clarity.scss

@@ -0,0 +1,84 @@
+/*
+ * 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 'variables.nav' as nav-variables;
+
+@include mixins.exports('links.clarity') {
+  a {
+    /*
+      * Due to the higher specificity of `a:link` over `.btn`, `.nav-link`, `.dropdown-item`, `.label`, `.alert-action` and `badge`
+      * it overrides the styles of both which is not required.
+      * Also `.btn, .nav-link, .dropdown-item, .label, .alert-action, .badge` doesn't need these styles, so we don't add them in these cases.
+      */
+    &:not(.btn, .nav-link, .dropdown-item, .label, .alert-action, .badge, .clr-treenode-link) {
+      &:link {
+        color: nav-variables.$clr-link-color;
+
+        &:hover {
+          color: nav-variables.$clr-link-hover-color;
+
+          cds-icon,
+          clr-icon {
+            color: nav-variables.$clr-link-hover-color;
+          }
+        }
+      }
+
+      &:visited {
+        color: nav-variables.$clr-link-visited-color;
+
+        cds-icon,
+        clr-icon {
+          color: nav-variables.$clr-link-visited-color;
+        }
+
+        &:hover {
+          color: nav-variables.$clr-link-visited-color-hover;
+
+          cds-icon,
+          clr-icon {
+            color: nav-variables.$clr-link-visited-color-hover;
+          }
+        }
+      }
+
+      &:visited,
+      &:link {
+        &:active {
+          color: nav-variables.$clr-link-active-color;
+
+          cds-icon,
+          clr-icon {
+            color: nav-variables.$clr-link-active-color;
+          }
+        }
+      }
+    }
+  }
+
+  // only imported for demos. gives a static view of links in various states.
+  a.link-normal:link {
+    color: nav-variables.$clr-link-color;
+  }
+
+  a.link-hovered:link {
+    color: nav-variables.$clr-link-hover-color;
+  }
+
+  a.link-clicked:link {
+    color: nav-variables.$clr-link-active-color;
+  }
+
+  a.link-visited:link {
+    color: nav-variables.$clr-link-visited-color;
+  }
+
+  a.link-visited-hover:link {
+    color: nav-variables.$clr-link-visited-color-hover;
+  }
+}