@elastic/eui 95.1.0 → 95.3.0

package/src/components/form/file_picker/_file_picker.scss

@@ -1,212 +0,0 @@
-/**
-  * REMEMBER: --large modifiers must come last to override --compressed
-  */
-
-.euiFilePicker {
-  @include euiFormControlSize($includeAlternates: true);
-  position: relative;
-
-  &.euiFilePicker--large {
-    border-radius: $euiFormControlBorderRadius;
-    overflow: hidden;
-    height: auto;
-  }
-
-  &.euiFilePicker--large.euiFilePicker--compressed {
-    border-radius: $euiFormControlCompressedBorderRadius;
-  }
-}
-
-// The input is an invisible dropzone / button
-.euiFilePicker__input {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  overflow: hidden;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:hover:disabled {
-    cursor: not-allowed;
-  }
-
-  &:disabled {
-    opacity: 0;
-  }
-
-  &:disabled ~ .euiFilePicker__prompt {
-    color: $euiColorMediumShade;
-  }
-}
-
-.euiFilePicker__icon {
-  position: absolute;
-  left: $euiSizeM;
-  top: $euiSizeM;
-  transition: transform $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  .euiFilePicker--compressed & {
-    top: $euiSizeS;
-    left: $euiSizeS;
-  }
-
-  .euiFilePicker--large & {
-    position: static;
-    margin-bottom: $euiSize;
-  }
-}
-
-/**
-  * 1. Don't block the user from dropping files onto the filepicker.
-  * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
-  * 4. Static height so that it doesn't shift its surrounding contents around
-  */
-.euiFilePicker__prompt {
-  @include euiFormControlWithIcon; /* 2 */
-  height: $euiFormControlHeight;
-  padding-top: $euiFormControlPadding;
-  padding-right: $euiFormControlPadding;
-  padding-bottom: $euiFormControlPadding;
-  pointer-events: none; /* 1 */
-  border: $euiBorderWidthThick dashed $euiColorLightShade;
-  border-radius: $euiFormControlBorderRadius;
-
-  transition:
-    border-color $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in;
-
-  .euiFilePicker--compressed & {
-    @include euiFormControlStyleCompressed($includeStates: false);
-    @include euiFormControlWithIcon($compressed: true); /* 2 */
-    height: $euiFormControlCompressedHeight;
-    border-radius: $euiFormControlCompressedBorderRadius;
-    box-shadow: none;
-  }
-
-  .euiFilePicker--large & {
-    height: $euiFilePickerTallHeight; /* 4 */
-    padding: 0 $euiSizeL;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .euiFilePicker--large.euiFilePicker--compressed & {
-    height: $euiFilePickerTallHeight - $euiSizeL; /* 4 */
-  }
-
-  // To match other EUI form controls, do not color the border red if focused or disabled
-  .euiFilePicker-isInvalid:not(.euiFilePicker__showDrop) .euiFilePicker__input:not(:disabled):not(:focus) + & {
-    border-color: $euiColorDanger;
-  }
-}
-
-.euiFilePicker__promptText {
-  @include euiFontSizeS;
-  @include euiTextTruncate;
-  line-height: $euiSize;
-
-  // Make normal sized prompt stand out a bit more - on the large size we don't need this as it's already identifiable
-  .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
-    color: $euiColorPrimaryText;
-  }
-
-  // Offset/center prompt text for non-large file-pickers
-  .euiFilePicker:not(.euiFilePicker--large) & {
-    margin-top: $euiSizeXS / -2;
-  }
-}
-
-.euiFilePicker__clearButton,
-.euiFilePicker__loadingSpinner {
-  position: absolute;
-  right: $euiSizeM;
-  top: $euiSizeM;
-
-  .euiFilePicker--compressed & {
-    top: $euiSizeS;
-  }
-}
-
-/**
-  * 1. Undo the pointer-events: none applied to the enclosing prompt.
-  */
-.euiFilePicker__clearButton {
-  pointer-events: auto; /* 1 */
-
-  .euiFilePicker:not(.euiFilePicker--large) & {
-    @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon');
-  }
-
-  .euiFilePicker--large & {
-    position: relative;
-    top: 0;
-    right: 0;
-  }
-}
-
-// Focus
-.euiFilePicker__showDrop .euiFilePicker__prompt,
-.euiFilePicker__input:focus + .euiFilePicker__prompt {
-  border-color: $euiColorPrimary;
-}
-
-// Disabled
-.euiFilePicker__input:disabled + .euiFilePicker__prompt {
-  @include euiFormControlDisabledStyle;
-  box-shadow: none;
-}
-
-// Make space for the icons on the right
-.euiFilePicker:not(.euiFilePicker--large) {
-  &.euiFilePicker-isLoading .euiFilePicker__prompt,
-  &.euiFilePicker-hasFiles .euiFilePicker__prompt {
-    @include euiFormControlWithIcon(false, 'right'); /* 2 */
-  }
-}
-
-// When the filepicker has files in it
-.euiFilePicker-hasFiles .euiFilePicker__promptText {
-  color: $euiTextColor;
-}
-
-// Large styles only
-.euiFilePicker--large {
-  // stylelint-disable max-nesting-depth
-  // Hover and focus
-  .euiFilePicker__input:hover:not(:disabled),
-  .euiFilePicker__input:focus {
-    + .euiFilePicker__prompt {
-      .euiFilePicker__promptText {
-        // Adding the underline to the prompt text ensures the underline
-        // color is the same as the current text color
-        text-decoration: underline;
-      }
-
-      .euiFilePicker__icon {
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  // While dragging files over the dropzone
-  &.euiFilePicker__showDrop .euiFilePicker__prompt {
-    .euiFilePicker__promptText {
-      text-decoration: underline;
-    }
-
-    .euiFilePicker__icon {
-      transform: scale(1.1);
-    }
-  }
-
-  &.euiFilePicker-hasFiles .euiFilePicker__promptText {
-    font-weight: $euiFontWeightBold;
-  }
-}

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

@@ -1,2 +0,0 @@
-@import 'variables';
-@import 'file_picker';

package/src/components/form/file_picker/_variables.scss

@@ -1 +0,0 @@
-$euiFilePickerTallHeight: $euiSize * 8;

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;
-    }
-  }
-}