@elastic/eui 62.0.0 → 62.1.0

package/src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,79 +0,0 @@
-/**
- * 1. Add vertical space between breadcrumbs,
- *    but make sure the whole breadcrumb set doesn't add space below itself
- */
-
-.euiBreadcrumbs__list {
-  @include euiFontSizeS;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  min-width: 0; // Ensure it shrinks if the window is narrow
-  margin-bottom: -$euiSizeXS; /* 1 */
-}
-
-.euiBreadcrumb {
-  margin-bottom: $euiSizeXS; /* 1 */
-  display: flex;
-  align-items: center;
-
-  &:not(.euiBreadcrumb--last) {
-    color: $euiTextSubduedColor;
-
-    &::after {
-      content: '';
-      margin: $euiSizeXS $euiBreadcrumbSpacing 0;
-      width: 1px;
-      height: $euiSize;
-      transform: translateY(-1px) rotate(15deg);
-      background: $euiColorLightShade;
-      flex-shrink: 0;
-    }
-  }
-}
-
-.euiBreadcrumb--collapsed {
-  flex-shrink: 0;
-}
-
-.euiBreadcrumb--last {
-  font-weight: $euiFontWeightMedium;
-}
-
-.euiBreadcrumbs__inPopover .euiBreadcrumb--last .euiBreadcrumb__content {
-  font-weight: $euiFontWeightRegular;
-  color: $euiTextSubduedColor;
-}
-
-.euiBreadcrumbs--truncate {
-  .euiBreadcrumbs__list {
-    white-space: nowrap;
-    flex-wrap: nowrap;
-  }
-
-  .euiBreadcrumb:not(.euiBreadcrumb--collapsed) {
-    .euiBreadcrumb__content {
-      max-width: $euiBreadcrumbTruncateWidth;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &.euiBreadcrumb--last .euiBreadcrumb__content {
-      max-width: none;
-    }
-  }
-
-  .euiBreadcrumb {
-    overflow: hidden;
-  }
-}
-
-.euiBreadcrumbs--truncate,
-.euiBreadcrumb--truncate {
-  .euiBreadcrumb__content {
-    @include euiTextTruncate;
-    max-width: $euiBreadcrumbTruncateWidth;
-    text-align: center;
-    vertical-align: baseline;
-  }
-}

package/src/components/breadcrumbs/_index.scss

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

package/src/components/breadcrumbs/_variables.scss

@@ -1,2 +0,0 @@
-$euiBreadcrumbSpacing: $euiSizeS !default;
-$euiBreadcrumbTruncateWidth: $euiSize * 10 !default;

package/src/components/description_list/_description_list.scss

@@ -1,211 +0,0 @@
-.euiDescriptionList {
-  // sass-lint:disable-block nesting-depth
-
-  &.euiDescriptionList--row {
-
-    .euiDescriptionList__title {
-      @include euiTitle('xs');
-      line-height: $euiLineHeight;
-      margin-top: $euiSize;
-
-      // Make sure the first <dt> doesn't get a margin.
-      &:first-of-type {
-        margin-top: 0;
-      }
-    }
-
-    .euiDescriptionList__description {
-      @include euiFontSizeS;
-    }
-
-    // Lists can be aligned.
-    &.euiDescriptionList--center {
-      text-align: center;
-    }
-
-    // Reversed makes the description larger than the title
-    &.euiDescriptionList--reverse {
-      .euiDescriptionList__title {
-        @include euiText;
-        @include euiFontSizeS;
-      }
-
-      .euiDescriptionList__description {
-        @include euiTitle('xs');
-      }
-    }
-
-    // Compressed gets smaller fonts.
-    &.euiDescriptionList--compressed {
-
-      .euiDescriptionList__title {
-        @include euiTitle('xxs');
-        line-height: $euiLineHeight;
-      }
-
-      .euiDescriptionList__description {
-        @include euiFontSizeS;
-      }
-
-      &.euiDescriptionList--reverse {
-        .euiDescriptionList__title {
-          @include euiText;
-          @include euiFontSizeS;
-        }
-
-        .euiDescriptionList__description {
-          @include euiTitle('xxs');
-          line-height: $euiLineHeight;
-        }
-      }
-    }
-  }
-
-
-  &.euiDescriptionList--column,
-  &.euiDescriptionList--responsiveColumn {
-    display: flex;
-    align-items: stretch;
-    flex-wrap: wrap;
-
-    > * {
-      margin-top: $euiSize;
-    }
-
-    // First two items don't have margin
-    > *:first-child,
-    > :nth-child(2) {
-      margin-top: 0;
-    }
-
-    .euiDescriptionList__title {
-      @include euiTitle('xs');
-      line-height: $euiLineHeight;
-      width: 50%; // Flex-basis doesn't work in IE with padding
-      padding-right: $euiSizeS;
-    }
-
-    .euiDescriptionList__description {
-      @include euiFontSize;
-      width: 50%; // Flex-basis doesn't work in IE with padding
-      padding-left: $euiSizeS;
-    }
-
-    // Align the title to smash against the description.
-    &.euiDescriptionList--center {
-      .euiDescriptionList__title {
-        text-align: right;
-      }
-    }
-
-    &.euiDescriptionList--reverse {
-      .euiDescriptionList__title {
-        @include euiText;
-        @include euiFontSize;
-      }
-
-      .euiDescriptionList__description {
-        @include euiTitle('xs');
-        line-height: $euiLineHeight;
-      }
-    }
-
-    &.euiDescriptionList--compressed {
-      .euiDescriptionList__title {
-        @include euiTitle('xxs');
-        line-height: $euiLineHeight;
-      }
-
-      .euiDescriptionList__description {
-        @include euiFontSizeS;
-      }
-
-      &.euiDescriptionList--reverse {
-        .euiDescriptionList__title {
-          @include euiText;
-          @include euiFontSizeS;
-        }
-
-        .euiDescriptionList__description {
-          @include euiTitle('xxs');
-          line-height: $euiLineHeight;
-        }
-      }
-    }
-  }
-
-  &.euiDescriptionList--responsiveColumn {
-    @include euiBreakpoint('xs', 's') {
-      display: block;
-
-      .euiDescriptionList__title,
-      .euiDescriptionList__description {
-        width:  100%;
-        padding: 0;
-      }
-
-      .euiDescriptionList__description {
-        @include euiFontSizeS;
-        margin-top: 0;
-      }
-
-      &.euiDescriptionList--center {
-        .euiDescriptionList__title,
-        .euiDescriptionList__description {
-          text-align: center;
-        }
-      }
-
-      &.euiDescriptionList--reverse {
-        .euiDescriptionList__title {
-          @include euiFontSizeS;
-        }
-
-        .euiDescriptionList__description {
-          @include euiTitle('xs');
-        }
-      }
-    }
-  }
-
-  &.euiDescriptionList--inline {
-
-    .euiDescriptionList__title {
-      @include euiFontSizeS;
-      display: inline;
-      border-radius: $euiBorderRadiusSmall;
-      font-weight: $euiFontWeightMedium;
-      background-color: tintOrShade($euiColorLightShade, 50%, 0%);
-      padding:  1px $euiSizeXS;
-      margin: 0 $euiSizeXS;
-
-      // Make sure the first <dt> doesn't get a margin.
-      &:first-of-type {
-        margin-left: 0;
-      }
-    }
-
-    .euiDescriptionList__description {
-      @include euiFontSizeS;
-      display: inline;
-    }
-
-    // Compressed when inline is even smaller.
-    &.euiDescriptionList--compressed {
-
-      .euiDescriptionList__title {
-        @include euiFontSizeXS;
-        padding:  0 $euiSizeXS;
-      }
-
-      .euiDescriptionList__description {
-        @include euiFontSizeXS;
-      }
-    }
-
-    &.euiDescriptionList--center {
-      text-align: center;
-    }
-  }
-
-}

package/src/components/description_list/_index.scss

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

package/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss

@@ -1,8 +0,0 @@
-.euiHeaderBreadcrumbs {
-  @include euiTextTruncate;
-  margin-left: $euiSizeM;
-  margin-right: $euiSizeM;
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-}

package/src/components/header/header_breadcrumbs/_index.scss

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

package/src/components/portal/_index.scss

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

package/src/components/portal/_portal.scss

@@ -1,6 +0,0 @@
-/**
- * 1. Portal content is absolutely positioned (e.g. tooltips, popovers, flyouts).
- */
-.euiBody-hasPortalContent {
-  position: relative; /* 1 */
-}

package/src/components/toast/_global_toast_list.scss

@@ -1,90 +0,0 @@
-/**
- * 1. Allow list to expand as items are added, but cap it at the screen height.
- * 2. Allow some padding for shadow
- */
-.euiGlobalToastList {
-  @include euiScrollBar;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  position: fixed;
-  z-index: $euiZToastList;
-  bottom: 0;
-  width: $euiToastWidth + ($euiSize * 5); /* 2 */
-  max-height: 100vh; /* 1 */
-  overflow-y: auto;
-
-  // Hide the scrollbar entirely
-  // sass-lint:disable-block no-misspelled-properties
-  scrollbar-width: none;
-
-  // sass-lint:disable-block no-vendor-prefixes
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  // The top and bottom padding give height to the list creating a dead-zone effect
-  // when there's no toasts in the list, meaning you can't click anything beneath it.
-  // Only add the padding if there's content.
-  &:not(:empty) {
-    padding: $euiSize;
-  }
-}
-
-.euiGlobalToastList--right:not(:empty) {
-  right: 0;
-  padding-left: $euiSize * 4; /* 2 */
-}
-
-.euiGlobalToastList--left:not(:empty) {
-  left: 0;
-  padding-right: $euiSize * 4; /* 2 */
-}
-
-.euiGlobalToastListItem {
-  margin-bottom: $euiSize;
-  animation: $euiAnimSpeedNormal euiShowToast $euiAnimSlightResistance;
-  opacity: 1;
-
-  /**
-   * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
-   *    items to the bottom instead.
-   */
-  &:first-child {
-    margin-top: auto; /* 1 */
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &.euiGlobalToastListItem-isDismissed {
-    transition: opacity $euiAnimSpeedNormal;
-    opacity: 0;
-  }
-}
-
-@keyframes euiShowToast {
-  from {
-    transform: translateY($euiSizeL) scale(.9);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0) scale(1);
-    opacity: 1;
-  }
-}
-
-@include euiBreakpoint('xs', 's') {
-  /**
-   * 1. Mobile we make these 100%. Matching change happens on the item as well.
-   */
-  .euiGlobalToastList:not(:empty) {
-    left: 0;
-    padding-left: $euiSize;
-    padding-right: $euiSize;
-    width: 100%; /* 1 */
-  }
-}

package/src/components/toast/_index.scss

@@ -1,4 +0,0 @@
-$euiToastWidth: $euiSize * 20;
-
-@import 'global_toast_list';
-@import 'toast';

package/src/components/toast/_toast.scss

@@ -1,103 +0,0 @@
-.euiToast {
-  border: $euiBorderThin;
-  // This overwrites some of the border above
-  // sass-lint:disable-block mixins-before-declarations
-  @include euiBottomShadowLarge;
-
-  position: relative;
-  padding: $euiSize;
-  background-color: $euiColorEmptyShade;
-  width: 100%;
-
-  &:hover .euiToast__closeButton,
-  &:focus .euiToast__closeButton {
-    opacity: 1;
-  }
-}
-
-/**
-  * 1. Fit button to icon.
-  */
-.euiToast__closeButton {
-  position: absolute;
-  top: $euiSize;
-  right: $euiSize;
-  line-height: 0; /* 1 */
-  appearance: none;
-  opacity: 0;
-  transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  svg {
-    fill: tintOrShade($euiTitleColor, 50%, 70%);
-  }
-
-  &:hover {
-    svg {
-      fill: $euiTitleColor;
-    }
-  }
-
-  &:focus {
-    background-color: $euiFocusBackgroundColor;
-    opacity: 1;
-
-    svg {
-      fill: $euiColorPrimary;
-    }
-  }
-}
-
-// Modifier naming and colors.
-$euiToastTypes: (
-  primary: makeGraphicContrastColor($euiColorPrimary, $euiColorEmptyShade),
-  success: makeGraphicContrastColor($euiColorSuccess, $euiColorEmptyShade),
-  warning: makeGraphicContrastColor($euiColorWarning, $euiColorEmptyShade),
-  danger: makeGraphicContrastColor($euiColorDanger, $euiColorEmptyShade),
-);
-
-// Create button modifiers based upon the map.
-@each $name, $color in $euiToastTypes {
-  .euiToast--#{$name} {
-    border-top: 2px solid $color;
-  }
-}
-
-/**
- * 1. Align icon with first line of title text if it wraps.
- * 2. Apply margin to all but last item in the flex.
- * 3. Account for close button.
- */
-.euiToastHeader {
-  padding-right: $euiSizeL; /* 3 */
-  display: flex;
-  align-items: baseline; /* 1 */
-
-  > * + * {
-    margin-left: $euiSizeS; /* 2 */
-  }
-}
-
-/**
-  * 1. Vertically center icon with first line of title.
-  */
-.euiToastHeader__icon {
-  flex: 0 0 auto;
-  fill: $euiTitleColor;
-  transform: translateY(2px); /* 1 */
-}
-
-.euiToastHeader__title {
-  @include euiTitle('xs');
-  font-weight: $euiFontWeightLight;
-}
-
-.euiToastHeader--withBody {
-  margin-bottom: $euiSizeS;
-}
-
-/**
- * 1. Prevent long lines from overflowing.
- */
-.euiToastBody {
-  word-wrap: break-word; /* 1 */
-}

