@elastic/eui 95.2.0 → 95.4.0

package/src/components/color_picker/_color_picker.scss

@@ -1,37 +0,0 @@
-.euiColorPicker {
-  position: relative;
-  width: $euiColorPickerWidth;
-}
-
-.euiColorPicker__swatches {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -$euiSizeS / 2;
-}
-
-.euiColorPicker__swatch-item {
-  margin: $euiSizeS / 2;
-}
-
-// Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
-.euiSwatchInput__stroke {
-  fill: none;
-  stroke: transparentize($euiColorFullShade, .8);
-}
-
-.euiColorPicker__popoverPanel--pickerOnly {
-  // Override of EuiPanel padding
-  // stylelint-disable-next-line declaration-no-important
-  padding-bottom: 0 !important;
-}
-
-.euiColorPicker__input {
-  // Manually account for custom left icon / color swatch preview
-  --euiFormControlLeftIconsCount: 1;
-}
-
-.euiColorPicker__alphaRange {
-  .euiRangeInput {
-    min-width: 0;
-  }
-}

package/src/components/color_picker/_color_picker_swatch.scss

@@ -1,18 +0,0 @@
-
-.euiColorPickerSwatch {
-  display: inline-block;
-  height: $euiSizeL;
-  width: $euiSizeL;
-  border-radius: $euiBorderRadius / 2;
-  cursor: pointer;
-  border: solid 1px transparentize($euiColorFullShade, .9);
-  box-shadow: inset 0 0 0 1px transparentize($euiColorEmptyShade, .95);
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:focus {
-    @include euiFocusRing;
-  }
-}

package/src/components/color_picker/_hue.scss

@@ -1,88 +0,0 @@
-// This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
-.euiHue {
-  // stylelint-disable color-no-hex
-  background: linear-gradient(to right,
-    #FF3232 0%,
-    #FFF130 20%,
-    #45FF30 35%,
-    #28FFF0 52%,
-    #282CFF 71%,
-    #FF28FB 88%,
-    #FF0094 100%
-  );
-  // stylelint-enable color-no-hex
-  height: $euiSizeL;
-  margin: $euiSizeXS 0;
-  position: relative;
-
-  // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
-  &::before,
-  &::after {
-    content: '';
-    left: 0;
-    position: absolute;
-    height: $euiSizeS;
-    background: $euiColorEmptyShade;
-    width: 100%;
-  }
-
-  &::after {
-    bottom: 0;
-  }
-}
-
-// The range itself is the same height
-.euiHue__range {
-  @include euiRangeThumbPerBrowser {
-    @include euiCustomControl($type: 'round');
-    @include euiRangeThumbStyle;
-  }
-
-  position: relative;
-  height: $euiSizeL;
-  width: calc(100% + 2px); // Allow for overlap
-  margin: 0 -1px; // Use ^ overlap to allow thumb to fully cover gradient ends
-  appearance: none;
-  background: transparent;
-  z-index: 2; // Needed to place the thumb above the :after pseudo border from .euiRange
-
-  // Resets for the range
-
-  // Disable linter for these very unique vendor controls
-  // stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    margin-top: 0;
-  }
-
-  &::-ms-thumb {
-    margin-top: 0;
-  }
-
-  &::-ms-track {
-    height: $euiSizeL;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-  }
-
-  &::-moz-focus-outer {
-    border: none;
-  }
-
-  &::-ms-fill-lower,
-  &::-ms-fill-upper {
-    background: transparent;
-  }
-
-  // Thumb has trouble with animation, so we make something similar to `@include euiFocusRing`
-  &:focus {
-    @include euiRangeThumbPerBrowser {
-      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-      border-color: $euiColorPrimary;
-    }
-
-    // Focus is added to the thumb ^^ so we can remove the outer wrapping outline
-    outline: none;
-  }
-}

package/src/components/color_picker/_index.scss

@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'color_picker';
-@import 'color_picker_swatch';
-@import 'hue';
-@import 'saturation';
-@import 'color_palette_picker/index';
-@import 'color_palette_display/index';

package/src/components/color_picker/_saturation.scss

@@ -1,57 +0,0 @@
-
-.euiSaturation {
-  position: relative;
-  width: 100%;
-  padding-bottom: 100%;
-  border-radius: $euiBorderRadius / 2;
-  touch-action: none; // prevent TouchMove events from scrolling page
-  z-index: 3; // Required to be above the hue slider, which can overlap
-
-  .euiSaturation__lightness,
-  .euiSaturation__saturation {
-    position: absolute;
-    top: -1px; // hides a slight color inconsistency
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: $euiBorderRadius / 2;
-  }
-
-  .euiSaturation__lightness {
-    background: linear-gradient(to right, $euiColorPickerValueRange0, $euiColorPickerValueRange1);
-  }
-
-  .euiSaturation__saturation {
-    background: linear-gradient(to top, $euiColorPickerSaturationRange0, $euiColorPickerSaturationRange1);
-  }
-
-  .euiSaturation__indicator {
-    position: absolute;
-    height: $euiColorPickerIndicatorSize;
-    width: $euiColorPickerIndicatorSize;
-    border-radius: 100%;
-    margin-top: $euiColorPickerIndicatorSize * -.5;
-    margin-left: $euiColorPickerIndicatorSize * -.5;
-    border: 1px solid $euiColorDarkestShade;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 100%;
-      border: 1px solid $euiColorLightestShade;
-    }
-  }
-
-  &:focus {
-    outline: none; // Hide focus ring because of `tabindex=0` on Safari
-
-    .euiSaturation__indicator {
-      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-      border-color: $euiColorPrimary;
-    }
-  }
-}

