@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/scss/components/code-snippet/_code-snippet.scss

@@ -0,0 +1,364 @@
+//
+// 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/typography';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/css--reset';
+@import 'mixins';
+
+/// Code snippet styles
+/// @access private
+/// @group code-snippet
+@mixin snippet {
+  .#{$prefix}--snippet {
+    @include reset;
+  }
+
+  .#{$prefix}--snippet code {
+    @include type-style('code-01');
+  }
+
+  // Inline Code Snippet
+  .#{$prefix}--snippet--inline {
+    @include reset;
+    // Note: originally this inline snippet inherited font-size, we might need
+    // a more flexible strategy than explicitly setting font-size with this
+    // type style
+    @include type-style('code-01');
+
+    position: relative;
+    display: inline;
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    background-color: $ui-01;
+    color: $text-01;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $ui-03;
+    }
+
+    &:active {
+      background-color: $copy-active;
+    }
+
+    &:focus {
+      outline: none;
+      border: 2px solid $interactive-01;
+    }
+  }
+
+  .#{$prefix}--snippet--inline code {
+    padding: 0 $spacing-xs;
+  }
+
+  .#{$prefix}--snippet--inline.#{$prefix}--snippet--light {
+    background-color: $field-02;
+
+    &:hover {
+      background-color: rgba($interactive-02, 0.1);
+    }
+  }
+
+  // Single Line Snippet
+  .#{$prefix}--snippet--single {
+    @include bx--snippet;
+    border: none;
+    max-width: rem(760px);
+    min-width: rem(320px);
+    height: $carbon--spacing-08;
+    padding: 0 56px 0 $carbon--spacing-05;
+  }
+
+  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    position: relative;
+    padding: 0 0 $carbon--spacing-05 0;
+    height: rem(56px);
+  }
+
+  .#{$prefix}--snippet--single pre {
+    white-space: nowrap;
+    @include type-style('code-01');
+    padding-right: $spacing-xs;
+  }
+
+  .#{$prefix}--snippet--single::after {
+    width: rem(16px);
+    height: 100%;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: rem(56px);
+    background-image: linear-gradient(to right, transparent, $ui-01);
+  }
+
+  // Multi Line Snippet
+  .#{$prefix}--snippet--multi {
+    @include bx--snippet;
+    border: none;
+    padding: $carbon--spacing-05;
+    min-width: rem(320px);
+    max-width: 100%;
+  }
+
+  //closed snippet container
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
+    overflow: hidden;
+    position: relative;
+    max-height: rem(238px);
+    min-height: rem(56px);
+    transition: max-height $duration--moderate-01 motion(standard, productive);
+  }
+
+  // expanded snippet container
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
+    .#{$prefix}--snippet-container {
+    max-height: rem(1500px);
+    transition: max-height $duration--moderate-01 motion(standard, productive);
+  }
+
+  // closed pre
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
+    overflow: hidden;
+    padding-bottom: rem(24px);
+  }
+
+  // expanded pre
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
+    .#{$prefix}--snippet-container
+    pre {
+    overflow-x: scroll;
+  }
+
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after {
+    width: rem(16px);
+    height: 100%;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-image: linear-gradient(to right, transparent, $ui-01);
+  }
+
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code {
+    overflow: hidden;
+  }
+
+  //Copy Button
+  .#{$prefix}--snippet__icon {
+    fill: $icon-01;
+    height: rem(16px);
+    width: rem(16px);
+    transition: all $duration--fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--snippet-button {
+    @include reset;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    border: none;
+    background-color: $ui-01;
+    outline: none;
+    padding: 0;
+    height: $carbon--spacing-08;
+    width: $carbon--spacing-08;
+    overflow: visible;
+
+    &:focus {
+      @include focus-outline('outline');
+      outline-color: $focus;
+    }
+  }
+
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
+    height: $carbon--spacing-07;
+    width: $carbon--spacing-07;
+    top: $spacing-xs;
+    right: $spacing-xs;
+  }
+
+  .#{$prefix}--snippet-button:hover {
+    background: $hover-ui;
+  }
+
+  .#{$prefix}--snippet-button:active {
+    background-color: $copy-active;
+  }
+
+  .#{$prefix}--btn--copy__feedback {
+    @include type-style('body-short-01');
+    z-index: z('overlay');
+    font-weight: 400;
+    left: inherit;
+    top: 0.75rem;
+    right: 1.25rem;
+  }
+
+  .#{$prefix}--btn--copy__feedback:before,
+  .#{$prefix}--btn--copy__feedback:after {
+    background: $copy-btn-feedback;
+  }
+
+  .#{$prefix}--btn--copy__feedback:after {
+    border: none;
+  }
+
+  // Show more / less button
+  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
+    display: inline-flex;
+    align-items: center;
+    position: absolute;
+    right: $spacing-xs;
+    bottom: $spacing-xs;
+    padding: $spacing-xs;
+    padding-left: $carbon--spacing-05;
+    color: $text-01;
+    background-color: $field-01;
+  }
+
+  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand
+    .#{$prefix}--snippet-btn--text {
+    position: relative;
+    top: rem(-1px);
+  }
+
+  .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand {
+    display: none;
+  }
+
+  .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
+    fill: $text-01;
+    margin-left: $spacing-xs;
+    margin-bottom: rem(1px);
+    transform: rotate(0deg);
+    transition: $duration--moderate-01 motion(standard, productive);
+  }
+
+  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover {
+    background: $hover-ui;
+    color: $text-01;
+  }
+
+  .#{$prefix}--snippet-btn--expand:active {
+    background-color: $copy-active;
+  }
+
+  .#{$prefix}--snippet-btn--expand:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--snippet--expand
+    .#{$prefix}--snippet-btn--expand
+    .#{$prefix}--icon-chevron--down {
+    transform: rotate(180deg);
+    transition: transform $transition--expansion;
+  }
+
+  // Skeleton State
+  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
+    height: rem(98px);
+  }
+
+  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
+    height: rem(56px);
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+    height: 100%;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton code {
+    @include skeleton;
+    width: 100%;
+    height: 1rem;
+    display: block;
+  }
+
+  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
+    top: rem(25px);
+    left: 1rem;
+    right: auto;
+  }
+
+  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
+    right: auto;
+    left: 50%;
+  }
+
+  #{$prefix}--snippet--multi.#{$prefix}--skeleton {
+    height: rem(98px);
+  }
+
+  .#{$prefix}--snippet--single.#{$prefix}--skeleton {
+    height: rem(56px);
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+    height: 100%;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton span {
+    @include skeleton;
+    width: 100%;
+    height: 1rem;
+    display: block;
+    margin-top: 0.5rem;
+
+    &:first-child {
+      margin: 0;
+    }
+
+    &:nth-child(2) {
+      width: 85%;
+    }
+
+    &:nth-child(3) {
+      width: 95%;
+    }
+  }
+
+  .#{$prefix}--snippet--single.#{$prefix}--skeleton
+    .#{$prefix}--snippet-container {
+    padding-bottom: 0;
+  }
+
+  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
+    right: auto;
+  }
+
+  // Skeleton State
+  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
+    height: rem(98px);
+  }
+
+  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
+    height: rem(56px);
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
+    height: 100%;
+  }
+
+  .#{$prefix}--snippet.#{$prefix}--skeleton code {
+    @include skeleton;
+    width: 100%;
+    height: 1rem;
+    display: block;
+  }
+}
+
+@include exports('snippet') {
+  @include snippet;
+}

