@elastic/eui 87.0.0 → 87.2.0

package/src/components/resizable_container/_resizable_button.scss

@@ -1,129 +0,0 @@
-// Mimics the "grab" icon with CSS psuedo-elements.
-// The "grab" icon transforms into a 2px straight line on :hover and :focus.
-.euiResizableButton {
-  position: relative;
-  flex-shrink: 0;
-  z-index: 1;
-
-  &::before,
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    background-color: $euiColorDarkestShade;
-    transition:
-      width $euiResizableButtonTransitionSpeed ease,
-      height $euiResizableButtonTransitionSpeed ease,
-      transform $euiResizableButtonTransitionSpeed ease,
-      background-color $euiResizableButtonTransitionSpeed ease
-    ;
-  }
-
-  &.euiResizableButton--horizontal {
-    cursor: col-resize;
-    width: $euiResizableButtonSize;
-    margin-left: -($euiResizableButtonSize / 2);
-    margin-right: -($euiResizableButtonSize / 2);
-
-    &::before,
-    &::after {
-      width: 1px;
-      height: $euiSizeM;
-    }
-
-    &::before {
-      transform: translate(-2px, -50%);
-    }
-
-    &::after {
-      transform: translate(1px, -50%);
-    }
-  }
-
-  &.euiResizableButton--vertical {
-    cursor: row-resize;
-    height: $euiResizableButtonSize;
-    margin-top: -($euiResizableButtonSize / 2);
-    margin-bottom: -($euiResizableButtonSize / 2);
-
-    &::before,
-    &::after {
-      width: $euiSizeM;
-      height: 1px;
-    }
-
-    &::before {
-      transform: translate(-50%, -2px);
-    }
-
-    &::after {
-      transform: translate(-50%, 1px);
-    }
-  }
-
-  // Lighten the "grab" icon on :hover
-  &:hover:not(:disabled) {
-    &::before,
-    &::after {
-      background-color: $euiColorMediumShade;
-      transition-delay: $euiResizableButtonTransitionSpeed; // Delay transition on hover so animation is not accidentally triggered on mouse over
-    }
-  }
-
-  // Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
-  &:focus:not(:disabled) {
-    background-color: transparentize($euiColorPrimary, .9);
-
-    &::before,
-    &::after {
-      background-color: $euiColorPrimary;
-      // Overrides default transition so that "grab" icon background-color doesn't animate
-      transition:
-        width $euiResizableButtonTransitionSpeed ease,
-        height $euiResizableButtonTransitionSpeed ease,
-        transform $euiResizableButtonTransitionSpeed ease
-      ;
-      transition-delay: $euiResizableButtonTransitionSpeed / 2;
-    }
-  }
-
-  // Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
-  &:hover:not(:disabled),
-  &:focus:not(:disabled) {
-    &.euiResizableButton--horizontal {
-      &::before,
-      &::after {
-        height: 100%;
-      }
-
-      &::before {
-        transform: translate(-1px, -50%);
-      }
-
-      &::after {
-        transform: translate(0, -50%);
-      }
-    }
-
-    &.euiResizableButton--vertical {
-      &::before,
-      &::after {
-        width: 100%;
-      }
-
-      &::before {
-        transform: translate(-50%, -1px);
-      }
-
-      &::after {
-        transform: translate(-50%, 0);
-      }
-    }
-  }
-
-  &:disabled {
-    display: none !important; // stylelint-disable-line declaration-no-important
-  }
-}

package/src/components/resizable_container/_resizable_collapse_button.scss

