@elastic/eui 95.7.0 → 95.8.0-backport.0

package/src/components/form/form_label/_form_label.scss

@@ -1,25 +0,0 @@
-/**
- * 1. Focused state overrides invalid state.
- * 2. Disabled state overrides pointer.
- */
-.euiFormLabel {
-  @include euiFormLabel;
-  display: inline-block;
-  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  &.euiFormLabel-isInvalid {
-    color: $euiColorDanger; /* 1 */
-  }
-
-  &.euiFormLabel-isFocused {
-    color: $euiColorPrimary; /* 1 */
-  }
-
-  &[for] {
-    cursor: pointer; /* 2 */
-  }
-
-  &[for].euiFormLabel-isDisabled {
-    cursor: default; /* 2 */
-  }
-}

package/src/components/form/form_label/_index.scss

@@ -1 +0,0 @@
-@import 'form_label';

package/src/components/form/form_row/_form_row.scss

@@ -1,102 +0,0 @@
-/**
- * 1. Coerce inline form elements to behave as block-level elements.
- * 2. For inline forms, we need to add margin if the label doesn't exist.
- */
-.euiFormRow {
-  display: flex; /* 1 */
-  flex-direction: column; /* 1 */
-  max-width: $euiFormMaxWidth;
-
-  + .euiFormRow,
-  + .euiButton {
-    margin-top: $euiSize;
-  }
-}
-
-.euiFormRow--fullWidth {
-  max-width: 100%;
-}
-
-.euiFormRow--hasEmptyLabelSpace {
-  margin-top: $euiSize + $euiSizeXS; /* 2 */
-  // the following ensure that contents that aren't inherently the same height
-  // as inputs will align to the vertical center
-  min-height: $euiFormControlHeight;
-  padding-bottom: 0;
-  justify-content: center;
-}
-
-.euiFormRow__labelWrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin-bottom: $euiSizeXS;
-}
-
-.euiFormRow--horizontal {
-  flex-direction: row;
-  align-items: stretch;
-
-  .euiFormRow__label {
-    hyphens: auto;
-  }
-
-  .euiFormRow__labelWrapper {
-    display: block;
-    line-height: $euiFormControlCompressedHeight - 1px; // The 1px less helps the alignment of the text baseline
-    width: calc(33% - #{$euiSizeS});
-    margin-right: $euiSizeS;
-    margin-bottom: 0;
-  }
-
-  .euiFormRow__fieldWrapper {
-    width: 67%;
-  }
-
-  + .euiFormRow--horizontal {
-    margin-top: $euiSizeS;
-  }
-
-  + .euiFormRow--horizontal.euiFormRow--hasSwitch {
-    margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch
-  }
-
-  // TODO: Address nesting during Emotion conversion, if possible
-  // stylelint-disable max-nesting-depth
-  &.euiFormRow--hasSwitch {
-    .euiFormRow__labelWrapper {
-      line-height: $euiSwitchHeight - 1px; // The 1px less helps the alignment of the text baseline
-      width: auto;
-      min-width: calc(33% - #{$euiSizeS});
-    }
-
-    .euiFormRow__fieldWrapper {
-      width: auto;
-
-      .euiSwitch--compressed {
-        margin-top: $euiSizeXS / 2; // Better vertical alignment of a compressed switch to the horizontal label
-      }
-    }
-
-    + .euiFormRow--horizontal {
-      margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch
-    }
-  }
-  // stylelint-enable max-nesting-depth
-}
-
-.euiFormRow__fieldWrapperDisplayOnly {
-  min-height: $euiFormControlHeight;
-  display: flex;
-  align-items: center;
-}
-
-.euiFormRow--compressed {
-  &.euiFormRow--hasEmptyLabelSpace {
-    min-height: $euiFormControlCompressedHeight;
-  }
-
-  .euiFormRow__fieldWrapperDisplayOnly {
-    min-height: $euiFormControlCompressedHeight;
-  }
-}

package/src/components/form/form_row/_index.scss

@@ -1 +0,0 @@
-@import 'form_row';

package/src/components/form/radio/_index.scss

@@ -1 +0,0 @@
-@import 'radio';

package/src/components/form/radio/_radio.scss

@@ -1,87 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-/**
-  * 1. Float above the visual radio and match its dimension, so that when users try to click it
-  *    they actually click this input.
-  */
-
-.euiRadio {
-  position: relative;
-
-  // Set a top offset for the real input and faux input to align better with the text
-  $topOffset: (($euiSizeL - $euiRadioSize) / 2) - 1px;
-
-  .euiRadio__input {
-    @include size($euiRadioSize);
-    top: $topOffset;
-    cursor: pointer;
-    position: absolute; /* 1 */
-    opacity: 0; /* 1 */
-    z-index: 1; /* 1 */
-
-    ~ .euiRadio__label {
-      display: inline-block;
-      padding-left: ($euiRadioSize * 1.5);
-      line-height: $euiSizeL;
-      font-size: $euiFontSizeS;
-      position: relative;
-      z-index: 2;
-      cursor: pointer;
-    }
-
-    + .euiRadio__circle {
-      @include euiCustomControl($type: 'round', $size: $euiRadioSize);
-
-      display: inline-block;
-      position: absolute;
-      left: 0;
-      top: $topOffset;
-    }
-
-    &:checked {
-      + .euiRadio__circle {
-        @include euiCustomControlSelected($type: 'dot');
-      }
-    }
-
-    &[disabled] {
-      cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
-
-      ~ .euiRadio__label {
-        color: $euiFormControlDisabledColor;
-        cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
-      }
-
-      + .euiRadio__circle {
-        @include euiCustomControlDisabled;
-      }
-    }
-
-    &:checked[disabled] {
-      + .euiRadio__circle {
-        @include euiCustomControlDisabled($type: 'dot');
-      }
-    }
-
-    &:focus {
-      + .euiRadio__circle {
-        @include euiCustomControlFocused;
-      }
-    }
-  }
-
-  &.euiRadio--noLabel {
-    min-height: $euiRadioSize;
-    min-width: $euiRadioSize;
-
-    .euiRadio__input,
-    .euiRadio__circle {
-      top: 0;
-    }
-
-    .euiRadio__input {
-      margin: 0;
-    }
-  }
-}

package/src/components/form/switch/_index.scss

@@ -1 +0,0 @@
-@import 'switch';

package/src/components/form/switch/_switch.scss

@@ -1,212 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-.euiSwitch {
-  $euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4));
-  $euiSwitchDisabledThumbColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade);
-
-  position: relative;
-  display: inline-flex;
-  align-items: flex-start;
-  min-height: $euiSwitchHeight;
-
-  .euiSwitch__label {
-    cursor: pointer;
-    padding-left: $euiSizeS;
-    line-height: $euiSwitchHeight;
-    font-size: $euiFontSizeS;
-    vertical-align: middle;
-    display: inline-block;
-  }
-
-  .euiSwitch__button {
-    flex-shrink: 0; // ensures the button doesn't lose width because of a long label
-    line-height: 0; // ensures button takes height of switch inside
-
-    &:focus .euiSwitch__track {
-      @include euiCustomControlFocused;
-    }
-
-    &[aria-checked='false'] {
-      .euiSwitch__body {
-        background-color: $euiSwitchOffColor;
-      }
-
-      // When input is not checked, we shift around the positioning of the thumb and the icon
-      .euiSwitch__thumb { // move the thumb left
-        left: 0;
-      }
-
-      .euiSwitch__icon { // move the icon right
-        right: -$euiSizeS;
-
-        &.euiSwitch__icon--checked {
-          right: auto;
-          left: -($euiSwitchWidth - ($euiSwitchThumbSize / 2));
-        }
-      }
-    }
-
-    &:disabled {
-      &:hover,
-      ~ .euiSwitch__label:hover {
-        cursor: not-allowed;
-      }
-
-      .euiSwitch__body {
-        background-color: $euiSwitchOffDisabledColor;
-      }
-
-      .euiSwitch__thumb {
-        background-color: rgba(0,0,0,0);
-        border-color: $euiSwitchDisabledThumbColor;
-        box-shadow: none;
-      }
-
-      .euiSwitch__icon {
-        fill: $euiColorDarkShade;
-      }
-
-      + .euiSwitch__label {
-        color: $euiFormControlDisabledColor;
-      }
-    }
-  }
-
-  .euiSwitch__body {
-    pointer-events: none;
-    width: $euiSwitchWidth;
-    height: $euiSwitchHeight;
-    background-color: $euiColorPrimary;
-    display: inline-block;
-    position: relative;
-    border-radius: $euiSwitchHeight;
-    vertical-align: middle;
-  }
-
-  .euiSwitch__thumb {
-    @include euiCustomControl($type: 'round', $size: $euiSwitchThumbSize);
-
-    position: absolute;
-    display: inline-block;
-    left: $euiSwitchWidth - $euiSwitchThumbSize;
-    transition: border-color $euiAnimSpeedNormal $euiAnimSlightBounce, background-color $euiAnimSpeedNormal $euiAnimSlightBounce, left $euiAnimSpeedNormal $euiAnimSlightBounce, transform $euiAnimSpeedNormal $euiAnimSlightBounce;
-  }
-
-  .euiSwitch__track {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-    border-radius: $euiSwitchHeight;
-  }
-
-  .euiSwitch__icon {
-    position: absolute;
-    right: -($euiSwitchWidth - ($euiSwitchThumbSize / 2));
-    top: ($euiSwitchHeight - $euiSwitchIconHeight) / 2;
-    bottom: 0;
-    width: $euiSwitchWidth - ($euiSwitchThumbSize / 2) + $euiSizeS;
-    height: $euiSwitchIconHeight;
-    transition: left $euiAnimSpeedNormal $euiAnimSlightBounce, right $euiAnimSpeedNormal $euiAnimSlightBounce;
-    fill: $euiColorEmptyShade;
-  }
-
-  .euiSwitch__icon--checked {
-    right: auto;
-    left: -$euiSizeS;
-    fill: $euiColorEmptyShade;
-  }
-
-  &:hover .euiSwitch__button {
-    &:not(:disabled) .euiSwitch__thumb {
-      transform: scale(1.05);
-    }
-
-    &:active .euiSwitch__thumb {
-      transform: scale(.95);
-    }
-  }
-
-  // Compressed switches operate very similar to the normal versions, but are smaller, contain no icon signifiers
-  &.euiSwitch--compressed {
-    min-height: $euiSwitchHeightCompressed;
-
-    .euiSwitch__label {
-      line-height: $euiSwitchHeightCompressed;
-    }
-
-    .euiSwitch__body {
-      width: $euiSwitchWidthCompressed;
-      height: $euiSwitchHeightCompressed;
-      border-radius: $euiSwitchHeightCompressed;
-    }
-
-    .euiSwitch__thumb {
-      @include euiCustomControl($type: 'round', $size: ($euiSwitchThumbSizeCompressed) - 2px);
-
-      left: ($euiSwitchWidthCompressed) - (($euiSwitchThumbSizeCompressed) - 2px) - 1px;
-      top: 1px;
-      transition: border-color $euiAnimSpeedNormal $euiAnimSlightBounce, background-color $euiAnimSpeedNormal $euiAnimSlightBounce, left $euiAnimSpeedNormal $euiAnimSlightBounce, transform $euiAnimSpeedNormal $euiAnimSlightBounce;
-    }
-
-    .euiSwitch__track {
-      border-radius: $euiSwitchHeightCompressed;
-    }
-  }
-
-  // Mini styling is similar to compressed, but even smaller. It's undocumented because it has very specific uses.
-  &.euiSwitch--mini {
-    min-height: $euiSwitchHeightMini;
-
-    .euiSwitch__label {
-      line-height: $euiSwitchHeightMini;
-      font-size: $euiFontSizeXS;
-    }
-
-    .euiSwitch__body {
-      width: $euiSwitchWidthMini;
-      height: $euiSwitchHeightMini;
-      border-radius: $euiSwitchHeightMini;
-    }
-
-    .euiSwitch__thumb {
-      @include euiCustomControl($type: 'round', $size: ($euiSwitchThumbSizeMini) - 2px);
-
-      left: ($euiSwitchWidthMini) - (($euiSwitchThumbSizeMini) - 2px) - 1px;
-      top: 1px;
-      transition: border-color $euiAnimSpeedNormal $euiAnimSlightBounce, background-color $euiAnimSpeedNormal $euiAnimSlightBounce, left $euiAnimSpeedNormal $euiAnimSlightBounce, transform $euiAnimSpeedNormal $euiAnimSlightBounce;
-    }
-
-    .euiSwitch__track {
-      border-radius: $euiSwitchHeightMini;
-    }
-  }
-
-  // Compressed and mini switches have some style overlap
-  &.euiSwitch--compressed,
-  &.euiSwitch--mini {
-    .euiSwitch__button[aria-checked='false'] {
-      .euiSwitch__thumb {
-        left: 1px;
-      }
-    }
-
-    // Compressed and mini switches need slightly darker borders since they don't have icons
-    .euiSwitch__button[aria-checked='false'],
-    .euiSwitch__button[aria-checked='true']:disabled {
-      .euiSwitch__thumb {
-        border-color: $euiSwitchDisabledThumbColor;
-      }
-    }
-
-    // Similar additional treatment needed while checked
-    .euiSwitch__button[aria-checked='true'] {
-      .euiSwitch__thumb {
-        border-color: $euiColorPrimary;
-      }
-    }
-  }
-}