package/src/components/token/_index.scss

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

package/src/components/token/_token.scss

@@ -1,85 +0,0 @@
-.euiToken {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    height: 100%;
-    margin: auto;
-  }
-}
-
-.euiToken--circle {
-  border-radius: 50%;
-}
-
-.euiToken--square {
-  // These are pretty small elements, the standard size
-  // is just slightly too large.
-  border-radius: $euiBorderRadius - 1px;
-}
-
-.euiToken--xsmall {
-  width: $euiSizeM;
-  height: $euiSizeM;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeXS;
-  }
-}
-
-.euiToken--small {
-  width: $euiSize;
-  height: $euiSize;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeXS;
-  }
-}
-
-.euiToken--medium {
-  width: $euiSizeL;
-  height: $euiSizeL;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeS;
-  }
-}
-
-.euiToken--large {
-  width: $euiSizeXL;
-  height: $euiSizeXL;
-
-  &.euiToken--rectangle {
-    padding: 0 ($euiSize * .5);
-  }
-}
-
-.euiToken--rectangle {
-  box-sizing: content-box;
-}
-
-@each $type in $euiTokenTypeKeys {
-  .euiToken--#{$type} {
-    $color: map-get(map-get($euiTokenTypes, $type), 'graphic');
-    $backgroundColor: tintOrShade($color, 90%, 70%);
-    $fillColor: makeHighContrastColor($color, $backgroundColor);
-
-    // Without a background, the fill color should be the graphic color
-    color: $color;
-
-    &.euiToken--light {
-      color: $fillColor;
-      background-color: $backgroundColor;
-      box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 60%);
-    }
-
-    // Dark tokens uses the main color as the background against light or dark text
-    $color: map-get(map-get($euiTokenTypes, $type), 'behindText');
-
-    &.euiToken--dark {
-      background-color: $color;
-      color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
-    }
-  }
-}

