@carbon/ibm-products 1.6.1 → 1.9.0

package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss

@@ -1,212 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 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.
-//
-
-// Standard imports.
-@import '../../global/styles/project-settings';
-@import '../../global/styles/mixins';
-
-// Other Carbon settings.
-// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
-
-// CancelableTextEdit uses the following Carbon components:
-// TODO: @import(s) of Carbon component styles used by CancelableTextEdit
-
-// CancelableTextEdit uses the following Carbon for IBM Products components:
-// TODO: @import(s) of IBM Products component styles used by CancelableTextEdit
-
-@mixin button-states($block-class) {
-  .#{$block-class}__revert,
-  .#{$block-class}__save {
-    border: 1px solid transparent;
-
-    // input does not have focus
-    &:hover {
-      border-color: $hover-field;
-      border-bottom-color: transparent;
-      background-clip: content-box;
-      box-shadow: initial;
-      outline: initial;
-    }
-
-    &:focus:active,
-    &:focus {
-      // border focus input does NOT have focus
-      border-color: $focus;
-      box-shadow: inset 0 0 0 1px $focus;
-      outline: initial;
-    }
-
-    &:focus:active:hover {
-      box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $field-01;
-    }
-
-    &::before {
-      background-color: transparent;
-    }
-
-    &[disabled] {
-      border-color: transparent;
-    }
-  }
-
-  // invalid affects hover state
-  &.#{$block-class}--invalid {
-    // invalid does not have focus
-    .#{$block-class}__save:hover,
-    .#{$block-class}__revert:hover {
-      border: 1px solid transparent;
-      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01;
-    }
-
-    .#{$block-class}__save:hover {
-      // invalid does  not have focus
-      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01,
-        inset -1px 0 0 $support-01;
-    }
-  }
-
-  // after other button states handle focus within input
-  .#{$carbon-prefix}--text-input-wrapper:focus-within
-    ~ .#{$block-class}__buttons {
-    .#{$block-class}__revert,
-    .#{$block-class}__save {
-      border: 1px solid transparent;
-      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus;
-      // transition-property: initial; // turn off seems to cause a bit of a visual glitch
-    }
-
-    // button hover state
-    .#{$block-class}__revert:hover,
-    .#{$block-class}__save:hover {
-      background-clip: content-box;
-    }
-
-    .#{$block-class}__save {
-      // border hover input has focus or is in error
-      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus,
-        inset -1px 0 0 $focus;
-    }
-  }
-}
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin cancelable-text-edit {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--cancelable-text-edit;
-
-  .#{$block-class} {
-    --size: #{$spacing-08};
-    --icon-size: #{$spacing-05};
-  }
-
-  .#{$block-class}--sm {
-    --size: #{$spacing-07};
-    --icon-size: #{$spacing-05};
-  }
-
-  .#{$block-class}--lg {
-    --size: #{$spacing-09};
-    --icon-size: #{$spacing-05};
-  }
-
-  // high specificity to override some icon button styles to work like the Carbon search clear button
-  // but at sizes of text input
-  .#{$block-class}.#{$block-class}.#{$block-class} {
-    .#{$block-class}__main {
-      position: relative;
-      display: inline-flex;
-      width: 100%;
-      min-height: var(--size);
-      vertical-align: top;
-    }
-
-    .#{$block-class}__input {
-      height: var(--size);
-      // stylelint-disable-next-line carbon/layout-token-use
-      padding-right: calc(2 * var(--size));
-    }
-
-    .#{$block-class}__buttons {
-      position: absolute;
-      top: 0;
-      right: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .#{$block-class}__buttons-inner {
-      display: flex;
-    }
-
-    @include button-states($block-class);
-
-    .#{$block-class}__revert,
-    .#{$block-class}__save {
-      display: flex;
-      width: var(--size);
-      height: var(--size);
-      min-height: var(--size);
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-
-      svg {
-        width: var(--icon-size);
-        height: var(--icon-size);
-        // margin: calc(var(--size) / 4);
-      }
-    }
-
-    // > only wish to affect version added for inline
-    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement,
-    &.#{$block-class}--warn .#{$carbon-prefix}--form-requirement {
-      display: block;
-      max-height: initial;
-    }
-
-    &.#{$block-class}--invalid.#{$block-class}--inline
-      .#{$carbon-prefix}--form-requirement,
-    &.#{$block-class}--warn.#{$block-class}--inline
-      .#{$carbon-prefix}--form-requirement {
-      // stylelint-disable-next-line carbon/layout-token-use
-      margin-left: calc(20% + 1.25rem); // needs to match inline input layout
-    }
-
-    // > only wish to affect version added for inline
-    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement {
-      display: block;
-      overflow: visible;
-      // max-height: 12.5rem;
-      // font-weight: 400;
-      color: $text-error;
-    }
-
-    .#{$carbon-prefix}--text-input {
-      // stylelint-disable-next-line carbon/layout-token-use
-      padding-right: calc(
-        2 * var(--size)
-      ); // to take account of save and revert
-    }
-
-    .#{$carbon-prefix}--text-input--invalid {
-      // stylelint-disable-next-line carbon/layout-token-use
-      padding-right: calc(
-        3 * var(--size)
-      ); // to take account of save and revert
-    }
-
-    .#{$carbon-prefix}--text-input__invalid-icon {
-      margin-right: $spacing-11;
-    }
-  }
-}
-
-@include exports('cancelable-text-edit') {
-  @include cancelable-text-edit;
-}