@carbon/charts 0.41.91 → 0.41.92

package/styles/vendor/carbon-components/scss/components/pagination/_unstable_pagination.scss

@@ -0,0 +1,180 @@
+//
+// Copyright IBM Corp. 2016, 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--helpers: true;
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/layout';
+@import '../../globals/scss/css--helpers';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../select/select';
+
+/// Unstable pagination styles
+/// @access private
+/// @group pagination
+@mixin unstable_pagination {
+  .#{$prefix}--unstable-pagination {
+    @include reset;
+    @include carbon--type-style('body-short-01');
+
+    display: flex;
+    width: 100%;
+    height: rem(48px);
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid $ui-03;
+    border-bottom: 1px solid transparent;
+    background-color: $ui-01;
+  }
+
+  .#{$prefix}--unstable-pagination__text {
+    @include carbon--breakpoint('md') {
+      display: inline-block;
+    }
+
+    margin: 0 $carbon--spacing-05;
+    color: $text-02;
+  }
+
+  .#{$prefix}--unstable-pagination__left,
+  .#{$prefix}--unstable-pagination__right {
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--unstable-pagination__left {
+    padding: 0 $carbon--spacing-05 0 0;
+  }
+
+  .#{$prefix}--unstable-pagination__left > .#{$prefix}--form-item,
+  .#{$prefix}--unstable-pagination__right > .#{$prefix}--form-item {
+    height: 100%;
+  }
+
+  .#{$prefix}--unstable-pagination__left
+    .#{$prefix}--unstable-pagination__text {
+    margin-right: rem(1px);
+  }
+
+  .#{$prefix}--unstable-pagination__right
+    .#{$prefix}--unstable-pagination__text {
+    margin-right: $carbon--spacing-05;
+    margin-left: rem(1px);
+  }
+
+  .#{$prefix}--unstable-pagination__button {
+    @include reset;
+
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 0 rem(14px);
+    border: none;
+    border-left: 1px solid $ui-03;
+    margin: 0;
+    background: none;
+    color: $ui-05;
+    cursor: pointer;
+    fill: $ui-05;
+    transition: outline $duration--fast-02 motion(standard, productive),
+      background-color $duration--fast-02 motion(standard, productive);
+  }
+
+  // Unset height/width set by icon-only button:
+  .#{$prefix}--unstable-pagination__button .#{$prefix}--btn__icon {
+    width: initial;
+    height: initial;
+  }
+
+  .#{$prefix}--unstable-pagination__button.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--unstable-pagination__button:hover {
+    background: $hover-ui;
+    color: $ui-05;
+  }
+
+  .#{$prefix}--unstable-pagination__button--no-index {
+    cursor: not-allowed;
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--unstable-pagination__button.#{$prefix}--btn:disabled {
+    border-color: $ui-03;
+    background: transparent;
+  }
+
+  .#{$prefix}--unstable-pagination__button:disabled:hover,
+  .#{$prefix}--unstable-pagination__button--no-index:hover {
+    background: transparent;
+    cursor: not-allowed;
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector,
+  .#{$prefix}--unstable-pagination__page-sizer {
+    height: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector
+    .#{$prefix}--select-input--inline__wrapper,
+  .#{$prefix}--unstable-pagination__page-sizer
+    .#{$prefix}--select-input--inline__wrapper {
+    display: flex;
+    height: 100%;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select-input,
+  .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input {
+    @include carbon--type-style('body-short-01');
+
+    width: auto;
+    min-width: auto;
+    height: 100%;
+    padding: 0 $carbon--spacing-08 0 $carbon--spacing-05;
+    margin-right: -0.65rem;
+
+    @include carbon--breakpoint('md') {
+      padding-right: carbon--mini-units(4.5);
+      margin-right: 0;
+    }
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector
+    .#{$prefix}--select-input:hover,
+  .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input:hover {
+    background: $hover-ui;
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select__arrow,
+  .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select__arrow {
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include carbon--breakpoint('md') {
+      right: $carbon--spacing-05;
+    }
+  }
+
+  .#{$prefix}--unstable-pagination__page-selector {
+    border-left: 1px solid $ui-03;
+  }
+
+  .#{$prefix}--unstable-pagination__page-sizer {
+    border-right: 1px solid $ui-03;
+  }
+}
+
+@include exports('unstable_pagination') {
+  @include unstable_pagination;
+}

package/styles/vendor/carbon-components/scss/components/pagination-nav/_pagination-nav.scss

@@ -23,24 +23,24 @@
 @mixin pseudo-underline() {
   &:not(.#{$prefix}--pagination-nav__page--direction) {
     &::after {
-      background-color: $interactive-01;
+      position: absolute;
       bottom: 0;
-      content: '';
+      left: 50%;
       display: block;
+      width: 0;
       height: $carbon--spacing-02;
-      left: 50%;
-      position: absolute;
+      background-color: $interactive-01;
+      content: '';
       opacity: 0;
       transition: width $duration--fast-02 motion(standard, productive);
-      width: 0;
     }
   }
 
   .#{$prefix}--pagination-nav__page--active + &::after,
   &.#{$prefix}--pagination-nav__page--active::after {
-    left: calc(50% - #{$carbon--spacing-05/2});
-    opacity: 1;
+    left: calc(50% - #{$carbon--spacing-05 / 2});
     width: $carbon--spacing-05;
+    opacity: 1;
   }
 }
 
@@ -74,12 +74,13 @@
   .#{$prefix}--pagination-nav {
     @include reset;
     @include type-style('body-short-01');
+
     line-height: 0;
   }
 
   .#{$prefix}--pagination-nav__list {
