@elastic/eui 59.1.0 → 60.1.0

package/src/components/icon/_icon.scss

@@ -1,87 +0,0 @@
-.euiIcon {
-  flex-shrink: 0; // Ensures it never scales down below its intended size
-  display: inline-block;
-  vertical-align: middle;
-  fill: currentColor;
-  transform: translate(0, 0); // Hack to fix Firefox "softness"
-
-  &:focus {
-    opacity: 1; // We often hide icons on hover. Make sure they appear on focus.
-    background: $euiFocusBackgroundColor;
-  }
-}
-
-// App icons are two-toned so get an extra class. This provides the base color.
-.euiIcon--app {
-  fill: $euiTextColor;
-
-  // This provides the default secondary color
-  .euiIcon__fillSecondary {
-    fill: makeGraphicContrastColor($euiColorSuccess);
-  }
-}
-
-.euiIcon-isLoading {
-  opacity: $euiIconLoadingOpacity;
-  background-color: currentColor;
-  border-radius: $euiBorderRadius;
-}
-
-.euiIcon-isLoaded {
-  animation: euiIconLoading $euiAnimSpeedNormal ease-in 0s 1 forwards;
-}
-
-// COLORS
-
-@each $name, $color in $euiIconColors {
-  .euiIcon--#{$name} {
-    // Use color attribute so currentColor can be used in more properties
-    color: $color;
-  }
-}
-
-// Really force all paths to inherit when the color is ghost/text (specifically for logos)
-.euiIcon--ghost:not([data-type='logoElastic']),
-.euiIcon--text:not([data-type='logoElastic']) {
-  *[fill],
-  .euiIcon__fillNegative {
-    fill: currentColor !important; // sass-lint:disable-line no-important
-  }
-}
-
-// Elastic logo specific colors
-.euiIcon--ghost[data-type='logoElastic'],
-.euiIcon--text[data-type='logoElastic'] {
-  *[fill] {
-    fill: none !important; // sass-lint:disable-line no-important
-  }
-
-  .outline {
-    fill: currentColor !important; // sass-lint:disable-line no-important
-  }
-}
-
-// Use the negative fill on SVG elements that need to flip portions
-// of the icon to light and dark compatible modes. You can see this
-// in use on the Elastic logo icons.
-.euiIcon__fillNegative {
-  fill: $euiColorDarkestShade;
-}
-
-// SIZES
-
-@each $name, $size in $euiIconSizes {
-  .euiIcon--#{$name} {
-    @include size($size);
-  }
-}
-
-@keyframes euiIconLoading {
-  0% {
-    opacity: $euiIconLoadingOpacity;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

package/src/components/icon/_index.scss

@@ -1,2 +0,0 @@
-@import './variables';
-@import './icon';

package/src/components/icon/_variables.scss

@@ -1,22 +0,0 @@
-$euiIconLoadingOpacity: .05;
-
-// Modifier naming and colors.
-$euiIconColors: (
-  accent: makeGraphicContrastColor($euiColorAccent),
-  danger: makeGraphicContrastColor($euiColorDanger),
-  ghost: $euiColorGhost,
-  primary: makeGraphicContrastColor($euiColorPrimary),
-  success: makeGraphicContrastColor($euiColorSuccess),
-  subdued: $euiTextSubduedColor,
-  text: $euiTextColor,
-  warning: makeGraphicContrastColor($euiColorWarning),
-  inherit: inherit
-);
-
-$euiIconSizes: (
-  small: $euiSizeM,
-  medium: $euiSize,
-  large: $euiSizeL,
-  xLarge: $euiSizeXL,
-  xxLarge: $euiSizeXXL
-);

package/src/components/progress/_index.scss

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

package/src/components/progress/_progress.scss

@@ -1,166 +0,0 @@
-// This file uses uncommon vendor prefixes not covered by our compilers
-// sass-lint:disable no-vendor-prefixes
-
-.euiProgress {
-  position: relative;
-  overflow: hidden;
-  background-color: $euiColorLightShade;
-}
-
-// Progress bars come in different sizes.
-$euiProgressSizes: (
-  xs: $euiSizeXS / 2,
-  s: $euiSizeXS,
-  m: $euiSizeS,
-  l: $euiSize,
-);
-
-@each $name, $size in $euiProgressSizes {
-  .euiProgress--#{$name} {
-    height: $size;
-  }
-}
-
-// https://css-tricks.com/html5-progress-element/
-// Good resource if you need to work in here. There's some gotchas with
-// dealing with cross-browser progress bars.
-.euiProgress--native {
-  display: block;
-  width: 100%;
-  appearance: none;
-  border: none;
-
-  &::-webkit-progress-bar {
-    background-color: $euiColorLightShade;
-  }
-
-  &::-webkit-progress-value {
-    transition: width $euiAnimSpeedNormal linear;
-  }
-
-  &::-moz-progress-bar {
-    transition: width $euiAnimSpeedNormal linear;
-  }
-}
-
-/**
- * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
- * we apply this style to a <div> instead of a <progress> element.
- * See https://css-tricks.com/html5-progress-element/ for more info.
- */
-.euiProgress--indeterminate {
-  &:before {
-    position: absolute;
-    content: '';
-    width: 100%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    transform: scaleX(0) translateX(0%);
-    animation: euiProgress 1s $euiAnimSlightResistance infinite;
-  }
-}
-
-// Progress bars can be set to fixed or absolute.
-.euiProgress--fixed {
-  position: fixed;
-  z-index: $euiZHeader + 1;
-}
-
-.euiProgress--absolute {
-  position: absolute;
-}
-
-.euiProgress--fixed,
-.euiProgress--absolute {
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: transparent;
-
-  &.euiProgress--native {
-    &::-webkit-progress-bar {
-      background-color: transparent;
-    }
-
-    &::-moz-progress-bar {
-      background-color: transparent;
-    }
-  }
-}
-
-@each $name, $color in $euiProgressColors {
-  .euiProgress--#{$name} {
-    &.euiProgress--native {
-      &::-webkit-progress-value {
-        background-color: $color;
-      }
-
-      &::-moz-progress-bar {
-        background-color: $color;
-      }
-    }
-
-    &.euiProgress--indeterminate {
-      &:before {
-        background-color: $color;
-      }
-    }
-  }
-
-  @if ($name != 'customColor') {
-    .euiProgress__data--#{$name} {
-      .euiProgress__valueText {
-        color: makeHighContrastColor($color);
-      }
-    }
-  }
-}
-
-@keyframes euiProgress {
-  0% {
-    transform: scaleX(1) translateX(-100%);
-  }
-
-  100% {
-    transform: scaleX(1) translateX(100%);
-  }
-}
-
-.euiProgress__data {
-  display: flex;
-  justify-content: space-between;
-}
-
-.euiProgress__label,
-.euiProgress__valueText {
-  @include euiText;
-  @include euiFontSizeXS;
-  @include euiTextTruncate;
-}
-
-.euiProgress__label {
-  flex-grow: 1;
-
-  // Only restrict the valueText if it's the sibling of the label
-  // Gives width precedence to the value text forcing consumers to round their values
-  + .euiProgress__valueText {
-    padding-left: $euiSizeXS;
-    flex-grow: 1;
-    text-align: right;
-    flex-shrink: 0;
-  }
-}
-
-.euiProgress__valueText {
-  // Tabular numbers ensure the line up nicely when right-aligned
-  font-feature-settings: 'tnum' 1;
-  margin-left: auto;
-}
-
-.euiProgress__data--l {
-  .euiProgress__label,
-  .euiProgress__valueText {
-    @include euiFontSizeS;
-  }
-}

