@elastic/eui 68.0.0 → 70.0.0

package/src/components/code/_mixins.scss

@@ -1,127 +0,0 @@
-@mixin euiCodeSyntaxTokens {
-  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {
-    opacity: .7;
-  }
-
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata,
-  .token.coord,
-  .token.blockquote {
-    color: $euiCodeBlockCommentColor;
-    font-style: italic;
-  }
-
-  .token.selector {
-    color: $euiCodeBlockSelectorTagColor;
-  }
-
-  .token.string,
-  .token.interpolation,
-  .token.interpolation-punctuation,
-  .token.doc-comment .token.keyword,
-  .token.attr-value,
-  .token.url .token.content {
-    color: $euiCodeBlockStringColor;
-  }
-
-  .token.number,
-  .token.boolean,
-  .token.keyword.nil,
-  .token.regex,
-  .token.variable,
-  .token.unit,
-  .token.hexcode,
-  .token.attr-name,
-  .token.attr-equals {
-    color: $euiCodeBlockNumberColor;
-  }
-
-  .token.atrule .token.rule,
-  .token.keyword {
-    color: $euiCodeBlockKeywordColor;
-  }
-
-  .token.function {
-    color: $euiCodeBlockFunctionTitleColor;
-  }
-
-  .token.tag {
-    color: $euiCodeBlockTagColor;
-  }
-
-  .token.class-name {
-    color: $euiCodeBlockTypeColor;
-  }
-
-  .token.property {
-    color: $euiCodeBlockAttributeColor;
-  }
-
-  .token.console,
-  .token.list-punctuation,
-  .token.url-reference,
-  .token.url .token.url {
-    color: $euiCodeBlockSymbolColor;
-  }
-
-  .token.paramater {
-    color: $euiCodeBlockParamsColor;
-  }
-
-  .token.meta,
-  .token.important {
-    color: $euiCodeBlockMetaColor;
-  }
-
-  .token.title {
-    color: $euiCodeBlockTitleColor;
-  }
-
-  .token.section {
-    color: $euiCodeBlockSectionColor;
-  }
-
-  .token.prefix.inserted,
-  .token.prefix.deleted {
-    padding-left: $euiSizeXS;
-    margin-left: -$euiSizeXS;
-  }
-
-  .token.prefix.inserted {
-    box-shadow: -$euiSizeXS 0 $euiCodeBlockAdditionColor;
-    color: $euiCodeBlockAdditionColor;
-  }
-
-  .token.prefix.deleted {
-    box-shadow: -$euiSizeXS 0 $euiCodeBlockDeletionColor;
-    color: $euiCodeBlockDeletionColor;
-  }
-
-  .token.selector .token.class {
-    color: $euiCodeBlockSelectorClassColor;
-  }
-
-  .token.selector .token.id {
-    color: $euiCodeBlockSelectorIdColor;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: $euiCodeFontWeightBold;
-  }
-
-  .token.url-reference,
-  .token.url .token.url {
-    text-decoration: underline;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-}

package/src/components/code/_variables.scss

@@ -1,5 +0,0 @@
-$euiCodeBlockPaddingModifiers: (
-  'paddingSmall':  $euiSizeS,
-  'paddingMedium': $euiSize,
-  'paddingLarge':  $euiSizeL
-) !default;

package/src/components/flex/_flex_grid.scss

@@ -1,99 +0,0 @@
-.euiFlexGrid {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 0;
-
-  > .euiFlexItem {
-    flex-grow: 0;
-
-    &.euiFlexItem--flexGrowZero {
-      // sass-lint:disable-block no-important
-      flex-grow: 0 !important;
-      flex-basis: auto !important;
-    }
-  }
-}
-
-/**
-  * 1. For vertical layouts we use columns instead of flex
-  */
-.euiFlexGrid--directionColumn {
-  display: block; /* 1 */
-  column-gap: 0; // The "gap" comes from the margin around the item
-
-  > .euiFlexItem {
-    display: inline-block; /* 1 */
-    line-height: initial; // Ensures the item itself doesn't impose any height
-  }
-}
-
-$gutterTypes: (
-  // We're using calc which requires the px unit
-  gutterNone: 0px, // sass-lint:disable-line zero-unit
-  gutterSmall: $euiSizeS,
-  gutterMedium: $euiSize,
-  gutterLarge: $euiSizeL,
-  gutterXLarge: $euiSizeXL,
-);
-
-$fractions: (
-  fourths: (
-    percentage: 25%,
-    count: 4,
-  ),
-  thirds: (
-    percentage: 33.3%,
-    count: 3,
-  ),
-  halves: (
-    percentage: 50%,
-    count: 2,
-  ),
-  single: (
-    percentage: 100%,
-    count: 1,
-  ),
-);
-
-@each $gutterName, $gutterSize in $gutterTypes {
-  $halfGutterSize: $gutterSize * .5;
-
-  /**
-   * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
-   * without columns.
-   */
-  .euiFlexGrid--#{$gutterName} {
-    margin: -$halfGutterSize;
-    align-items: stretch;
-
-    > .euiFlexItem {
-      margin: $halfGutterSize;
-    }
-  }
-
-  @each $fraction, $map in $fractions {
-    .euiFlexGrid--#{$gutterName}.euiFlexGrid--#{$fraction} {
-      > .euiFlexItem {
-        flex-basis: calc(#{map-get($map, 'percentage')} - #{$gutterSize});
-      }
-
-      &.euiFlexGrid--directionColumn { /* 1 */
-        column-count: map-get($map, 'count');
-
-        > .euiFlexItem {
-          width: calc(100% - #{$gutterSize});
-        }
-      }
-    }
-  }
-}
-
-
-@include euiBreakpoint('xs', 's') {
-  .euiFlexGrid.euiFlexGrid--responsive {
-    // sass-lint:disable-block no-important
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    column-count: 1 !important;
-  }
-}

package/src/components/flex/_flex_group.scss

@@ -1,100 +0,0 @@
-.euiFlexGroup {
-  display: flex;
-  align-items: stretch;
-  flex-grow: 1; // Grow nested flex-groups by default
-
-  .euiFlexItem {
-    flex-grow: 1;
-    flex-basis: 0%;
-  }
-}
-
-$gutterTypes: (
-  gutterExtraSmall: $euiSizeXS,
-  gutterSmall: $euiSizeS,
-  gutterMedium: $euiSize,
-  gutterLarge: $euiSizeL,
-  gutterExtraLarge: $euiSizeXXL,
-);
-
-// Gutter Sizes
-@each $gutterName, $gutterSize in $gutterTypes {
-  $halfGutterSize: $gutterSize * .5;
-
-  .euiFlexGroup--#{$gutterName} {
-    margin: -$halfGutterSize;
-
-    & > .euiFlexItem {
-      margin: $halfGutterSize;
-    }
-  }
-}
-
-// Justify the grid
-.euiFlexGroup--justifyContentSpaceEvenly {
-  justify-content: space-evenly;
-}
-
-.euiFlexGroup--justifyContentSpaceBetween {
-  justify-content: space-between;
-}
-
-.euiFlexGroup--justifyContentSpaceAround {
-  justify-content: space-around;
-}
-
-.euiFlexGroup--justifyContentCenter {
-  justify-content: center;
-}
-
-.euiFlexGroup--justifyContentFlexEnd {
-  justify-content: flex-end;
-}
-
-// Align Items
-.euiFlexGroup--alignItemsFlexStart {
-  align-items: flex-start;
-}
-
-.euiFlexGroup--alignItemsCenter {
-  align-items: center;
-}
-
-.euiFlexGroup--alignItemsFlexEnd {
-  align-items: flex-end;
-}
-
-.euiFlexGroup--alignItemsBaseline {
-  align-items: baseline;
-}
-
-// Direction
-
-.euiFlexGroup--directionRow {
-  flex-direction: row;
-}
-
-.euiFlexGroup--directionRowReverse {
-  flex-direction: row-reverse;
-}
-
-.euiFlexGroup--directionColumn {
-  flex-direction: column;
-}
-
-.euiFlexGroup--directionColumnReverse {
-  flex-direction: column-reverse;
-}
-
-// Wrap
-.euiFlexGroup--wrap {
-  flex-wrap: wrap;
-}
-
-@include euiBreakpoint('xs', 's') {
-  .euiFlexGroup--responsive {
-    flex-wrap: wrap;
-    margin-left: 0;
-    margin-right: 0;
-  }
-}

