@elastic/eui 67.0.0 → 67.1.1

package/dist/eui_theme_dark.css

@@ -748,104 +748,6 @@ SOFTWARE.
     opacity: 1;
     visibility: visible; }
 
-/**
- * 1. Accounts for the border
- */
-.euiBadge {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  /* 1 */
-  padding: 0 8px;
-  display: inline-block;
-  text-decoration: none;
-  border-radius: 3px;
-  border: solid 1px transparent;
-  background-color: transparent;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: default;
-  max-width: 100%;
-  text-align: left; }
-  .euiBadge.euiBadge-isDisabled {
-    color: #858a91 !important;
-    background-color: #515761 !important; }
-  .euiBadge:focus-within {
-    outline: 2px solid currentColor; }
-    .euiBadge:focus-within:focus-visible {
-      outline-style: auto; }
-    .euiBadge:focus-within:not(:focus-visible) {
-      outline: none; }
-  .euiBadge + .euiBadge {
-    margin-left: 4px; }
-  .euiBadge .euiBadge__content {
-    min-height: 18px;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-align-items: center;
-            align-items: center;
-    overflow: hidden; }
-  .euiBadge .euiBadge__childButton {
-    max-width: 100%;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-    text-align: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit; }
-    .euiBadge .euiBadge__childButton:disabled {
-      cursor: not-allowed; }
-    .euiBadge .euiBadge__childButton:not(:disabled):hover, .euiBadge .euiBadge__childButton:not(:disabled):focus {
-      text-decoration: underline; }
-  .euiBadge .euiBadge__iconButton {
-    font-size: 0;
-    margin-left: 4px; }
-    .euiBadge .euiBadge__iconButton:focus {
-      background-color: rgba(255, 255, 255, 0.8);
-      color: #000;
-      border-radius: 2px; }
-    .euiBadge .euiBadge__iconButton:disabled {
-      cursor: not-allowed; }
-    .euiBadge .euiBadge__iconButton .euiBadge__icon {
-      margin: 0 !important; }
-  .euiBadge .euiBadge__text {
-    max-width: 100%;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-    cursor: default; }
-  .euiBadge .euiBadge__icon:not(:only-child) {
-    margin-left: 4px; }
-  .euiBadge.euiBadge--iconLeft .euiBadge__content {
-    -webkit-flex-direction: row-reverse;
-            flex-direction: row-reverse; }
-  .euiBadge.euiBadge--iconLeft .euiBadge__iconButton,
-  .euiBadge.euiBadge--iconLeft .euiBadge__icon:not(:only-child) {
-    margin-right: 4px;
-    margin-left: 0; }
-
-.euiBadge-isClickable:not(:disabled):hover, .euiBadge-isClickable:not(:disabled):focus {
-  text-decoration: underline; }
-
-.euiBadge-isClickable.euiBadge-isDisabled {
-  cursor: not-allowed; }
-
-.euiBadge-isClickable:focus {
-  outline: 2px solid currentColor; }
-  .euiBadge-isClickable:focus:focus-visible {
-    outline-style: auto; }
-  .euiBadge-isClickable:focus:not(:focus-visible) {
-    outline: none; }
-
-.euiBadge-isClickable .euiBadge__text {
-  cursor: inherit; }
-
-.euiBadge--hollow {
-  background-color: #1D1E24;
-  border-color: #52555e;
-  color: #DFE5EF; }
-
 .euiBadgeGroup__item {
   display: inline-block;
   max-width: 100%; }
@@ -4854,298 +4756,6 @@ SOFTWARE.
     margin-right: 0 !important;
     margin-bottom: 16px !important; } }
 
