@elastic/eui 60.2.0 → 62.0.0

package/test-env/themes/amsterdam/global_styling/mixins/shadow.js

@@ -59,10 +59,21 @@ var euiShadowMedium = function euiShadowMedium(_ref5) {
       colorMode = _ref5.colorMode;
 
   var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _color = _ref6.color;
+      _color = _ref6.color,
+      property = _ref6.property;
 
   var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 .9px 4px -1px ".concat((0, _functions.getShadowColor)(color, 0.08, colorMode), ",\n  0 2.6px 8px -1px ").concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 5.7px 12px -1px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ",\n  0 15px 15px -1px ").concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ";\n");
+  var array = ["0 .9px 4px ".concat((0, _functions.getShadowColor)(color, 0.08, colorMode)), "0 2.6px 8px ".concat((0, _functions.getShadowColor)(color, 0.06, colorMode)), "0 5.7px 12px ".concat((0, _functions.getShadowColor)(color, 0.05, colorMode)), "0 15px 15px ".concat((0, _functions.getShadowColor)(color, 0.04, colorMode))];
+
+  if (property === 'filter') {
+    return "filter: ".concat(array.reduce(function (v, i) {
+      return "".concat(v, " drop-shadow(").concat(i, ")");
+    }, ''), ";");
+  } else {
+    return "box-shadow: ".concat(array.map(function (v) {
+      return v;
+    }), ";");
+  }
 };
 /**
  * bottomShadow

package/lib/components/icon/svgs/keyboard_shortcut.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M15 9a1 1 0 01.993.883L16 10v5a1 1 0 01-.883.993L15 16H7a1 1 0 01-.993-.883L6 15v-5a1 1 0 01.883-.993L7 9h8zM2.5 10a.5.5 0 01.492.41L3 10.5V12h1.5a.5.5 0 01.09.992L4.5 13H3v1.5a.5.5 0 01-.992.09L2 14.5V13H.5a.5.5 0 01-.09-.992L.5 12H2v-1.5a.5.5 0 01.5-.5zM15 10H7v5h8v-5zm-1 3v1H8v-1h6zm1-13a1 1 0 011 1v5a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h14zm0 1H1v5h14V1zM8 4v1H2V4h6z" />
-</svg>

package/optimize/lib/components/icon/svgs/keyboard_shortcut.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M15 9a1 1 0 01.993.883L16 10v5a1 1 0 01-.883.993L15 16H7a1 1 0 01-.993-.883L6 15v-5a1 1 0 01.883-.993L7 9h8zM2.5 10a.5.5 0 01.492.41L3 10.5V12h1.5a.5.5 0 01.09.992L4.5 13H3v1.5a.5.5 0 01-.992.09L2 14.5V13H.5a.5.5 0 01-.09-.992L.5 12H2v-1.5a.5.5 0 01.5-.5zM15 10H7v5h8v-5zm-1 3v1H8v-1h6zm1-13a1 1 0 011 1v5a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h14zm0 1H1v5h14V1zM8 4v1H2V4h6z" />
-</svg>

package/src/components/comment_list/_comment.scss

@@ -1,38 +0,0 @@
-.euiComment {
-  font-size: $euiFontSizeS;
-  display: flex;
-  padding-bottom: $euiSize;
-  min-height: $euiSize * 3.5;
-
-  .euiCommentEvent {
-    flex-grow: 1;
-  }
-
-  .euiCommentTimeline {
-    position: relative;
-    flex-grow: 0;
-    margin-right: $euiSize;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: $euiSizeXXL / 2;
-      top: $euiSizeL;
-      width: $euiSizeXS / 2;
-      background-color: $euiColorLightShade;
-      height: calc(100% + #{$euiSizeL});
-    }
-  }
-}
-
-.euiComment:last-of-type {
-  .euiCommentTimeline {
-    &::before {
-      display: none;
-    }
-  }
-}
-
-.euiComment--update:not(.euiComment--hasBody) {
-  align-items: center;
-}

package/src/components/comment_list/_comment_event.scss

@@ -1,77 +0,0 @@
-@include euiPanel($selector: '.euiCommentEvent--regular');
-
-.euiCommentEvent {
-  overflow: hidden;
-}
-
-.euiCommentEvent__header {
-  line-height: $euiLineHeight;
-  display: flex;
-  align-items: center;
-}
-
-.euiCommentEvent__headerData {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-
-  > div {
-    padding-right: $euiSizeXS;
-  }
-}
-
-.euiCommentEvent__headerUsername {
-  font-weight: $euiFontWeightSemiBold;
-}
-
-.euiCommentEvent--regular {
-  @include euiSlightShadow;
-  border-radius: $euiBorderRadius;
-  border: $euiBorderThin;
-
-  .euiCommentEvent__header {
-    min-height: $euiSizeXXL;
-    background-color: $euiColorLightestShade;
-    border-bottom: $euiBorderThin;
-    padding: $euiSizeXS $euiSizeS;
-
-    /**
-     * Fix for IE when using align-items:center in an item that has min-height
-        (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042)
-     */
-    // sass-lint:disable-block mixins-before-declarations
-    @include internetExplorerOnly {
-      &::after {
-        content: '';
-        // Calculates the minimum height based on full header's min-height minus the vertical padding
-        min-height: $euiSizeXXL - $euiSizeS;
-        font-size: 0;
-        display: block;
-      }
-    }
-  }
-
-  .euiCommentEvent__headerData {
-    // Push the actions far right
-    flex-grow: 1;
-  }
-
-  .euiCommentEvent__body {
-    padding: $euiSizeS;
-  }
-}
-
-.euiCommentEvent--update {
-  .euiCommentEvent__header {
-    justify-content: flex-start;
-    padding: $euiSizeXS 0;
-  }
-
-  .euiCommentEvent__headerData {
-    padding-right: $euiSizeS;
-  }
-
-  .euiCommentEvent__body {
-    padding-top: $euiSizeXS;
-  }
-}