package/src/components/flex/_flex_item.scss

@@ -1,35 +0,0 @@
-/**
- * 1. Allow EuiPanels to expand to fill the item.
- */
-.euiFlexItem {
-  display: flex; /* 1 */
-  flex-direction: column; /* 1 */
-
-  /*
-   * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
-   * 2. FlexItem can be manually set to not grow if needed.
-   */
-  &.euiFlexItem--flexGrowZero { /* 1 */
-    flex-grow: 0; /* 2 */
-    flex-basis: auto; /* 2 */
-  }
-
-  @for $i from 1 through 10 {
-    &.euiFlexItem--flexGrow#{$i} {
-      flex-grow: $i;
-    }
-  }
-}
-
-// On mobile we force them to stack and act the same.
-@include euiBreakpoint('xs', 's') {
-  .euiFlexGroup--responsive > .euiFlexItem,
-  .euiFlexGrid--responsive > .euiFlexItem {
-    // sass-lint:disable-block no-important
-    width: 100% !important;
-    flex-basis: 100% !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    margin-bottom: $euiSize !important;
-  }
-}

package/src/components/flex/_index.scss

@@ -1,3 +0,0 @@
-@import 'flex_group';
-@import 'flex_grid';
-@import 'flex_item';

package/src/components/resizable_container/_resizable_container.scss