-.euiFlyout {
-  border-left: none;
-  box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.325), 0 9.4px 24px rgba(0, 0, 0, 0.225), 0 21.8px 43px rgba(0, 0, 0, 0.2);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  z-index: 1000;
-  background: #1D1E24;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: column;
-          flex-direction: column;
-  -webkit-align-items: stretch;
-          align-items: stretch;
-  -webkit-clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
-          clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
-  -webkit-animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiFlyout 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
-  .euiFlyout:focus {
-    outline: none; }
-
-.euiFlyout__closeButton {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  z-index: 3; }
-  .euiFlyout__closeButton:not(.euiFlyout__closeButton--outside) {
-    background-color: rgba(29, 30, 36, 0.9); }
-  .euiFlyout__closeButton--outside {
-    box-shadow: 0 2.7px 9px rgba(0, 0, 0, 0.325), 0 9.4px 24px rgba(0, 0, 0, 0.225), 0 21.8px 43px rgba(0, 0, 0, 0.2);
-    right: auto;
-    left: 0;
-    -webkit-transform: translateX(calc(-100% - 24px)) !important;
-            transform: translateX(calc(-100% - 24px)) !important;
-    -webkit-animation: none !important;
-            animation: none !important; }
-    .euiFlyout--left .euiFlyout__closeButton--outside {
-      left: auto;
-      right: 0;
-      -webkit-transform: translateX(calc(100% + 24px)) !important;
-              transform: translateX(calc(100% + 24px)) !important; }
-
-.euiFlyoutBody__banner {
-  overflow-x: hidden; }
-
-/**
- * 1. Calculating the minimum width based on the screen takeover breakpoint
- */
-.euiFlyout--small {
-  min-width: 384px;
-  width: 25vw; }
-  .euiFlyout--small.euiFlyout--maxWidth-default {
-    max-width: 403px; }
-
-.euiFlyout--medium {
-  min-width: 424px;
-  width: 50vw; }
-  .euiFlyout--medium.euiFlyout--maxWidth-default {
-    max-width: 768px; }
-
-.euiFlyout--large {
-  min-width: 691px;
-  width: 75vw; }
-  .euiFlyout--large.euiFlyout--maxWidth-default {
-    max-width: 992px; }
-
-.euiFlyout--paddingNone .euiFlyoutHeader {
-  padding: 0 0 0; }
-
-.euiFlyout--paddingNone .euiFlyoutHeader--hasBorder {
-  padding-bottom: 0; }
-
-.euiFlyout--paddingNone .euiFlyoutBody__overflowContent {
-  padding: 0; }
-
-.euiFlyout--paddingNone .euiFlyoutBody__banner .euiCallOut {
-  padding-left: 0;
-  padding-right: 0; }
-
-.euiFlyout--paddingNone .euiFlyoutFooter {
-  padding: 0; }
-
-.euiFlyout--paddingSmall .euiFlyoutHeader {
-  padding: 8px 8px 0; }
-
-.euiFlyout--paddingSmall .euiFlyoutHeader--hasBorder {
-  padding-bottom: 8px; }
-
-.euiFlyout--paddingSmall .euiFlyoutBody__overflowContent {
-  padding: 8px; }
-
-.euiFlyout--paddingSmall .euiFlyoutBody__banner .euiCallOut {
-  padding-left: 8px;
-  padding-right: 8px; }
-
-.euiFlyout--paddingSmall .euiFlyoutFooter {
-  padding: 8px; }
-
-.euiFlyout--paddingMedium .euiFlyoutHeader {
-  padding: 16px 16px 0; }
-
-.euiFlyout--paddingMedium .euiFlyoutHeader--hasBorder {
-  padding-bottom: 16px; }
-
-.euiFlyout--paddingMedium .euiFlyoutBody__overflowContent {
-  padding: 16px; }
-
-.euiFlyout--paddingMedium .euiFlyoutBody__banner .euiCallOut {
-  padding-left: 16px;
-  padding-right: 16px; }
-
-.euiFlyout--paddingMedium .euiFlyoutFooter {
-  padding: 12px 16px; }
-
-.euiFlyout--paddingLarge .euiFlyoutHeader {
-  padding: 24px 24px 0; }
-
-.euiFlyout--paddingLarge .euiFlyoutHeader--hasBorder {
-  padding-bottom: 24px; }
-
-.euiFlyout--paddingLarge .euiFlyoutBody__overflowContent {
-  padding: 24px; }
-
-.euiFlyout--paddingLarge .euiFlyoutBody__banner .euiCallOut {
-  padding-left: 24px;
-  padding-right: 24px; }
-
-.euiFlyout--paddingLarge .euiFlyoutFooter {
-  padding: 16px 24px; }
-
-@-webkit-keyframes euiFlyout {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(100%);
-            transform: translateX(100%); }
-  75% {
-    opacity: 1;
-    -webkit-transform: translateX(0%);
-            transform: translateX(0%); } }
-
-@keyframes euiFlyout {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(100%);
-            transform: translateX(100%); }
-  75% {
-    opacity: 1;
-    -webkit-transform: translateX(0%);
-            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.
- */
-@media only screen and (max-width: 574px) {
-  .euiFlyout {
-    max-width: 90vw !important;
-    /* 1, 2 */ }
-  .euiFlyout--small {
-    min-width: 0;
-    width: 384px; }
-  .euiFlyout--medium {
-    min-width: 0;
-    width: 424px; }
-  .euiFlyout--large {
-    min-width: 0;
-    width: 691px; }
-  .euiFlyout__closeButton--outside {
-    -webkit-transform: translateX(calc(-100% - 4px)) !important;
-            transform: translateX(calc(-100% - 4px)) !important; }
-    .euiFlyout--left .euiFlyout__closeButton--outside {
-      -webkit-transform: translateX(calc(100% + 4px)) !important;
-              transform: translateX(calc(100% + 4px)) !important; } }
-
-@media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiFlyout {
-    max-width: 90vw !important;
-    /* 1, 2 */ }
-  .euiFlyout--small {
-    min-width: 0;
-    width: 384px; }
-  .euiFlyout--medium {
-    min-width: 0;
-    width: 424px; }
-  .euiFlyout--large {
-    min-width: 0;
-    width: 691px; }
-  .euiFlyout__closeButton--outside {
-    -webkit-transform: translateX(calc(-100% - 4px)) !important;
-            transform: translateX(calc(-100% - 4px)) !important; }
-    .euiFlyout--left .euiFlyout__closeButton--outside {
-      -webkit-transform: translateX(calc(100% + 4px)) !important;
-              transform: translateX(calc(100% + 4px)) !important; } }
-
-/**
- * Left side flyout (should only be used for navigation)
- */
-.euiFlyout--left {
-  border-right: none;
-  border-left: none;
-  right: auto;
-  left: 0;
-  -webkit-clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
-          clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
-  -webkit-animation-name: euiFlyoutLeft;
-          animation-name: euiFlyoutLeft; }
-
-@-webkit-keyframes euiFlyoutLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100%);
-            transform: translateX(-100%); }
-  75% {
-    opacity: 1;
-    -webkit-transform: translateX(0%);
-            transform: translateX(0%); } }
-
-@keyframes euiFlyoutLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100%);
-            transform: translateX(-100%); }
-  75% {
-    opacity: 1;
-    -webkit-transform: translateX(0%);
-            transform: translateX(0%); } }
-
-/**
- * Pushed style (inside body)
- */
-.euiFlyout.euiFlyout--push {
-  box-shadow: none;
-  -webkit-clip-path: none;
-          clip-path: none;
-  -webkit-animation-duration: 0s;
-          animation-duration: 0s;
-  border-left: 2px solid #343741;
-  z-index: 999; }
-  .euiFlyout.euiFlyout--push.euiFlyout--left {
-    border-left: none;
-    border-right: 2px solid #343741; }
-
-.euiFlyoutBody {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-  overflow-y: hidden;
-  height: 100%; }
-  .euiFlyoutBody .euiFlyoutBody__overflow {
-    scrollbar-color: rgba(152, 162, 179, 0.5) transparent;
-    scrollbar-width: thin;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
-            mask-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.1) 0%, red 7.5px, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); }
-    .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar {
-      width: 16px;
-      height: 16px; }
-    .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-thumb {
-      background-color: rgba(152, 162, 179, 0.5);
-      background-clip: content-box;
-      border-radius: 16px;
-      border: 6px solid transparent; }
-    .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-corner, .euiFlyoutBody .euiFlyoutBody__overflow::-webkit-scrollbar-track {
-      background-color: transparent; }
-    .euiFlyoutBody .euiFlyoutBody__overflow:focus {
-      outline: none;
-      /* 1 */ }
-    .euiFlyoutBody .euiFlyoutBody__overflow[tabindex='0']:focus:focus-visible {
-      outline-style: auto;
-      /* 2 */ }
-    .euiFlyoutBody .euiFlyoutBody__overflow.euiFlyoutBody__overflow--hasBanner {
-      -webkit-mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%);
-              mask-image: linear-gradient(to bottom, red calc(100% - 7.5px), rgba(255, 0, 0, 0.1) 100%); }
-  .euiFlyoutBody .euiFlyoutBody__banner .euiCallOut {
-    border: none;
-    border-radius: 0; }
-
-.euiFlyoutFooter {
-  background: #25262E;
-  -webkit-flex-grow: 0;
-          flex-grow: 0; }
-
-.euiFlyoutHeader {
-  -webkit-flex-grow: 0;
-          flex-grow: 0; }
-
-.euiFlyoutHeader--hasBorder {
-  border-bottom: 1px solid #343741; }
-
 /**
   * 1. Float above the visual radio and match its dimension, so that when users try to click it
   *    they actually click this input.

package/dist/eui_theme_dark.json

@@ -77,30 +77,6 @@
       "count": 1
     }
   },
-  "flyoutSizes": {
-    "small": {
-      "min": "384px",
-      "width": "25vw",
-      "max": "403px"
-    },
-    "medium": {
-      "min": "424px",
-      "width": "50vw",
-      "max": "768px"
-    },
-    "large": {
-      "min": "691px",
-      "width": "75vw",
-      "max": "992px"
-    }
-  },
-  "euiFlyoutBorder": "none",
-  "euiFlyoutPaddingModifiers": {
-    "paddingNone": 0,
-    "paddingSmall": "8px",
-    "paddingMedium": "16px",
-    "paddingLarge": "24px"
-  },
   "euiFilePickerTallHeight": "128px",
   "euiRangeLevelColors": {
     "primary": "#36a2ef",

package/dist/eui_theme_dark.json.d.ts

@@ -78,30 +78,6 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' {
         count: number;
       };
     };
-    flyoutSizes: {
-      small: {
-        min: string;
-        width: string;
-        max: string;
-      };
-      medium: {
-        min: string;
-        width: string;
-        max: string;
-      };
-      large: {
-        min: string;
-        width: string;
-        max: string;
-      };
-    };
-    euiFlyoutBorder: string;
-    euiFlyoutPaddingModifiers: {
-      paddingNone: number;
-      paddingSmall: string;
-      paddingMedium: string;
-      paddingLarge: string;
-    };
     euiFilePickerTallHeight: string;
     euiRangeLevelColors: {
       primary: string;