@progressiveui/styles 10.30.0

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -0,0 +1,328 @@
+//
+// 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 "../button";
+@use "../tooltip";
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/component-reset";
+@use "../../utilities/tooltip" as *;
+
+/// @type Value
+/// @access public
+/// @group progress-indicator
+$progress-indicator-bar-width: 1px inset transparent !default;
+
+/// Progress indicator styles
+/// @access public
+/// @group progress-indicator
+@mixin progress-indicator {
+  .#{$prefix}--progress {
+    @include component-reset.reset;
+
+    display: flex;
+    list-style: none;
+  }
+
+  .#{$prefix}--progress-step {
+    position: relative;
+    display: inline-flex;
+    overflow: visible;
+    width: calcRem(128px);
+    min-width: 7rem;
+    flex-direction: row;
+
+    .#{$prefix}--tooltip__label {
+      display: block;
+    }
+  }
+
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-step {
+    min-width: 8rem;
+    flex-grow: 1;
+  }
+
+  .#{$prefix}--progress-line {
+    position: absolute;
+    left: 0;
+    width: calcRem(128px);
+    height: 1px;
+    border: $progress-indicator-bar-width;
+  }
+
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-line {
+    width: 100%;
+    min-width: calcRem(128px);
+  }
+
+  .#{$prefix}--progress-step svg {
+    position: relative;
+    z-index: 1;
+    width: $spacing-05;
+    height: $spacing-05;
+    flex-shrink: 0;
+    margin: calcRem(10px) $spacing-03 0 0;
+    border-radius: 50%;
+    fill: $action-default-fill-primary-default;
+  }
+
+  .#{$prefix}--progress-label {
+    @include type-style("body-short");
+
+    overflow: hidden;
+    max-width: calcRem(88px);
+    margin: $spacing-03 0 0 0;
+    color: $text-body-default;
+    line-height: 1.45;
+    text-overflow: ellipsis;
+    transition: box-shadow $duration-fast-02 motion(standard, productive),
+      color $duration-fast-02 motion(standard, productive);
+    white-space: nowrap;
+
+    &::before {
+      display: block;
+      content: "";
+    }
+  }
+
+  .#{$prefix}--progress-label:hover {
+    box-shadow: 0 calcRem(1px) $action-default-link-default;
+    color: $action-default-link-default;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--progress-label:focus {
+    box-shadow: 0 calcRem(3px) 0 0 $action-default-link-default;
+    color: $action-default-link-default;
+    outline: none;
+  }
+
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
+    max-width: 100%;
+    margin-right: 0.75rem;
+  }
+
+  .#{$prefix}--progress-label:active {
+    //is this still a color token??
+    box-shadow: 0 calcRem(3px) 0 0 $background-brand;
+    color: $background-brand;
+  }
+
+  //OVERFLOW STYLING
+  .#{$prefix}--progress-label-overflow:hover ~ .#{$prefix}--tooltip,
+  .#{$prefix}--progress-label-overflow:focus ~ .#{$prefix}--tooltip {
+    visibility: inherit;
+  }
+
+  .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret {
+    margin-left: calcRem(10px);
+  }
+
+  .#{$prefix}--tooltip__text {
+    padding: 0;
+    margin: 0;
+    font-weight: normal;
+  }
+
+  //single line tooltip
+  .#{$prefix}--progress-step .#{$prefix}--tooltip {
+    @include type-style("body-long-01");
+
+    display: block;
+    width: calcRem(125px);
+
+    min-width: calcRem(115px);
+    min-height: $spacing-06;
+    padding: $spacing-03 $spacing-05;
+    margin-top: calcRem(40px);
+    margin-left: calcRem(22px);
+    color: $text-inverse-default;
+    visibility: hidden;
+  }
+
+  //multiline tooltip
+  .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
+    @include type-style("body-long-01");
+
+    width: calcRem(150px);
+    height: auto;
+    color: $text-inverse-default;
+  }
+
+  //OPTIONAL HELPER TEXT STYLING
+  .#{$prefix}--progress-optional {
+    @include type-style("label");
+
+    position: absolute;
+    left: 0;
+    margin-top: calcRem(28px);
+    margin-left: $spacing-06;
+    color: $text-body-secondary;
+    text-align: start;
+  }
+
+  //CURRENT STYLING
+  .#{$prefix}--progress-step--current {
+    .#{$prefix}--progress-line {
+      background-color: $action-default-fill-primary-default;
+    }
+  }
+
+  //INCOMPLETE STYLING
+  .#{$prefix}--progress-step--incomplete {
+    svg {
+      fill: $icon-primary;
+    }
+
+    .#{$prefix}--progress-line {
+      background-color: $border-subtle;
+    }
+  }
+
+  //COMPLETED STYLING
+  .#{$prefix}--progress-step--complete {
+    .#{$prefix}--progress-line {
+      background-color: $action-default-fill-primary-default;
+    }
+  }
+
+  //interactive button
+  .#{$prefix}--progress-step-button {
+    @include button-reset.reset;
+
+    display: flex;
+    text-align: left;
+  }
+
+  //unclickable button
+  .#{$prefix}--progress-step-button--unclickable {
+    cursor: default;
+    outline: none;
+  }
+
+  .#{$prefix}--progress-step-button--unclickable
+    .#{$prefix}--progress-label:hover {
+    box-shadow: none;
+    color: $text-body-default;
+    cursor: default;
+  }
+
+  .#{$prefix}--progress-step-button--unclickable
+    .#{$prefix}--tooltip__label:hover {
+    box-shadow: 0 calcRem(1px) $action-default-link-default;
+    color: $action-default-link-default;
+    cursor: pointer;
+  }
+
+  //DISABLED STYLING
+  .#{$prefix}--progress-step--disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    svg {
+      cursor: not-allowed;
+      fill: $icon-disabled;
+    }
+
+    .#{$prefix}--progress-label,
+    .#{$prefix}--progress-label:hover {
+      box-shadow: none;
+      color: $text-disabled;
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}--progress-label:focus,
+    .#{$prefix}--progress-label:active {
+      box-shadow: none;
+      outline: none;
+    }
+
+    .#{$prefix}--progress-line {
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}--progress-label-overflow:hover
+      ~ .#{$prefix}--tooltip--definition
+      .#{$prefix}--tooltip--definition__bottom {
+      display: none;
+    }
+  }
+
+  // ERROR STYLING
+  .#{$prefix}--progress__warning > * {
+    fill: $support-error-main;
+  }
+
+  // Skeleton State
+  .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
+    @include skeleton;
+
+    width: calcRem(40px);
+    height: calcRem(14px);
+    margin-top: 0.625rem;
+  }
+
+  // Vertical Variant
+
+  .#{$prefix}--progress--vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
+    width: initial;
+    min-width: initial;
+    min-height: 3.625rem;
+    flex-wrap: wrap;
+    align-content: flex-start;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
+    display: inline-block;
+    // 1px top margin based on visual review
+    margin: calcRem(1px) $spacing-03 0;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
+    display: inline-block;
+    width: initial;
+    max-width: calcRem(160px);
+    margin: 0;
+    vertical-align: top;
+    white-space: initial;
+  }
+
+  .#{$prefix}--progress--vertical
+    .#{$prefix}--progress-step
+    .#{$prefix}--tooltip {
+    margin-top: 0.5rem;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
+    position: static;
+    width: 100%;
+    margin-top: auto;
+    margin-left: $spacing-07;
+  }
+
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 100%;
+  }
+}

