@progressiveui/styles 10.30.0

package/scss/components/text-area/_text-area.scss

@@ -0,0 +1,120 @@
+//
+// 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 "../form";
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/placeholder-colors" as *;
+@use "../../utilities/read-only" as *;
+@use "../../utilities/skeleton" as *;
+
+/// Text area styles
+/// @access public
+/// @group text-area
+
+$input-border: 1px solid var(--neutral-100__color) !default; //TODO change to current token $field-border
+$input-border-radius: 0px !default;
+$input-height: 40px !default;
+
+@mixin text-area {
+  .#{$prefix}--text-area {
+    @include reset;
+    @include font-family("sans");
+    @include type-style("body-long-01");
+    //TODO: check why min-width was used
+    //min-width: 10rem;
+    width: 100%;
+    // min-width: 10rem;
+    height: 100%;
+    min-height: $input-height;
+    padding: $spacing-03;
+    background-color: $fill-field;
+    color: $text-body-default;
+    appearance: none;
+    border: $input-border;
+    border-radius: $input-border-radius;
+    order: 2;
+    resize: vertical;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
+
+    &:focus {
+      @include focus-outline("border");
+    }
+
+    &::placeholder {
+      @include placeholder-colors;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:disabled:hover {
+      border: $input-border;
+    }
+    &:focus ~ .#{$prefix}--label {
+      color: $action-default-fill-primary-default;
+    }
+
+    &[data-invalid]:focus + .#{$prefix}--label {
+      color: $support-error-main; // TODO $text-error
+    }
+
+    &:read-only {
+      @include read-only("border");
+    }
+  }
+
+  .#{$prefix}--textarea-fullwidth {
+    width: 100%;
+  }
+
+  /*.#{$prefix}--text-area--light {
+    background: var(--field-02);
+  }*/
+
+  // Skeleton State
+  #{$prefix}--text-area.#{$prefix}--skeleton {
+    @include skeleton;
+    height: calcRem(100px);
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
+
+  // Skeleton State
+  #{$prefix}--text-area.#{$prefix}--skeleton {
+    @include skeleton;
+    height: calcRem(100px);
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
+
+  // Skeleton State
+  #{$prefix}--text-area.#{$prefix}--skeleton {
+    @include skeleton;
+    height: calcRem(100px);
+
+    &::-webkit-input-placeholder {
+      color: transparent;
+    }
+  }
+}

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

package/scss/components/text-input/_text-input.scss

@@ -0,0 +1,19 @@
+//-----------------------------
+// Text
+//-----------------------------
+@use "../../config" as *;
+@use "../form";
+@use "../../theme" as *;
+@use "../../utilities/input-base" as *;
+
+/// Text input styles
+/// @access public
+/// @group text-input
+@mixin text-input {
+  .#{$prefix}--text--required label::after {
+    content: " *";
+  }
+  .#{$prefix}--text-input {
+    @include input-base;
+  }
+}

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

package/scss/components/tile/_tile.scss

