@elastic/eui 67.1.2 → 68.0.0

package/src/components/badge/beta_badge/_beta_badge.scss

@@ -1,91 +0,0 @@
-.euiBetaBadge {
-  display: inline-block;
-  padding: 0 $euiSize;
-  border-radius: $euiSizeL;
-  box-shadow: inset 0 0 0 1px $euiBorderColor;
-  vertical-align: super; // if displayed inline with text
-
-  font-size: $euiFontSizeXS;
-  font-weight: $euiFontWeightBold;
-  text-transform: uppercase;
-  letter-spacing: .05em;
-  line-height: $euiSizeL;
-  text-align: center;
-  white-space: nowrap;
-  cursor: default;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:focus {
-    @include euiFocusRing;
-    // Can't use `currentColor` because of possible white text, so always keep it black
-    outline-color: lightOrDarkTheme($euiColorInk, $euiColorGhost);
-    // The rounded corners of the badge doesn't match well with the outline, so push it outward
-    outline-offset: 2px;
-  }
-
-  &:not(.euiBetaBadge--hollow) {
-    box-shadow: none;
-  }
-
-  &.euiBetaBadge--small {
-    @include fontSize($euiFontSize * .625);
-    line-height: $euiSize + $euiSizeXS;
-    padding: 0 $euiSizeM;
-  }
-}
-
-// When it's just an icon, make it a circle
-.euiBetaBadge--iconOnly {
-  padding: 0;
-  width: $euiSizeL;
-
-  .euiBetaBadge__icon {
-    position: relative;
-    transform: translate(0, -1px);
-  }
-
-  &.euiBetaBadge--small {
-    width: $euiSize + $euiSizeXS;
-    padding: 0;
-  }
-}
-
-.euiBetaBadge--singleLetter {
-  padding: 0;
-  width: $euiSizeL;
-
-  &.euiBetaBadge--small {
-    width: $euiSize + $euiSizeXS;
-    padding: 0;
-  }
-}
-
-.euiBetaBadge--subdued {
-  $backgroundColor: tint($euiColorLightShade, 30%);
-  background: $backgroundColor;
-  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
-
-  &.euiBetaBadge-isClickable {
-    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
-  }
-}
-
-.euiBetaBadge--hollow {
-  background-color: $euiColorEmptyShade;
-
-  &.euiBetaBadge-isClickable {
-    $backgroundColor: tint($euiColorLightShade, 30%);
-    color: chooseLightOrDarkText($euiColorEmptyShade, $euiColorGhost, $euiColorInk);
-  }
-}
-
-.euiBetaBadge--accent {
-  $backgroundColor: $euiColorAccentText;
-  background: $backgroundColor;
-  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
-
-  &.euiBetaBadge-isClickable {
-    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
-  }
-}

package/src/components/badge/beta_badge/_index.scss

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

package/src/components/badge/notification_badge/_index.scss

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

package/src/components/badge/notification_badge/_notification_badge.scss

@@ -1,34 +0,0 @@
-.euiNotificationBadge {
-  flex-shrink: 0; // Ensures it never scales down below its intended size
-  display: inline-block;
-  border-radius: $euiBorderRadius;
-  font-size: $euiFontSizeXS;
-  font-weight: $euiFontWeightMedium;
-  line-height: $euiSize;
-  height: $euiSize;
-  min-width: $euiSize;
-  padding-left: $euiSizeXS;
-  padding-right: $euiSizeXS;
-  vertical-align: middle;
-  text-align: center;
-  transition: all $euiAnimSpeedFast ease-in;
-  cursor: default;
-
-  $backgroundColor: $euiColorAccentText;
-  background: $backgroundColor;
-  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
-}
-
-.euiNotificationBadge--medium {
-  // Increase the default size a bit
-  $size: $euiSize + $euiSizeXS;
-  line-height: $size;
-  height: $size;
-  min-width: $euiSizeL;
-}
-
-.euiNotificationBadge--subdued {
-  $backgroundColor: tint($euiColorLightShade, 30%);
-  background: $backgroundColor;
-  color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
-}

package/src/components/list_group/_index.scss

@@ -1,5 +0,0 @@
-@import 'variables';
-
-@import 'list_group';
-@import 'list_group_item';
-@import 'pinnable_list_group/index';

package/src/components/list_group/_list_group.scss

