@progressiveui/styles 10.30.0

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -0,0 +1,171 @@
+//
+// 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 "../../type" as *;
+@use "../../theme" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/visually-hidden" as *;
+@use "mixins" as *;
+
+/// Pagination nav base styles
+/// @access public
+/// @group pagination-nav
+/// @param {Color} $text-color [$text-02]
+/// @param {Color} $text-color-active [$text-02]
+/// @param {Color} $background-color-hover [$hover-ui]
+/// @param {Color} $background-color-active [initial]
+/// @param {Number} $font-weight [400]
+/// @param {Number} $item-padding [0]
+/// @param {Number} $button-min-width [$spacing-09]
+/// @param {Value} $button-padding [1.0625rem $spacing-02]
+/// @param {Number} $button-direction-size [$spacing-09]
+/// @param {Number} $select-icon-top-position [$spacing-05]
+/// @param {Number} $select-icon-left-position [$spacing-05]
+@mixin pagination-nav(
+  $color: $text-body-secondary,
+  $text-color-active: $text-body-secondary,
+  $background-color-hover: $background-hover,
+  $background-color-active: initial,
+  $font-weight: 400,
+  $item-padding: 0,
+  $button-min-width: $spacing-09,
+  $button-padding: 1.0625rem $spacing-02,
+  $button-direction-size: $spacing-09,
+  $select-icon-top-position: $spacing-05,
+  $select-icon-left-position: $spacing-05
+) {
+  .#{$prefix}--pagination-nav {
+    @include reset;
+    @include type-style("body-short");
+
+    line-height: 0;
+  }
+
+  .#{$prefix}--pagination-nav__list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+  }
+
+  .#{$prefix}--pagination-nav__list-item {
+    padding: $item-padding;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  .#{$prefix}--pagination-nav__page {
+    @include type-style("body-short");
+    @include button-reset.reset($width: false);
+
+    position: relative;
+    display: block;
+    min-width: $button-min-width;
+    padding: $button-padding;
+    border-radius: 0;
+    color: $text-body-secondary;
+    font-weight: $font-weight;
+    line-height: 1;
+    outline: 0;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color $duration-fast-02 motion(standard, productive),
+      color $duration-fast-02 motion(standard, productive);
+    user-select: none;
+
+    &:hover {
+      background-color: $background-color-hover;
+      color: $text-body-secondary;
+    }
+
+    &:focus {
+      @include focus-outline("outline");
+    }
+
+    &:disabled,
+    &.#{$prefix}--pagination-nav__page--disabled {
+      background: none;
+      color: rgba($text-body-secondary, 0.5);
+      outline: none;
+      pointer-events: none;
+    }
+
+    @include pseudo-underline();
+
+    &.#{$prefix}--pagination-nav__page--active {
+      background-color: $background-color-active;
+      color: $text-color-active;
+      font-weight: 600;
+    }
+
+    .#{$prefix}--pagination-nav__icon {
+      fill: currentColor;
+      pointer-events: none;
+    }
+  }
+
+  .#{$prefix}--pagination-nav__page--direction {
+    display: flex;
+    width: $button-direction-size;
+    height: $button-direction-size;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .#{$prefix}--pagination-nav__select {
+    position: relative;
+  }
+
+  .#{$prefix}--pagination-nav__page--select {
+    max-height: $button-min-width;
+    appearance: none;
+    text-indent: calc(50% - 4.5px);
+    // Override some Firefox user-agent styles
+    @-moz-document url-prefix() {
+      text-indent: 0;
+    }
+  }
+
+  .#{$prefix}--pagination-nav__select-icon-wrapper {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    @include pseudo-underline();
+
+    .#{$prefix}--pagination-nav__page--active + & {
+      .#{$prefix}--pagination-nav__select-icon {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--pagination-nav__select-icon {
+    position: absolute;
+    top: calc(50% - #{$select-icon-top-position * 0.5});
+    left: calc(50% - #{$select-icon-top-position * 0.5});
+    pointer-events: none;
+  }
+
+  .#{$prefix}--pagination-nav__accessibility-label {
+    @include visually-hidden;
+  }
+}

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

package/scss/components/popover/_popover.scss