package/styles/vendor/carbon-components/scss/components/code-snippet/_mixins.scss

@@ -0,0 +1,20 @@
+//
+// 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/typography';
+
+/// Code snippet base styles
+/// @access private
+/// @group code-snippet
+@mixin bx--snippet {
+  @include type-style('code-01');
+  background: $snippet-background-color;
+  border: 1px solid $snippet-border-color;
+  position: relative;
+  max-width: rem(600px);
+  width: 100%;
+}

package/styles/vendor/carbon-components/scss/components/combo-box/_combo-box.scss

@@ -0,0 +1,45 @@
+//
+// 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.
+//
+
+//-----------------------------
+// ComboBox
+//-----------------------------
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../list-box/list-box';
+
+/// Combo box styles
+/// @access private
+/// @group combo-box
+@mixin combo-box {
+  .#{$prefix}--combo-box .#{$prefix}--text-input {
+    &::placeholder {
+      color: $text-02;
+      opacity: 1;
+    }
+
+    &[disabled]::placeholder {
+      color: $disabled-02;
+    }
+  }
+
+  .#{$prefix}--combo-box.#{$prefix}--list-box--expanded
+    .#{$prefix}--text-input {
+    border-bottom-color: $ui-03;
+  }
+
+  .#{$prefix}--combo-box .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field {
+    padding: 0;
+  }
+}
+
+@include exports('combo-box') {
+  @include combo-box;
+}

