@progressiveui/styles 10.30.0

package/scss/components/accordion/_index.scss

@@ -0,0 +1,4 @@
+@forward "accordion";
+@use "accordion";
+
+@include accordion.accordion;

package/scss/components/anchor-navigation/_anchor-navigation.scss

@@ -0,0 +1,37 @@
+@use "../form" as *;
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../theme" as *;
+@use "../../spacing" as *;
+@use "../../type" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/component-reset";
+@use "../../utilities/convert";
+
+@mixin anchor-navigation {
+  .#{$prefix}--anchor-navigation {
+    width: 300px;
+    min-height: 350px;
+    border: 2px solid $border-strong;
+    border-radius: 5px;
+  }
+
+  .#{$prefix}--anchor-header-title {
+    min-height: 40px;
+    border-bottom: 1px solid $border-strong;
+    padding: $spacing-05;
+    font-weight: 600;
+    color: $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--anchor-content {
+    padding: $spacing-05;
+    display: flex;
+    flex-direction: column;
+
+    a {
+      margin-bottom: $spacing-05;
+    }
+  }
+}

package/scss/components/anchor-navigation/_index.scss

@@ -0,0 +1,4 @@
+@forward 'anchor-navigation';
+@use 'anchor-navigation';
+
+@include anchor-navigation.anchor-navigation;

package/scss/components/auth-layout/_auth-layout.scss

@@ -0,0 +1,55 @@
+//
+// 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 '../../breakpoint' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/component-reset' as *;
+@use '../../utilities/convert' as *;
+
+@mixin auth-layout {
+  .#{$prefix}--auth-wrapper {
+    width: 100%;
+    height: 100vh;
+    background-color: $background-main;
+    display: flex;
+    flex-direction: row;
+
+    .#{$prefix}--auth-background-wrapper {
+      width: 60%;
+      border-right: 1px solid $border-subtle;
+      @include breakpoint-down('md') {
+        display: none;
+      }
+    }
+
+    .#{$prefix}--auth-background-content {
+      width: 100%;
+      height: 100vh;
+    }
+
+    .#{$prefix}--auth-background-image {
+      object-fit: cover;
+      background-size: cover;
+      margin: 0;
+    }
+
+    .#{$prefix}--auth-content-wrapper {
+      width: 40%;
+      padding: $spacing-04;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      overflow: scroll;
+      @include breakpoint-down('md') {
+        width: 100%;
+      }
+    }
+  }
+}

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

package/scss/components/avatar/_avatar.scss

@@ -0,0 +1,61 @@
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../motion" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../theme" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/rtl" as *;
+@use "../../utilities/high-contrast-mode" as *;
+
+/// Avatar styles
+/// @access public
+/// @group avatar
+@mixin avatar {
+  .#{$prefix}--avatar {
+    @include reset;
+    border-radius: 50%;
+    overflow: hidden;
+    font-size: 1.3em;
+    width: 1em;
+    height: 1em;
+
+    > img {
+      display: block;
+      object-fit: cover;
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  .#{$prefix}--avatar--missing {
+    color: $neutral-neutral50;
+    > path {
+      transform: scale(0.9);
+      transform-origin: center bottom;
+    }
+  }
+
+  .#{$prefix}--avatar--letter {
+    background: $border-subtle;
+
+    > text {
+      font-size: 0.6em;
+    }
+  }
+
+  .#{$prefix}--avatar__icon--empty {
+    border-radius: 50%;
+    background-size: 100%;
+    border: 2px solid var(--body-tbc-on-secondary-container);
+    background-color: var(--body-tbc-on-secondary-container);
+    padding-top: 2px;
+    color: var(--action-solid-link-default);
+    text {
+      fill: $background-main; // TODO $text-inverse
+      font-weight: 600;
+      font-family: "Arial";
+    }
+  }
+}

package/scss/components/avatar/_index.scss

@@ -0,0 +1,4 @@
+@forward "avatar";
+@use "avatar";
+
+@include avatar.avatar;

package/scss/components/banner-navigation/_banner-navigation.scss

