@progressiveui/styles 10.30.0

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

package/scss/components/select/_select.scss

@@ -0,0 +1,224 @@
+@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 "../../utilities/input-base" as *;
+@use "../form";
+
+/// Select styles
+/// @access public
+/// @group select
+
+$input-height: 40px !default;
+$input-border: 1px solid var(--neutral-100__color);
+
+@mixin select {
+  .#{$prefix}--select {
+    @include reset;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    order: 2;
+  }
+
+  .#{$prefix}--select-input {
+    @include input-base;
+    height: $input-height;
+    appearance: none;
+    display: block;
+    min-width: none;
+    width: 100%;
+    padding: 0 $spacing-06 0 $spacing-03;
+    color: $text-body-default;
+    background-color: $fill-field;
+    border: $input-border;
+    order: 2;
+    border-radius: 0;
+    cursor: pointer;
+    //font-size: $typography-body-copy-16px-regular-font-size;
+
+    // Hide default select arrow in IE10+
+    &::-ms-expand {
+      display: none;
+    }
+
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
+
+    &:focus {
+      @include focus-outline("border");
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $focus;
+    }
+
+    &[data-invalid]:focus ~ .#{$prefix}--label {
+      color: $support-error-main;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $text-error;
+      font-weight: 400;
+      margin-top: $spacing-02;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--select--light .#{$prefix}--select-input {
+    background: var(--field-02);
+  }
+
+  .#{$prefix}--select__arrow {
+    position: absolute;
+    top: 0em;
+    right: 0.7em;
+    height: 100%;
+    color: $action-default-fill-primary-default;
+    //stroke: $action-default-fill-primary-default;
+    //stroke-width: 0.8px;
+    overflow: visible;
+    pointer-events: none;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      path {
+        color: ButtonText;
+      }
+    }
+  }
+
+  .#{$prefix}--select-optgroup,
+  .#{$prefix}--select-option {
+    color: $text-body-default; // For the options to show in IE11
+  }
+
+  .#{$prefix}--select-option[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // Override some Firefox user-agent styles
+  @-moz-document url-prefix() {
+    .#{$prefix}--select-option {
+      background-color: $background-main;
+      color: $text-body-default;
+    }
+
+    .#{$prefix}--select-optgroup {
+      color: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--select--small {
+    //TODO: work in progress
+    .#{$prefix}--select-input {
+      font-size: 0.8em;
+      height: 30px;
+      padding-right: 1.7rem;
+    }
+    .#{$prefix}--select__arrow {
+      right: 0.6rem;
+      bottom: 0.785rem;
+    }
+  }
+
+  .#{$prefix}--select--inline {
+    display: grid;
+    grid-template-columns: auto auto;
+
+    // Targets IE10+ browsers: Display grid auto not supported
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .#{$prefix}--label {
+      white-space: nowrap;
+      margin: 0 $spacing-03 0 0;
+      font-weight: 400;
+      align-self: center;
+    }
+
+    .#{$prefix}--select-input {
+      background-color: transparent;
+      color: $action-default-fill-primary-default;
+      font-weight: 600;
+      box-shadow: none;
+
+      &:hover {
+        background-color: $background-main;
+      }
+
+      &:focus {
+        @include focus-outline("border");
+      }
+
+      ~ .#{$prefix}--select__arrow {
+        bottom: auto;
+        top: 1rem;
+      }
+
+      &[data-invalid] {
+        color: $text-body-default;
+        outline-offset: 2px;
+
+        &:focus {
+          outline: 1px solid $support-error-main;
+          box-shadow: none;
+        }
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      ~ .#{$prefix}--form-requirement {
+        grid-column-start: 2;
+
+        // Targets IE10+ browsers: Display grid auto not supported
+        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+          position: absolute;
+          bottom: -1.5rem;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
+    opacity: 0.5;
+  }
+
+  //Skeleton State
+  .#{$prefix}--select.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {
+    display: none;
+  }
+}

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

package/scss/components/sidebar/_sidebar.scss

