@progressiveui/styles 10.30.0

package/scss/components/react-select/_react-select.scss

@@ -0,0 +1,90 @@
+//
+// 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 "../../motion" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../theme" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/skeleton" as *;
+@use "../form";
+
+/// React Select styles
+/// @access public
+/// @group react-select
+
+$input-height: 40px !default;
+$input-border: 1px solid var(--neutral-100__color);
+
+@mixin react-select {
+  .#{$prefix}--react-select-container {
+    width: 100%;
+    order: 2;
+
+    .#{$prefix}--react-select__control {
+      border-radius: 0;
+      min-height: $input-height;
+      background-color: $fill-field;
+      border: $input-border;
+
+      &:hover {
+        border: $input-border;
+      }
+    }
+
+    .#{$prefix}--react-select__single-value {
+      overflow: visible;
+      color: $text-body-default;
+    }
+
+    .#{$prefix}--react-select__control--is-focused,
+    .#{$prefix}--react-select__control--is-focused:hover {
+      //border: $input-border;
+      box-shadow: none;
+      //border-color: red;
+      @include focus-outline("border-important");
+    }
+
+    .#{$prefix}--react-select__control--is-disabled,
+    .#{$prefix}--react-select__control--is-disabled:hover {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}--react-select__input {
+      color: $text-body-default !important;
+    }
+
+    .#{$prefix}--react-select__menu {
+      margin-top: 2px;
+      border-radius: 0;
+      background: $background-main;
+      //box-shadow: none;
+      box-shadow: 0px 2px 5px rgba(#000, 0.1);
+      border: 1px solid $border-strong;
+    }
+
+    .#{$prefix}--react-select__option--is-focused {
+      background: $layer-primary;
+      color: $text-body-default;
+    }
+
+    .#{$prefix}--react-select__dropdown-indicator {
+      color: $action-default-fill-primary-default;
+    }
+
+    //TODO: Check
+    .#{$prefix}--react-select__indicator-separator {
+      display: none;
+    }
+  }
+}

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

package/scss/components/read-more/_read-more.scss

@@ -0,0 +1,102 @@
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type";
+@use "../../utilities/component-reset";
+@use "../../utilities/focus-outline" as *;
+
+/// Read more styles
+/// @access public
+/// @group link
+@mixin read-more {
+  .#{$prefix}--read-more {
+    @include component-reset.reset;
+    max-height: 400px;
+    overflow: hidden;
+    transition: all 0.3s;
+
+    &[aria-disabled="true"] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    &.#{$prefix}--read-more--expanded {
+      .#{$prefix}--read-more__fake-height {
+        display: block;
+      }
+    }
+  }
+
+  .#{$prefix}--read-more__trigger {
+    display: block;
+    svg {
+      transform: rotate(180deg);
+      margin-left: 0.2em;
+      overflow: visible;
+      path {
+        stroke: currentColor;
+        stroke-width: 0.8px;
+      }
+      fill: $action-default-fill-primary-default;
+    }
+  }
+
+  .#{$prefix}--read-more__trigger--expanded {
+    svg {
+      transform: rotate(0);
+    }
+  }
+
+  .#{$prefix}--read-more__content {
+    padding-bottom: $spacing-03; // $spacing-xs;
+  }
+
+  .#{$prefix}--read-more__fake-height {
+    opacity: 0;
+    width: 1px;
+    position: absolute;
+    display: none;
+  }
+
+  .#{$prefix}--read-more--fade {
+    position: relative;
+    .#{$prefix}--read-more__content {
+      position: relative;
+      overflow: hidden;
+      margin-bottom: $spacing-03; // $spacing-xs;
+      &:after {
+        content: "";
+        z-index: 10;
+        outline: 0;
+        display: block;
+        height: 40px;
+        width: 100%;
+        transition: all 1.7s;
+        opacity: 1;
+        position: absolute;
+        bottom: -5px;
+        background: linear-gradient(
+          to bottom,
+          rgba(255, 255, 255, 0) 0%,
+          white 100%
+        );
+      }
+    }
+    &.#{$prefix}--read-more--expanded {
+      .#{$prefix}--read-more__content {
+        margin-bottom: 0;
+        &:after {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--read-more--max-height {
+    .#{$prefix}--read-more__content {
+      overflow: hidden;
+      padding-bottom: $spacing-03; // $spacing-xs;
+      transition: all 0.3s;
+    }
+  }
+}

package/scss/components/search/_index.scss

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

package/scss/components/search/_search.scss