package/src/components/progress/_variables.scss

@@ -1,21 +0,0 @@
-// Progress bars come in different colors.
-$euiProgressColors: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  accent: $euiColorAccent,
-  subdued: $euiTextSubduedColor,
-  vis0: $euiColorVis0,
-  vis1: $euiColorVis1,
-  vis2: $euiColorVis2,
-  vis3: $euiColorVis3,
-  vis4: $euiColorVis4,
-  vis5: $euiColorVis5,
-  vis6: $euiColorVis6,
-  vis7: $euiColorVis7,
-  vis8: $euiColorVis8,
-  vis9: $euiColorVis9,
-  customColor: currentColor,
-);
-

package/src/components/stat/_index.scss

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

package/src/components/stat/_stat.scss

@@ -1,50 +0,0 @@
-.euiStat {
-  // Modifier naming and colors.
-  $titleColors: (
-    subdued: $euiTextSubduedColor,
-    primary: $euiColorPrimaryText,
-    success: $euiColorSuccessText,
-    danger: $euiColorDangerText,
-    accent: $euiColorAccentText,
-  );
-
-  .euiStat__title {
-    color: $euiColorFullShade;
-
-    // Create color classes based upon the map.
-    @each $name, $color in $titleColors {
-      &--#{$name} {
-        color: $color;
-      }
-    }
-  }
-
-  .euiStat__title-isLoading {
-    animation: euiStatPulse 1.5s infinite ease-in-out;
-  }
-
-  .euiStat__description {
-    color: map-get($titleColors, dark);
-  }
-
-  &.euiStat--leftAligned {
-    text-align: left;
-    align-items: flex-start;
-  }
-
-  &.euiStat--centerAligned {
-    text-align: center;
-    align-items: center;
-  }
-
-  &.euiStat--rightAligned {
-    text-align: right;
-    align-items: flex-end;
-  }
-}
-
-@keyframes euiStatPulse {
-  0% { opacity: 1; }
-  50% { opacity: .25; }
-  100% { opacity: 1; }
-}

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

@@ -1,3 +0,0 @@
-.euiProgress--native {
-  border-radius: $euiSizeS;
-}