@carbon/charts 0.27.0 → 0.29.1

package/styles/vendor/carbon-components/scss/components/radio-button/_radio-button.scss

@@ -0,0 +1,180 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Radio
+//-----------------------------
+
+@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 '../form/form';
+@import '../../globals/scss/css--reset';
+
+/// Radio button styles
+/// @access private
+/// @group radio-button
+@mixin radio-button {
+  .#{$prefix}--radio-button-group {
+    display: flex;
+    align-items: center;
+    margin-top: rem(6px);
+  }
+
+  // vertical radio button
+  .#{$prefix}--radio-button-group--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+
+    &.#{$prefix}--radio-button-group--label-left {
+      align-items: flex-end;
+    }
+
+    .#{$prefix}--radio-button__label {
+      margin-right: 0;
+    }
+
+    .#{$prefix}--radio-button__label:not(:last-of-type) {
+      margin-bottom: $carbon--spacing-03;
+    }
+  }
+
+  .#{$prefix}--radio-button {
+    @include hidden;
+    visibility: inherit;
+  }
+
+  .#{$prefix}--radio-button__label {
+    @include type-style('body-short-01');
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-right: $carbon--spacing-05;
+  }
+
+  .#{$prefix}--radio-button__appearance {
+    @include reset;
+    background-color: transparent;
+    border-radius: 50%;
+    border: $radio-border-width solid $icon-01;
+    flex-shrink: 0;
+    height: rem(18px);
+    width: rem(18px);
+    margin-right: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--radio-button:checked
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-color: $icon-01;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      position: relative;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: $icon-01;
+
+      // Allow the selected button to be seen in Windows HCM for IE/Edge
+      @media screen and (-ms-high-contrast: active) {
+        // Utilize a system color variable to accomodate any user HCM theme
+        background-color: windowText;
+      }
+    }
+  }
+
+  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
+  [disabled] ~ _ {
+    font-size: inherit;
+  }
+
+  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
+    color: $disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--radio-button:disabled
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance,
+  .#{$prefix}--radio-button:disabled:checked
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $disabled;
+
+    &::before {
+      background-color: $disabled;
+    }
+  }
+
+  // Focus
+
+  .#{$prefix}--radio-button:focus
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    box-shadow: 0 0 0 2px $focus;
+    outline: 1px solid transparent;
+  }
+
+  // Skeleton State
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(100px);
+    height: rem(18px);
+  }
+
+  .#{$prefix}--radio-button__label.#{$prefix}--skeleton
+    .#{$prefix}--radio-button__appearance {
+    display: none;
+  }
+
+  .#{$prefix}--radio-button-wrapper .#{$prefix}--radio-button__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
+    margin-right: $carbon--spacing-05;
+  }
+
+  .#{$prefix}--radio-button-group--vertical
+    .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
+    margin-right: 0;
+    margin-bottom: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label,
+  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right
+    .#{$prefix}--radio-button__label {
+    flex-direction: row;
+  }
+
+  .#{$prefix}--radio-button-group--label-left .#{$prefix}--radio-button__label,
+  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
+    .#{$prefix}--radio-button__label {
+    flex-direction: row-reverse;
+  }
+
+  .#{$prefix}--radio-button-group--label-left
+    .#{$prefix}--radio-button__appearance,
+  .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
+    .#{$prefix}--radio-button__appearance {
+    margin-right: 0;
+    margin-left: $carbon--spacing-03;
+  }
+}
+
+@include exports('radio-button') {
+  @include radio-button;
+}

package/styles/vendor/carbon-components/scss/components/search/_search.scss

