@carbon/charts 0.58.2 → 1.0.2

package/styles/vendor/carbon-components/src/components/number-input/_number-input.scss

@@ -1,488 +0,0 @@
-//
-// 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 '../form/form';
-
-/// Number input styles
-/// @access private
-/// @group number-input
-@mixin number-input {
-  .#{$prefix}--number {
-    @include reset;
-
-    position: relative;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-  }
-
-  .#{$prefix}--number input[type='number'] {
-    @include type-style('code-01');
-    @include focus-outline('reset');
-
-    display: inline-flex;
-    width: 100%;
-    min-width: 9.375rem;
-    height: rem(40px);
-    box-sizing: border-box;
-    padding-right: rem(128px);
-    padding-left: $carbon--spacing-05;
-    border: 0;
-    border-bottom: rem(1px) solid $ui-04;
-
-    // Firefox: Hide spinner (up and down buttons)
-    -moz-appearance: textfield;
-    background-color: $field-01;
-    border-radius: 0;
-    color: $text-01;
-    font-family: carbon--font-family('mono');
-    font-weight: 300;
-    transition: background-color $duration--fast-01 motion(standard, productive),
-      outline $duration--fast-01 motion(standard, productive);
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-
-    &:disabled ~ .#{$prefix}--number__controls {
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    &:disabled ~ .#{$prefix}--number__controls svg {
-      fill: $disabled;
-    }
-
-    // IE: Hide "clear-field" `x` button on input field
-    &::-ms-clear {
-      display: none;
-    }
-
-    // Safari: Hide number spinner
-    &::-webkit-inner-spin-button {
-      appearance: none;
-    }
-  }
-
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl.#{$prefix}--number input[type='number'],
-  .#{$prefix}--number--lg.#{$prefix}--number input[type='number'] {
-    padding-right: rem(144px);
-  }
-
-  .#{$prefix}--number--sm.#{$prefix}--number input[type='number'] {
-    padding-right: rem(112px);
-  }
-
-  .#{$prefix}--number input[type='number']:disabled {
-    border-bottom-color: transparent;
-    background-color: $disabled-01;
-    color: $disabled;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--number__input-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .#{$prefix}--number__controls {
-    @include reset;
-
-    position: absolute;
-    // vertically center controls within parent container on IE11
-    top: 50%;
-    right: 0;
-    display: flex;
-    width: rem(80px);
-    height: 100%;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    transform: translateY(-50%);
-  }
-
-  .#{$prefix}--number__control-btn {
-    @include button-reset;
-
-    position: relative;
-    display: inline-flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    border-bottom: rem(1px) solid $ui-04;
-    color: $icon-01;
-
-    &::before,
-    &::after {
-      position: absolute;
-      top: rem(2px);
-      display: block;
-      width: rem(2px);
-      // height: calc(100% - 4px) is calculated differently in Safari
-      height: rem(36px);
-      background-color: $field-01;
-      content: '';
-    }
-
-    &::before {
-      left: 0;
-    }
-
-    &::after {
-      right: 0;
-    }
-
-    svg {
-      fill: currentColor;
-    }
-
-    &:focus {
-      @include focus-outline;
-
-      color: $icon-01;
-      outline-offset: -2px;
-      outline-width: 2px;
-    }
-
-    &:hover {
-      background-color: $hover-ui;
-      color: $icon-01;
-      cursor: pointer;
-
-      &::before,
-      &::after {
-        background-color: $hover-ui;
-      }
-    }
-
-    &:focus::before,
-    &:focus::after,
-    &:hover:focus::before,
-    &:hover:focus::after {
-      background-color: transparent;
-    }
-
-    &:disabled {
-      border-bottom-color: transparent;
-      color: $disabled;
-      cursor: not-allowed;
-    }
-  }
-
-  // set orders to facilitate styling for rule dividers
-  .#{$prefix}--number__control-btn.down-icon {
-    order: 1;
-  }
-
-  .#{$prefix}--number__control-btn.up-icon {
-    order: 2;
-  }
-
-  // add top and bottom outlines to number controls when input is focused
-  .#{$prefix}--number
-    input[type='number']:focus
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn {
-    border-bottom-width: 0;
-
-    &:hover {
-      @include focus-outline('outline');
-
-      border: 0;
-    }
-  }
-
-  .#{$prefix}--number
-    input[type='number'][data-invalid]
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn {
-    border-bottom-width: 0;
-  }
-
-  // add invalid outline to number controls only when invalid input is not focused
-  .#{$prefix}--number
-    input[type='number'][data-invalid]:not(:focus)
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn:hover {
-    @include focus-outline('invalid');
-  }
-
-  .#{$prefix}--number
-    input[type='number']:focus
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--number
-    input[type='number'][data-invalid]
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after {
-    background-color: $support-01;
-  }
-
-  .#{$prefix}--number
-    input[type='number'][data-invalid]:focus
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon::after,
-  .#{$prefix}--number
-    input[type='number'][data-invalid]
-    ~ .#{$prefix}--number__controls
-    .#{$prefix}--number__control-btn.up-icon:focus::after {
-    background-color: $focus;
-  }
-
-  .#{$prefix}--number__rule-divider {
-    position: absolute;
-    z-index: z('overlay');
-    width: rem(1px);
-    height: rem(16px);
-    background-color: $ui-03;
-
-    &:first-of-type {
-      order: 0;
-    }
-  }
-
-  // rule divider styles
-  .#{$prefix}--number__controls
-    .#{$prefix}--number__rule-divider:first-of-type {
-    left: 0;
-    background-color: transparent;
-  }
-
-  .#{$prefix}--number__invalid
-    + .#{$prefix}--number__controls
-    .#{$prefix}--number__rule-divider:first-of-type {
-    background-color: $ui-03;
-  }
-
-  .#{$prefix}--number--light .#{$prefix}--number__rule-divider,
-  .#{$prefix}--number--light
-    .#{$prefix}--number__invalid
-    + .#{$prefix}--number__controls
-    .#{$prefix}--number__rule-divider:first-of-type {
-    background-color: $decorative-01;
-  }
-
-  .#{$prefix}--number
-    input[type='number']:disabled
-    + .#{$prefix}--number__controls
-    .#{$prefix}--number__rule-divider:first-of-type {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--number
-    input[type='number']:disabled
-    + .#{$prefix}--number__controls
-    .#{$prefix}--number__rule-divider {
-    background-color: $disabled-02;
-  }
-
-  .#{$prefix}--number__control-btn:focus ~ .#{$prefix}--number__rule-divider {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--number__invalid {
-    position: absolute;
-    right: rem(96px);
-    fill: $support-01;
-  }
-
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__invalid,
-  .#{$prefix}--number--lg .#{$prefix}--number__invalid {
-    right: rem(112px);
-  }
-
-  .#{$prefix}--number--sm .#{$prefix}--number__invalid {
-    right: rem(80px);
-  }
-
-  .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider {
-    position: absolute;
-    right: rem(80px);
-  }
-
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl
-    .#{$prefix}--number__invalid
-    + .#{$prefix}--number__rule-divider,
-  .#{$prefix}--number--lg
-    .#{$prefix}--number__invalid
-    + .#{$prefix}--number__rule-divider {
-    right: rem(96px);
-  }
-
-  .#{$prefix}--number--sm
-    .#{$prefix}--number__invalid
-    + .#{$prefix}--number__rule-divider {
-    right: rem(64px);
-  }
-
-  .#{$prefix}--number__control-btn.down-icon:hover
-    ~ .#{$prefix}--number__rule-divider,
-  .#{$prefix}--number__control-btn.up-icon:hover
-    + .#{$prefix}--number__rule-divider,
-  .#{$prefix}--number__control-btn.down-icon:focus
-    ~ .#{$prefix}--number__rule-divider,
-  .#{$prefix}--number__control-btn.up-icon:focus
-    + .#{$prefix}--number__rule-divider {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--number__invalid--warning {
-    fill: $support-03;
-  }
-
-  .#{$prefix}--number__invalid--warning path:first-of-type {
-    fill: $carbon__black-100;
-    opacity: 1;
-  }
-
-  .#{$prefix}--number--light input[type='number'] {
-    background-color: $field-02;
-  }
-
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light input[type='number']:disabled {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn::after {
-    background-color: $field-02;
-  }
-
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
-    background-color: transparent;
-  }
-
-  // We include `:not(:focus)` here because the pseudo elements will overlap the
-  // focus outline on the button if we set their background-color on focus
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light
-    .#{$prefix}--number__control-btn:not(:focus):hover::before,
-  .#{$prefix}--number--light
-    .#{$prefix}--number__control-btn:not(:focus):hover::after {
-    background-color: $hover-light-ui;
-  }
-
-  // Size Variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl input[type='number'],
-  .#{$prefix}--number--lg input[type='number'] {
-    height: rem(48px);
-  }
-
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__controls,
-  .#{$prefix}--number--lg .#{$prefix}--number__controls {
-    width: rem(96px);
-  }
-
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__control-btn,
-  .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
-    width: rem(48px);
-
-    &::before,
-    &::after {
-      // height: calc(100% - 4px) is calculated differently in Safari
-      height: rem(44px);
-    }
-  }
-
-  .#{$prefix}--number--sm input[type='number'] {
-    height: rem(32px);
-  }
-
-  .#{$prefix}--number--sm .#{$prefix}--number__controls {
-    width: rem(64px);
-  }
-
-  .#{$prefix}--number--sm .#{$prefix}--number__control-btn {
-    width: rem(32px);
-
-    &::before,
-    &::after {
-      // height: calc(100% - 4px) is calculated differently in Safari
-      height: rem(28px);
-    }
-  }
-
-  //No label positioning adjustment
-  .#{$prefix}--number--nolabel
-    .#{$prefix}--label
-    + .#{$prefix}--form__helper-text {
-    margin-top: 0;
-  }
-
-  // No steppers
-  .#{$prefix}--number--nosteppers input[type='number'] {
-    padding-right: rem(48px);
-  }
-
-  .#{$prefix}--number--nosteppers .#{$prefix}--number__invalid {
-    right: rem(16px);
-  }
-
-  // Readonly
-  .#{$prefix}--number--readonly input[type='number'] {
-    background: transparent;
-  }
-
-  .#{$prefix}--number--readonly .#{$prefix}--number__controls {
-    display: none;
-  }
-
-  .#{$prefix}--number__readonly-icon {
-    position: absolute;
-    right: rem(16px);
-  }
-
-  // Skeleton State
-  .#{$prefix}--number.#{$prefix}--skeleton {
-    @include skeleton;
-
-    width: 100%;
-    height: 2.5rem;
-
-    input[type='number'] {
-      display: none;
-    }
-  }
-
-  // Windows HCM fix
-  /* stylelint-disable */
-  .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number__control-btn:focus {
-    @include high-contrast-mode('focus');
-  }
-
-  .#{$prefix}--number__control-btn {
-    @include high-contrast-mode('outline');
-  }
-
-  .#{$prefix}--number__control-btn svg {
-    @include high-contrast-mode('icon-fill');
-  }
-  /* stylelint-enable */
-}
-
-@include exports('number-input') {
-  @include number-input;
-}