@@ -1,145 +0,0 @@
-// This file has lots of modifiers and is somewhat nesty by nature because of positioning
-// stylelint-disable max-nesting-depth
-
-/**
- * 1. The default position of the button should always be `middle`, so
- *    those position styles aren't restricted to a class
- * 2. When collpsed, the button itself is the full collapsed area and we use
- *    flex to align the icon within
- */
-
-.euiResizableToggleButton {
-  @include euiSlightShadow;
-  position: absolute;
-  z-index: 2;
-  // Remove animations from EuiButtonIcon because of the custom transforms
-  animation: none !important; // stylelint-disable-line declaration-no-important
-  // Remove transition from EuiButtonIcon because of the custom transforms
-  transition-property: background, box-shadow;
-  background: $euiColorEmptyShade;
-
-  &:focus {
-    @include euiSlightShadowHover;
-  }
-
-  &-isCollapsed {
-    box-shadow: none;
-    background: transparent;
-    border-radius: 0;
-  }
-
-  &:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) {
-    @include euiScreenReaderOnly;
-  }
-}
-
-.euiResizableToggleButton--horizontal {
-  &.euiResizableToggleButton { // Extra layer of nesting to override EuiButtonIcon transforms on hover
-    &.euiResizableToggleButton--after {
-      right: 0;
-      top: 50%; /* 1 */
-      transform: translate(50%, -50%); /* 1 */
-
-      &.euiResizableToggleButton--top {
-        top: 0;
-        transform: translate(50%, $euiSize);
-      }
-
-      &.euiResizableToggleButton--bottom {
-        top: auto;
-        bottom: 0;
-        transform: translate(50%, -$euiSize);
-      }
-    }
-
-    &.euiResizableToggleButton--before {
-      left: 0;
-      top: 50%; /* 1 */
-      transform: translate(-50%, -50%); /* 1 */
-
-      &.euiResizableToggleButton--top {
-        top: 0;
-        transform: translate(-50%, $euiSize);
-      }
-
-      &.euiResizableToggleButton--bottom {
-        top: auto;
-        bottom: 0;
-        transform: translate(-50%, -$euiSize);
-      }
-    }
-
-    &.euiResizableToggleButton-isCollapsed {
-      top: 0 !important; // stylelint-disable-line declaration-no-important
-      bottom: 0 !important; // stylelint-disable-line declaration-no-important
-      transform: none !important; // stylelint-disable-line declaration-no-important
-      height: 100%;
-
-      &.euiResizableToggleButton--top {
-        padding-top: $euiSize;
-        align-items: flex-start;  /* 2 */
-      }
-
-      &.euiResizableToggleButton--bottom {
-        padding-bottom: $euiSize;
-        align-items: flex-end;  /* 2 */
-      }
-    }
-  }
-}
-
-.euiResizableToggleButton--vertical {
-  &.euiResizableToggleButton { // Extra layer of nesting to override EuiButtonIcon transforms on hover
-    &.euiResizableToggleButton--after {
-      top: 100%;
-      left: 50%; /* 1 */
-      transform: translate(-50%, -50%); /* 1 */
-
-      &.euiResizableToggleButton--left {
-        left: 0;
-        transform: translate($euiSize, -50%);
-      }
-
-      &.euiResizableToggleButton--right {
-        left: auto;
-        right: 0;
-        transform: translate(-$euiSize, -50%);
-      }
-    }
-
-    &.euiResizableToggleButton--before {
-      bottom: 100%;
-      left: 50%; /* 1 */
-      transform: translate(-50%, 50%); /* 1 */
-
-      &.euiResizableToggleButton--left {
-        left: 0;
-        transform: translate($euiSize, 50%);
-      }
-
-      &.euiResizableToggleButton--right {
-        left: auto;
-        right: 0;
-        transform: translate(-$euiSize, 50%);
-      }
-    }
-
-    &.euiResizableToggleButton-isCollapsed {
-      top: 0 !important; // stylelint-disable-line declaration-no-important
-      bottom: 0 !important; // stylelint-disable-line declaration-no-important
-      left: 0 !important; // stylelint-disable-line declaration-no-important
-      transform: none !important; // stylelint-disable-line declaration-no-important
-      width: 100%;
-
-      &.euiResizableToggleButton--left {
-        padding-left: $euiSize;
-        justify-content: flex-start; /* 2 */
-      }
-
-      &.euiResizableToggleButton--right {
-        padding-right: $euiSize;
-        justify-content: flex-end; /* 2 */
-      }
-    }
-  }
-}

package/src/components/resizable_container/_variables.scss

@@ -1,2 +0,0 @@
-$euiResizableButtonTransitionSpeed: $euiAnimSpeedFast !default;
-$euiResizableButtonSize: $euiSize !default;