@@ -0,0 +1,232 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Search
+//-----------------------------
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/import-once';
+
+/// Search styles
+/// @access private
+/// @group search
+@mixin search {
+  .#{$prefix}--search {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+  }
+
+  .#{$prefix}--search .#{$prefix}--label {
+    @include hidden;
+  }
+
+  .#{$prefix}--search-input {
+    @include reset;
+    @include type-style('body-short-02');
+    @include focus-outline('reset');
+    appearance: none;
+    border: none;
+    background-color: $field-01;
+    color: $text-01;
+    padding: 0 $carbon--spacing-08;
+    text-overflow: ellipsis;
+    width: 100%;
+    order: 1;
+    transition: background-color $duration--fast-02 motion(standard, productive),
+      outline $duration--fast-02 motion(standard, productive);
+    border-bottom: 1px solid $ui-04;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+
+    &::placeholder {
+      color: $text-03;
+      font-weight: 400;
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+  }
+
+  .#{$prefix}--search-input[disabled] {
+    color: $disabled;
+    background-color: $disabled-background-color;
+    border-bottom: 1px solid transparent;
+    cursor: not-allowed;
+
+    &::placeholder {
+      color: $disabled;
+      font-weight: 400;
+    }
+  }
+
+  .#{$prefix}--search-input[disabled] ~ .#{$prefix}--search-magnifier {
+    fill: $disabled;
+  }
+
+  .#{$prefix}--search--light .#{$prefix}--search-input {
+    background: $field-02;
+  }
+
+  .#{$prefix}--search--sm .#{$prefix}--search-input {
+    @include type-style('body-short-01');
+    height: rem(32px);
+  }
+
+  .#{$prefix}--search--xl .#{$prefix}--search-input {
+    @include type-style('body-short-02');
+    height: rem(48px);
+    padding: 0 rem(64px) 0 rem(48px);
+  }
+
+  .#{$prefix}--search-magnifier {
+    left: 0.75rem;
+    z-index: 2;
+    position: absolute;
+    height: rem(16px);
+    width: rem(16px);
+    top: 50%;
+    transform: translateY(-50%);
+    // Ensure clear icon is rendered in Firefox (#1127)
+    fill: $text-02;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--search--xl .#{$prefix}--search-magnifier {
+    height: rem(20px);
+    width: rem(20px);
+    left: rem(24px);
+    transform: translate(-50%, -50%);
+  }
+
+  .#{$prefix}--search-close {
+    @include button-reset(false);
+    @include focus-outline('reset');
+    position: absolute;
+    right: 0;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: rem(1px);
+      height: calc(100% - 2px);
+      width: 2px;
+      background-color: $field-01;
+      transition: background-color $duration--fast-02
+        motion(standard, productive);
+    }
+
+    &:hover {
+      border-bottom: 1px solid $ui-04;
+    }
+  }
+
+  .#{$prefix}--search-button {
+    flex-shrink: 0;
+    margin-left: $carbon--spacing-01;
+    background-color: $field-01;
+
+    svg {
+      vertical-align: middle;
+      fill: currentColor;
+    }
+  }
+
+  .#{$prefix}--search-close,
+  .#{$prefix}--search-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity $duration--fast-02 motion(standard, productive),
+      background-color $duration--fast-02 motion(standard, productive),
+      outline $duration--fast-02 motion(standard, productive),
+      border $duration--fast-02 motion(standard, productive);
+    cursor: pointer;
+    visibility: visible;
+    opacity: 1;
+    height: rem(40px);
+    width: rem(40px);
+    fill: $icon-01;
+    border: 1px solid transparent;
+    border-left: 0;
+
+    &:hover {
+      background-color: $hover-field;
+    }
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+
+    &:active {
+      @include focus-outline('outline');
+      background-color: $selected-ui;
+    }
+  }
+
+  .#{$prefix}--search-close:hover {
+    &::before {
+      background-color: $hover-field;
+    }
+  }
+
+  .#{$prefix}--search-close:focus,
+  .#{$prefix}--search-close:active {
+    &::before {
+      background-color: $focus;
+    }
+  }
+
+  .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--search--sm {
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button {
+      height: rem(32px);
+      width: rem(32px);
+    }
+  }
+
+  .#{$prefix}--search--xl {
+    .#{$prefix}--search-close,
+    ~ .#{$prefix}--search-button {
+      height: rem(48px);
+      width: rem(48px);
+    }
+  }
+
+  .#{$prefix}--search-close--hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
+    @include skeleton;
+    width: 100%;
+
+    &::placeholder {
+      color: transparent;
+    }
+  }
+}
+
+@include exports('search') {
+  @include search;
+}

package/styles/vendor/carbon-components/scss/components/select/_select.scss