@@ -0,0 +1,118 @@
+//
+// 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 "../../theme" as *;
+@use "../../utilities/component-reset" as *;
+@use "../../utilities/convert" as *;
+
+@mixin sidebar-content {
+  .#{$prefix}--sidebar-content__container {
+    display: flex;
+    flex: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .#{$prefix}--sidebar-content__header {
+    padding: 1em;
+    background-color: $layer-primary;
+    border-bottom: 1px solid $border-strong;
+    &.#{$prefix}--sidebar-content__header--no-padding {
+      padding: 0;
+    }
+  }
+
+  .#{$prefix}--sidebar-content__children {
+    background-color: $background-main;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .#{$prefix}--sidebar-content__scroll {
+    overflow: auto;
+    flex: 1;
+  }
+
+  .#{$prefix}--sidebar-item-content {
+    width: 100%;
+    @media print {
+      display: none;
+    }
+    @include breakpoint("lg") {
+      width: 30%;
+      min-width: 20rem;
+      max-width: 30rem;
+      border-right: 1px solid $border-strong;
+    }
+    @include breakpoint("lg") {
+      //min-width: auto;
+      max-width: 30rem;
+    }
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    @include breakpoint-down("lg") {
+      top: 0;
+      overflow: auto;
+    }
+  }
+  .#{$prefix}--content-section {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    //height: 100vh;
+    flex: 1;
+    @include breakpoint-down("lg") {
+      .#{$prefix}--sidebar-content__container--active & {
+        transform: translateX(0%);
+      }
+      transform: translateX(100%);
+      position: fixed;
+      top: 0;
+      background: $background-main;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+      z-index: 100;
+    }
+  }
+  .#{$prefix}--sidebar-content-mobile-header {
+    display: none;
+    @include breakpoint-down("lg") {
+      display: block;
+      padding: 1em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: $background-main;
+      border-bottom: 1px solid $layer-primary;
+      z-index: 10000;
+      width: 100%;
+      position: sticky;
+      top: 0;
+    }
+  }
+
+  .#{$prefix}--sidebar-content__back-button {
+    font-weight: 500;
+    color: $action-default-fill-primary-default;
+    cursor: pointer;
+    display: inline-block;
+    text-decoration: none i !important;
+    svg {
+      margin-right: 0.3em;
+      path {
+        fill: $action-default-fill-primary-default;
+      }
+    }
+  }
+}

package/scss/components/skeleton-text/_index.scss

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

package/scss/components/skeleton-text/_skeleton-text.scss

@@ -0,0 +1,22 @@
+@use '../../config' as *;
+@use '../../utilities/skeleton' as *;
+@use '../../utilities/convert' as *;
+@use '../../spacing' as *;
+
+/// Skeleton styles
+/// @access public
+/// @group skeleton
+@mixin skeleton-text {
+  //skeleton text
+  .#{$prefix}--skeleton__text {
+    @include skeleton;
+
+    width: 100%;
+    height: 1rem;
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$prefix}--skeleton__heading {
+    height: 1.5rem;
+  }
+}

package/scss/components/slider/_index.scss

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

package/scss/components/slider/_slider.scss