package/styles/vendor/carbon-components/scss/components/content-switcher/_content-switcher.scss

@@ -0,0 +1,150 @@
+//
+// 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/typography';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Content switcher styles
+/// @access private
+/// @group content-switcher
+@mixin content-switcher {
+  .#{$prefix}--content-switcher {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    height: rem(32px);
+  }
+
+  .#{$prefix}--content-switcher--disabled {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--content-switcher-btn {
+    @include reset;
+    @include type-style('body-short-01');
+    @include focus-outline('reset');
+
+    background-color: $ui-01;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    height: rem(40px);
+    padding: $carbon--spacing-03 $carbon--spacing-05;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: left;
+    text-decoration: none;
+    border: none;
+    color: $text-02;
+    transition: all $duration--fast-01 motion(standard, productive);
+    position: relative;
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px $focus;
+      z-index: 3;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:hover,
+    &:active {
+      background-color: $hover-ui;
+      color: $text-01;
+      z-index: 3;
+    }
+
+    &:disabled {
+      color: $disabled-02;
+      background-color: $disabled-01;
+      pointer-events: none;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .#{$prefix}--content-switcher-btn:first-child {
+    border-top-left-radius: rem(4px);
+    border-bottom-left-radius: rem(4px);
+  }
+
+  .#{$prefix}--content-switcher-btn:last-child {
+    border-top-right-radius: rem(4px);
+    border-bottom-right-radius: rem(4px);
+  }
+
+  .#{$prefix}--content-switcher-btn:not(:first-of-type)::before {
+    content: '';
+    display: block;
+    height: rem(16px);
+    width: rem(1px);
+    background-color: $content-switcher-divider;
+    position: absolute;
+    z-index: 2;
+    left: 0;
+  }
+
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected::before,
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
+    + .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn:focus::before,
+  .#{$prefix}--content-switcher-btn:focus
+    + .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn:hover::before,
+  .#{$prefix}--content-switcher-btn:hover
+    + .#{$prefix}--content-switcher-btn::before {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--content-switcher__icon {
+    fill: $text-02;
+    transition: fill $duration--fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--content-switcher__icon + span {
+    margin-left: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--content-switcher__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon,
+  .#{$prefix}--content-switcher-btn:focus .#{$prefix}--content-switcher__icon {
+    fill: $text-01;
+  }
+
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
+    background-color: $ui-05;
+    color: $inverse-01;
+    z-index: 3;
+
+    &:disabled {
+      background-color: $disabled-03;
+      color: $disabled-02;
+    }
+  }
+
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
+    .#{$prefix}--content-switcher__icon {
+    fill: $inverse-01;
+  }
+}
+
+@include exports('content-switcher') {
+  @include content-switcher;
+}

package/styles/vendor/carbon-components/scss/components/copy-button/_copy-button.scss

@@ -0,0 +1,73 @@
+//
+// 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/typography';
+@import '../../globals/scss/layer';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/css--reset';
+@import '../button/button';
+
+@include exports('copy-button') {
+  .#{$prefix}--btn--copy {
+    position: relative;
+    overflow: visible;
+
+    .#{$prefix}--btn__icon {
+      margin-left: rem(5px);
+    }
+  }
+
+  .#{$prefix}--btn--copy__feedback {
+    position: absolute;
+    display: none;
+    top: 1.2rem;
+    left: 50%;
+
+    &:focus {
+      border: 2px solid red;
+    }
+
+    &:before {
+      @include layer('overlay');
+      @include type-style('label-01');
+      top: 1.1rem;
+      padding: $spacing-2xs;
+      color: $inverse-01;
+      content: attr(data-feedback);
+      transform: translateX(-50%);
+      white-space: nowrap;
+      pointer-events: none;
+      border-radius: 4px;
+      font-weight: 400;
+      z-index: 2;
+    }
+
+    &:after {
+      top: 0.85rem;
+      width: 0.6rem;
+      height: 0.6rem;
+      left: -0.3rem;
+      border-right: 1px solid $inverse-02;
+      border-bottom: 1px solid $inverse-02;
+      content: '';
+      transform: rotate(-135deg);
+      z-index: 1;
+    }
+
+    &:before,
+    &:after {
+      position: absolute;
+      display: block;
+      background: $inverse-02;
+    }
+
+    &--displayed {
+      display: inline-flex;
+    }
+  }
+}