package/src/components/color_picker/_variables.scss

@@ -1,6 +0,0 @@
-$euiColorPickerValueRange0: rgba(255, 255, 255, 1);
-$euiColorPickerValueRange1: rgba(255, 255, 255, 0);
-$euiColorPickerSaturationRange0: rgba(0, 0, 0, 1);
-$euiColorPickerSaturationRange1: rgba(0, 0, 0, 0);
-$euiColorPickerIndicatorSize: $euiSizeM;
-$euiColorPickerWidth: ($euiSizeL * 5) + ($euiSizeS * 4); // 5 columns of swatches + margins + border

package/src/components/color_picker/color_palette_display/_color_palette_display.scss

@@ -1,18 +0,0 @@
-.euiColorPaletteDisplay {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  height: $euiSizeS;
-}
-
-@each $name, $size in $euiColorPaletteDisplaySizes {
-  .euiColorPaletteDisplay--#{$name} {
-    @include euiColorPaletteInnerBorder('dark', $size, .2);
-    height: $size;
-    border-radius: $size;
-  }
-
-  .euiColorPaletteDisplay--#{$name} .euiColorPaletteDisplayFixed__bleedArea {
-    height: $size;
-  }
-}

package/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss

@@ -1,12 +0,0 @@
-.euiColorPaletteDisplayFixed {
-  // In a few screen sizes the palette display doesn't get a fully 100% width
-  // it gets 1px less on width and for this reason we're adding an horizontal 1px bleed area
-  &__bleedArea {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    height: $euiSizeS;
-    width: calc(100% + 1px);
-  }
-}

package/src/components/color_picker/color_palette_display/_index.scss

@@ -1,4 +0,0 @@
-@import 'variables';
-@import 'mixins';
-@import 'color_palette_display';
-@import 'color_palette_display_fixed';

package/src/components/color_picker/color_palette_display/_mixins.scss

@@ -1,22 +0,0 @@
-// Useful border shade when dealing with images of unknown color.
-@mixin euiColorPaletteInnerBorder($type: 'dark', $borderRadius: 0, $alpha: .1) {
-  $color: rgba($euiColorDarkestShade, $alpha);
-
-  @if $type == 'light' {
-    $color: rgba($euiColorEmptyShade, $alpha);
-  }
-
-  position: relative;
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: $borderRadius;
-    content: '';
-    pointer-events: none;
-    border: 1px solid $color;
-  }
-}

package/src/components/color_picker/color_palette_display/_variables.scss

@@ -1,6 +0,0 @@
-// Color Palette Display come in different sizes.
-$euiColorPaletteDisplaySizes: (
-  sizeExtraSmall: $euiSizeXS,
-  sizeSmall: $euiSizeS,
-  sizeMedium: $euiSize,
-);

package/src/components/color_picker/color_palette_picker/_color_palette_picker.scss

@@ -1,9 +0,0 @@
-.euiColorPalettePicker {
-  &__itemTitle {
-    @include euiFontSizeXS;
-  }
-
-  &__itemTitle + .euiColorPaletteDisplay {
-    margin-top: $euiSizeXS;
-  }
-}

package/src/components/color_picker/color_palette_picker/_index.scss

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

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

@@ -1,44 +0,0 @@
-.euiHue {
-  position: relative;
-  height: $euiSizeM;
-  border-radius: $euiSizeM;
-  margin: $euiSizeS 0;
-
-  &::before,
-  &::after {
-    display: none;
-  }
-
-  &__range {
-    @include euiRangeThumbPerBrowser {
-      border: 3px solid $euiRangeThumbBorderColor;
-      box-shadow:
-        0 2px 2px -1px rgba($euiShadowColor, .2),
-        0 1px 5px -2px rgba($euiShadowColor, .2);
-      background-color: inherit;
-    }
-
-    top: - $euiSizeM / 2;
-
-    &:focus {
-      @include euiRangeThumbPerBrowser {
-        @include euiRangeThumbFocusBoxShadow;
-        border: 3px solid $euiRangeThumbBorderColor;
-      }
-
-      outline: none;
-    }
-
-    &:focus:not(:focus-visible) {
-      @include euiRangeThumbPerBrowser {
-        box-shadow:
-          0 2px 2px -1px rgba($euiShadowColor, .2),
-          0 1px 5px -2px rgba($euiShadowColor, .2);
-      }
-    }
-
-    &:focus:focus-visible {
-      outline: none;
-    }
-  }
-}