@@ -1,32 +0,0 @@
-/**
- * The List Group component provides neatly styled lists containing plain text
- * or links. The outer container can be bordered, with padding, or borderless
- * with links flush to the sides.
- */
-
-.euiListGroup {
-  &.euiListGroup-flush {
-    padding: 0;
-    border: none;
-  }
-
-  &.euiListGroup-bordered {
-    border-radius: $euiBorderRadius;
-    border: $euiBorderThin;
-  }
-}
-
-.euiListGroup-maxWidthDefault {
-  max-width: $euiFormMaxWidth;
-}
-
-// Gutter Sizes
-@each $gutterName, $gutterSize in $euiListGroupGutterTypes {
-  .euiListGroup--#{$gutterName} {
-    padding: $gutterSize;
-
-    .euiListGroupItem:not(:first-of-type) {
-      margin-top: $gutterSize;
-    }
-  }
-}

package/src/components/list_group/_list_group_item.scss

@@ -1,151 +0,0 @@
-.euiListGroupItem {
-  padding: 0;
-  border-radius: $euiBorderRadius;
-  display: flex;
-  align-items: center;
-  transition: background-color $euiAnimSpeedFast;
-  position: relative;
-
-  &.euiListGroupItem-isActive,
-  &.euiListGroupItem-isClickable:hover,
-  &.euiListGroupItem-isClickable:focus-within {
-    background-color: $euiListGroupItemHoverBackground;
-  }
-
-  &.euiListGroupItem--ghost {
-    &.euiListGroupItem-isClickable:hover,
-    &.euiListGroupItem-isClickable:focus-within {
-      background-color: $euiListGroupItemHoverBackgroundGhost;
-    }
-  }
-
-  &.euiListGroupItem-isClickable:hover .euiListGroupItem__button,
-  .euiListGroupItem__button:hover,
-  .euiListGroupItem__button:focus {
-    text-decoration: underline;
-  }
-
-  // Style all disabled list items whether or not they are links or buttons
-  &.euiListGroupItem-isDisabled,
-  &.euiListGroupItem-isDisabled:hover,
-  &.euiListGroupItem-isDisabled:focus,
-  &.euiListGroupItem-isDisabled .euiListGroupItem__button:hover,
-  &.euiListGroupItem-isDisabled .euiListGroupItem__button:focus {
-    color: $euiButtonColorDisabled;
-    cursor: not-allowed;
-    background-color: transparent;
-    text-decoration: none;
-  }
-}
-
-.euiListGroupItem__text,
-.euiListGroupItem__button {
-  line-height: $euiSizeL;
-  padding: $euiSizeXS $euiSizeS;
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  text-align: left;
-  max-width: 100%;
-  font-weight: inherit;
-
-  .euiListGroupItem-hasExtraAction & {
-    max-width: calc(100% - #{$euiSizeXL});
-  }
-
-  @each $colorName, $color in $euiListGroupItemColorTypes {
-    .euiListGroupItem--#{$colorName} &:not(:disabled) {
-      color: $color;
-    }
-  }
-
-  .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) & {
-    color: $euiTextColor;
-  }
-}
-
-.euiListGroupItem__label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.euiListGroupItem__extraAction {
-  opacity: 0;
-  margin-right: $euiSizeS;
-  transition: opacity $euiAnimSpeedFast;
-
-  .euiListGroupItem:not(.euiListGroupItem-isDisabled):focus &,
-  .euiListGroupItem:not(.euiListGroupItem-isDisabled):hover &,
-  &.euiListGroupItem__extraAction-alwaysShow,
-  &:focus {
-    opacity: 1;
-  }
-}
-
-.euiListGroupItem__icon {
-  margin-right: $euiSizeM;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-// Font sizes
-@each $sizeName, $fontSize in $euiListGroupItemSizeTypes {
-  .euiListGroupItem--#{$sizeName} {
-    font-size: $fontSize;
-  }
-}
-
-.euiListGroupItem--xSmall,
-.euiListGroupItem--small {
-  font-weight: $euiFontWeightMedium;
-  letter-spacing: 0;
-}
-
-.euiListGroupItem--xSmall {
-  .euiListGroupItem__button,
-  .euiListGroupItem__text {
-    line-height: $euiSize;
-  }
-}
-
-.euiListGroupItem--large {
-  .euiListGroupItem__button,
-  .euiListGroupItem__text {
-    line-height: $euiSizeXL;
-  }
-}
-
-.euiListGroupItem--wrapText {
-  .euiListGroupItem__button,
-  .euiListGroupItem__text {
-    width: 100%;
-    word-break: break-word;
-  }
-
-  .euiListGroupItem__label {
-    white-space: inherit;
-  }
-}
-
-// Layout alts from euiListGroup
-
-.euiListGroup-flush .euiListGroupItem {
-  border-radius: 0;
-}
-
-.euiListGroup-bordered .euiListGroupItem {
-  &:first-child {
-    border-top-left-radius: $euiBorderRadius;
-    border-top-right-radius: $euiBorderRadius;
-  }
-
-  &:last-child {
-    border-bottom-left-radius: $euiBorderRadius;
-    border-bottom-right-radius: $euiBorderRadius;
-  }
-}
-
-.euiListGroupItem__tooltip {
-  width: 100%;
-}