package/src/components/comment_list/_comment_timeline.scss

@@ -1,27 +0,0 @@
-.euiCommentTimeline__content {
-  min-width: $euiSizeXXL;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.euiCommentTimeline__icon--default {
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow-x: hidden;
-  border-radius: 50%;
-  background-color: $euiColorLightestShade;
-
-  &.euiCommentTimeline__icon--regular {
-    width: $euiSizeXXL;
-    height: $euiSizeXXL;
-  }
-
-  &.euiCommentTimeline__icon--update {
-    width: $euiSizeL;
-    height: $euiSizeL;
-  }
-}

package/src/components/comment_list/_index.scss

@@ -1,3 +0,0 @@
-@import 'comment';
-@import 'comment_event';
-@import 'comment_timeline';

package/src/components/error_boundary/_error_boundary.scss

@@ -1,13 +0,0 @@
-.euiErrorBoundary {
-  $color1: transparentize($euiColorDanger, .75);
-  $color2: transparentize($euiColorDanger, .95);
-
-  background: repeating-linear-gradient(
-    45deg,
-    $color1,
-    $color1 1px,
-    $color2 1px,
-    $color2 20px
-  );
-  padding: $euiSize;
-}

package/src/components/error_boundary/_index.scss

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

package/src/components/image/_image.scss

@@ -1,212 +0,0 @@
-/**
- * 1. Fix for IE where the image correctly resizes in width but doesn't collapse its height
-      (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
- */
-
-// Main <figure> that wraps images.
-.euiImage {
-  display: inline-block;
-  max-width: 100%;
-  position: relative;
-  min-height: 1px; /* 1 */
-  line-height: 0; // Fixes cropping when image is resized by forcing its height to be determined by the image not line-height
-  flex-shrink: 0; // Don't ever let this shrink in height if direct descendent of flex
-
-  // Required for common usage of nesting within EuiText
-  .euiImage__img {
-    margin-bottom: 0;
-    max-width: 100%;
-  }
-
-  &.euiImage--hasShadow {
-    .euiImage__img {
-      @include euiBottomShadowMedium;
-    }
-  }
-
-  .euiImage__button {
-    position: relative;
-    cursor: pointer;
-
-    // transition the shadow
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
-    &:focus  {
-      outline: 2px solid $euiFocusRingColor;
-    }
-
-    &:hover .euiImage__icon {
-      visibility: visible;
-      fill-opacity: 1;
-    }
-
-    &--fullWidth {
-      width: 100%;
-    }
-  }
-
-  &.euiImage--allowFullScreen {
-    &:hover .euiImage__caption {
-      text-decoration: underline;
-    }
-
-    &:not(.euiImage--hasShadow) .euiImage__button:hover,
-    &:not(.euiImage--hasShadow) .euiImage__button:focus {
-      @include euiBottomShadowMedium;
-    }
-
-    &.euiImage--hasShadow .euiImage__button:hover,
-    &.euiImage--hasShadow .euiImage__button:focus {
-      @include euiBottomShadow;
-    }
-  }
-
-  // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
-  // Size is applied to the image, rather than the figure to work better with floats
-  &.euiImage--small .euiImage__img {
-    width: convertToRem(120px);
-  }
-
-  &.euiImage--medium .euiImage__img {
-    width: convertToRem(200px);
-  }
-
-  &.euiImage--large .euiImage__img {
-    width: convertToRem(360px);
-  }
-
-  &.euiImage--xlarge .euiImage__img {
-    width: convertToRem(600px);
-  }
-
-  &.euiImage--fullWidth {
-    width: 100%;
-  }
-
-  &.euiImage--original {
-    .euiImage__img {
-      width: auto;
-      max-width: 100%;
-    }
-  }
-
-  &.euiImage--floatLeft {
-    float: left;
-
-    &[class*='euiImage--margin']  {
-      margin-left: 0;
-      margin-top: 0;
-    }
-  }
-
-  &.euiImage--floatRight {
-    float: right;
-
-    &[class*='euiImage--margin']  {
-      margin-right: 0;
-      margin-top: 0;
-    }
-  }
-
-  &.euiImage--marginSmall {
-    margin: $euiSizeS;
-  }
-
-  &.euiImage--marginMedium {
-    margin: $euiSize;
-  }
-
-  &.euiImage--marginLarge {
-    margin: $euiSizeL;
-  }
-
-  &.euiImage--marginXlarge {
-    margin: $euiSizeXL;
-  }
-}
-
-// The image itself is full width within the container.
-.euiImage__img {
-  width: 100%;
-  vertical-align: middle;
-}
-
-.euiImage__caption {
-  @include euiFontSizeS;
-  margin-top: $euiSizeXS;
-  text-align: center;
-}
-
-.euiImage__icon {
-  visibility: hidden;
-  fill-opacity: 0;
-  position: absolute;
-  right: $euiSize;
-  top: $euiSize;
-  transition: fill-opacity $euiAnimSpeedSlow $euiAnimSlightResistance;
-  cursor: pointer;
-}
-
-// The FullScreen image that optionally pops up on click.
-.euiImage-isFullScreen {
-  position: relative;
-  max-height: 80vh;
-  max-width: 80vw;
-  animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
-
-  &:hover {
-    .euiImage__button {
-      @include euiBottomShadow;
-    }
-
-    .euiImage__caption {
-      text-decoration: underline;
-    }
-  }
-
-  &__img {
-    max-height: 80vh;
-    max-width: 80vw;
-    vertical-align: middle;
-    cursor: pointer;
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-  }
-}
-
-.euiImage-isFullScreenCloseIcon {
-  position: absolute;
-  right: $euiSize;
-  top: $euiSize;
-  pointer-events: none;
-}
-
-@keyframes euiImageFullScreen {
-  0% {
-    opacity: 0;
-    transform: translateY($euiSizeXL * 2);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@include euiBreakpoint('xs', 's', 'm') {
-
-  .euiImage {
-
-    &.euiImage--floatLeft,
-    &.euiImage--floatRight {
-      float: none;
-
-      // Return back to whatever margin settings were set without the float
-      &[class*='euiImage--margin']  {
-        margin-top: inherit;
-        margin-right: inherit;
-        margin-bottom: inherit;
-        margin-left: inherit;
-      }
-    }
-  }
-}

package/src/components/image/_index.scss

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

package/src/components/popover/_index.scss

@@ -1,5 +0,0 @@
-@import 'variables';
-@import 'popover';
-@import 'popover_title';
-@import 'popover_footer';
-@import 'input_popover';

package/src/components/popover/_input_popover.scss

@@ -1,7 +0,0 @@
-.euiInputPopover {
-  max-width: $euiFormMaxWidth;
-
-  &.euiInputPopover--fullWidth {
-    max-width: 100%;
-  }
-}

package/src/components/popover/_popover.scss

@@ -1,182 +0,0 @@
-// Because of the animations and positioning involved, this code gets pretty
-// repetitive. What you generally need to know if you work in here is that
-// the positioning of the popovers (and the arrows attached to them)
-// is handled through absolute positioning and then animated through the use
-// of transforms.
-
-.euiPopover {
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.euiPopover__anchor {
-  display: inline-block;
-}
-
-.euiPopover--displayBlock {
-  display: block;
-
-  .euiPopover__anchor {
-    display: block;
-  }
-}
-
-/**
- * 1. Can expand further, but it looks weird if it's smaller than the originating button.
- * 2. Animation happens on the panel. But don't animate when using the attached mode like for inputs
- * 3. Make sure the panel stays within the window.
- */
-.euiPopover__panel {
-  // Ignore linting for legibility of transition property, and the mixin performs an overwrite
-  // sass-lint:disable-block indentation
-  @include euiBottomShadow;
-  position: absolute;
-  min-width: $euiButtonMinWidth; /* 1 */
-  max-width: calc(100vw - #{$euiSizeXL}); /* 3 */
-  backface-visibility: hidden;
-  pointer-events: none;
-  opacity: 0; /* 2 */
-  transition: opacity $euiAnimSlightBounce $euiAnimSpeedSlow; /* 2 */
-
-  // Don't animate when using the attached mode like for inputs
-  &:not(.euiPopover__panel-isAttached) {
-    transform: translateY(0) translateX(0) translateZ(0); /* 2 */
-    transition: /* 2 */
-      opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
-      transform $euiAnimSlightBounce ($euiAnimSpeedSlow + 100ms);
-  }
-
-  &.euiPopover__panel-isOpen {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .euiPopover__panelArrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-
-    // This fakes a border on the arrow.
-    &:before {
-      position: absolute;
-      content: '';
-      height: 0;
-      width: 0;
-    }
-
-    // This part of the arrow matches the panel.
-    &:after {
-      position: absolute;
-      content: '';
-      height: 0;
-      width: 0;
-    }
-
-    &.euiPopover__panelArrow--top {
-      &:before {
-        bottom: -$euiPopoverArrowSize + 2;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-top: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        bottom: -$euiPopoverArrowSize + 3;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-top: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-
-    &.euiPopover__panelArrow--right {
-      &:before {
-        left: -$euiPopoverArrowSize;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        left: -$euiPopoverArrowSize + 1;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-
-    &.euiPopover__panelArrow--bottom {
-      &:before {
-        top: -$euiPopoverArrowSize;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        top: -$euiPopoverArrowSize + 1;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-
-    &.euiPopover__panelArrow--left {
-      &:before {
-        right: -$euiPopoverArrowSize + 1;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-left: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        right: -$euiPopoverArrowSize + 2;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-left: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-  }
-
-
-  &.euiPopover__panel-noArrow .euiPopover__panelArrow {
-    display: none;
-  }
-
-  &.euiPopover__panel-isAttached.euiPopover__panel--bottom {
-    border-top-color: transparentize($euiBorderColor, .2);
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  &.euiPopover__panel-isAttached.euiPopover__panel--top {
-    @include euiBottomShadowFlat;
-
-    border-bottom-color: transparentize($euiBorderColor, .2);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}
-
-.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top,  /* 2 */
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--top {
-  transform: translateY($euiPopoverTranslateDistance) translateZ(0);
-}
-
-.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom,  /* 2 */
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--bottom {
-  transform: translateY(-$euiPopoverTranslateDistance) translateZ(0);
-}
-
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--left {
-  transform: translateX($euiPopoverTranslateDistance) translateZ(0);
-}
-
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--right {
-  transform: translateX(-$euiPopoverTranslateDistance) translateZ(0);
-}

package/src/components/popover/_popover_footer.scss

@@ -1,27 +0,0 @@
-.euiPopoverFooter {
-  @include euiPopoverFooter;
-}
-
-.euiPopoverFooter--paddingNone {
-  padding: 0;
-}
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopoverFooter--#{$modifier} {
-    padding: $amount;
-  }
-}
-
-// If the popover's containing panel has padding applied,
-// ensure the title expands to cover that padding and
-// take on the same amount of padding horizontally
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverFooter {
-    margin: $amount ($amount * -1) ($amount * -1);
-
-    &:not([class*='euiPopoverFooter--padding']) {
-      padding: $euiSizeM $amount;
-    }
-  }
-}

package/src/components/popover/_popover_title.scss

@@ -1,27 +0,0 @@
-.euiPopoverTitle {
-  @include euiPopoverTitle;
-}
-
-.euiPopoverTitle--paddingNone {
-  padding: 0;
-}
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopoverTitle--#{$modifier} {
-    padding: $amount;
-  }
-}
-
-// If the popover's containing panel has padding applied,
-// ensure the title expands to cover that padding and
-// take on the same amount of padding horizontally
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverTitle {
-    margin: ($amount * -1) ($amount * -1) $amount;
-
-    &:not([class*='euiPopoverTitle--padding']) {
-      padding: $euiSizeM $amount;
-    }
-  }
-}

package/src/components/popover/_variables.scss

@@ -1,2 +0,0 @@
-$euiPopoverArrowSize: $euiSizeM !default;
-$euiPopoverTranslateDistance: $euiSizeS !default;

package/src/components/text_diff/_index.scss

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

package/src/components/text_diff/_text_diff.scss

@@ -1,9 +0,0 @@
-.euiTextDiff {
-  del {
-    color: $euiColorDangerText;
-  }
-
-  ins {
-    color: $euiColorSuccessText;
-  }
-}