@elastic/eui 62.0.3 → 63.0.0

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/page/_mixins.scss

@@ -1,12 +0,0 @@
-@mixin euiPageRestrictWidth {
-  &--restrictWidth-default,
-  &--restrictWidth-custom {
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-  }
-
-  &--restrictWidth-default {
-    max-width: $euiPageDefaultMaxWidth;
-  }
-}

package/src/components/page/_page.scss

@@ -1,41 +0,0 @@
-.euiPage {
-  @include euiPageRestrictWidth;
-  display: flex;
-  background-color: $euiPageBackgroundColor;
-  flex-shrink: 0; // Ensures Safari doesn't shrink height beyond contents
-  max-width: 100%; // Ensures Firefox doesn't expand width beyond bounds
-
-  &--grow {
-    flex-grow: 1;
-  }
-
-  &--column {
-    flex-direction: column;
-  }
-
-  @include euiBreakpoint('xs', 's') {
-    flex-direction: column;
-  }
-}
-
-// Uses the same values as EuiPanel
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPage--#{$modifier} {
-    padding: $amount;
-
-    .euiPageSideBar {
-      min-width: $euiPageSidebarMinWidth;
-      margin-right: $amount;
-
-      // sass-lint:disable-block mixins-before-declarations
-      @include euiBreakpoint('xs', 's') {
-        margin-right: 0;
-        margin-bottom: $amount;
-      }
-    }
-
-    .euiPageBody > .euiPageHeader {
-      margin-bottom: $amount;
-    }
-  }
-}

package/src/components/page/page_body/_index.scss

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

package/src/components/page/page_body/_page_body.scss

@@ -1,45 +0,0 @@
-.euiPageBody {
-  @include euiPageRestrictWidth;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  flex: 1 1 100%;
-  // Make sure that inner flex layouts don't get larger than this container
-  max-width: 100%;
-  min-width: 0;
-  // Commenting out for posterity
-  // Adding z-index disallows fullscreens like EuiDataGrid to get above the headers
-  // z-index: 1; // Ensures any side nav emphasis gets rendered under shadow
-
-  // Assumes that in the default theme, the borders are touching the edge of the EuiPage so remove them.
-  &.euiPageBody--borderRadiusNone { // Nested for specificity
-    border-top-width: 0;
-    border-right-width: 0;
-    border-bottom-width: 0;
-  }
-}
-
-// Uses the same values as EuiPanel
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPageBody--#{$modifier} {
-    padding: $amount;
-
-    & > .euiPageHeader:not([class*='--padding']) {
-      // Match the body's padding for spacing if it doesn't have it's own
-      margin-bottom: $amount;
-      // When the page header is actually inside of a panelled page body,
-      // We want to add some extra separation between it and the content body
-      border-bottom: $euiBorderThin;
-
-      &:not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) {
-        padding-bottom: $amount;
-      }
-    }
-
-    // When only tabs, remove all padding
-    & > .euiPageHeader.euiPageHeader--onlyTabs {
-      padding-top: 0;
-    }
-  }
-}
-

package/src/components/page/page_header/_index.scss

@@ -1,3 +0,0 @@
-@import 'page_header';
-@import 'page_header_content';
-@import 'page_header_section';

package/src/components/page/page_header/_page_header.scss

@@ -1,78 +0,0 @@
-/**
- * Note: Bottom margin is added in _page.scss when EuiPage has `paddingSize`
- *       Or it's added in _page_body.scss when EuiPageBody has `paddingSize`
- */
-
-.euiPageHeader {
-  @include euiPageRestrictWidth;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0; // Ensures Safari doesn't shrink beyond contents
-}
-
-.euiPageHeader--bottomBorder {
-  border-bottom: $euiBorderThin;
-
-  &:not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) {
-    // Default padding to separate contents (unless there's tabs)
-    padding-bottom: map-get($euiPanelPaddingModifiers, 'paddingLarge');
-  }
-}
-
-// When there's only tabs, make them and take up the "whole" vertical space
-.euiPageHeader--onlyTabs {
-  padding-top: $euiSizeS;
-
-  .euiTabs--xlarge .euiTab {
-    line-height: $euiSize * 4.5;
-    height: $euiSize * 4.5;
-  }
-}
-
-// Uses the same values as EuiPanel
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPageHeader--#{$modifier} {
-    padding: $amount;
-
-    // Use margin if there are tabs to keep border close to tabs
-    &.euiPageHeader--tabsAtBottom,
-    &.euiPageHeader--onlyTabs {
-      padding-bottom: 0;
-    }
-
-    // When only tabs, use the same padding top for all padding sizes
-    &.euiPageHeader--onlyTabs {
-      padding-top: $euiSizeS;
-    }
-
-    &.euiPageHeader--tabsAtBottom.euiPageHeader--bottomBorder,
-    &.euiPageHeader--onlyTabs.euiPageHeader--bottomBorder {
-      margin-bottom: $amount;
-    }
-  }
-}
-
-.euiPageHeader--top {
-  align-items: flex-start;
-}
-
-.euiPageHeader--bottom {
-  align-items: flex-end;
-}
-
-.euiPageHeader--stretch {
-  align-items: stretch;
-}
-
-@include euiBreakpoint('xs', 's') {
-  .euiPageHeader--responsive {
-    flex-direction: column;
-  }
-
-  .euiPageHeader--responsiveReverse {
-    flex-direction: column-reverse;
-  }
-}

package/src/components/page/page_header/_page_header_content.scss

@@ -1,15 +0,0 @@
-.euiPageHeader .euiPageHeaderContent {
-  width: 100%;
-}
-
-.euiPageHeaderContent__titleIcon {
-  top: -$euiSizeXS;
-  position: relative;
-  margin-right: $euiSize;
-}
-
-@include euiBreakpoint('m', 'l', 'xl') {
-  .euiPageHeaderContent__rightSideItems {
-    flex-direction: row-reverse;
-  }
-}

package/src/components/page/page_header/_page_header_section.scss

@@ -1,26 +0,0 @@
-.euiPageHeaderSection:not(:first-of-type) {
-  margin-left: $euiSizeXL;
-}
-
-@include euiBreakpoint('xs', 's') {
-  .euiPageHeader--responsive .euiPageHeaderSection {
-    width: 100%;
-
-    &:not(:first-of-type) {
-      margin-left: 0;
-      margin-top: $euiSize;
-    }
-  }
-
-  .euiPageHeader--responsiveReverse .euiPageHeaderSection {
-    width: 100%;
-
-    &:not(:first-of-type) {
-      margin-left: 0;
-    }
-
-    &:not(:last-of-type) {
-      margin-top: $euiSize;
-    }
-  }
-}

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