package/src/components/list_group/_variables.scss

@@ -1,21 +0,0 @@
-$euiListGroupItemHoverBackground: transparentize($euiColorLightShade, .75);
-$euiListGroupItemHoverBackgroundGhost: transparentize($euiColorGhost, .9);
-
-$euiListGroupGutterTypes: (
-  gutterSmall: $euiSizeS,
-  gutterMedium: $euiSize,
-);
-
-$euiListGroupItemColorTypes: (
-  primary: $euiColorPrimaryText,
-  text: $euiTextColor,
-  subdued: $euiTextSubduedColor,
-  ghost: $euiColorGhost,
-);
-
-$euiListGroupItemSizeTypes: (
-  xSmall: $euiFontSizeXS,
-  small: $euiFontSizeS,
-  medium: $euiFontSize,
-  large: $euiFontSizeL,
-);

package/src/components/list_group/pinnable_list_group/_index.scss

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

package/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss

@@ -1,9 +0,0 @@
-.euiPinnableListGroup__itemExtraAction {
-  svg {
-    transform: rotate(45deg);
-  }
-}
-
-.euiPinnableListGroup__itemExtraAction-pinned:not(:hover):not(:focus) {
-  color: makeGraphicContrastColor($euiColorLightShade);
-}

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

@@ -1,47 +0,0 @@
-// Removes some box-shadows
-@mixin euiFormControlFocusStyle($borderOnly: false) {
-  // sass-lint:disable-block indentation, empty-args
-  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
-  background-image: euiFormControlGradient();
-  background-size: 100% 100%; // 1
-  outline: none; // Blanket remove all outlines relying on our own bottom border
-
-  @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  } @else {
-    box-shadow:
-      inset 0 0 0 1px $euiFormBorderColor;
-  }
-}
-
-// Removes euiSlightShadow
-@mixin euiCustomControl($type: null, $size: $euiSize) {
-  @if $size {
-    $size: $size - 2px; // subtract 2px from size to account for border size
-    padding: $size / 2;
-  }
-
-  border: 1px solid $euiFormCustomControlBorderColor;
-  background: $euiColorEmptyShade no-repeat center;
-
-  @if $type == 'round' {
-    border-radius: $size;
-  } @else if $type == 'square' {
-    border-radius: $euiCheckboxBorderRadius;
-  }
-  // sass-lint:disable-block indentation
-  transition: background-color $euiAnimSpeedFast ease-in,
-              border-color $euiAnimSpeedFast ease-in;
-}
-
-// Adjusts form controls border radius
-@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
-  @if $internal == true {
-    $borderRadius: $borderRadius - 1;
-  }
-  @if $side == 'left' {
-    border-radius: $borderRadius 0 0 $borderRadius;
-  } @else if $side == 'right' {
-    border-radius: 0 $borderRadius $borderRadius 0;
-  }
-}

package/src/themes/amsterdam/global_styling/variables/_borders.scss

@@ -1,2 +0,0 @@
-$euiBorderRadius: $euiSizeS * .75;
-$euiBorderRadiusSmall: $euiSizeS * .5;

package/src/themes/amsterdam/global_styling/variables/_form.scss

@@ -1,23 +0,0 @@
-$euiFormControlBorderRadius: $euiBorderRadius;
-$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall;
-$euiFormInputGroupBorder: none;
-$euiFormBackgroundReadOnlyColor: $euiColorEmptyShade;
-
-$euiFormControlBoxShadow: 0 0 transparent;
-
-$euiCheckboxBorderRadius: $euiBorderRadiusSmall;
-
-// Range
-$euiRangeTrackColor: $euiColorLightShade;
-$euiRangeHighlightColor: $euiColorDarkShade;
-
-$euiRangeThumbBorderColor: $euiColorEmptyShade;
-$euiRangeThumbBackgroundColor: $euiRangeHighlightColor;
-
-$euiRangeTrackHeight: $euiSizeM / 2;
-$euiRangeTrackCompressedHeight: $euiSizeXS;
-$euiRangeHighlightHeight: $euiRangeTrackHeight;
-$euiRangeHighlightCompressedHeight: $euiRangeTrackCompressedHeight;
-
-$euiRangeHeight: $euiFormControlHeight;
-$euiRangeCompressedHeight: $euiFormControlCompressedHeight;

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

@@ -1,3 +0,0 @@
-.euiListGroupItem--medium {
-  font-size: $euiFontSizeM;
-}

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

@@ -1,4 +0,0 @@
-.euiNotificationBadge {
-  @include euiNumberFormat;
-  border-radius: $euiBorderRadiusSmall;
-}