@@ -1,8 +0,0 @@
-.euiResizableContainer {
-  display: flex;
-  width: 100%;
-
-  &--vertical {
-    flex-direction: column;
-  }
-}

package/src/components/resizable_container/_resizable_panel.scss

@@ -1,51 +0,0 @@
-.euiResizablePanel {
-  position: relative;
-}
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiResizablePanel--#{$modifier} {
-    padding: $amount;
-  }
-}
-
-.euiResizablePanel__content {
-  height: 100%;
-
-  // Manually remove the border for default theme
-  &:not([class*='plain']) {
-    border-width: 0;
-  }
-}
-
-.euiResizablePanel__content--scrollable {
-  @include euiScrollBar;
-  overflow-y: auto;
-}
-
-.euiResizablePanel-isCollapsed {
-  overflow: hidden;
-
-  .euiResizablePanel__content * {
-    display: none;
-  }
-}
-
-.euiResizableContainer--horizontal {
-  .euiResizablePanel-isCollapsed {
-    min-width: 0 !important; // sass-lint:disable-line no-important
-  }
-
-  .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed {
-    min-width: $euiSizeL !important; // sass-lint:disable-line no-important
-  }
-}
-
-.euiResizableContainer--vertical {
-  .euiResizablePanel-isCollapsed {
-    min-height: 0 !important; // sass-lint:disable-line no-important
-  }
-
-  .euiResizablePanel--collapsible.euiResizablePanel-isCollapsed {
-    min-height: $euiSizeL !important; // sass-lint:disable-line no-important
-  }
-}

package/src/global_styling/variables/_colors_code.scss

@@ -1,23 +0,0 @@
-// Code
-$euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
-$euiCodeBlockColor: makeHighContrastColor($euiTextColor, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockSelectedBackgroundColor: inherit !default;
-$euiCodeBlockCommentColor: makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockSelectorTagColor: inherit !default;
-$euiCodeBlockStringColor: makeHighContrastColor($euiColorVis2, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockTagColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockNameColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockNumberColor: makeHighContrastColor($euiColorVis0, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockKeywordColor: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockFunctionTitleColor: inherit !default;
-$euiCodeBlockTypeColor: makeHighContrastColor($euiColorVis1, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockAttributeColor: inherit !default;
-$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorVis9, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockParamsColor: inherit !default;
-$euiCodeBlockMetaColor:  makeHighContrastColor($euiTextSubduedColor, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockTitleColor: makeHighContrastColor($euiColorVis7, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockSectionColor: makeHighContrastColor($euiColorVis9, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockAdditionColor: makeHighContrastColor($euiColorVis0, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockDeletionColor: makeHighContrastColor($euiColorDanger, $euiCodeBlockBackgroundColor) !default;
-$euiCodeBlockSelectorClassColor: inherit !default;
-$euiCodeBlockSelectorIdColor: inherit !default;

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

@@ -1,9 +0,0 @@
-.euiCode {
-  border-radius: $euiBorderRadiusSmall;
-  font-weight: $euiCodeFontWeightBold;
-  color: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor);
-}
-
-.euiCodeBlock.euiCodeBlock--fontLarge {
-  font-size: $euiFontSizeM;
-}