package/styles/vendor/carbon-components/src/components/number-input/migrate-to-10.x.md

@@ -1,55 +0,0 @@
-### HTML
-
-Icons from [`carbon-elements`](https://github.com/IBM/carbon-elements) package
-are now used for the increase button, decrease button and validation error. Also
-some internal changes involves changing the markup structure a bit. Please see
-the new structure below and reference the
-[number input page](https://next.carbondesignsystem.com/components/number-input/code)
-in our site to copy the specified new markup. React and other framework variants
-should reflect the changes automatically.
-
-**Things to note**:
-
-- Input and number controls are now inside a wrapper, so it is no longer a
-  sibling of the label. The wrapper is now a sibling of the label.
-- Helper text markup has now moved to be immediately below the label.
-- Invalid variation now includes an invalid icon.
-- Button icons have new paths and svg attributes.
-
-**New Structure**:
-
-```bash
-bx--form-item
-└── bx--number (optional: bx--number--nolabel, bx--number--helpertext)
-    ├── bx--label (optional)
-    ├── bx--form__helper-text (optional)
-    ├── bx--number__input-wrapper
-    │   ├── input
-    │   ├──svg bx--number__invalid (invalid use only)
-    │   └── bx--number__controls
-    │       ├── bx--number__control-btn up-icon
-    │       │   └──svg
-    │       └── bx--number__control-btn down-icon
-    │           └──svg
-    └── form requirement (invalid use only)
-```
-
-**Old Structure**:
-
-```bash
-bx--form-item
-└── bx--number (optional: bx--number--nolabel, bx--number--helpertext)
-    ├── bx--label (optional)
-    ├── input
-    ├── bx--number__controls
-    │   ├── bx--number__control-btn up-icon
-    │   │   └──svg
-    │   └── bx--number__control-btn down-icon
-    │       └──svg
-    ├── form requirement (invalid use only)
-    └── bx--form__helper-text (optional)
-```
-
-### SCSS
-
-No new selectors.

package/styles/vendor/carbon-components/src/components/number-input/migrate-to-7.x.md

@@ -1,43 +0,0 @@
-### HTML
-
-Number Input and other form components now use common form HTML and CSS. See
-Form README for details.
-
-In general, it will be easiest to simply copy and paste the new HTML to replace
-older Number Inputs.
-
-### SCSS
-
-The `_number-input.scss` file is now located at
-`src/components/number-input/_number-input.scss`. You will need to update any
-`@import` statements for this file to reflect this change.
-
-**New**:
-
-```scss
-@import 'path_to_node_modules/carbon-components/src/components/number-input/number-input';
-```
-
-**Old**:
-
-```scss
-@import 'path_to_node_modules/@console/bluemix-components/src/components/number-input/number-input';
-```
-
-| Old Class                 | New Class  | Note      |
-| ------------------------- | ---------- | --------- |
-| bx--number                | bx--number | Unchanged |
-| bx--number\_\_arrow       |            | Removed   |
-| bx--number\_\_icon        |            | Removed   |
-| bx--number\_\_arrow--up   | up-icon    | Changed   |
-| bx--number\_\_arrow--down | down-icon  | Changed   |
-| bx--number\_\_input       |            | Removed   |
-
-### JavaScript
-
-The `handleClick` method is now a private method, so it has been renamed to
-`_handleClick`. The `options` property now only contains a `selectorInit`
-key/value pair. The `ie` property in `options` has been removed. In general, the
-`NumberInput` class does not check for Internet Explorer browsers and relies on
-increasing and decreasing the Number input `value` attribute directly. Changing
-the `value` attribute is compatible with all browsers.