@@ -0,0 +1,264 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Select
+//-----------------------------
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../form/form';
+
+/// Select styles
+/// @access private
+/// @group select
+@mixin select {
+  .#{$prefix}--select {
+    @include reset;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$prefix}--select-input__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    &:hover .#{$prefix}--select-input {
+      background-color: $hover-ui;
+    }
+  }
+
+  .#{$prefix}--select-input {
+    @include type-style('body-short-01');
+    @include focus-outline('reset');
+    height: rem(40px);
+    appearance: none;
+    display: block;
+    width: rem(224px);
+    min-width: rem(128px);
+    max-width: rem(448px);
+    padding: 0 rem(42px) 0 $carbon--spacing-05; // 1.5rem + chevron width
+    color: $text-01;
+    background-color: $field-01;
+    border: none;
+    border-bottom: 1px solid $ui-04;
+    border-radius: 0;
+    cursor: pointer;
+    transition: background-color $duration--fast-01 motion(standard, productive),
+      outline $duration--fast-01 motion(standard, productive);
+
+    &:hover {
+      background-color: $hover-ui;
+    }
+
+    // Hide default select arrow in IE10+
+    &::-ms-expand {
+      display: none;
+    }
+
+    // Select text renders a little high on Firefox
+    @-moz-document url-prefix() {
+      padding-top: rem(4px);
+
+      // Removes dotted inner focus
+      &:-moz-focusring,
+      &::-moz-focus-inner {
+        color: transparent;
+        text-shadow: 0 0 0 #000;
+        background-image: none;
+      }
+    }
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+
+    &:disabled,
+    &:hover:disabled {
+      cursor: not-allowed;
+      background-color: $disabled-background-color;
+      color: $disabled-02;
+      border-bottom-color: $disabled-background-color;
+    }
+  }
+
+  .#{$prefix}--select--disabled .#{$prefix}--label,
+  .#{$prefix}--select--disabled .#{$prefix}--form__helper-text {
+    color: $disabled-02;
+  }
+
+  .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input {
+    padding-right: rem(64px); // 1rem + chevron width + invalid icon width
+  }
+
+  .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
+  .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input:focus {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--form-requirement {
+    display: block;
+    color: $support-01;
+    font-weight: 400;
+    overflow: visible;
+  }
+
+  .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--select--light .#{$prefix}--select-input {
+    background-color: $field-02;
+
+    &:hover {
+      background-color: $ui-01;
+    }
+
+    &:disabled,
+    &:hover:disabled {
+      cursor: not-allowed;
+      background-color: $disabled-background-color;
+      color: $disabled-02;
+    }
+  }
+
+  .#{$prefix}--select__arrow {
+    fill: $ui-05;
+    position: absolute;
+    right: 1rem;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
+    position: absolute;
+    right: rem(34px); // 1.5rem + chevron width
+  }
+
+  .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
+    fill: $support-01;
+  }
+
+  .#{$prefix}--select-optgroup,
+  .#{$prefix}--select-option {
+    color: $text-01; // 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: $ui-01;
+      color: $text-01;
+    }
+
+    .#{$prefix}--select-optgroup {
+      color: $text-01;
+    }
+  }
+
+  .#{$prefix}--select--inline {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--label,
+  .#{$prefix}--select--inline.#{$prefix}--select--invalid
+    .#{$prefix}--form__helper-text {
+    margin-top: rem(13px);
+    align-self: flex-start;
+  }
+
+  .#{$prefix}--select--inline .#{$prefix}--form__helper-text {
+    margin-bottom: 0;
+    margin-left: rem(8px);
+  }
+
+  .#{$prefix}--select--inline .#{$prefix}--label {
+    white-space: nowrap;
+    margin: 0 $carbon--spacing-03 0 0;
+  }
+
+  .#{$prefix}--select--inline .#{$prefix}--select-input {
+    background-color: transparent;
+    color: $text-01;
+    border-bottom: none;
+    padding-left: $carbon--spacing-03;
+    padding-right: rem(26px);
+
+    @-moz-document url-prefix() {
+      padding-top: 0;
+    }
+
+    &:hover {
+      background-color: $hover-ui;
+    }
+  }
+
+  .#{$prefix}--select--inline .#{$prefix}--select__arrow {
+    bottom: auto;
+    top: 1.125rem;
+    right: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--select--inline.#{$prefix}--select--invalid
+    .#{$prefix}--select-input {
+    padding-right: rem(50px);
+  }
+
+  .#{$prefix}--select--inline.#{$prefix}--select--invalid
+    .#{$prefix}--select-input
+    ~ .#{$prefix}--select__invalid-icon {
+    right: rem(24px);
+  }
+
+  .#{$prefix}--select--inline .#{$prefix}--select-input:disabled {
+    color: $disabled;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    ~ * {
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$prefix}--select--inline .#{$prefix}--select-input:disabled {
+    cursor: not-allowed;
+  }
+
+  //Skeleton State
+  .#{$prefix}--select.#{$prefix}--skeleton {
+    @include skeleton;
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input {
+    display: none;
+  }
+}
+
+@include exports('select') {
+  @include select;
+}

package/styles/vendor/carbon-components/scss/components/skeleton/_skeleton-icon.scss

@@ -0,0 +1,19 @@
+//
+// 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/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/vars';
+
+@include exports('skeleton-icon') {
+  .#{$prefix}--icon--skeleton {
+    @include skeleton;
+    display: inline-block;
+    width: rem(16px);
+    height: rem(16px);
+  }
+}

package/styles/vendor/carbon-components/scss/components/skeleton/_skeleton-placeholder.scss

@@ -0,0 +1,18 @@
+//
+// 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/helper-mixins';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/vars';
+
+@include exports('skeleton-placeholder') {
+  .#{$prefix}--skeleton__placeholder {
+    @include skeleton;
+    height: rem(100px);
+    width: rem(100px);
+  }
+}