@@ -0,0 +1,323 @@
+//
+// 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 "../../theme" as *;
+@use "../../config" as *;
+@use "../../theme" as *;
+@use "../../utilities/box-shadow" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/" as *;
+@use "../../utilities/convert" as *;
+
+/// Popover component
+/// @access private
+/// @group components
+@mixin popover {
+  $popover-text-color: $text-01;
+  $popover-caret-offset: 1rem;
+  $popover-offset: 8px;
+
+  .#{$prefix}--popover {
+    // Specify the distance between the popover and the trigger. This value must
+    // have a unit otherwise the `calc()` expression will not work
+    // stylelint-disable-next-line length-zero-no-unit
+    --cds-popover-offset: 0rem;
+
+    // Specify the distance that the caret should be offset from the side of the
+    // popover when not centered
+    --cds-popover-caret-offset: 1rem;
+
+    position: absolute;
+    z-index: z("floating");
+    display: none;
+  }
+
+  // We use a pseudo element inside of the popover to create a space between the
+  // target and the popover. This helps in situations like tooltips where you do
+  // not want the tooltip to disappear when the user moves from the target to
+  // the popover.
+  .#{$prefix}--popover::before {
+    position: absolute;
+    display: block;
+    content: "";
+  }
+
+  .#{$prefix}--popover--open {
+    display: block;
+  }
+
+  .#{$prefix}--popover-contents {
+    @include box-shadow;
+
+    position: relative;
+    width: max-content;
+    max-width: calcRem(368px);
+    background-color: $ui-01;
+    border-radius: 2px;
+    color: $popover-text-color;
+  }
+
+  .#{$prefix}--popover--light .#{$prefix}--popover-contents {
+    background-color: $background-main;
+  }
+
+  .#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
+    background-color: $background-inverse;
+    color: $icon-inverse;
+  }
+
+  .#{$prefix}--popover--caret {
+    --cds-popover-offset: 0.5rem;
+  }
+
+  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
+  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
+    position: absolute;
+    display: inline-block;
+    width: calcRem(8px);
+    height: calcRem(8px);
+    background-color: inherit;
+    content: "";
+  }
+
+  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
+    z-index: -1;
+    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  // The popover's tooltip is created by drawing two 8px x 8px boxes, one for
+  // rendering the box-shadow that the popover content uses and another for
+  // layering on top of this box to create an effect of a popover caret with a
+  // box-shadow. The layer with the box-shadow is rendered behind the popover
+  // content, while the other is rendered above of the popover content.
+
+  //-----------------------------------------------------------------------------
+  // Bottom
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--bottom {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom) {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  // Bottom left
+  .#{$prefix}--popover--bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translateY(calc(100% + var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom-left) {
+    top: 0;
+    left: 0;
+    transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
+  }
+
+  // Bottom right
+  .#{$prefix}--popover--bottom-right {
+    right: 0;
+    bottom: 0;
+    transform: translateY(calc(100% + var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom-right) {
+    top: 0;
+    right: 0;
+    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--bottom.#{$prefix}--popover::before,
+  .#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--cds-popover-offset);
+    transform: translateY(-100%);
+  }
+
+  //-----------------------------------------------------------------------------
+  // TOP
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(top) {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
+
+  // Top left
+  .#{$prefix}--popover--top-left {
+    bottom: 100%;
+    left: 0;
+    transform: translateY(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(top-left) {
+    bottom: 0;
+    left: 0;
+    transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
+  }
+
+  // Top right
+  .#{$prefix}--popover--top-right {
+    right: 0;
+    bottom: 100%;
+    transform: translateY(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(top-right) {
+    right: 0;
+    bottom: 0;
+    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--top-left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--top-right.#{$prefix}--popover::before {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--cds-popover-offset);
+    transform: translateY(100%);
+  }
+
+  //-----------------------------------------------------------------------------
+  // Right
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--right {
+    top: 50%;
+    left: 100%;
+    transform: translate(var(--cds-popover-offset), -50%);
+  }
+
+  @include place-caret(right) {
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  // Right top
+  .#{$prefix}--popover--right-top {
+    top: 0;
+    left: 100%;
+    transform: translateX($popover-offset);
+  }
+
+  @include place-caret(right-top) {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
+  }
+
+  // Right bottom
+  .#{$prefix}--popover--right-bottom {
+    bottom: 0;
+    left: 100%;
+    transform: translateX(var(--cds-popover-offset));
+  }
+
+  @include place-caret(right-bottom) {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--right.#{$prefix}--popover::before,
+  .#{$prefix}--popover--right-top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--cds-popover-offset);
+    transform: translateX(-100%);
+  }
+
+  //-----------------------------------------------------------------------------
+  // Left
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--left {
+    top: 50%;
+    right: 100%;
+    transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
+  }
+
+  @include place-caret(left) {
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%) rotate(45deg);
+  }
+
+  // Left top
+  .#{$prefix}--popover--left-top {
+    top: 0;
+    right: 100%;
+    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(left-top) {
+    top: 0;
+    right: 0;
+    transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
+  }
+
+  // Left bottom
+  .#{$prefix}--popover--left-bottom {
+    right: 100%;
+    bottom: 0;
+    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(left-bottom) {
+    right: 0;
+    bottom: 0;
+    transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--left-top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--cds-popover-offset);
+    transform: translateX(100%);
+  }
+}
+
+/// Helper for placing the caret inside a popover. The selectors here can get
+/// distracting in the main stylesheet, but ultimately they target the ::before
+/// and ::after pseudo-elements for the given direction. The @content block
+/// passed in should appropriately position the caret for the given direction.
+@mixin place-caret($direction) {
+  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
+    .#{$prefix}--popover-contents::before,
+  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
+    .#{$prefix}--popover-contents::after {
+    @content;
+  }
+}

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

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

@@ -0,0 +1,82 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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 *;
+
+/// Progress Bar styles
+/// @access public
+/// @group progress-bar
+@mixin progress-bar {
+  .#{$prefix}--progress-bar__label {
+    @include type-style("body-short");
+
+    display: block;
+    margin-bottom: $spacing-03;
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--progress-bar__track {
+    position: relative;
+    width: 100%;
+    height: calcRem(8px);
+    background-color: $layer-primary;
+  }
+
+  .#{$prefix}--progress-bar__bar {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: $action-default-fill-primary-default;
+    transform: scaleX(0);
+    transform-origin: 0 50%;
+    transition: transform $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--progress-bar--indeterminate
+    .#{$prefix}--progress-bar__track::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    animation-duration: 1400ms;
+    animation-iteration-count: infinite;
+    animation-name: progress-bar-indeterminate;
+    animation-timing-function: linear;
+    background-image: linear-gradient(
+      90deg,
+      $action-default-fill-primary-default 12.5%,
+      transparent 12.5%
+    );
+    background-position-x: 0%;
+    background-size: 200% 100%;
+    content: "";
+  }
+
+  .#{$prefix}--progress-bar__helper-text {
+    @include type-style("helper-text");
+
+    margin-top: $spacing-02;
+    color: $text-body-secondary;
+  }
+
+  @keyframes progress-bar-indeterminate {
+    0% {
+      background-position-x: 25%;
+    }
+
+    80%,
+    100% {
+      background-position-x: -105%;
+    }
+  }
+}

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