package/src/components/token/_variables.scss

@@ -1,13 +0,0 @@
-// sass-lint:disable indentation
-
-$euiTokenGrayColor: lightOrDarkTheme($euiColorDarkShade, $euiColorMediumShade);
-
-// Appends the gray color to the color blind palette
-$euiTokenTypes: map-merge($euiPaletteColorBlind, (
-  'gray': (
-    graphic: $euiTokenGrayColor,
-    behindText: $euiTokenGrayColor,
-  )
-));
-
-$euiTokenTypeKeys: map-keys($euiTokenTypes);

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

@@ -1,71 +0,0 @@
-// sass-lint:disable nesting-depth
-
-.euiHeaderBreadcrumbs {
-  line-height: $euiSize;
-  margin-left: $euiSizeS;
-  margin-right: $euiSizeS;
-
-  // Only the header breadcrumbs get the new Amsterdam style so that there can
-  // still be default text only breadcrumbs for places like EuiControlBar
-  .euiBreadcrumb__content {
-    @include euiButtonDefaultStyle($euiTextColor);
-    font-size: $euiFontSizeXS;
-    line-height: $euiSize;
-    font-weight: $euiFontWeightMedium;
-    padding: $euiSizeXS $euiSize;
-    clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%);
-
-    &.euiLink {
-      @include euiButtonDefaultStyle($euiColorPrimary);
-
-      &:focus {
-        @include euiFocusRing(null, 'inner');
-
-        // Turn clip path off and add full border-radius when in focus so the focus ring looks correct.
-        // This won't work in Safari, but that's ok
-        &:focus-visible {
-          border-radius: $euiBorderRadius;
-          clip-path: none;
-        }
-      }
-    }
-  }
-
-  .euiBreadcrumb {
-    // Remove separator
-    &::after {
-      display: none;
-    }
-
-    &:not(.euiBreadcrumb--last) {
-      margin-right: -$euiSizeXS;
-    }
-
-    &:first-child {
-      .euiBreadcrumb__content {
-        padding-left: $euiSizeM;
-        border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
-        clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%);
-      }
-    }
-
-    // In case the item is first AND last, aka only, just make it a fully rounded item.
-    // Needs to come after `:first-child` for specificity
-    &:only-child {
-      .euiBreadcrumb__content {
-        clip-path: none;
-        padding-left: $euiSizeM;
-        padding-right: $euiSizeM;
-        border-radius: $euiBorderRadius;
-      }
-    }
-  }
-
-  .euiBreadcrumb--last {
-    .euiBreadcrumb__content {
-      border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
-      padding-right: $euiSizeM;
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%);
-    }
-  }
-}