@elastic/eui 87.1.0 → 87.2.0

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;