@elastic/eui 93.1.0 → 93.2.0

package/src/components/side_nav/_side_nav.scss

@@ -1,47 +0,0 @@
-// These mobile children are hidden in everything but mobile view.
-.euiSideNav__mobileToggle {
-  height: auto;
-  border-bottom: $euiBorderThin;
-  width: 100%;
-  text-align: left;
-  border-radius: 0 !important; // stylelint-disable-line declaration-no-important
-  font-size: $euiFontSizeM;
-  padding: 0 $euiSize; // This plus the inner padding is equal to paddingSize large for EuiPage
-
-  .euiSideNav__mobileToggleText {
-    padding: $euiSize 0;
-  }
-
-  .euiSideNav__mobileToggleContent {
-    justify-content: space-between;
-  }
-}
-
-.euiSideNav__heading {
-  margin-bottom: $euiSizeL;
-}
-
-// Loop through the breakpoints and apply mobile styles only to the right className
-// stylelint-disable max-nesting-depth
-@each $breakpoint in $euiBreakpointKeys {
-  @include euiBreakpoint($breakpoint) {
-    .euiSideNav__contentMobile-#{$breakpoint} {
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      max-height: 0;
-      padding: 0 $euiSizeL;
-
-      .euiSideNav-isOpenMobile & {
-        visibility: visible;
-        opacity: 1;
-        padding: $euiSizeL;
-        max-height: 5000px; /* 1 */
-
-        @include euiCanAnimate {
-          transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
-        }
-      }
-    }
-  }
-}

package/src/components/side_nav/_side_nav_item.scss