@@ -0,0 +1,80 @@
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../theme" as *;
+@use "../../spacing" as *;
+@use "../../type" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/component-reset";
+@use "../../utilities/convert";
+
+@mixin banner-navigation {
+  .#{$prefix}--banner-navigation {
+    background: $action-solid-fill-primary-default; //TODO use a new background token for interactive-02
+    @include reset;
+    display: flex;
+    // @include font-smoothing; //added to reset mixin
+    @include breakpoint-down("md") {
+      display: none;
+    }
+    .#{$prefix}--search {
+      .#{$prefix}--search-input {
+        border: none;
+        padding-left: 1.35em;
+        border: none;
+        border-radius: 2px !important;
+      }
+      .#{$prefix}--search-magnifier-icon {
+        left: 0.4em;
+        height: 0.9em;
+        width: 0.9em;
+      }
+      .#{$prefix}--search-close {
+        right: 0.3em;
+      }
+    }
+  }
+
+  .#{$prefix}--banner-navigation__item {
+    @include type-style("label");
+    @include font-family("sans");
+    padding: 0 $spacing-03;
+
+    font-size: 0.85rem; //TODO: use token
+    @include breakpoint("xlg") {
+      padding: 0 $spacing-04;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    a {
+      @include type-style("label");
+      color: $text-inverse-default;
+      text-decoration: none;
+      font-weight: 500;
+
+      &:hover {
+        color: $field-hover;
+        text-decoration: underline;
+      }
+
+      &:focus {
+        color: $background-main;
+      }
+
+      &:visited,
+      &:active {
+        color: rgba(#ffffff, 0.8); //TODO
+      }
+    }
+  }
+
+  .#{$prefix}--banner-navigation__list {
+    display: flex;
+    justify-content: flex-end;
+    height: 2rem;
+    align-items: center;
+  }
+}

package/scss/components/banner-navigation/_index.scss

@@ -0,0 +1,4 @@
+@forward 'banner-navigation';
+@use 'banner-navigation';
+
+@include banner-navigation.banner-navigation;

package/scss/components/blockquote/_blockquote.scss

@@ -0,0 +1,156 @@
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../theme" as *;
+@use "../../spacing" as *;
+@use "../../type" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/convert";
+
+//TODO - handle customise icon showing different color
+
+@mixin blockquote {
+  // <button> elements cannot be used as flex containers
+  .#{$prefix}--blockquote {
+    background-color: $layer-primary;
+    border-left: 5px solid $support-info;
+    margin: $spacing-03 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: 3px;
+
+    pre[class*="language-"] {
+      background: none;
+      padding: 0;
+    }
+  }
+
+  .#{$prefix}--blockquote__content {
+    color: $text-body-default;
+    padding: $spacing-05;
+    line-height: 1.4;
+    word-wrap: anywhere;
+    flex-grow: 1;
+    p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .#{$prefix}--blockquote--toggleable {
+    .#{$prefix}--blockquote__title {
+      cursor: pointer;
+      user-select: none;
+      &:after {
+        color: $action-default-fill-primary-default;
+        content: " +";
+        font-weight: 800;
+      }
+    }
+    .#{$prefix}--blockquote__inside {
+      //display: none;
+      max-height: 0;
+      overflow: hidden;
+      transition: all 0.3;
+    }
+  }
+
+  .#{$prefix}--blockquote--toggle--open {
+    .#{$prefix}--blockquote__inside {
+      //display: block;
+      max-height: 1000px;
+    }
+    .#{$prefix}--blockquote__title {
+      &:after {
+        color: $action-default-fill-primary-default;
+        content: " -";
+      }
+    }
+  }
+
+  .#{$prefix}--blockquote--no-content,
+  .#{$prefix}--blockquote--toggleable:not(
+      .#{$prefix}--blockquote--toggle--open
+    ) {
+    .#{$prefix}--blockquote__title {
+      margin-bottom: 0;
+    }
+  }
+
+  .#{$prefix}--blockquote--with-icon {
+    //padding-left: 4rem;
+  }
+
+  .#{$prefix}--blockquote__icon {
+    margin-left: $spacing-08;
+    fill: $support-info;
+    min-width: 3rem;
+    height: auto;
+    flex-shrink: 0;
+    margin-right: $spacing-08;
+    //margin-top: -15px;
+  }
+
+  .#{$prefix}--blockquote--code {
+    overflow: auto;
+
+    .#{$prefix}--blockquote__content {
+      white-space: pre;
+      line-height: 1.4;
+
+      .#{$prefix}--blockquote__inside {
+        font-family: font-family("mono");
+      }
+    }
+  }
+
+  .#{$prefix}--blockquote--warning {
+    border-left-color: $support-warning;
+    background: #fdedc9; //$support-warning-background;
+    .#{$prefix}--blockquote__icon {
+      fill: $support-warning !important;
+    }
+  }
+
+  .#{$prefix}--blockquote--error {
+    border-left-color: $support-error-main;
+    background: #f1c6cb; //$support-error-background;
+    .#{$prefix}--blockquote__icon {
+      fill: $support-error-main !important;
+    }
+  }
+
+  .#{$prefix}--blockquote--success {
+    border-left-color: $support-success-main;
+    background: #ccdbcd; //$support-success-background
+    .#{$prefix}--blockquote__icon {
+      fill: $support-success !important;
+    }
+  }
+
+  .#{$prefix}--blockquote__title {
+    display: block;
+    font-weight: 600;
+    margin-bottom: $spacing-03;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .#{$prefix}--blockquote--light {
+    border-left: 0;
+
+    .#{$prefix}--blockquote__content {
+      padding: $spacing-04;
+    }
+  }
+
+  .#{$prefix}--blockquote__action-buttons {
+    margin-right: $spacing-05;
+    white-space: nowrap;
+    > * {
+      margin-left: $spacing-03;
+    }
+  }
+}

