@progressiveui/styles 10.30.0

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -0,0 +1,526 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../mixins" as *;
+@use "../functions" as *;
+@use "../../../breakpoint" as *;
+@use "../../../config" as *;
+@use "../../../motion" as *;
+@use "../../../spacing" as *;
+@use "../../../theme" as *;
+@use "../../../type" as *;
+@use "../../../utilities/button-reset";
+@use "../../../utilities/convert" as *;
+@use "../../../utilities/focus-outline" as *;
+@use "../../../utilities/high-contrast-mode" as *;
+@use "../../../utilities/z-index" as *;
+
+/// UI shell side nav
+/// @access private
+/// @group ui-shell
+@mixin side-nav {
+  //----------------------------------------------------------------------------
+  // Side-nav > Panel
+  //----------------------------------------------------------------------------.
+  .#{$prefix}--side-nav {
+    position: fixed;
+    z-index: z("header");
+    top: 0;
+    bottom: 0;
+    left: 0;
+    // Useful to toggle this property to see what's going on when not expanded
+    overflow: hidden;
+    width: mini-units(6);
+    max-width: mini-units(32);
+    background-color: $background-main;
+    color: $text-body-secondary;
+    // TODO: sync with motion work
+    transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
+    will-change: width;
+  }
+
+  .#{$prefix}--side-nav--ux {
+    top: $spacing-09;
+    width: mini-units(32);
+
+    @include breakpoint-down("lg") {
+      width: 0;
+    }
+  }
+
+  //----------------------------------------------------------------------------
+  // Rail
+  //---------------------------------------------------------------------------
+  // Used for rendering the actual side rail. There are two states that we have
+  // to style for, namely for when the rail is collapsed and expanded. When
+  // collapsed, the rail is intended to expand on mouse over. When expanded, it
+  // should have the same dimensions as when expanded on mouse over
+
+  .#{$prefix}--side-nav--rail {
+    width: mini-units(6);
+  }
+
+  .#{$prefix}--side-nav--hidden {
+    width: 0;
+  }
+
+  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(
+      .#{$prefix}--side-nav--fixed
+    ):hover,
+  .#{$prefix}--side-nav--expanded {
+    width: mini-units(32);
+  }
+
+  .#{$prefix}--side-nav__overlay {
+    position: fixed;
+    top: calcRem(48px);
+    left: 0;
+    width: 0;
+    height: 0;
+    background-color: transparent;
+    opacity: 0;
+    transition: opacity $transition--expansion $standard-easing,
+      background-color $transition--expansion $standard-easing;
+  }
+
+  .#{$prefix}--side-nav__overlay-active {
+    @include breakpoint-down("lg") {
+      width: 100vw;
+      height: 100vh;
+      background-color: $overlay;
+      opacity: 1;
+      transition: opacity $transition--expansion $standard-easing,
+        background-color $transition--expansion $standard-easing;
+    }
+  }
+
+  // When used alongside the header, we update the `top` positioning so that we
+  // can fit both widgets on the same page without overlapping.
+  .#{$prefix}--header ~ .#{$prefix}--side-nav {
+    top: mini-units(6);
+    height: calc(100% - 48px);
+  }
+
+  .#{$prefix}--side-nav--fixed {
+    width: mini-units(32);
+  }
+
+  .#{$prefix}--side-nav--collapsed {
+    width: mini-units(32);
+    transform: translateX(mini-units(-32));
+  }
+
+  //----------------------------------------------------------------------------
+  // Side-nav > Navigation
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav__navigation {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  //----------------------------------------------------------------------------
+  // Side-nav > Navigation > Item(s)
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav__items {
+    overflow: hidden;
+    flex: 1 1 0%;
+    padding: 1rem 0 0;
+
+    @include expanded() {
+      overflow-y: auto;
+    }
+  }
+
+  .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__items {
+    overflow-y: auto;
+  }
+
+  .#{$prefix}--side-nav__item {
+    overflow: hidden;
+    width: auto;
+    height: auto;
+  }
+
+  .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__item {
+    width: auto;
+    height: auto;
+  }
+
+  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover
+    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
+    > .#{$prefix}--side-nav__submenu:hover,
+  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
+    > .#{$prefix}--side-nav__link:hover,
+  .#{$prefix}--side-nav__menu
+    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not(
+      [aria-current="page"]
+    ):hover,
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu-title[aria-expanded="true"]:hover {
+    // TODO: sync color
+    background-color: $background-hover;
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
+    > .#{$prefix}--side-nav__link:hover
+    > span,
+  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
+    .#{$prefix}--side-nav__menu-item
+    > .#{$prefix}--side-nav__link:hover
+    > span {
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--side-nav__item--large {
+    height: mini-units(6);
+  }
+
+  //----------------------------------------------------------------------------
+  // Side-nav > Navigation > Divider
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav__divider {
+    height: 1px;
+    margin: $spacing-03 $spacing-05;
+    background-color: $border-subtle;
+  }
+
+  //----------------------------------------------------------------------------
+  // Side-nav > Navigation > {Menu,Submenu}
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav__submenu {
+    @include button-reset.reset($width: true);
+    @include type-style("productive-heading-01");
+    @include focus-outline("reset");
+
+    display: flex;
+    height: mini-units(4);
+    align-items: center;
+
+    padding: 0 mini-units(2);
+    color: $text-body-secondary;
+    transition: color $duration-fast-02, background-color $duration-fast-02,
+      outline $duration-fast-02;
+    user-select: none;
+  }
+
+  .#{$prefix}--side-nav__submenu:hover {
+    background-color: $background-hover;
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--side-nav__submenu:focus {
+    @include focus-outline("outline");
+  }
+
+  .#{$prefix}--side-nav__submenu-title {
+    @include text-overflow();
+
+    text-align: left;
+  }
+
+  .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__submenu-chevron {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .#{$prefix}--side-nav__submenu-chevron > svg {
+    width: calcRem(16px);
+    height: calcRem(16px);
+    transition: transform $duration-fast-02;
+  }
+
+  .#{$prefix}--side-nav__submenu[aria-expanded="true"]
+    .#{$prefix}--side-nav__submenu-chevron
+    > svg {
+    transform: rotate(180deg);
+  }
+
+  .#{$prefix}--side-nav__item--large .#{$prefix}--side-nav__submenu {
+    height: mini-units(6);
+  }
+
+  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
+    //the active className is used for selected styles, hence using the selected tokens
+    background-color: $background-selected;
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--side-nav__item--active
+    .#{$prefix}--side-nav__submenu[aria-expanded="false"] {
+    position: relative;
+    background-color: $background-selected;
+    color: $text-body-default;
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 3px;
+      background-color: $border-interactive;
+      content: "";
+    }
+  }
+
+  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu-title {
+    color: $text-body-default;
+    font-weight: 600;
+  }
+
+  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__icon > svg {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--side-nav__menu {
+    display: block;
+    max-height: 0;
+    visibility: hidden;
+  }
+
+  .#{$prefix}--side-nav__submenu[aria-expanded="true"]
+    + .#{$prefix}--side-nav__menu {
+    max-height: calcRem(1500px);
+    visibility: inherit;
+  }
+
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
+    height: mini-units(4);
+    min-height: mini-units(4);
+    padding-left: mini-units(4);
+    font-weight: 400;
+  }
+
+  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
+    a.#{$prefix}--side-nav__link {
+    padding-left: mini-units(9);
+  }
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current="page"],
+  a.#{$prefix}--side-nav__link--current {
+    background-color: $background-selected;
+
+    > span {
+      color: $text-body-default;
+      font-weight: 600;
+    }
+  }
+
+  //----------------------------------------------------------------------------
+  // Side-nav > Link
+  //----------------------------------------------------------------------------
+  a.#{$prefix}--side-nav__link,
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item,
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu-title[aria-expanded="true"]
+    + .#{$prefix}--header__menu {
+    @include focus-outline("reset");
+    @include type-style("productive-heading-01");
+
+    position: relative;
+    display: flex;
+    min-height: mini-units(4);
+    align-items: center;
+    padding: 0 mini-units(2);
+    text-decoration: none;
+    transition: color $duration-fast-02, background-color $duration-fast-02,
+      outline $duration-fast-02;
+  }
+
+  .#{$prefix}--side-nav__item--large a.#{$prefix}--side-nav__link {
+    height: mini-units(6);
+  }
+
+  a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item
+    .#{$prefix}--text-truncate-end {
+    @include text-overflow();
+
+    color: $text-body-secondary;
+    font-size: calcRem(14px);
+    letter-spacing: 0.1px;
+    line-height: 1.25rem;
+    user-select: none;
+  }
+
+  a.#{$prefix}--side-nav__link:focus,
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus {
+    @include focus-outline("outline");
+  }
+
+  a.#{$prefix}--side-nav__link[aria-current="page"],
+  a.#{$prefix}--side-nav__link--current {
+    background-color: $background-selected;
+    font-weight: 600;
+  }
+
+  a.#{$prefix}--side-nav__link[aria-current="page"]
+    .#{$prefix}--side-nav__link-text,
+  a.#{$prefix}--side-nav__link--current .#{$prefix}--side-nav__link-text {
+    color: $text-body-default;
+  }
+
+  a.#{$prefix}--side-nav__link[aria-current="page"]::before,
+  a.#{$prefix}--side-nav__link--current::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 3px;
+    background-color: $border-interactive;
+    content: "";
+  }
+
+  //----------------------------------------------------------------------------
+  // Side-nav > Icons
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav__icon {
+    display: flex;
+    // Helpful in flex containers so the icon does not have less than the
+    // expected width
+    flex: 0 0 mini-units(2);
+    align-items: center;
+    justify-content: center;
+  }
+
+  .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
+    margin-right: mini-units(3);
+  }
+
+  .#{$prefix}--side-nav__icon > svg {
+    width: mini-units(2);
+    height: mini-units(2);
+    fill: $icon-secondary;
+  }
+
+  .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
+    display: none;
+  }
+
+  .#{$prefix}--side-nav--expanded
+    .#{$prefix}--side-nav__icon
+    > svg.#{$prefix}--side-nav-expand-icon {
+    display: none;
+  }
+
+  .#{$prefix}--side-nav--expanded
+    .#{$prefix}--side-nav__icon
+    > svg.#{$prefix}--side-nav-collapse-icon {
+    display: block;
+  }
+
+  //----------------------------------------------------------------------------
+  // Variants - Fixed
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link,
+  .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__submenu {
+    padding-left: mini-units(2);
+  }
+
+  .#{$prefix}--side-nav--fixed
+    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--icon)
+    .#{$prefix}--side-nav__menu
+    a.#{$prefix}--side-nav__link {
+    padding-left: mini-units(4);
+  }
+
+  //----------------------------------------------------------------------------
+  // Variants - Header Nav Links in Side Nav
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav .#{$prefix}--header__nav {
+    @include breakpoint-down("lg") {
+      display: block;
+    }
+  }
+
+  .#{$prefix}--side-nav__header-navigation {
+    display: none;
+
+    @include breakpoint-down("lg") {
+      position: relative;
+      display: block;
+      margin-bottom: calcRem(32px);
+    }
+  }
+
+  .#{$prefix}--side-nav__header-divider::after {
+    position: absolute;
+    bottom: calcRem(-16px);
+    left: calcRem(16px);
+    width: calc(100% - 32px);
+    height: calcRem(1px);
+    background: $border-subtle;
+    content: "";
+  }
+
+  //header menu items overrides
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item {
+    justify-content: space-between;
+    color: $text-body-secondary;
+    white-space: nowrap;
+
+    &[aria-expanded="true"] {
+      background-color: transparent;
+    }
+  }
+
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu-title[aria-expanded="true"]
+    + .#{$prefix}--header__menu {
+    bottom: inherit;
+    width: 100%;
+    padding: 0;
+    background-color: transparent;
+    box-shadow: none;
+    transform: none;
+
+    li {
+      width: 100%;
+    }
+
+    a.#{$prefix}--header__menu-item {
+      padding-left: 4.25rem;
+      font-weight: 400;
+    }
+
+    a.#{$prefix}--header__menu-item:hover {
+      background-color: $background-hover;
+      color: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--side-nav
+    .#{$prefix}--header__menu
+    a.#{$prefix}--header__menu-item {
+    height: inherit;
+  }
+
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item:hover
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item:focus
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
+    fill: $icon-secondary;
+  }
+
+  // Windows HCM fix
+  .#{$prefix}--side-nav__icon > svg,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item:hover
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item:focus
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
+    @include high-contrast-mode("icon-fill");
+  }
+}