@@ -1,181 +0,0 @@
-/**
- * 1. Text-align defaults to center, so we have to override that.
- * 2. Color the text at the item level and then have the button inherit so overrides are easier
- * 3. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/)
- * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within
- */
-
-.euiSideNavItemButton {
-  @include euiFontSizeS;
-  text-align: left; /* 1 */
-  display: block;
-  width: 100%;
-  padding: ($euiSizeXS / 2) 0;
-  color: inherit; /* 2 */
-
-  &.euiSideNavItemButton--isClickable:not(:disabled) {
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover,
-    &:focus {
-      .euiSideNavItemButton__label {
-        // A lingering focus will stay underlined even if it doesn't get the `isSelected` prop
-        text-decoration: underline; /* 4 */
-      }
-    }
-  }
-
-  &.euiSideNavItemButton-isSelected {
-    color: $euiSideNavSelectedTextcolor;
-    font-weight: $euiFontWeightBold;
-
-    .euiSideNavItemButton__label {
-      text-decoration: underline; /* 4 */
-    }
-  }
-
-  &:disabled {
-    @include euiDisabledState($euiSideNavDisabledTextcolor);
-  }
-}
-
-.euiSideNavItemButton__content {
-  display: flex;
-  align-items: center;
-}
-
-.euiSideNavItemButton__icon {
-  margin-right: $euiSizeS;
-}
-
-.euiSideNavItemButton__labelContainer {
-  min-width: 0; /* 3 */
-}
-
-.euiSideNavItemButton__label {
-  flex-grow: 1;
-}
-
-.euiSideNavItemButton__label--truncated {
-  @include euiTextTruncate;
-}
-
-.euiSideNavItem--root {
-  &.euiSideNavItem--rootIcon > .euiSideNavItem__items {
-    margin-left: $euiSizeL;
-  }
-
-  /**
-   * 1. Create padding around focus area without indenting the item itself.
-   */
-  & > .euiSideNavItemButton {
-    margin-bottom: $euiSizeS;
-    padding: 0;
-    padding-left: $euiSizeS; /* 1 */
-    padding-right: $euiSizeS; /* 1 */
-    margin-left: -$euiSizeS; /* 1 */
-    width: calc(100% + #{$euiSizeS * 2}); /* 1 */
-
-    .euiSideNavItemButton__label {
-      @include euiTitle('xs');
-      color: inherit;
-    }
-  }
-
-  & > .euiSideNavItem__items {
-    position: static;
-    margin-left: 0;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  & + & {
-    margin-top: $euiSizeXL;
-  }
-}
-
-.euiSideNavItem--trunk {
-  color: $euiSideNavRootTextcolor; /* 2 */
-
-  /**
-   * 1. Create padding around focus area without indenting the item itself.
-   */
-  & > .euiSideNavItemButton {
-    padding-left: $euiSizeS; /* 1 */
-    padding-right: $euiSizeS; /* 1 */
-    margin-left: -$euiSizeS; /* 1 */
-    width: calc(100% + #{$euiSizeS * 2}); /* 1 */
-  }
-
-  & > .euiSideNavItem__items {
-    margin-left: $euiSizeS;
-    width: 100%;
-  }
-}
-
-.euiSideNavItem--branch {
-  /**
-  * 1. Draw the vertical line to group an expanded item's child items together.
-  */
-  position: relative;
-  color: $euiSideNavBranchTextcolor; /* 2 */
-
-  &::after { /* 1 */
-    position: absolute;
-    content: '';
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: $euiBorderColor;
-    left: 0;
-  }
-
-  // If this is actually the last item, we don't want the vertical line to stretch all the way down
-  &:last-of-type::after {
-    height: $euiSizeM;
-  }
-
-  /**
-   * 2. Absolutely position the horizontal tick connecting the item to the vertical line.
-   */
-  & > .euiSideNavItemButton {
-    position: relative; /* 2 */
-    padding-left: $euiSizeS;
-    padding-right: $euiSizeS; /* 2 */
-
-    &::after {
-      position: absolute; /* 2 */
-      content: '';
-      top: $euiSizeM;
-      left: 0;
-      width: $euiSizeXS;
-      height: 1px;
-      background: $euiBorderColor;
-    }
-  }
-
-  & > .euiSideNavItem__items {
-    margin-left: $euiSize;
-  }
-}
-
-.euiSideNavItem--emphasized {
-  background: $euiSideNavEmphasizedBackgroundColor;
-  color: $euiSideNavRootTextcolor;
-  // The large y values allow the shadow to stretch beyond the side nav bounds to it's parents container
-  box-shadow: 100px 0 0 0 $euiSideNavEmphasizedBackgroundColor, -100px 0 0 0 $euiSideNavEmphasizedBackgroundColor;
-
-  > .euiSideNavItemButton {
-    font-weight: $euiFontWeightBold;
-  }
-
-  // Remove any extra box-shadows from nested emphasized items
-  .euiSideNavItem--emphasized {
-    background: transparent;
-    box-shadow: none;
-  }
-}

package/src/components/side_nav/_variables.scss

@@ -1,15 +0,0 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-
-// Simulates the transparent backround on top of the page background to get an opaque color
-// in order to get the right contrast for text
-@function euiSideNavEmphasizedContrast($textColor, $ratio: $euiContrastRatioText) {
-  $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorLightShade, 70%);
-  $color: makeHighContrastColor($textColor, $backgroundColorSimulated, $ratio);
-  @return $color;
-}
-
-// Ensure all the possible text color have proper contrast when "emphasized"
-$euiSideNavRootTextcolor: euiSideNavEmphasizedContrast($euiTitleColor);
-$euiSideNavBranchTextcolor: euiSideNavEmphasizedContrast($euiTextSubduedColor);
-$euiSideNavSelectedTextcolor: euiSideNavEmphasizedContrast($euiColorPrimary);
-$euiSideNavDisabledTextcolor: euiSideNavEmphasizedContrast($euiButtonColorDisabledText, $euiContrastRatioDisabled);

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

@@ -1,17 +0,0 @@
-.euiSideNavItem--root {
-  padding-bottom: $euiSizeS;
-
-  & + & {
-    padding-top: $euiSizeS;
-    margin-top: $euiSizeS;
-  }
-
-  & > .euiSideNavItemButton {
-    margin-bottom: $euiSizeXS;
-
-    .euiSideNavItemButton__label {
-      @include euiTitle('xxs');
-      color: inherit;
-    }
-  }
-}

package/test-env/components/tree_view/_tree_view_item.styles.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiTreeViewItemStyles = void 0;
-var _react = require("@emotion/react");
-var _services = require("../../services");
-var _global_styling = require("../../global_styling");
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var defaultSize = euiTheme.size.xl;
-  var compressedSize = euiTheme.size.l;
-  return {
-    li: {
-      euiTreeView__node: /*#__PURE__*/(0, _react.css)(";label:euiTreeView__node;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
-      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100vh'), ";;label:expanded;")
-    },
-    button: {
-      euiTreeView__nodeInner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
-    },
-    icon: {
-      euiTreeView__iconWrapper: /*#__PURE__*/(0, _react.css)("flex-shrink:0;line-height:0;&>*{", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}&>.euiToken{", (0, _global_styling.logicalCSS)('max-height', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), " svg{", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiTreeView__iconWrapper;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(defaultSize, function (x) {
-        return x / 2;
-      })), ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(compressedSize, function (x) {
-        return x / 2;
-      })), ";;label:compressed;")
-    }
-  };
-};
-exports.euiTreeViewItemStyles = euiTreeViewItemStyles;