-    align-items: center;
     display: flex;
+    align-items: center;
     list-style: none;
   }
 
@@ -98,19 +99,20 @@
   .#{$prefix}--pagination-nav__page {
     @include type-style('body-short-01');
     @include button-reset($width: false);
+
+    position: relative;
+    display: block;
+    min-width: $button-min-width;
+    padding: $button-padding;
     border-radius: 0;
     color: $text-color;
-    display: block;
     font-weight: $font-weight;
     line-height: 1;
-    min-width: $button-min-width;
     outline: 0;
-    padding: $button-padding;
-    position: relative;
     text-align: center;
     text-decoration: none;
-    transition: background-color, color;
-    transition: $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-02 motion(standard, productive),
+      color $duration--fast-02 motion(standard, productive);
     user-select: none;
 
     &:hover {
@@ -136,7 +138,6 @@
       background-color: $background-color-active;
       color: $text-color-active;
       font-weight: 600;
-      outline: none;
     }
 
     .#{$prefix}--pagination-nav__icon {
@@ -146,12 +147,12 @@
   }
 
   .#{$prefix}--pagination-nav__page--direction {
-    align-items: center;
     display: flex;
+    width: $button-direction-size;
     height: $button-direction-size;
+    align-items: center;
     justify-content: center;
     line-height: 0;
-    width: $button-direction-size;
   }
 
   .#{$prefix}--pagination-nav__select {
@@ -159,8 +160,8 @@
   }
 
   .#{$prefix}--pagination-nav__page--select {
-    appearance: none;
     max-height: $button-min-width;
+    appearance: none;
     text-indent: calc(50% - 4.5px);
     // Override some Firefox user-agent styles
     @-moz-document url-prefix() {
@@ -169,11 +170,11 @@
   }
 
   .#{$prefix}--pagination-nav__select-icon-wrapper {
-    height: 100%;
-    pointer-events: none;
     position: absolute;
     top: 0;
     width: 100%;
+    height: 100%;
+    pointer-events: none;
 
     @include pseudo-underline();
 
@@ -185,10 +186,10 @@
   }
 
   .#{$prefix}--pagination-nav__select-icon {
-    left: calc(50% - #{$select-icon-top-position/2});
-    pointer-events: none;
     position: absolute;
-    top: calc(50% - #{$select-icon-top-position/2});
+    top: calc(50% - #{$select-icon-top-position / 2});
+    left: calc(50% - #{$select-icon-top-position / 2});
+    pointer-events: none;
   }
 
   .#{$prefix}--pagination-nav__accessibility-label {

package/styles/vendor/carbon-components/scss/components/popover/_popover.scss

@@ -0,0 +1,322 @@
+//
+// 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.
+//
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// 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: rem(368px);
+    background-color: $ui-01;
+    border-radius: 2px;
+    color: $popover-text-color;
+  }
+
+  .#{$prefix}--popover--light .#{$prefix}--popover-contents {
+    background-color: $ui-background;
+  }
+
+  .#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
+    background-color: $inverse-02;
+    color: $inverse-01;
+  }
+
+  .#{$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: rem(8px);
+    height: rem(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;
+  }
+}
+
+@include exports('popover') {
+  @include popover;
+}

package/styles/vendor/carbon-components/scss/components/progress-bar/_progress-bar.scss

@@ -0,0 +1,83 @@
+//
+// 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.
+//
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Progress Bar styles
+/// @access private
+/// @group progress-bar
+@mixin progress-bar {
+  .#{$prefix}--progress-bar__label {
+    @include type-style('body-short-01');
+
+    display: block;
+    margin-bottom: $spacing-03;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--progress-bar__track {
+    position: relative;
+    width: 100%;
+    height: rem(8px);
+    background-color: $layer;
+  }
+
+  .#{$prefix}--progress-bar__bar {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: $interactive;
+    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,
+      $interactive 12.5%,
+      transparent 12.5%
+    );
+    background-position-x: 0%;
+    background-size: 200% 100%;
+    content: '';
+  }
+
+  .#{$prefix}--progress-bar__helper-text {
+    @include type-style('helper-text-01');
+
+    margin-top: $spacing-02;
+    color: $text-secondary;
+  }
+
+  @keyframes progress-bar-indeterminate {
+    0% {
+      background-position-x: 25%;
+    }
+
+    80%,
+    100% {
+      background-position-x: -105%;
+    }
+  }
+}
+
+@include exports('progress-bar') {
+  @include progress-bar;
+}