@oracle/oraclejet 12.0.11 → 12.0.13

package/dist/pcss/oj/v12.0.13/oj/navigation-list/themes/base/_oj-navigation-list.scss

@@ -0,0 +1,1198 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+// WARNING: do not directly import this file, instead import the
+// version in your the theme specific directory,
+// for example navigation-list/themes/redwood/oj-navigation-list.scss
+// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+@import "../../../utilities/_oj.utilities.modules.scss";
+
+@include module-include-once("common.navigationlist") {
+  // This is to prevent the flash of unstyled content before the html becomes JET components.
+  oj-navigation-list:not(.oj-complete) {
+    visibility: hidden;
+  }
+
+  oj-navigation-list {
+    display: block;
+  }
+
+  /*Navlist root node*/
+  .oj-navigationlist,
+  .oj-navigationlist-listview-container {
+    overflow-x: hidden;
+  }
+
+  .oj-navigationlist-listview {
+    position: relative;
+  }
+
+  .oj-navigationlist-touch {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  /* navigation list divider used in category header navlist*/
+  .oj-navigationlist-category-divider {
+    border-color: var(--oj-core-divider-color);
+
+    border-style: solid;
+    border-width: 1px 0 0;
+    font-size: 0;
+    height: 0;
+    line-height: 0;
+    margin: 0 3px;
+  }
+
+  /* navigation list divider used in horizontal navlist to separate buttons*/
+  .oj-navigationlist-horizontal .oj-navigationlist-divider {
+    border-color: var(--oj-core-divider-color);
+
+    border-style: solid;
+    border-width: 0 1px 0 0;
+    font-size: 0;
+    height: 1.714rem; //24px
+    line-height: 0;
+    margin: 5px 0;
+    align-self: center;
+    display: none; // hide dividers by default
+  }
+  // enable dividers when navlist has marker class oj-navigationlist-item-dividers
+  .oj-navigationlist-item-dividers .oj-navigationlist-divider {
+    display: list-item;
+  }
+
+  /* Basic styling  for all ul elements in list*/
+  .oj-navigationlist-element,
+  .oj-navigationlist-group {
+    list-style-type: none;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0;
+  }
+
+  .oj-navigationlist-item-element:not(.oj-navigationlist-item) {
+    display: block;
+    line-height: 0; //IE bug: IE is adding lineheight on top of actual contents height when display:block.
+  }
+
+  .oj-navigationlist-item-element {
+    // work around for IE 11 which ignores list-style-type:none for sub items on first load.
+    // Setting list style image to transparent image.
+    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+  }
+
+  /* Remove focus ring on outer ul element*/
+  .oj-navigationlist-element:focus {
+    outline: none;
+  }
+
+  /* Style content wrapper of each list item */
+
+  .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-label {
+    vertical-align: middle;
+  }
+
+  .oj-navigationlist-vertical .oj-navigationlist-item::before {
+    min-height: var(--oj-navigation-list-item-min-height);
+
+    //This is needed for IE 11 bug
+    //https://connect.microsoft.com/IE/feedback/details/816293/ie11-flexbox-with-min-height-not-vertically-aligning-with-align-items-center
+    content: "";
+    display: inline-block;
+    visibility: hidden;
+  }
+
+  /* Styling for expand/collapse icons holder */
+  .oj-navigationlist-collapse-icon,
+  .oj-navigationlist-expand-icon {
+    order: 1;
+    align-self: center;
+  }
+
+  a.oj-navigationlist-collapse-icon,
+  a.oj-navigationlist-expand-icon,
+  a.oj-navigationlist-collapse-icon:hover,
+  a.oj-navigationlist-expand-icon:hover {
+    text-decoration: none; //workaround for IE11 where underline appears on icon hover
+  }
+
+  /* Style content of each list item */
+  .oj-navigationlist-item-content {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+  }
+
+  // For simple links case
+  a.oj-navigationlist-item-content {
+    text-decoration: none;
+    font-weight: normal;
+    outline: none;
+    overflow: hidden;
+  }
+  a.oj-navigationlist-item-content:active {
+    background-color: transparent;
+  }
+
+  a.oj-navigationlist-item-content .oj-navigationlist-item-label {
+    color: var(--oj-navigation-list-item-label-color);
+  }
+
+  .oj-selected > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
+    color: var(--oj-navigation-list-item-label-color-selected);
+  }
+
+  .oj-hover:not(.oj-selected) > a.oj-navigationlist-item-content > .oj-navigationlist-item-label {
+    color: var(--oj-navigation-list-item-label-color-hover);
+  }
+  /* Navigation list node label or arbitrary content place holder*/
+  .oj-navigationlist-item-label {
+    order: 2;
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    overflow-x: hidden;
+    display: inline-block;
+    line-height: normal;
+    hyphens: auto;
+    word-break: break-word;
+  }
+
+  .oj-navigationlist-item-text-wrap .oj-navigationlist-item-label {
+    white-space: normal;
+  }
+
+  /*Padding for vertical navlist item label*/
+  .oj-navigationlist-vertical .oj-navigationlist-item-label {
+    padding: 3px 0;
+    flex: 1 1 auto;
+  }
+
+  /* hide label for icons-only case */
+  .oj-navigationlist-icon-only .oj-navigationlist-item-label {
+    display: none;
+  }
+
+  /* List item's Icon */
+  .oj-navigationlist-item-icon {
+    color: var(--oj-navigation-list-item-label-color);
+    flex: 0 0 auto;
+    font-size: var(--oj-navigation-list-icon-size);
+    margin: var(--oj-navigation-list-icon-margin);
+  }
+
+  .oj-navigationlist-group-item {
+    display: flex;
+    flex: 1 1 auto;
+  }
+
+  .oj-navigationlist-group {
+    flex: 1 1 auto;
+  }
+
+  /* Disabled node */
+  .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-label {
+    color: var(--oj-core-text-color-disabled);
+  }
+
+  .oj-navigationlist-item.oj-disabled a.oj-navigationlist-item-content {
+    cursor: default;
+  }
+
+  .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-icon {
+    color: var(--oj-core-text-color-disabled);
+  }
+
+ /* Badge/Metadata/icons node */
+ .oj-navigationlist-item-end {
+    color: var(--oj-core-text-color-secondary);
+  }
+  .oj-navigationlist-horizontal:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-end {
+    margin-left: var(--oj-navigation-list-icon-to-text-padding); 
+    flex: 0 0 auto;
+    order:3;
+    align-self: center;
+  }
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-end {
+    order: 1;
+  }
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-label, 
+  .oj-navigationlist-vertical .oj-navigationlist-item-end {
+    order: 3;
+  }
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-icon {
+    order: 2;
+  }
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-content {
+    overflow: visible;
+  }
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-end {
+    position: relative;
+    top: calc(50% - 1.35rem);
+    left: .5rem;
+    html[dir="rtl"] & { 
+      right: .5rem;
+    }
+}
+  .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item-content {
+    position: relative;
+    overflow: visible;
+  }
+  .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item-end {
+    position: absolute;
+    top: calc(50% - 1rem);
+    line-height: 0;
+    left: calc(50%);
+    html[dir="rtl"] & { 
+      right: calc(50%);
+    }
+  }
+  .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-content {
+      position: relative;
+  }
+  .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-end {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, calc(-50% - .5rem));
+    line-height: 0;
+    left: calc(50% + .5rem);
+    html[dir="rtl"] & { 
+      right: calc(50% + .5rem);
+    }
+  }
+  .oj-navigationlist-item.oj-disabled .oj-navigationlist-item-end {
+    color: var(--oj-core-text-color-disabled);
+  }
+  /* Selected node */
+  .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
+    color: var(--oj-navigation-list-item-label-color-selected);
+  }
+
+  /* hover icon */
+  .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
+    color: var(--oj-navigation-list-item-label-color-hover);
+  }
+
+  /*borders for high contrast mode*/
+
+  .oj-hicontrast .oj-navigationlist-item.oj-selected,
+  .oj-hicontrast .oj-navigationlist-item.oj-selected.oj-hover,
+  .oj-hicontrast .oj-navigationlist-item.oj-selected.oj-focus {
+    border: 1px solid;
+  }
+
+  .oj-hicontrast .oj-navigationlist-item.oj-hover,
+  .oj-hicontrast .oj-navigationlist-item.oj-focus {
+    border: 1px dotted;
+  }
+
+  /*Focus ring around  focused list item*/
+  .oj-navigationlist .oj-navigationlist-item.oj-focus-highlight {
+    outline: dotted 1px var(--oj-core-focus-border-color); // Using dotted line for all browsers
+
+    outline-offset: -1px;
+  }
+
+  .oj-hicontrast .oj-navigationlist-item.oj-focus {
+    outline: none;
+  }
+
+  .oj-navigationlist-item {
+    border-color: transparent;
+    display: flex;
+    align-items: stretch;
+  }
+
+  //Set Selected item colors
+  .oj-navigationlist-item.oj-selected {
+    background-color: var(--oj-navigation-list-item-bg-color-selected);
+    border-color: var(--oj-navigation-list-item-border-color-selected);
+  }
+
+  //Apply hover bgcolor or border color only when item is not selected.
+  .oj-navigationlist-item.oj-hover:not(.oj-selected) {
+    background-color: var(--oj-navigation-list-item-bg-color-hover);
+    border-color: var(--oj-private-navigation-list-item-border-color-hover);
+  }
+
+  /*---- Start of common styles for collapsible and expanded navigation list ----*/
+
+  //space when icon missing
+  .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only)
+    .oj-navigationlist-has-icons
+    > .oj-navigationlist-item
+    > .oj-navigationlist-item-no-icon
+    .oj-navigationlist-item-label {
+  }
+
+  html:not([dir="rtl"])
+    .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only)
+    .oj-navigationlist-has-icons
+    > .oj-navigationlist-item
+    > .oj-navigationlist-item-no-icon
+    .oj-navigationlist-item-label {
+    margin-left: calc(var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
+  }
+
+  html[dir="rtl"]
+    .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only)
+    .oj-navigationlist-has-icons
+    > .oj-navigationlist-item
+    > .oj-navigationlist-item-no-icon
+    .oj-navigationlist-item-label {
+    margin-right: calc(var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size));
+  }
+
+  .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
+    html[dir="rtl"] & {
+      padding-right: calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width));
+      border-width: 0 var(--oj-private-navigation-list-item-border-width) 0 0;
+    }
+
+    html:not([dir="rtl"]) & {
+      padding-left: calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width));
+      border-width: 0 0 0 var(--oj-private-navigation-list-item-border-width);
+    }
+
+    border-style: solid;
+    margin-top: 0;
+    margin-bottom: var(--oj-navigation-list-item-margin);
+  }
+
+  // remove margin bottom on last item
+  .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only) .oj-navigationlist-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item,
+  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item {
+    border-style: none;
+  }
+  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-focus,
+  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-hover,
+  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-focus,
+  .oj-hicontrast .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical .oj-navigationlist-item.oj-hover {
+    @include oj-rtl() {
+      border-width: 1px;
+    }
+    @include oj-ltr() {
+      border-width: 1px;
+    }
+    border-style: dotted;
+  }
+
+  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected,
+  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-focus,
+  .oj-hicontrast .oj-navigationlist-collapsible .oj-navigationlist-item.oj-selected.oj-hover,
+  .oj-hicontrast
+    .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical
+    .oj-navigationlist-item.oj-selected,
+  .oj-hicontrast
+    .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical
+    .oj-navigationlist-item.oj-selected.oj-focus,
+  .oj-hicontrast
+    .oj-navigationlist-expanded:not(.oj-navigationlist-icon-only).oj-navigationlist-vertical
+    .oj-navigationlist-item.oj-selected.oj-hover {
+    @include oj-rtl() {
+      border-width: 1px;
+    }
+    @include oj-ltr() {
+      border-width: 1px;
+    }
+    border-style: solid;
+  }
+
+  /* Set the indentation here depth 1 is one indent level */
+
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-1
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: var(--oj-navigation-list-item-padding);
+    }
+    html[dir="rtl"] & {
+      padding-right: var(--oj-navigation-list-item-padding);
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-2
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(2 * var(--oj-navigation-list-item-padding));
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(2 * var(--oj-navigation-list-item-padding));
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-3
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(3 * var(--oj-navigation-list-item-padding));
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(3 * var(--oj-navigation-list-item-padding));
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-4
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(4 * var(--oj-navigation-list-item-padding));
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(4 * var(--oj-navigation-list-item-padding));
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-5
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(5 * var(--oj-navigation-list-item-padding));
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(5 * var(--oj-navigation-list-item-padding));
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-6
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(6 * var(--oj-navigation-list-item-padding));
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(6 * var(--oj-navigation-list-item-padding));
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-7
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(7 * var(--oj-navigation-list-item-padding));
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(7 * var(--oj-navigation-list-item-padding));
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul:not(.oj-navigationlist-has-icons)
+    .oj-navigationlist-depth-8
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(8 * var(--oj-navigation-list-item-padding));
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(8 * var(--oj-navigation-list-item-padding));
+    }
+  }
+
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-1
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-2
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        2 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        2 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-3
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        3 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        3 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-4
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        4 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        4 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-5
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        5 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        5 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-6
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        6 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        6 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-7
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        7 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        7 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+  .oj-navigationlist-vertical:not(.oj-navigationlist-slider)
+    ul.oj-navigationlist-has-icons
+    .oj-navigationlist-depth-8
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-left: calc(
+        8 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+    html[dir="rtl"] & {
+      padding-right: calc(
+        8 * var(--oj-navigation-list-item-padding) + var(--oj-navigation-list-icon-to-text-padding) + var(--oj-navigation-list-icon-size)
+      );
+    }
+  }
+
+  //Add padding to right side for leaf node
+  .oj-navigationlist-vertical:not(.oj-navigationlist-icon-only)
+    .oj-navigationlist-item:not(.oj-navigationlist-group-item)
+    .oj-navigationlist-item-content {
+    html:not([dir="rtl"]) & {
+      padding-right: var(--oj-navigation-list-item-padding);
+    }
+    html[dir="rtl"] & {
+      padding-left: var(--oj-navigation-list-item-padding);
+    }
+  }
+  //Add padding to right side on group node as there should be some padding after expand/collapse icon.
+  .oj-navigationlist-group-item {
+    html:not([dir="rtl"]) & {
+      padding-right: var(--oj-navigation-list-item-padding);
+    }
+    html[dir="rtl"] & {
+      padding-left: var(--oj-navigation-list-item-padding);
+    }
+  }
+
+  /*---- End of common styles for collapsible and expanded navigation list ----*/
+
+  /* Start of Collapsible Navigation list*/
+
+  .oj-navigationlist-collapsible .oj-navigationlist-item-element.oj-collapsed .oj-navigationlist-group {
+    max-height: 0; //Needed for hiding collapsed elements
+  }
+
+  /* expand and collapse animation */
+  .oj-navigationlist-collapsible .oj-navigationlist-collapsible-transition {
+    overflow: hidden;
+  }
+
+  /* Collapse or expand icon color should not change on hover*/
+  .oj-navigationlist-item a.oj-navigationlist-collapse-icon,
+  .oj-navigationlist-item a.oj-navigationlist-expand-icon {
+    color: var(--oj-navigation-list-item-label-color);
+  }
+
+  /* Collapse or expand icon color should not change on hover*/
+  .oj-navigationlist-item.oj-hover a.oj-navigationlist-collapse-icon,
+  .oj-navigationlist-item.oj-hover a.oj-navigationlist-expand-icon {
+    color: var(--oj-navigation-list-item-label-color-hover);
+  }
+
+  // Remove focus ring on expand/collapse icons
+  .oj-navigationlist-collapse-icon:focus,
+  .oj-navigationlist-expand-icon:focus {
+    outline: none;
+  }
+
+  .oj-navigationlist-focused-element:not(.oj-focus-highlight) {
+    outline: none; // avoid native browser ring on focus
+  }
+
+  /* End of Collapsible Navigation list*/
+
+  /*Start of icons only navlist*/
+
+  //vertical icon only list styling
+  .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
+    html[dir="rtl"] & {
+      border-width: 0 var(--oj-private-navigation-list-item-border-width) 0 0;
+    }
+    html:not([dir="rtl"]) & {
+      border-width: 0 0 0 var(--oj-private-navigation-list-item-border-width);
+    }
+
+    border-style: solid;
+  }
+
+  .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
+  }
+
+  html[dir="rtl"] .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
+    padding: 0
+      calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width))
+      0
+      var(--oj-navigation-list-item-padding);
+  }
+  html:not([dir="rtl"]) .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-icon {
+    padding: 0
+      var(--oj-navigation-list-item-padding)
+      0
+      calc(var(--oj-navigation-list-item-padding) - var(--oj-private-navigation-list-item-border-width));
+  }
+  
+  .oj-navigationlist-icon-only .oj-navigationlist-item-content {
+    justify-content: center;
+  }
+  .oj-navigationlist-vertical.oj-navigationlist-icon-only .oj-navigationlist-item-content {
+    flex: 0 1 auto;
+}
+  /*End of icons only navlist*/
+
+  //This is needed to ensure icon only list not stretch to available space.
+  .oj-navigationlist-vertical.oj-navigationlist-icon-only {
+    display: inline-flex;
+  }
+
+  //Margin for Vertical icons only list
+  .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item {
+    margin-bottom: var(--oj-navigation-list-item-margin);
+  }
+
+  // remove margin on vertical icons only last item
+  .oj-navigationlist-icon-only.oj-navigationlist-vertical .oj-navigationlist-item:last-child {
+    margin-bottom: 0;
+  }
+
+  /*Start of common horizontal navigationlist styles */
+
+  .oj-navigationlist-horizontal .oj-navigationlist-element {
+    display: flex;
+  }
+
+  .oj-navigationlist-horizontal .oj-navigationlist-item {
+    flex: 1 1 auto;
+  }
+
+  /* This is due to bug in IE 11 where setting flex-shrink:0 is needed to avoid truncation in item text which is needed for overflow feature. This work around breaks text-wrap functionality so enabling this only when no text wrap. We can remove this once IE 11 support dropped and can update docs saying text-wrap is supported with overflow. */
+
+  .oj-navigationlist-horizontal:not(.oj-navigationlist-item-text-wrap) .oj-navigationlist-item {
+    flex: 1 0 auto;
+  }
+
+  // UP
+  @if $responsiveQuerySmallUp and $responsiveQuerySmallUp != none {
+    @media #{$responsiveQuerySmallUp} {
+      //Need to add app-level selector as we already overriding flex property in ios scss to show equal sized buttons
+      .oj-navigationlist-horizontal.oj-sm-condense .oj-navigationlist-item {
+        flex: 0 0 auto;
+      }
+
+      .oj-navigationlist-horizontal.oj-sm-justify-content-center .oj-navigationlist-element {
+        justify-content: center;
+      }
+      .oj-navigationlist-horizontal.oj-sm-justify-content-flex-end .oj-navigationlist-element {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  @if $responsiveQueryMediumUp and $responsiveQueryMediumUp != none {
+    @media #{$responsiveQueryMediumUp} {
+      .oj-navigationlist-horizontal.oj-md-condense .oj-navigationlist-item {
+        flex: 0 0 auto;
+      }
+      .oj-navigationlist-horizontal.oj-md-justify-content-center .oj-navigationlist-element {
+        justify-content: center;
+      }
+      .oj-navigationlist-horizontal.oj-md-justify-content-flex-end .oj-navigationlist-element {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  @if $responsiveQueryLargeUp and $responsiveQueryLargeUp != none {
+    @media #{$responsiveQueryLargeUp} {
+      .oj-navigationlist-horizontal.oj-lg-condense .oj-navigationlist-item {
+        flex: 0 1 auto;
+      }
+      .oj-navigationlist-horizontal.oj-lg-justify-content-center .oj-navigationlist-element {
+        justify-content: center;
+      }
+      .oj-navigationlist-horizontal.oj-lg-justify-content-flex-end .oj-navigationlist-element {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  @if $responsiveQueryXlargeUp and $responsiveQueryXlargeUp != none {
+    @media #{$responsiveQueryXlargeUp} {
+      .oj-navigationlist-horizontal.oj-xl-condense .oj-navigationlist-item {
+        flex: 0 0 auto;
+      }
+      .oj-navigationlist-horizontal.oj-xl-justify-content-center .oj-navigationlist-element {
+        justify-content: center;
+      }
+      .oj-navigationlist-horizontal.oj-xl-justify-content-flex-end .oj-navigationlist-element {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  @if $privateResponsiveQueryXXlargeUp and $privateResponsiveQueryXXlargeUp != none {
+    @media #{$privateResponsiveQueryXXlargeUp} {
+      .oj-navigationlist-horizontal.oj-xxl-condense .oj-navigationlist-item {
+        flex: 0 0 auto;
+      }
+      .oj-navigationlist-horizontal.oj-xxl-justify-content-center .oj-navigationlist-element {
+        justify-content: center;
+      }
+      .oj-navigationlist-horizontal.oj-xxl-justify-content-flex-end .oj-navigationlist-element {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  .oj-navigationlist-item-element {
+    box-sizing: border-box;
+    min-height: var(--oj-navigation-list-item-min-height);
+  }
+
+
+  .oj-navigationlist-horizontal .oj-navigationlist-item-label {
+    align-self: center;
+  }
+
+
+
+  /*End of common horizontal navigationlist styles */
+
+  /*Start of  horizontal navigationlist styles icons only*/
+  //Padding for horizontal icons only list
+  html .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
+    margin-inline-start: var(--oj-navigation-list-item-margin);
+    padding: 0 var(--oj-navigation-list-item-padding);
+  }
+
+  html .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item:first-child {
+    margin-inline-start: 0;
+  }
+
+  .oj-navigationlist-horizontal.oj-navigationlist-icon-only .oj-navigationlist-item {
+    border-width: 0 0 var(--oj-private-navigation-list-item-border-width) 0;
+    border-style: solid;
+  }
+  
+  /*End of  horizontal navigationlist styles icons only*/
+
+  /*Start of  horizontal navigationlist styles excluding icons only*/
+
+  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
+    border-width: 0 0 var(--oj-private-navigation-list-item-border-width) 0;
+    margin-inline-end: var(--oj-navigation-list-item-margin);
+    border-style: solid;
+  }
+
+  // remove margin on horizontal last item
+  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-navigationlist-item-last-child {
+    margin-inline-end: 0;
+  }
+
+  .oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
+    border-style: none;
+  }
+  .oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-focus,
+  .oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-hover {
+    border-width: 1px;
+    border-style: dotted;
+  }
+  .oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected,
+  .oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-focus,
+  .oj-hicontrast .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item.oj-selected.oj-hover {
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .oj-navigationlist-horizontal:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
+    padding: 0 var(--oj-navigation-list-item-padding);
+    justify-content: center;
+  }
+
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
+    padding: 0 var(--oj-navigation-list-item-padding);
+  }
+
+  //Add Space between icon and text in stacked label and icon
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
+    padding-bottom: var(--oj-navigation-list-icon-to-text-padding);
+  }
+
+  //Add Space between icon and text
+  .oj-navigationlist:not(.oj-navigationlist-stack-icon-label):not(.oj-navigationlist-icon-only) .oj-navigationlist-item-icon {
+    html:not([dir="rtl"]) & {
+      margin-right: var(--oj-navigation-list-icon-to-text-padding);
+    }
+    html[dir="rtl"] & {
+      margin-left: var(--oj-navigation-list-icon-to-text-padding);
+    }
+
+    align-self: center;
+  }
+
+  .oj-navigationlist-horizontal-bottom.oj-navigationlist-horizontal .oj-navigationlist-item {
+    border-width: var(--oj-private-navigation-list-item-border-width) 0 0 0;
+  }
+  
+  /*End of  horizontal navigationlist styles excluding icons only*/
+
+  /*Start of  horizontal stacked icon label navigationlist styles */
+
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label .oj-navigationlist-item-element {
+    min-height: var(--oj-navigation-list-item-min-height);
+  }
+
+  //Horizontal divider
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-divider {
+    height: 2.714rem; //38px
+  }
+
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item {
+    padding-bottom: 2px;
+  }
+  .oj-navigationlist-horizontal.oj-navigationlist-stack-icon-label:not(.oj-navigationlist-icon-only) .oj-navigationlist-item-content {
+    flex-direction: column;
+  }
+
+  /*End of  horizontal stacked icon label navigationlist styles */
+
+  /* Start of App Level horizontal navlist styles */
+
+  .oj-navigationlist-item-label {
+    font-size: var(--oj-navigation-list-font-size);
+    font-weight: var(--oj-navigation-list-font-weight);
+  }
+
+  .oj-navigationlist-horizontal .oj-navigationlist-item:not(.oj-disabled):not(.oj-hover):not(.oj-selected) .oj-navigationlist-item-icon {
+    color: var(--oj-navigation-list-item-label-color);
+  }
+
+  .oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) {
+    background-color: var(--oj-navigation-list-item-bg-color-hover);
+  }
+
+  .oj-navigationlist-horizontal
+    .oj-navigationlist-item.oj-hover:not(.oj-selected)
+    a.oj-navigationlist-item-content
+    > .oj-navigationlist-item-label {
+    color: var(--oj-navigation-list-item-label-color-hover);
+  }
+
+  .oj-navigationlist-horizontal .oj-navigationlist-item.oj-hover:not(.oj-selected) .oj-navigationlist-item-icon {
+    color: var(--oj-navigation-list-item-label-color-hover);
+  }
+
+  /* End of App Level horizontal navlist styles */
+
+  /*Start of sliding navlist*/
+  /*Hide siblings of parent node while showing the list*/
+  // Hide all first level items except the one which is expanded.
+  .oj-navigationlist-slider .oj-navigationlist-element:not(.oj-navigationlist-current) > .oj-navigationlist-item-element:not(.oj-expanded),
+         // Hide all sub lists which are collapsed
+        .oj-navigationlist-slider .oj-navigationlist-item-element:not(.oj-expanded) > .oj-navigationlist-group,
+         // Hide list items which are not parents of current opened list
+        .oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded:not(.oj-navigationlist-current) > .oj-navigationlist-group > .oj-navigationlist-item-element:not(.oj-expanded),
+         //Hide label when list item is open/expanded
+        .oj-navigationlist-slider .oj-navigationlist-item-element.oj-expanded > .oj-navigationlist-group-item {
+    display: none;
+  }
+
+  /* Navlist header in case of sliding */
+  .oj-navigationlist-toolbar {
+    background-color: transparent;
+    display: flex;
+    line-height: 3.142rem;
+    padding-inline-start: 0.5rem;
+  }
+
+  /* previous link */
+  .oj-navigationlist-previous-link {
+    align-self: center;
+    order: 0;
+    display: flex;
+    flex: 1 0 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .oj-navigationlist-previous-button {
+    align-self: center;
+    margin-bottom: 0;
+  }
+
+  a.oj-navigationlist-previous-link:active {
+    background-color: transparent;
+  }
+
+  /* Override link style */
+  a.oj-navigationlist-previous-link {
+    text-decoration: none;
+    outline: none;
+    font-weight: normal;
+  }
+
+  /* Label for current displayed list */
+  .oj-navigationlist-current-header {
+    color: var(--oj-heading-text-color);
+    font-size: var(--oj-navigation-list-sliding-heading-font-size);
+    font-weight: var(--oj-navigation-list-sliding-heading-font-weight);
+    line-height: var(--oj-navigation-list-sliding-heading-line-height);
+    flex: 1 1 auto;
+    order: 1;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .oj-navigationlist-toolbar-separator {
+    border-left: 1px solid var(--oj-core-divider-color);
+    align-self: center;
+    order: 1;
+    display: inline-block;
+    height: 2.642rem; //37px
+    vertical-align: middle;
+    margin-top: 0.214rem;
+    margin-bottom: 0.214rem;
+    margin-inline-start: 0.714rem;
+    margin-inline-end: 0;
+  }
+
+  .oj-navigationlist-hierarchical-button {
+    align-self: center;
+    order: 2;
+    flex: 0 0 auto;
+  }
+
+  /* override oj-button margin for hierarchical menu button*/
+  .oj-button.oj-navigationlist-hierarchical-button {
+    margin: 0 5px; //0 5 0 5
+  }
+
+  //Overriding margin for button icon
+  .oj-navigationlist-hierarchical-button.oj-button-icons-only .oj-hier-icon.oj-button-icon.oj-start {
+    // Removing the padding set by menu button.
+    // different padding for both ltr/rtl and so we need to override like this
+    margin-inline-end: 0.5rem;
+  }
+
+  /* Multiple space elements will be added to dom to get tree style in hierarchical menu  popup*/
+  .oj-navigationlist-hvitem-space {
+    margin-left: 1.142rem; //16px
+  }
+
+  /* hicontrast overrides for sliding navlist */
+  html:not([dir="rtl"]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item,
+  html:not([dir="rtl"]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item,
+  .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-hover.oj-navigationlist-item,
+  .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-focus.oj-navigationlist-item {
+    border: 1px dotted;
+  }
+
+  html:not([dir="rtl"]) .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item,
+  .oj-hicontrast .oj-navigationlist-slider :not(.oj-selected).oj-navigationlist-item {
+    border-width: 0;
+  }
+
+  /* override menu css*/
+
+  .oj-menu-item-icon.oj-navigationlist-level-indicator {
+    align-self: baseline; //level indivator icon alignment
+    padding-bottom: 10px;
+    padding-left: 9px;
+    margin-bottom: 2px;
+    margin-top: 3px;
+    width: auto;
+    height: auto;
+  }
+
+  //Add padding and font size for menu. Here font is fixed irrespective of page font.
+  .oj-navigationlist-hierarchical-menu.oj-menu,
+  .oj-navigationlist-hierarchical-menu .oj-menu {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  //Height is fixed as 12px font need not to change wrt page font
+  .oj-navigationlist-hierarchical-menu .oj-menu-item a {
+    line-height: 12px;
+    height: 20px;
+  }
+
+  .oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus > a,
+  .oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus-ancestor > a {
+    background: none;
+  }
+
+  //Add border for focused menu item
+  .oj-navigationlist-hierarchical-menu .oj-menu-item.oj-focus a > .oj-navigationlist-hierarchical-menu-label {
+    background-color: var(--oj-core-bg-color-selected);
+    border: 1px solid var(--oj-tree-view-text-color);
+
+    padding: 1px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+
+  //Add padding/margin on menu label
+  .oj-navigationlist-hierarchical-menu .oj-menu-item a > .oj-navigationlist-hierarchical-menu-label {
+    padding: 2px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+
+  .oj-navigationlist-hierarchical-menu .oj-menu-item a {
+    color: var(--oj-tree-view-text-color);
+  }
+
+  //Remove padding
+  html:not([dir="rtl"]) .oj-navigationlist-hierarchical-menu .oj-menu-item a,
+  html:not([dir="ltr"]) .oj-navigationlist-hierarchical-menu .oj-menu-item a {
+    padding: 0;
+  }
+
+  //Hide down arrow icon
+  .oj-navigationlist-hierarchical-button .oj-button-menu-dropdown-icon {
+    display: none !important;
+  }
+
+  //Remove margin
+  html:not([dir="ltr"]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon,
+  html:not([dir="rtl"]) .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
+    margin-left: 4px;
+    margin-right: 2px;
+  }
+
+  .oj-navigationlist-hierarchical-menu .oj-menu-item-icon {
+    position: static;
+    transform: none;
+  }
+  /* end - override menu css*/
+
+  .oj-hier-icon {
+    @extend .oj-fwk-icon-folderhierarchy;
+  }
+
+  .oj-navigationlist-has-icons .oj-navigationlist-overflow-item-icon {
+    display: block;
+  }
+
+  .oj-navigationlist-overflow-item-icon {
+    display: none;
+    font-size: 24px;
+  }
+
+  .oj-menu-item-icon.oj-navigationlist-level-indicator {
+    border-bottom: 1px solid var(--oj-popup-border-color);
+    html:not([dir="rtl"]) & {
+      border-left: 1px solid var(--oj-popup-border-color);
+    }
+    html[dir="rtl"] & {
+      border-right: 1px solid var(--oj-popup-border-color);
+    }
+  }
+
+  .oj-navigationlist-no-data-message {
+    padding: var(--oj-core-spacing-2x);
+    background-color: var(--oj-collection-bg-color);
+    min-height: var(--oj-typography-body-md-font-size);
+  }
+
+  /* Styling on the status text, such as fetching data */
+  .oj-navigationlist-status-message {
+    position: absolute;
+    padding: var(--oj-core-spacing-2x);
+    display: none;
+  }
+
+  .oj-navigationlist-horizontal .oj-navigationlist-status-message {
+    padding: 0;
+  }
+
+  /* Styling for the activity indicator*/
+  .oj-navigationlist-loading-icon {
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin: auto;
+    @include oj-icon-content($icon: url("#{$imageDir}spinner_full.gif"), $lowResProportion: 0.25);
+  }
+  .oj-navigationlist-horizontal .oj-navigationlist-loading-icon {
+    width: 24px;
+    height: 24px;
+    @include oj-icon-content($icon: url("#{$imageDir}spinner_full.gif"), $lowResProportion: 0.15);
+  }
+
+}