@elastic/eui 67.1.0 → 67.1.2

package/src/components/flyout/_flyout.scss

@@ -1,196 +0,0 @@
-.euiFlyout {
-  @include euiFlyout;
-  animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  // Remove focus ring because of `tabindex=0`
-  &:focus {
-    outline: none;
-  }
-}
-
-.euiFlyout__closeButton {
-  position: absolute;
-  right: $euiSizeS;
-  top: $euiSizeS;
-  z-index: 3;
-
-  &:not(.euiFlyout__closeButton--outside) {
-    background-color: transparentize($euiColorEmptyShade, .1);
-  }
-
-  &--outside {
-    // match dropshadow
-    @include euiBottomShadowLarge;
-    right: auto;
-    left: 0;
-    // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
-    transform: translateX(calc(-100% - #{$euiSizeL})) !important;
-    animation: none !important;
-
-    .euiFlyout--left & {
-      left: auto;
-      right: 0;
-      transform: translateX(calc(100% + #{$euiSizeL})) !important;
-    }
-  }
-}
-
-.euiFlyoutBody__banner {
-  overflow-x: hidden;
-}
-
-/**
- * 1. Calculating the minimum width based on the screen takeover breakpoint
- */
-$flyoutSizes: (
-  'small': (
-    min: round(map-get($euiBreakpoints, 'm') * .5), /* 1 */
-    width: 25vw,
-    max: round(map-get($euiBreakpoints, 's') * .7),
-  ),
-  'medium': (
-    // Calculated for forms plus padding
-    min: $euiFormMaxWidth + ($euiSizeM * 2),
-    width: 50vw,
-    max: map-get($euiBreakpoints, 'm'),
-  ),
-  'large': (
-    min:  round(map-get($euiBreakpoints, 'm') * .9), /* 1 */
-    width: 75vw,
-    max: map-get($euiBreakpoints, 'l'),
-  )
-);
-
-@each $name, $sizing in $flyoutSizes {
-  .euiFlyout--#{$name} {
-    min-width: map-get($sizing, min);
-    width: map-get($sizing, width);
-
-    &.euiFlyout--maxWidth-default {
-      max-width: map-get($sizing, max);
-    }
-  }
-}
-
-@each $modifier, $paddingAmount in $euiFlyoutPaddingModifiers {
-  .euiFlyout--#{$modifier} {
-
-    .euiFlyoutHeader {
-      padding: $paddingAmount $paddingAmount 0;
-    }
-
-    .euiFlyoutHeader--hasBorder {
-      padding-bottom: $paddingAmount;
-    }
-
-    .euiFlyoutBody__overflowContent {
-      padding: $paddingAmount;
-    }
-
-    .euiFlyoutBody__banner .euiCallOut {
-      padding-left: $paddingAmount;
-      padding-right: $paddingAmount;
-    }
-
-    .euiFlyoutFooter {
-      @if $paddingAmount == $euiSizeL {
-        padding: ($paddingAmount / 1.5) $paddingAmount;
-      } @else if $paddingAmount == $euiSize {
-        padding: ($paddingAmount * .75) $paddingAmount;
-      } @else {
-        padding: $paddingAmount;
-      }
-    }
-  }
-}
-
-@keyframes euiFlyout {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  75% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-/**
- * 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page
- * 2. If a custom maxWidth is set, we need to override it.
- */
-@include euiBreakpoint('xs', 's') {
-  // sass-lint:disable-block no-important
-  .euiFlyout {
-    max-width: 90vw !important; /* 1, 2 */
-  }
-
-  .euiFlyout--small {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'small'), 'min');
-  }
-
-  .euiFlyout--medium {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'medium'), 'min');
-  }
-
-  .euiFlyout--large {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'large'), 'min');
-  }
-
-  // Pull in close buttons a little
-  .euiFlyout__closeButton--outside {
-    // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
-    transform: translateX(calc(-100% - #{$euiSizeXS})) !important;
-
-    .euiFlyout--left & {
-      transform: translateX(calc(100% + #{$euiSizeXS})) !important;
-    }
-  }
-}
-
-/**
- * Left side flyout (should only be used for navigation)
- */
-.euiFlyout--left {
-  border-right: $euiFlyoutBorder;
-  border-left: none;
-  right: auto;
-  left: 0;
-  clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
-  animation-name: euiFlyoutLeft;
-}
-
-// Specific keyframes so in comes in from the left
-@keyframes euiFlyoutLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  75% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-/**
- * Pushed style (inside body)
- */
-.euiFlyout.euiFlyout--push {
-  box-shadow: none;
-  clip-path: none;
-  animation-duration: 0s; // Don't animate on loading a docked nav
-  border-left: $euiBorderThick;
-  z-index: $euiZHeader - 1; // Make sure the header shadows are above
-
-  &.euiFlyout--left {
-    border-left: none;
-    border-right: $euiBorderThick;
-  }
-}

package/src/components/flyout/_flyout_body.scss

@@ -1,18 +0,0 @@
-.euiFlyoutBody {
-  flex-grow: 1;
-  overflow-y: hidden;
-  height: 100%;
-
-  .euiFlyoutBody__overflow {
-    @include euiYScrollWithShadows;
-
-    &.euiFlyoutBody__overflow--hasBanner {
-      @include euiOverflowShadow('y', 'end');
-    }
-  }
-
-  .euiFlyoutBody__banner .euiCallOut {
-    border: none; // Remove border from callout when it is a flyout banner
-    border-radius: 0; // Ensures no border-radius in all themes
-  }
-}

package/src/components/flyout/_flyout_footer.scss

@@ -1,4 +0,0 @@
-.euiFlyoutFooter {
-  background: $euiColorLightestShade;
-  flex-grow: 0;
-}

package/src/components/flyout/_flyout_header.scss

@@ -1,7 +0,0 @@
-.euiFlyoutHeader {
-  flex-grow: 0;
-}
-
-.euiFlyoutHeader--hasBorder {
-  border-bottom: $euiBorderThin;
-}

package/src/components/flyout/_index.scss

@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-@import 'flyout';
-@import 'flyout_body';
-@import 'flyout_footer';
-@import 'flyout_header';

package/src/components/flyout/_mixins.scss

@@ -1,18 +0,0 @@
-
-@mixin euiFlyout {
-  border-left: $euiFlyoutBorder;
-  // The mixin augments the above
-  // sass-lint:disable mixins-before-declarations
-  @include euiBottomShadowLarge;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  z-index: $euiZFlyout;
-  background: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
-}

package/src/components/flyout/_variables.scss

@@ -1,8 +0,0 @@
-$euiFlyoutBorder: $euiBorderThin !default;
-
-$euiFlyoutPaddingModifiers: (
-  'paddingNone': 0,
-  'paddingSmall': $euiSizeS,
-  'paddingMedium': $euiSize,
-  'paddingLarge': $euiSizeL
-) !default;

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

@@ -1 +0,0 @@
-$euiFlyoutBorder: none;