@elastic/eui 61.0.0 → 62.0.0

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

package/src/global_styling/mixins/_popover.scss

@@ -1,19 +0,0 @@
-@mixin euiPopoverTitle($size: 'm') {
-  @if ($size == 's') {
-    @include euiTitle('xxxs');
-  } @else if ($size == 'm') {
-    @include euiTitle('xxs');
-  } @else {
-    @warn 'euiPopoverTitle only accepts "s" or "m" sizes';
-  }
-
-  padding: $euiSizeM;
-  text-transform: uppercase;
-  border-bottom: $euiBorderThin;
-}
-
-@mixin euiPopoverFooter {
-  @include euiFontSizeS;
-  padding: $euiSizeM;
-  border-top: $euiBorderThin;
-}

package/src/themes/amsterdam/global_styling/mixins/_popover.scss

@@ -1,5 +0,0 @@
-@mixin euiPopoverTitle($size: null) {
-  @include euiTitle('xxs');
-  padding: $euiSizeM;
-  border-bottom: $euiBorderThin;
-}

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

@@ -1,10 +0,0 @@
-.euiImage-isFullScreen {
-  .euiImage__caption {
-    color: $euiColorGhost;
-    text-shadow: 0 1px 2px transparentize($euiColorInk, .6);
-  }
-}
-
-.euiImage-isFullScreenCloseIcon {
-  fill: $euiColorGhost;
-}

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

@@ -1,104 +0,0 @@
-.euiPopover__panel {
-  &:focus {
-    outline-offset: 0;
-  }
-
-  &.euiPopover__panel-isAttached {
-    @include euiBottomShadowMedium;
-
-    // Reset border radius to panel's
-    // Specificity also helps override default theme
-    @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
-      &.euiPanel--#{$modifier} {
-        border-radius: $amount;
-      }
-    }
-  }
-
-  .euiPopover__panelArrow {
-    &:before {
-      filter: blur($euiSizeXS - 1px);
-      opacity: .2;
-    }
-
-    $arrowShadowCompensation: $euiSizeXS;
-
-    &.euiPopover__panelArrow--top {
-      &:before {
-        bottom: -$euiPopoverArrowSize;
-        border-top-color: $euiShadowColor;
-        clip-path: polygon(#{-$arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation});
-      }
-
-      &:after {
-        bottom: -$euiPopoverArrowSize + 1;
-      }
-    }
-
-    &.euiPopover__panelArrow--right {
-      &:before {
-        border-right-color: $euiShadowColor;
-        clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation});
-      }
-
-      &:after {
-        left: -$euiPopoverArrowSize + 1;
-      }
-    }
-
-    &.euiPopover__panelArrow--bottom {
-      &:before {
-        border-bottom-color: $euiShadowColor;
-        clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} $euiPopoverArrowSize, #{-$arrowShadowCompensation} $euiPopoverArrowSize);
-      }
-
-      &:after {
-        top: -$euiPopoverArrowSize + 1;
-      }
-    }
-
-    &.euiPopover__panelArrow--left {
-      &:before {
-        right: -$euiPopoverArrowSize;
-        border-left-color: $euiShadowColor;
-        clip-path: polygon(0 #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, 0 #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation});
-      }
-
-      &:after {
-        right: -$euiPopoverArrowSize + 1;
-      }
-    }
-  }
-}
-
-
-// Mainly for specificity, but don't add padding to the title if
-// neither the the panel nor the title has a padding modifier (aka NONE)
-.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) {
-  padding: 0;
-}
-
-// Allow the panel padding to actually modify the all side of the title
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) {
-    padding: $amount;
-  }
-}
-
-/**
- * Footer specific overrides
- */
-
-// Mainly for specificity, but don't add padding to the footer if
-// neither the the panel nor the footer has a padding modifier (aka NONE)
-.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) {
-  padding: 0;
-}
-
-// Allow the panel padding to actually modify the all side of the footer
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) {
-    padding: $amount;
-  }
-}
-