package/src/global_styling/mixins/_icons.scss

@@ -1,17 +0,0 @@
-// For using icons as background images (data-uri)
-@mixin euiIconBackground($type, $color: $euiColorEmptyShade) {
-  // stylelint-disable string-quotes
-  @if variable-exists(type) == false {
-    @error 'A $type:string must be provided to @mixin euiIconBackground().';
-  } @else if type-of($color) != color {
-    @warn "The second parameter must be a valid color type -- got $color:#{type-of($color)} = #{$color}.";
-  } @else if $type == 'check' {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='#{hexToRGB($color)}' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E");
-  } @else if $type == 'dot' {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='#{hexToRGB($color)}' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E");
-  } @else if $type == 'square' {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Crect width='6' height='6' fill='#{hexToRGB($color)}' fill-rule='evenodd'/%3E%3C/svg%3E");
-  } @else {
-    @error "The $type of #{$type} cannot be found.";
-  }
-}

package/src/themes/amsterdam/overrides/_form_control_layout.scss

@@ -1,112 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-.euiFormControlLayout--group {
-  border-radius: $euiFormControlBorderRadius;
-  background-color: $euiFormInputGroupLabelBackground;
-
-  .euiFormControlLayout__prepend:first-child {
-    @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'left', $internal: true);
-
-    [class*='euiButton'] {
-      @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'left', $internal: true);
-    }
-  }
-
-  .euiFormControlLayout__append:last-child {
-    @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
-
-    [class*='euiButton'] {
-      @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
-    }
-  }
-
-  [class*='euiButton']:focus {
-    @include euiFocusRing(null, 'inner');
-  }
-
-  .euiToolTipAnchor > .euiIcon {
-    @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
-  }
-
-  .euiToolTipAnchor:first-child [class*='euiButton'] {
-    @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'left', $internal: true);
-  }
-
-  .euiToolTipAnchor:last-child {
-    [class*='euiButton'],
-    .euiText {
-      @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
-    }
-  }
-
-  .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'],
-  .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] {
-    border-radius: 0;
-  }
-
-  .euiFormControlLayout__childrenWrapper:first-child .euiSelect,
-  .euiFormControlLayout__childrenWrapper:first-child .euiSuperSelectControl,
-  .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] {
-    @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'left');
-  }
-
-  .euiFormControlLayout__childrenWrapper:last-child .euiSelect,
-  .euiFormControlLayout__childrenWrapper:last-child .euiSuperSelectControl,
-  .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] {
-    @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right');
-  }
-
-  &.euiFormControlLayout--compressed {
-    border-radius: $euiFormControlCompressedBorderRadius;
-    background-color: $euiFormInputGroupLabelBackground;
-
-    &.euiFormControlLayout--readOnly input {
-      background-color: $euiFormBackgroundReadOnlyColor;
-    }
-
-    .euiFormControlLayout__prepend:first-child {
-      @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'left', $internal: true);
-
-      [class*='euiButton'] {
-        @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'left');
-      }
-    }
-
-    .euiFormControlLayout__append:last-child {
-      @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'right', $internal: true);
-
-      [class*='euiButton'] {
-        @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'right', $internal: true);
-      }
-    }
-
-    .euiToolTipAnchor > .euiIcon {
-      @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'right', $internal: true);
-    }
-
-    .euiToolTipAnchor:first-child [class*='euiButton'] {
-      @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'left', $internal: true);
-    }
-
-    .euiToolTipAnchor:last-child [class*='euiButton'],
-    .euiToolTipAnchor:last-child .euiText {
-      @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'right', $internal: true);
-    }
-
-    .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'],
-    .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] {
-      border-radius: 0;
-    }
-
-    .euiFormControlLayout__childrenWrapper:first-child .euiSelect,
-    .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] {
-      @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'left', $internal: true);
-    }
-
-    .euiFormControlLayout__childrenWrapper:last-child .euiSelect,
-    .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] {
-      @include euiFormControlSideBorderRadius($euiFormControlCompressedBorderRadius, $side: 'right', $internal: true);
-    }
-  }
-}