@@ -0,0 +1,436 @@
+@use "../../theme" as *;
+@use "../../config" as *;
+@use "../../type";
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../utilities/placeholder-colors" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/component-reset" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/rtl" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/convert" as *;
+@use "../../breakpoint" as *;
+@use "../../utilities/button-reset";
+
+$input-height: 40px !default;
+$input-border: 1px solid $field-border-color;
+
+/// Search styles
+/// @access public
+/// @group search
+@mixin search {
+  .#{$prefix}--search {
+    position: relative;
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--search .#{$prefix}--label {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--search-input {
+    @include reset;
+    @include type.type-style("body-short-02");
+    @include focus-outline("reset");
+
+    width: 100%;
+    order: 1;
+    padding: 0 $spacing-08;
+
+    //@include font-family('sans');
+    //@include type-style('body-short-02');
+    //height: $input-height;
+    appearance: none;
+    display: block;
+    width: 100%;
+    padding: 0 $spacing-06 0 $spacing-03;
+    border: $input-border;
+    order: 2;
+    border-radius: 0;
+    cursor: pointer;
+
+    appearance: none;
+    background-color: $fill-field;
+    color: $text-body-default;
+    text-overflow: ellipsis;
+    transition: background-color $duration-fast-02 motion(standard, productive),
+      outline $duration-fast-02 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline("outline");
+    }
+
+    &::placeholder {
+      @include placeholder-colors;
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--search-input--rounded {
+    border-radius: 22px;
+  }
+
+  .#{$prefix}--search-input[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &::placeholder {
+      // color: $fill-field; no color needed to be set. It should inheret
+    }
+  }
+  .#{$prefix}--search--light .#{$prefix}--search-input {
+    //TODO: background: $field-02;
+  }
+
+  .#{$prefix}--search--light .#{$prefix}--search-close::before {
+    //TODO:background: $field-02;
+  }
+
+  // Small styles
+  .#{$prefix}--search--sm .#{$prefix}--search-input,
+  .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
+    height: calcRem(32px);
+    // 8px padding on either side of icon + 16px icon (32px)
+    padding: 0 $spacing-07;
+  }
+
+  .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon {
+    left: calcRem(8px);
+  }
+
+  // Large styles
+  // V11: change lg to md
+  .#{$prefix}--search--lg .#{$prefix}--search-input,
+  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
+    height: calcRem(40px);
+    // 12px padding on either side of icon + 16px icon (40px)
+    padding: 0 $spacing-08;
+  }
+
+  // V11: change lg to md
+  .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
+    left: calcRem(12px);
+  }
+
+  // V11: change xl to lg
+  .#{$prefix}--search--xl .#{$prefix}--search-input,
+  .#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
+    height: calcRem(48px);
+    // 16px padding on either side of icon + 16px icon (48px)
+    padding: 0 $spacing-09;
+  }
+
+  .#{$prefix}--search-magnifier-icon {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: $spacing-05;
+    @include rtl() {
+      left: inherit;
+      right: $spacing-05;
+    }
+    width: calcRem(16px);
+    height: calcRem(16px);
+    fill: $icon-secondary;
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--search-close {
+    @include button-reset.reset(false);
+    @include focus-outline("reset");
+
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    &::before {
+      position: absolute;
+      top: calcRem(1px);
+      left: 0;
+      display: block;
+      width: 2px;
+      height: calc(100% - 2px);
+      background-color: $fill-field;
+      content: "";
+      transition: background-color $duration-fast-02
+        motion(standard, productive);
+    }
+
+    &:hover {
+      border-bottom: 1px solid $border-strong;
+
+      &::before {
+        // background-color: $field-hover;
+      }
+    }
+  }
+
+  .#{$prefix}--search-button {
+    flex-shrink: 0;
+    margin-left: $spacing-01;
+    background-color: $fill-field;
+
+    svg {
+      fill: currentColor;
+      vertical-align: middle;
+    }
+  }
+
+  .#{$prefix}--search-close svg {
+    fill: inherit;
+  }
+
+  .#{$prefix}--search-close,
+  .#{$prefix}--search-button {
+    display: flex;
+    //width: calcRem(40px);
+    // height: calcRem(40px);
+    align-items: center;
+    justify-content: center;
+    border-width: 1px 0;
+    border-style: solid;
+    border-color: transparent;
+    cursor: pointer;
+    fill: $icon-primary;
+    opacity: 1;
+    transition: opacity $duration-fast-02 motion(standard, productive),
+      background-color $duration-fast-02 motion(standard, productive),
+      outline $duration-fast-02 motion(standard, productive),
+      border $duration-fast-02 motion(standard, productive);
+    visibility: inherit;
+
+    &:hover {
+      // background-color: $field-hover;
+    }
+
+    &:focus {
+      @include focus-outline("outline");
+    }
+
+    &:active {
+      @include focus-outline("outline");
+
+      // background-color: $background-selected;
+    }
+  }
+
+  .#{$prefix}--search--disabled .#{$prefix}--search-close,
+  .#{$prefix}--search--disabled.#{$prefix}--search--expandable
+    .#{$prefix}--search-magnifier {
+    cursor: not-allowed;
+    outline: none;
+
+    &:hover {
+      border-bottom-color: transparent;
+      background-color: transparent;
+    }
+
+    &:hover::before {
+      background-color: transparent;
+    }
+  }
+
+  .#{$prefix}--search--disabled svg {
+    fill: $icon-on-color-disabled;
+  }
+
+  .#{$prefix}--search-close:focus,
+  .#{$prefix}--search-close:active {
+    &::before {
+      background-color: transparent;
+    }
+  }
+
+  .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
+    @include focus-outline("outline");
+  }
+
+  .#{$prefix}--search--sm {
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button,
+    &.#{$prefix}--search--expandable,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
+      width: calcRem(32px);
+      height: calcRem(32px);
+    }
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
+      padding: 0 calcRem(32px);
+    }
+  }
+
+  // V11: change lg to md
+  .#{$prefix}--search--lg {
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button,
+    &.#{$prefix}--search--expandable,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
+      width: calcRem(40px);
+      height: calcRem(40px);
+    }
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
+      padding: 0 calcRem(40px);
+    }
+  }
+
+  // V11: change xl to lg
+  .#{$prefix}--search--xl {
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button,
+    &.#{$prefix}--search--expandable,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
+      width: calcRem(48px);
+      height: calcRem(48px);
+    }
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
+      padding: 0 calcRem(48px);
+    }
+  }
+
+  .#{$prefix}--search-close--hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  // V11: change xl to lg, lg to md
+  .#{$prefix}--search--xl.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
+    @include skeleton;
+
+    width: 100%;
+
+    &::placeholder {
+      color: transparent;
+    }
+  }
+
+  .#{$prefix}--search--expandable {
+    transition: width $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--search--expandable.#{$prefix}--search--expanded {
+    width: 100%;
+  }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-input {
+    width: 0;
+    padding: 0;
+    transition: padding $duration-fast-01 motion(standard, productive),
+      width 0s linear $duration-fast-01;
+
+    &::placeholder {
+      position: relative;
+      opacity: 0;
+      transition-duration: $duration-fast-01;
+      transition-property: padding, opacity;
+      transition-timing-function: motion(standard, productive);
+    }
+  }
+
+  .#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
+    width: 100%;
+    transition: padding $duration-fast-01 motion(standard, productive);
+
+    &::placeholder {
+      position: relative;
+      padding: 0;
+      opacity: 1;
+    }
+  }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
+    position: absolute;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-magnifier:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-magnifier {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--search--expandable .#{$prefix}--search-magnifier-icon {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-magnifier-icon {
+    fill: $icon-secondary;
+  }
+
+  // Windows HCM fix
+  .#{$prefix}--search-close svg,
+  .#{$prefix}--search-magnifier-icon {
+    @include high-contrast-mode("icon-fill");
+  }
+
+  // MainNavigation styles
+  // TODO: Move to MainNavigation
+
+  .#{$prefix}--search--main .#{$prefix}--search-input {
+    border-radius: calcRem(4px);
+    width: 100%;
+    height: calcRem(30px);
+    padding: 0 $spacing-07; //xl
+    @include type.type-style("body-short-02");
+    @include breakpoint(lg) {
+      max-width: calcRem(150px);
+    }
+  }
+
+  // Main Navigation styles
+  .#{$prefix}--search--main .#{$prefix}--search-input,
+  .#{$prefix}--search--main.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+    .#{$prefix}--search-input {
+    height: calcRem(32px);
+    border: none;
+    background-color: $border-subtle;
+    font-size: 0.8em;
+    &:hover {
+      @include focus-outline("reset");
+    }
+    &::placeholder {
+      color: $text-body-default;
+    }
+
+    // 8px padding on either side of icon + 16px icon (32px)
+    padding: 0 $spacing-07;
+  }
+
+  .#{$prefix}--search--main .#{$prefix}--search-magnifier-icon {
+    left: calcRem(8px);
+  }
+
+  .#{$prefix}--search--main {
+    color: $text-body-default;
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button,
+    &.#{$prefix}--search--expandable,
+    &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
+      width: calcRem(32px);
+      height: calcRem(32px);
+    }
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
+      padding: 0 calcRem(32px);
+    }
+  }
+}

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

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

package/scss/components/secondary-navigation/_secondary-navigation.scss

@@ -0,0 +1,61 @@
+@use '../form' as *;
+@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';
+
+@mixin secondary-navigation {
+  .#{$prefix}--secondary-navigation {
+    background: $background-main;
+    @include reset;
+    display: flex;
+    border-bottom: 2px solid $border-subtle;
+
+    .#{$prefix}--tabs {
+      margin-bottom: -2px;
+      @media print {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--secondary-navigation__title {
+    @include type-style('productive-heading-04');
+    @include font-family('sans');
+    font-weight: 400;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$prefix}--secondary-navigation__wrapper {
+    display: flex;
+
+    @include breakpoint-down('sm') {
+      flex-direction: column-reverse;
+    }
+
+    @include breakpoint('sm') {
+      justify-content: space-between;
+    }
+  }
+
+  .#{$prefix}--secondary-navigation__list {
+    padding-top: $spacing-03;
+
+    @include breakpoint('sm') {
+      padding: $spacing-06 0 0 0;
+    }
+  }
+
+  .#{$prefix}--secondary-navigation__additional {
+    padding-top: $spacing-05;
+
+    @include breakpoint('sm') {
+      padding: $spacing-06 0 0 0;
+    }
+  }
+}