@@ -0,0 +1,274 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Slider
+//-----------------------------
+
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/skeleton" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/convert" as *;
+
+@use "../input";
+@use "../text-input";
+
+/// Slider styles
+/// @access public
+/// @group slider
+@mixin slider {
+  .#{$prefix}--slider-container {
+    max-width: calcRem(600px);
+    min-width: calcRem(200px);
+    order: 3;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    &--full-width {
+      width: 100%;
+      max-width: inherit;
+      .wfp--slider__range-wrapper {
+        width: 100%;
+      }
+    }
+  }
+
+  .#{$prefix}--slider {
+    position: relative;
+    width: 100%;
+    -webkit-appearance: none;
+    border: none;
+
+    &::-webkit-slider-runnable-track {
+      width: 250px;
+      height: 4px;
+      background: $field-background-disabled;
+      transition: all 300ms $standard-easing;
+      border: none;
+      border-radius: 1px;
+      cursor: pointer;
+    }
+
+    &::-moz-range-track {
+      background: $field-background-disabled;
+      height: 4px;
+      cursor: pointer;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      border: none;
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 50%;
+      background: $action-default-fill-primary-default;
+      margin-top: -0.65rem;
+      cursor: pointer;
+      transition: transform 100ms $standard-easing,
+        background 100ms $standard-easing;
+    }
+    &::-moz-range-thumb {
+      -webkit-appearance: none;
+      border: none;
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 50%;
+      background: $action-default-fill-primary-default;
+      margin-top: -0.65rem;
+      cursor: pointer;
+      transition: transform 100ms $standard-easing,
+        background 100ms $standard-easing;
+    }
+
+    &::-moz-range-progress {
+      height: calcRem(4px);
+      background: $action-default-fill-primary-default;
+    }
+
+    /* IE*/
+    &::-ms-fill-lower {
+      height: calcRem(4px);
+      background: $action-default-fill-primary-default;
+    }
+
+    &:hover {
+      &::-webkit-slider-thumb {
+        transform: scale(1.05);
+      }
+      &::-moz-range-thumb {
+        transform: scale(1.05);
+      }
+    }
+    &:hover:focus {
+      &::-webkit-slider-thumb {
+        @include focus-outline("blurred");
+        transform: scale(1.25);
+      }
+      &::-moz-range-thumb {
+        @include focus-outline("blurred");
+        transform: scale(1.25);
+      }
+    }
+    &:focus {
+      outline: none;
+
+      &::-webkit-slider-runnable-track {
+        background: $field-background-disabled;
+      }
+
+      // firefox
+      &::-moz-range-track {
+        background-color: $field-background-disabled;
+        overflow: hidden;
+      }
+    }
+  }
+  // prevent double line on firefox
+  @-moz-document url-prefix() {
+    .#{$prefix}--slider {
+      margin-top: 4px;
+    }
+  }
+
+  .#{$prefix}--slider__range-wrapper--disabled {
+    .wfp--slider {
+      background: transparent;
+    }
+    opacity: 0.5;
+    background: transparent;
+    .#{$prefix}--slider__track {
+      cursor: default;
+    }
+    &:hover {
+      &::-webkit-slider-thumb {
+        transform: scale(1);
+      }
+      &::-moz-range-thumb {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
+    &:hover {
+      transform: translate(-50%, -50%);
+    }
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+    &:active {
+      background: $action-default-fill-primary-default;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .#{$prefix}--slider__range-wrapper {
+    position: relative;
+    margin: 0 $spacing-05;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--slider__range-label {
+    @include type-style("label-02");
+    color: $text-body-secondary;
+
+    &:last-of-type {
+      margin-right: $spacing-05;
+    }
+  }
+
+  .#{$prefix}--slider__range-before {
+    height: 3px;
+    background: $action-default-fill-primary-default;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-1.5px);
+    z-index: 1;
+    pointer-events: none;
+    @supports (-moz-appearance: none) {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--slider__track {
+    position: absolute;
+    width: 100%;
+    height: calcRem(4px);
+    background: $field-background-disabled;
+    cursor: pointer;
+    transform: translate(0%, -50%);
+  }
+
+  .#{$prefix}--slider__filled-track {
+    position: absolute;
+    width: 100%;
+    height: calcRem(4px);
+    background: $action-default-fill-primary-default;
+    transform-origin: left;
+    pointer-events: none;
+    transform: translate(0%, -50%);
+  }
+
+  .#{$prefix}--slider__thumb {
+    position: absolute;
+    height: calcRem(24px);
+    width: calcRem(24px);
+    background: $action-default-fill-primary-default;
+    border-radius: 50%;
+    top: 0;
+    transform: translate(-50%, -50%);
+    transition: transform 100ms $standard-easing,
+      background 100ms $standard-easing;
+    cursor: pointer;
+    outline: none;
+
+    &--clicked {
+      transition: left $transition--base $standard-easing;
+    }
+
+    &:hover {
+      transform: translate(-50%, -50%) scale(1.05);
+    }
+    &:focus {
+      @include focus-outline("blurred");
+    }
+    &:active {
+      background: $link-visited;
+      transform: translate(-50%, -50%) scale(1.25);
+    }
+  }
+
+  .#{$prefix}--slider__input {
+    display: none;
+  }
+
+  .#{$prefix}--slider-text-input {
+    width: calcRem(60px);
+    //height: 2rem;
+    padding: 0;
+    text-align: center;
+    font-weight: 600;
+    -moz-appearance: textfield;
+    .#{$prefix}--text-input {
+      min-width: 0;
+    }
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      display: none;
+    }
+  }
+  /* stylelint-enable */
+}

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

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