package/src/themes/amsterdam/overrides/_form_control_layout_delimited.scss

@@ -1,42 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-.euiFormControlLayoutDelimited {
-  border-radius: $euiFormControlBorderRadius;
-
-  &.euiFormControlLayout--group {
-    .euiFormControlLayout__childrenWrapper:first-child {
-      border-radius: $euiFormControlBorderRadius 0 0 $euiFormControlBorderRadius;
-    }
-  }
-
-  .euiFormControlLayout__childrenWrapper:only-child {
-    border-radius: $euiFormControlBorderRadius;
-    overflow: hidden;
-  }
-
-  .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
-    &:last-child {
-      border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
-    }
-  }
-
-  &.euiFormControlLayout--compressed {
-    &.euiFormControlLayout--group {
-      .euiFormControlLayout__childrenWrapper:first-child {
-        border-radius: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
-      }
-    }
-
-    .euiFormControlLayout__childrenWrapper:only-child {
-      border-radius: $euiFormControlCompressedBorderRadius;
-      overflow: hidden;
-    }
-
-    .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
-      &:last-child {
-        border-radius: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
-      }
-    }
-  }
-}

package/src/themes/amsterdam/overrides/_form_controls.scss

@@ -1,19 +0,0 @@
-.euiRadio .euiRadio__input {
-  &:focus {
-    @include euiCustomControlFocused('.euiRadio__circle');
-  }
-}
-
-.euiCheckbox .euiCheckbox__input {
-  &:focus {
-    @include euiCustomControlFocused('.euiCheckbox__square');
-  }
-}
-
-.euiSwitch .euiSwitch__button:focus {
-  @include euiFocusRing(null, 'outer');
-
-  .euiSwitch__track {
-    outline: none;
-  }
-}