package/scss/components/ui-shell/switcher/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'switcher';
+@use 'switcher';
+
+@include switcher.switcher;

package/scss/components/ui-shell/switcher/_switcher.scss

@@ -0,0 +1,78 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../../../config" as *;
+@use "../../../spacing" as *;
+@use "../../../theme" as *;
+@use "../../../type" as *;
+@use "../../../utilities/convert" as *;
+
+/// UI shell side nav
+/// @access private
+/// @group ui-shell
+@mixin switcher {
+  //----------------------------------------------------------------------------
+  // Header Switcher
+  //----------------------------------------------------------------------------
+  .#{$prefix}--switcher {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: $text-body-secondary;
+  }
+
+  .#{$prefix}--switcher__item {
+    width: 100%;
+    height: $spacing-07;
+  }
+
+  .#{$prefix}--switcher__item:nth-child(1) {
+    margin-top: $spacing-05;
+  }
+
+  .#{$prefix}--switcher__item--divider {
+    display: block;
+    width: calcRem(224px);
+    height: 1px;
+    border: none;
+    margin: $spacing-03 $spacing-05;
+    background: $border-subtle;
+  }
+
+  .#{$prefix}--switcher__item-link {
+    @include type-style("productive-heading-01");
+
+    display: block;
+    height: $spacing-07;
+    padding: calcRem(6px) $spacing-05;
+    color: $text-body-secondary;
+    text-decoration: none;
+
+    &:hover:not(.#{$prefix}--switcher__item-link--selected) {
+      background: $layer-hover;
+      color: $text-body-default;
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: 2px solid $focus;
+      outline-offset: -2px;
+    }
+
+    &:active {
+      background: $layer-active;
+      color: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--switcher__item-link--selected {
+    //TO-DO: should we add a 3px left border-interactive here too? Doesn't currently have it, but specs have it
+    background: $layer-selected;
+    color: $text-body-default;
+  }
+}

package/scss/components/unit/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'unit';
+@use 'unit';
+
+@include unit.unit;