@progressiveui/styles 10.30.0

package/scss/components/main-navigation/_main-navigation_external.scss

@@ -0,0 +1,527 @@
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+
+@mixin main_navigation_external {
+  /* Custom local Sass variables */
+  $wfp-logo-wrapper-width: 88px;
+  $nav-main-padding-bottom: $spacing-04;
+
+  .#{$prefix}--main-navigation-ext {
+    background-color: $background-main;
+    box-shadow: 0 5px 26px 0 rgb(21 41 53 / 8%); // TODO: Create new token for the shadow
+    display: flex;
+    position: relative;
+
+    .#{$prefix}--main-navigation__trigger {
+      cursor: pointer;
+      user-select: none;
+      //vertical-align: middle;
+      white-space: nowrap;
+
+      > a {
+        color: $action-default-link-default; // TODO change to $link_on_color token
+        @include type-style("body-short-02");
+        text-decoration: none;
+        &.active {
+          border-bottom: 3px solid rgba(var(--ui-01), 0.5);
+        }
+        &:hover,
+        &:visited,
+        &:active {
+          color: $action-default-link-default;
+          text-decoration: underline;
+        }
+        &:focus {
+          color: $action-default-link-default;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    margin-top: 0;
+    min-height: 88px;
+
+    @include breakpoint-down(lg) {
+      &.#{$prefix}--wrapper {
+        padding-left: 0;
+      }
+    }
+
+    @include breakpoint-down(md) {
+      min-height: auto;
+      max-height: 60px;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__branding {
+    position: relative;
+
+    @include breakpoint-down(md) {
+      align-items: center;
+      display: flex;
+    }
+  }
+
+  // [1] Overflow the Header to cover the entire Breadcrumb banner's height (40px)
+  .#{$prefix}--main-navigation-ext__wfp-logo {
+    align-items: center;
+    background-color: $background-brand;
+    display: flex;
+    height: calc(100% + 40px); // [1]
+    left: 0;
+    padding: $spacing-04;
+    position: absolute;
+    top: 0;
+    width: $wfp-logo-wrapper-width;
+
+    @include breakpoint-down(md) {
+      height: 100%;
+      padding: $spacing-02;
+      position: static;
+      width: auto;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__wfp-logo-svg {
+    fill: $icon-on-color;
+    height: auto;
+    width: 100%;
+
+    @include breakpoint-down(md) {
+      height: 100%;
+      width: auto;
+    }
+  }
+
+  // [1] Move the product name next to the WFP logo
+  .#{$prefix}--main-navigation-ext__product-name {
+    @include type-style("expressive-heading-03");
+
+    align-items: center;
+    color: #0b77c2; //  TODO: Use $brand token
+    display: flex;
+    font-weight: 700;
+    height: 100%;
+    justify-content: flex-start;
+    margin-left: calc(#{$wfp-logo-wrapper-width} + #{$spacing-05}); // [1]
+    text-transform: uppercase;
+
+    @include breakpoint-down(md) {
+      @include type-style("expressive-heading-01");
+
+      font-weight: 700;
+      margin-left: $spacing-03;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__main {
+    align-self: flex-end;
+    padding: $spacing-05 0 $nav-main-padding-bottom;
+
+    @include breakpoint-down(md) {
+      align-items: baseline;
+      align-self: center;
+      display: flex;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__settings {
+    align-items: center;
+    display: flex;
+    gap: 2rem;
+    justify-content: flex-end;
+
+    @include breakpoint-down(md) {
+      display: none;
+    }
+  }
+
+  /* Block Language styles */
+  // [1] TODO: Create a token for menu settings type-styles
+  .#{$prefix}--language-ext {
+    color: $text-body-secondary;
+    cursor: pointer;
+    font-size: 12px; // [1]
+    font-weight: 700; // [1]
+    letter-spacing: 0.36px; // [1]
+    line-height: 1; // [1]
+    position: relative;
+    text-transform: uppercase; // [1]
+  }
+
+  .#{$prefix}--language-ext__trigger {
+    align-items: center;
+    display: flex;
+    user-select: none;
+
+    svg {
+      margin-left: 0.3em;
+    }
+
+    @include breakpoint-down(md) {
+      color: $text-inverse-default;
+      font-size: 14px;
+      padding: 1rem;
+    }
+  }
+
+  .#{$prefix}--language-ext-chevron {
+    margin-left: $spacing-02;
+  }
+
+  .#{$prefix}--language-ext__dropdown {
+    background-color: $background-main;
+    border-bottom: 5px solid #0b77c2; // TODO: Use $brand token
+    box-shadow: 0 1px 8px rgb(0 0 0 / 30%); // TODO: Create a token for this shadow
+    display: none;
+    padding: $spacing-03 $spacing-02;
+    position: absolute;
+    right: 0;
+    top: calc(100% + #{$spacing-02});
+    width: 12rem;
+    z-index: 8100;
+
+    @include breakpoint-down(md) {
+      border-bottom: none;
+      box-shadow: none;
+      padding: $spacing-03;
+      position: static;
+      width: 100%;
+    }
+
+    &.#{$prefix}--language-ext__dropdown--is-shown {
+      display: block;
+    }
+  }
+
+  .#{$prefix}--language-ext__dropdown-option {
+    padding: $spacing-03;
+
+    @include breakpoint-down(md) {
+      @include type-style("body-short");
+
+      font-weight: 700;
+      padding: $spacing-05 $spacing-03;
+    }
+
+    &:hover {
+      @include breakpoint-up(md) {
+        background-color: $action-default-link-default;
+      }
+
+      & > a {
+        @include breakpoint-up(md) {
+          color: $text-inverse-default;
+        }
+      }
+    }
+
+    &:active {
+      @include breakpoint-down(md) {
+        background-color: #007dbc; // TODO: Create a token for this color
+
+        & > a {
+          color: $text-inverse-default;
+        }
+      }
+    }
+
+    & > a {
+      color: $text-body-secondary;
+    }
+  }
+  /* End block Language styles */
+
+  /* Block User styles */
+  .#{$prefix}--user-ext {
+    position: relative;
+  }
+
+  .#{$prefix}--user-ext__trigger {
+    align-items: center;
+    color: $text-body-secondary;
+    cursor: pointer;
+    display: flex;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.36px;
+    text-transform: uppercase;
+    user-select: none;
+
+    svg {
+      margin-left: 0.3em;
+    }
+
+    @include breakpoint-down(md) {
+      color: $text-inverse-default;
+      font-size: 14px;
+      padding: 1rem;
+    }
+  }
+
+  .#{$prefix}--user-ext__chevron {
+    margin-left: $spacing-02;
+  }
+
+  .#{$prefix}--user-ext__dropdown {
+    background-color: $background-main;
+    border-bottom: 5px solid #0b77c2; // TODO: Use $brand token
+    box-shadow: 0 1px 8px rgb(0 0 0 / 30%); // TODO: Create a token for this shadow
+    display: none;
+    padding: $spacing-05;
+    position: absolute;
+    right: 0;
+    top: calc(100% + #{$spacing-02});
+    width: 18rem;
+    z-index: 8100;
+
+    @include breakpoint-down(md) {
+      border-bottom: none;
+      box-shadow: none;
+      position: static;
+      width: 100%;
+    }
+
+    &.#{$prefix}--user-ext__dropdown--is-shown {
+      display: block;
+    }
+  }
+
+  .#{$prefix}--user-ext__profile-item {
+    align-items: baseline;
+    display: flex;
+    font-size: 12px;
+
+    & + .#{$prefix}--user-ext__profile-item {
+      margin-top: $spacing-03;
+    }
+  }
+
+  .#{$prefix}--user-ext__profile-label {
+    font-weight: 600;
+  }
+
+  .#{$prefix}--user-ext__profile-value {
+    margin-left: $spacing-02;
+  }
+
+  .#{$prefix}--user-ext__profile-actions {
+    align-items: baseline;
+    border-top: 1px solid $border-subtle;
+    display: flex;
+    justify-content: space-between;
+    margin-top: $spacing-04;
+    padding-top: $spacing-04;
+  }
+
+  .#{$prefix}--user-ext__profile-edit {
+    font-size: 14px;
+  }
+  /* End block User styles */
+
+  .#{$prefix}--main-navigation-ext__nav {
+    align-items: baseline;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: $spacing-04;
+
+    @include breakpoint-down(md) {
+      margin-top: 0;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__mobile-menu-button {
+    display: none;
+
+    @include breakpoint-down(lg) {
+      display: block;
+    }
+  }
+
+  // Wrap all nav links in a dropdown on small mobile devices
+  .#{$prefix}--main-navigation-ext__nav-wrapper {
+    align-items: baseline;
+    display: flex;
+    justify-content: flex-end;
+
+    @include breakpoint-down(md) {
+      background-color: #00547f; // TODO: Create a token for this color
+      box-shadow: 0 1px 8px rgb(0 0 0 / 20%); // TODO: Create a token for this shadow
+      display: none;
+      left: 0;
+      position: absolute;
+      top: 100%;
+      width: 100%;
+    }
+
+    &.#{$prefix}--main-navigation-ext--is-shown {
+      @include breakpoint-down(md) {
+        display: block;
+      }
+    }
+  }
+
+  // Wrap only site nav links in a dropdown on medium mobile devices
+  .#{$prefix}--main-navigation-ext__site-nav {
+    @include breakpoint-between(md, lg) {
+      background-color: #00547f; // TODO: Create a token for this color
+      box-shadow: 0 1px 8px rgb(0 0 0 / 20%); // TODO: Create a token for this shadow
+      display: none;
+      left: 0;
+      position: absolute;
+      top: 100%;
+      width: 100%;
+    }
+
+    &.#{$prefix}--main-navigation-ext--is-shown {
+      @include breakpoint-between(md, lg) {
+        display: block;
+      }
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__site-nav-list {
+    align-items: baseline;
+    display: flex;
+    justify-content: flex-end;
+
+    @include breakpoint-down(lg) {
+      flex-direction: column;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__site-link {
+    position: relative;
+    user-select: none;
+
+    // Styles to apply when the site link is the current page
+    &.#{$prefix}--main-navigation-ext__site-link--current::after {
+      background-color: $action-default-fill-primary-default;
+      content: "";
+      height: 4px;
+      left: 0;
+      position: absolute;
+      top: calc(100% + #{$nav-main-padding-bottom} - 4px);
+      width: 100%;
+    }
+
+    @include breakpoint-down(lg) {
+      width: 100%;
+    }
+
+    & + .#{$prefix}--main-navigation-ext__site-link {
+      margin-left: $spacing-07;
+
+      @include breakpoint-down(lg) {
+        border-top: 1px solid $border-interactive;
+        margin-left: 0;
+      }
+    }
+
+    & > a {
+      @include type-style("body-short");
+
+      color: $text-body-default;
+      cursor: pointer;
+      font-weight: 700;
+      text-transform: uppercase;
+
+      @include breakpoint-down(lg) {
+        align-items: center;
+        color: $text-inverse-default;
+        display: inline-flex;
+        height: 50px;
+        padding: 0 $spacing-05;
+        width: 100%;
+      }
+
+      &:hover {
+        color: $action-default-fill-primary-default;
+
+        @include breakpoint-down(lg) {
+          color: $text-inverse-default;
+        }
+      }
+
+      &:active {
+        @include breakpoint-down(lg) {
+          background-color: #007dbc; // TODO: Create a token for this color
+        }
+      }
+    }
+
+    & > button {
+      @include breakpoint-down(lg) {
+        margin: $spacing-04 $spacing-05 $spacing-05;
+      }
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__mobile-settings {
+    display: none;
+    width: 100%;
+
+    @include breakpoint-down(md) {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+
+    &
+      .#{$prefix}--main-navigation-ext__site-link
+      + .#{$prefix}--main-navigation-ext__site-link {
+      // Add a border to the bottom since the flex direction is reversed
+      border-bottom: 1px solid $border-interactive;
+    }
+
+    & .#{$prefix}--language-ext__trigger,
+    & .#{$prefix}--user-ext__trigger {
+      @include breakpoint-down(md) {
+        align-items: center;
+        display: flex;
+        height: 50px;
+      }
+
+      &:active {
+        @include breakpoint-down(md) {
+          background-color: #007dbc; // TODO: Create a token for this color
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__auth {
+    margin-left: $spacing-07;
+
+    @include breakpoint-down(md) {
+      margin-left: 0;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__auth-list {
+    align-items: baseline;
+    display: flex;
+    justify-content: flex-end;
+
+    @include breakpoint-down(md) {
+      justify-content: flex-start;
+      padding: $spacing-04 $spacing-05 $spacing-05;
+    }
+  }
+
+  .#{$prefix}--main-navigation-ext__auth-action {
+    & + .#{$prefix}--main-navigation-ext__auth-action {
+      margin-left: $spacing-05;
+
+      @include breakpoint-down(md) {
+        margin-left: $spacing-06;
+      }
+    }
+  }
+}

package/scss/components/menu/_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 'menu';
+@use 'menu';
+
+@include menu.menu;

package/scss/components/menu/_menu.scss

@@ -0,0 +1,143 @@
+//
+// Copyright IBM Corp. 2020
+//
+// 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 "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../button/tokens" as button;
+@use "../../utilities/box-shadow" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/z-index" as *;
+
+/// Menu styles
+/// @access public
+/// @group menu
+@mixin menu {
+  .#{$prefix}--menu {
+    @include box-shadow;
+
+    position: fixed;
+    z-index: z("modal");
+    min-width: 13rem;
+    max-width: 18rem;
+    padding: $spacing-02 0;
+    background-color: $layer-primary;
+    visibility: hidden;
+  }
+
+  .#{$prefix}--menu--open {
+    visibility: visible;
+
+    &:focus {
+      @include focus-outline("border");
+    }
+  }
+
+  .#{$prefix}--menu--invisible {
+    opacity: 0;
+  }
+
+  .#{$prefix}--menu-option {
+    position: relative;
+    // $size-sm
+    height: 2rem;
+    background-color: $layer-primary;
+    color: $text-body-default;
+    cursor: pointer;
+    transition: background-color $duration-fast-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline("outline");
+    }
+  }
+
+  .#{$prefix}--menu-option--active,
+  .#{$prefix}--menu-option:hover {
+    background-color: $layer-hover;
+  }
+
+  .#{$prefix}--menu-option--danger:hover,
+  .#{$prefix}--menu-option--danger:focus {
+    background-color: button.$button-danger-primary;
+    color: $text-inverse-default;
+  }
+
+  .#{$prefix}--menu-option > .#{$prefix}--menu {
+    margin-top: calc(#{$spacing-02} * -1);
+  }
+
+  .#{$prefix}--menu-option__content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 $spacing-05;
+  }
+
+  .#{$prefix}--menu-option__content--disabled {
+    background-color: $layer-primary;
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__label,
+  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__info,
+  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__icon {
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--menu-option__content--indented .#{$prefix}--menu-option__label {
+    margin-left: $spacing-05;
+  }
+
+  .#{$prefix}--menu-option__label {
+    @include type-style("body-short");
+
+    overflow: hidden;
+    flex-grow: 1;
+    // add top/bottom padding to make sure letters are not cut off by hidden overflow
+    padding: $spacing-02 0;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--menu-option__info {
+    display: inline-flex;
+    margin-left: $spacing-05;
+  }
+
+  .#{$prefix}--menu-option__icon {
+    display: flex;
+    width: 1rem;
+    height: 1rem;
+    align-items: center;
+    margin-right: $spacing-03;
+  }
+
+  .#{$prefix}--menu-divider {
+    width: 100%;
+    height: 1px;
+    margin: $spacing-02 0;
+    background-color: $border-subtle;
+  }
+
+  $supported-sizes: (
+    // $size-md
+    "md": 2.5rem,
+    // $size-lg
+    "lg": 3rem
+  );
+
+  @each $size, $value in $supported-sizes {
+    .#{$prefix}--menu--#{$size} .#{$prefix}--menu-option {
+      height: $value;
+    }
+  }
+}

package/scss/components/modal/_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 'modal';
+@use 'modal';
+
+@include modal.modal;

package/scss/components/modal/_mixins.scss

@@ -0,0 +1,10 @@
+//----------------------------------------------
+// Modal
+// ---------------------------------------------
+@use '../../config' as *;
+
+@mixin modal--color($color) {
+    .#{$prefix}--modal-container {
+      border-top-color: $color;
+    }
+}