package/scss/components/radio-button/_index.scss

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

package/scss/components/radio-button/_radio-button.scss

@@ -0,0 +1,239 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Radio
+//-----------------------------
+
+@use "../../theme" as *;
+@use "../../type";
+@use "../form";
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/component-reset" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/rtl" as *;
+@use "../../config" as *;
+@use "../../spacing" as *;
+
+/// @type Number
+/// @access public
+/// @group radio-button
+$radio-border-width: 2px !default;
+
+/// Radio button styles
+/// @access private
+/// @group radio-button
+@mixin radio-button {
+  .#{$prefix}--input-group {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .#{$prefix}--input-group__vertical {
+    .#{$prefix}--input-group-inside {
+      flex-direction: column;
+      > * {
+        margin-bottom: $spacing-03 * 1.5;
+      }
+    }
+  }
+
+  .#{$prefix}--input-group-inside {
+    display: flex;
+    flex-wrap: wrap;
+    //margin-top: $spacing-03;
+    order: 2;
+    width: 100%;
+    > * {
+      margin-right: $spacing-06;
+      @include rtl {
+        margin-left: $spacing-06;
+        margin-right: 0;
+      }
+    }
+    .#{$prefix}--form-item {
+      flex: none;
+    }
+  }
+
+  .#{$prefix}--radio-button {
+    @include visually-hidden;
+    visibility: unset;
+  }
+
+  .#{$prefix}--radio-button__label {
+    @include type.type-style("body-short");
+    @include type.font-family("sans");
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--radio-button__appearance {
+    @include reset;
+    background-color: $background-main;
+    border-radius: 50%;
+    border: $radio-border-width solid $field-background-disabled;
+    flex-shrink: 0;
+    height: calcRem(18px);
+    width: calcRem(18px);
+    margin-right: $spacing-03;
+    @include rtl {
+      margin-left: $spacing-03;
+      margin-right: 0;
+    }
+  }
+
+  .#{$prefix}--radio-button:checked
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-color: $action-default-fill-primary-default;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      position: relative;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: $action-default-fill-primary-default;
+    }
+  }
+
+  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--radio-button:focus
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    @include focus-outline("blurred");
+  }
+
+  // Skeleton State
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: calcRem(100px);
+    height: calcRem(18px);
+  }
+
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton
+    .#{$prefix}--radio-button__appearance {
+    display: none;
+  }
+}
+
+@mixin radio-button--experimental {
+  .#{$prefix}--input-group {
+    display: flex;
+    align-items: center;
+    margin-top: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button {
+    @include hidden;
+    visibility: unset;
+  }
+
+  .#{$prefix}--radio-button__label {
+    @include type-style("label-02");
+    @include font-family("sans");
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-right: $spacing-05;
+  }
+
+  .#{$prefix}--radio-button__appearance {
+    @include reset;
+    background-color: $background-main;
+    border-radius: 50%;
+    border: $radio-border-width solid $field-background-enabled;
+    flex-shrink: 0;
+    height: calcRem(18px);
+    width: calcRem(18px);
+    margin-right: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button:checked
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-color: $field-background-enabled;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      position: relative;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: $border-inverse;
+    }
+  }
+
+  // Disabled
+
+  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
+  [disabled] ~ _ {
+    font-size: inherit;
+  }
+
+  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
+    color: $disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--radio-button:disabled
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance,
+  .#{$prefix}--radio-button:disabled:checked
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $disabled;
+  }
+
+  // Focus  TODO:fix focus color
+
+  .#{$prefix}--radio-button:focus
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    @include focus-outline("blurred");
+  }
+
+  // Skeleton State
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: calcRem(100px);
+    height: calcRem(18px);
+  }
+
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton
+    .#{$prefix}--radio-button__appearance {
+    display: none;
+  }
+}
+
+// TODO
+// @include exports('radio-button') {
+//   @if feature-flag-enabled('components-x') {
+//     @include radio-button--experimental;
+//   } @else {
+//     @include radio-button;
+//   }
+// }

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

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

@@ -0,0 +1,58 @@
+//
+// 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 "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+
+@use "../select";
+
+/// React dropzone styles
+/// @access public
+/// @group react-dropzone
+@mixin react-dropzone {
+  .#{$prefix}--dropzone {
+    &__input {
+      padding: $spacing-05;
+      border: 2px dashed $border-inverse;
+      border-radius: 4px;
+      background: $layer-primary;
+      text-align: center;
+      cursor: pointer;
+      &--drag-active {
+        background: $border-subtle;
+        border-color: $action-default-fill-primary-default;
+        box-shadow: 0px 0px 10px rgba(#0b77c2, 0.2);
+      }
+      @include type-style("body-short");
+      &:hover {
+        border-color: $action-default-fill-primary-default;
+      }
+      &:focus {
+        outline: none;
+        background: $layer-primary;
+      }
+    }
+    &__icon {
+      margin-bottom: $spacing-04;
+      path {
+        fill: $action-default-fill-primary-default;
+      }
+    }
+    &__file-list {
+      h4 {
+        @include type-style("body-short");
+        margin-bottom: $spacing-02;
+      }
+      margin-top: $spacing-03;
+      @include type-style("body-short");
+    }
+  }
+}

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