@@ -0,0 +1,269 @@
+//
+// 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 "../button/tokens" as button;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/visually-hidden" as *;
+
+/// Tile styles
+/// @access public
+/// @group tile
+@mixin tile {
+  .#{$prefix}--tile-group {
+    @include reset;
+  }
+
+  .#{$prefix}--tile {
+    position: relative;
+    display: block;
+    min-width: 8rem;
+    min-height: 4rem;
+    padding: $spacing-05;
+    background-color: $layer-primary;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    &:focus {
+      @include focus-outline("outline");
+    }
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--tile--light {
+    background-color: $ui-02;
+  }
+
+  .#{$prefix}--tile--clickable,
+  .#{$prefix}--tile--selectable,
+  .#{$prefix}--tile--expandable {
+    cursor: pointer;
+    transition: $duration-moderate-01 motion(standard, productive);
+
+    &:hover {
+      background: $layer-hover;
+    }
+  }
+
+  .#{$prefix}--tile--clickable,
+  .#{$prefix}--tile--expandable {
+    &:focus {
+      @include focus-outline("outline");
+    }
+
+    &:hover,
+    &:focus {
+      .#{$prefix}--tile__checkmark {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Removes Firefox automatic border on buttons
+  .#{$prefix}--tile--expandable::-moz-focus-inner {
+    border: 0;
+  }
+
+  .#{$prefix}--tile--clickable {
+    @include reset;
+    @include type-style("body-short");
+
+    color: $text-body-default;
+    text-decoration: none;
+  }
+
+  .#{$prefix}--tile--clickable:hover,
+  .#{$prefix}--tile--clickable:active,
+  .#{$prefix}--tile--clickable:visited,
+  .#{$prefix}--tile--clickable:visited:hover {
+    color: $text-body-default;
+    text-decoration: none;
+  }
+
+  // Disabled ClickableTile
+  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
+  .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
+    display: block;
+    background-color: $layer-disabled;
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--tile--selectable {
+    padding-right: $spacing-09;
+    border: 1px solid transparent;
+  }
+
+  .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile__chevron {
+    position: absolute;
+    border: none;
+    background: transparent;
+    transition: $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile__checkmark {
+    top: 1rem;
+    right: 1rem;
+    height: 1rem;
+    opacity: 0;
+
+    svg {
+      border-radius: 50%;
+      fill: $icon-secondary;
+    }
+
+    &:focus {
+      @include focus-outline("outline");
+    }
+  }
+
+  .#{$prefix}--tile__checkmark--persistent {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile__chevron {
+    position: absolute;
+    right: $spacing-05;
+    bottom: $spacing-05;
+    display: flex;
+    height: 1rem;
+    align-items: flex-end;
+
+    svg {
+      margin-left: $spacing-03;
+      fill: $icon-primary;
+      transform-origin: center;
+      transition: $duration-fast-02 motion(standard, productive);
+
+      // 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
+        fill: ButtonText;
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--tile--expandable {
+    overflow: hidden;
+    width: 100%;
+    border: 0;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    text-align: left;
+    transition: max-height $duration-moderate-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile-content__above-the-fold {
+    display: block;
+  }
+
+  .#{$prefix}--tile-content__below-the-fold {
+    display: block;
+    opacity: 0;
+    transition: opacity $duration-fast-02 motion(standard, productive),
+      visibility $duration-fast-02 motion(standard, productive);
+    visibility: hidden;
+  }
+
+  .#{$prefix}--tile--is-expanded {
+    overflow: visible;
+    transition: max-height $duration-fast-02 motion(standard, productive);
+
+    .#{$prefix}--tile__chevron svg {
+      transform: rotate(180deg);
+    }
+
+    .#{$prefix}--tile-content__below-the-fold {
+      opacity: 1;
+      transition: opacity $duration-fast-02 motion(standard, productive),
+        visibility $duration-fast-02 motion(standard, productive);
+      visibility: inherit;
+
+      // Safari-only media query
+      // Fixes an issue with scrolling
+      // and absolutely positioned elements (#8119)
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+          overflow-y: auto;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--tile--is-selected {
+    border: 1px solid $layer-selected-inverse;
+  }
+
+  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
+    fill: $icon-primary;
+
+    // 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
+      fill: ButtonText;
+    }
+  }
+
+  .#{$prefix}--tile-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$prefix}--tile-input {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--tile-input:focus + .#{$prefix}--tile {
+    @include focus-outline("outline");
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable {
+    background-color: $layer-primary;
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
+    background-color: $ui-02;
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
+    border-color: button.$button-disabled;
+  }
+
+  .#{$prefix}--tile--disabled .#{$prefix}--tile__checkmark svg {
+    fill: $icon-disabled;
+  }
+
+  // Windows HCM fix
+  .#{$prefix}--tile__chevron svg,
+  .#{$prefix}--tile__checkmark svg,
+  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
+    @include high-contrast-mode("icon-fill");
+  }
+}

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

package/scss/components/time-picker/_time-picker.scss

@@ -0,0 +1,94 @@
+//
+// 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 "../../utilities/focus-outline" as *;
+@use "../../utilities/placeholder-colors" as *;
+
+/// Time picker styles
+/// @access public
+/// @group time-picker
+@mixin time-picker {
+  .#{$prefix}--time-picker {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .#{$prefix}--time-picker__select {
+    justify-content: center;
+
+    &:not(:last-of-type) {
+      margin: 0 $spacing-01;
+    }
+  }
+
+  .#{$prefix}--time-picker__input {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--time-picker .#{$prefix}--select-input {
+    width: auto;
+    min-width: auto;
+    padding-right: calcRem(48px);
+    margin: 0;
+    line-height: 1;
+  }
+
+  .#{$prefix}--time-picker__input-field {
+    @include focus-outline("reset");
+    @include type-style("code-02");
+
+    display: flex;
+    width: 4.875rem;
+    height: calcRem(40px);
+    align-items: center;
+    transition: outline $duration-fast-01 motion(standard, productive),
+      background-color $duration-fast-01 motion(standard, productive);
+
+    &::placeholder {
+      @include placeholder-colors;
+    }
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--time-picker--light .#{$prefix}--select-input {
+    //TODO: background-color: $field-02;
+
+    &:hover {
+      background-color: $field-hover;
+    }
+
+    &:disabled,
+    &:hover:disabled {
+      border-bottom: 1px solid transparent;
+      background-color: transparent;
+      color: $text-disabled;
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$prefix}--time-picker--sm .#{$prefix}--select-input,
+  .#{$prefix}--time-picker--sm .#{$prefix}--time-picker__input-field {
+    height: calcRem(32px);
+    max-height: calcRem(32px);
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--time-picker--xl .#{$prefix}--select-input,
+  .#{$prefix}--time-picker--xl .#{$prefix}--time-picker__input-field,
+  .#{$prefix}--time-picker--lg .#{$prefix}--select-input,
+  .#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field {
+    height: calcRem(48px);
+    max-height: calcRem(48px);
+  }
+}

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