package/scss/components/blockquote/_index.scss

@@ -0,0 +1,4 @@
+@forward "blockquote";
+@use "blockquote";
+
+@include blockquote.blockquote;

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -0,0 +1,89 @@
+@use "../../breakpoint" as *;
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/rtl" as *;
+@use "../../utilities/skeleton" as *;
+
+@mixin breadcrumb {
+  .#{$prefix}--breadcrumb {
+    @include type-style("label-02");
+    @include font-family("sans");
+    display: none;
+
+    @include breakpoint("sm") {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+
+  .#{$prefix}--breadcrumb-home {
+    position: relative;
+    top: 1px;
+  }
+
+  .#{$prefix}--breadcrumb-item {
+    margin-right: $spacing-03;
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--breadcrumb-item::after {
+    content: "›";
+    font-weight: 200;
+    font-size: 1.2em;
+    margin-top: calcRem(-4px);
+    margin-left: $spacing-03;
+    color: $brand-wfp-blue-wfp-blue10; //$icon-secondary
+
+    @include rtl {
+      margin-left: 0;
+      margin-right: $spacing-03;
+    }
+  }
+
+  .#{$prefix}--breadcrumb--no-trailing-slash
+    .#{$prefix}--breadcrumb-item:last-child::after {
+    content: "";
+  }
+
+  .#{$prefix}--breadcrumb-item:last-child {
+    @include ltr {
+      margin-right: 0;
+      &::after {
+        margin-right: 0;
+      }
+    }
+    @include rtl {
+      margin-left: 0;
+      &::after {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .#{$prefix}--breadcrumb .#{$prefix}--link {
+    white-space: nowrap;
+    // font-weight: 600;
+    letter-spacing: -0.01em;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+
+    &:hover,
+    &:focus {
+      outline: none;
+      color: $action-default-fill-primary-default;
+      // border-bottom: 1px solid $action-default-fill-primary-default;
+    }
+
+    // Applies to Firefox only
+    @-moz-document url-prefix() {
+      & {
+        border-bottom: none;
+      }
+    }
+  }
+}

package/scss/components/breadcrumb/_index.scss

@@ -0,0 +1,4 @@
+@forward "breadcrumb";
+@use "breadcrumb";
+
+@include breadcrumb.breadcrumb;