@elastic/eui 77.1.1 → 77.2.0

package/dist/eui_theme_light.css

@@ -2743,86 +2743,8 @@ The following files still use the Sass version:
     opacity: 1;
   }
 }
-/**
- * 1. Account for inner box-shadow style border
- */
-.euiDatePickerRange {
-  max-width: 400px;
-  width: 100%;
-  height: auto;
-  background-color: #fbfcfd;
-  background-repeat: no-repeat;
-  background-size: 0% 100%;
-  box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
-  transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center;
-  padding: 1px; /* 1 */
-}
-.euiDatePickerRange--fullWidth {
-  max-width: 100%;
-}
-.euiDatePickerRange--compressed {
-  height: 32px;
-}
-.euiDatePickerRange--inGroup {
-  height: 100%;
-}
-@supports (-moz-appearance: none) {
-  .euiDatePickerRange {
-    transition-property: box-shadow, background-image, background-size;
-  }
-}
-.euiDatePickerRange > * {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-}
 .euiDatePickerRange .euiFieldText.euiDatePicker {
   height: 38px;
-  box-shadow: none !important;
-  text-align: center;
-}
-.euiDatePickerRange .euiDatePickerRange__start {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.euiDatePickerRange .euiDatePickerRange__end {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.euiDatePickerRange .react-datepicker-popper .euiFieldText.euiDatePicker {
-  text-align: left;
-}
-.euiDatePickerRange--inGroup {
-  box-shadow: none;
-  padding: 0;
-}
-
-.euiDatePickerRange--isDisabled {
-  background: #eef2f7;
-}
-
-.euiDatePickerRange--readOnly {
-  background: #FFF;
-}
-
-.euiDatePickerRange__delimeter {
-  -webkit-align-self: stretch;
-          align-self: stretch;
-  height: auto;
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center;
-}
-
-.euiDatePickerRange--isInvalid:not(.euiDatePickerRange--isDisabled):not(.euiDatePickerRange--readOnly) .euiDatePickerRange__delimeter {
-  background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%);
-  background-size: 100%;
 }
 
 .euiSuperDatePicker__absoluteDateFormRow {
@@ -2885,16 +2807,17 @@ The following files still use the Sass version:
 }
 .euiDatePopoverButton:disabled {
   background-color: #eef2f7;
+  background-image: none;
   color: #69707D;
   cursor: default;
 }
 
 .euiDatePopoverButton--start {
-  text-align: right;
+  text-align: center;
 }
 
 .euiDatePopoverButton--end {
-  text-align: left;
+  text-align: center;
 }
 
 .euiDatePopoverContent {
@@ -3017,20 +2940,19 @@ The following files still use the Sass version:
   max-width: 100% !important;
 }
 .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper {
-  -webkit-flex: 1 1 100%;
-          flex: 1 1 100%;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+          align-items: center;
   overflow: hidden;
+  background-color: #fbfcfd;
 }
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiDatePickerRange {
-  max-width: none;
-  width: auto;
+.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:last-child {
   border-radius: 0 6px 6px 0;
 }
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:not(:last-child) > .euiDatePickerRange,
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:not(:last-child) > .euiDatePickerRange .euiDatePopoverButton--end,
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:not(:last-child) > .euiDatePickerRange .euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiFormControlLayoutDelimited__input {
+  -webkit-flex-grow: 1;
+          flex-grow: 1;
 }
 
 .euiSuperDatePicker__prettyFormat {
@@ -3077,6 +2999,20 @@ The following files still use the Sass version:
   cursor: not-allowed;
 }
 
+/**
+* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
+*/
+.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper {
+  background-color: #e6f9f7;
+}
+.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimiter {
+  color: #007e77;
+}
+
+.euiSuperDatePicker .euiFormControlLayout__childrenWrapper {
+  transition: background 150ms ease-in;
+}
+
 .euiDataGrid {
   display: -webkit-flex;
   display: flex;
@@ -6040,14 +5976,14 @@ The following files still use the Sass version:
   max-width: 50%;
 }
 .euiFormControlLayout--group .euiFormLabel,
-.euiFormControlLayout--group .euiText {
+.euiFormControlLayout--group .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
   background-color: #e9edf3;
   padding: 12px;
   line-height: 16px !important;
   cursor: default !important;
 }
 .euiFormControlLayout--group .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper):not(input),
-.euiFormControlLayout--group .euiText + *:not(.euiFormControlLayout__childrenWrapper):not(input) {
+.euiFormControlLayout--group .euiText:not(.euiFormControlLayoutDelimited__delimiter) + *:not(.euiFormControlLayout__childrenWrapper):not(input) {
   margin-left: -12px;
 }
 .euiFormControlLayout--group > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel,
@@ -6077,11 +6013,11 @@ The following files still use the Sass version:
   }
 }
 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel,
-.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText {
+.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
   padding: 8px;
 }
 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper),
-.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText + *:not(.euiFormControlLayout__childrenWrapper) {
+.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText:not(.euiFormControlLayoutDelimited__delimiter) + *:not(.euiFormControlLayout__childrenWrapper) {
   margin-left: -8px;
 }
 .euiFormControlLayout--group.euiFormControlLayout--compressed > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel,
@@ -6115,15 +6051,13 @@ The following files still use the Sass version:
     transition-property: box-shadow, background-image, background-size;
   }
 }
-.euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimeter {
-  background-color: #fbfcfd;
-}
 .euiFormControlLayoutDelimited > .euiFormControlLayout__childrenWrapper {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
           align-items: center;
   width: 100%;
+  background-color: #fbfcfd;
 }
 .euiFormControlLayoutDelimited[class*="--compressed"] {
   background-color: #fbfcfd;
@@ -6138,17 +6072,7 @@ The following files still use the Sass version:
     transition-property: box-shadow, background-image, background-size;
   }
 }
-.euiFormControlLayoutDelimited[class*="--compressed"] .euiFormControlLayoutDelimited__input {
-  height: 100%;
-  max-width: none;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.euiFormControlLayoutDelimited[class*="--compressed"] .euiFormControlLayoutIcons {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper, .euiFormControlLayoutDelimited[class*="--fullWidth"] input {
+.euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper, .euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper > *:not(.euiFormControlLayoutDelimited__delimiter):not(.euiFormControlLayoutIcons) {
   width: 100%;
   max-width: none;
 }
@@ -6171,7 +6095,7 @@ The following files still use the Sass version:
   color: #98A2B3;
   opacity: 1;
 }
-.euiFormControlLayoutDelimited[class*=-isDisabled] .euiFormControlLayoutDelimited__delimeter {
+.euiFormControlLayoutDelimited[class*=-isDisabled] .euiFormControlLayout__childrenWrapper {
   background-color: #eef2f7;
 }
 .euiFormControlLayoutDelimited[class*="--readOnly"] {
@@ -6182,18 +6106,12 @@ The following files still use the Sass version:
   border-color: transparent;
   box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1);
 }
-.euiFormControlLayoutDelimited[class*="--readOnly"] input,
-.euiFormControlLayoutDelimited[class*="--readOnly"] .euiFormControlLayoutDelimited__delimeter {
+.euiFormControlLayoutDelimited[class*="--readOnly"] .euiFormControlLayout__childrenWrapper {
   background-color: #FFF;
 }
-.euiFormControlLayoutDelimited .euiFormControlLayoutIcons {
-  position: static;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-.euiFormControlLayoutDelimited .euiFormControlLayoutIcons:not(.euiFormControlLayoutIcons--right) {
-  -webkit-order: -1;
-          order: -1;
+.euiFormControlLayoutDelimited--isInvalid .euiFormControlLayout__childrenWrapper {
+  background-image: linear-gradient(to top, #BD271E, #BD271E 2px, transparent 2px, transparent 100%);
+  background-size: 100%;
 }
 
 .euiFormControlLayoutDelimited__input {
@@ -6204,20 +6122,20 @@ The following files still use the Sass version:
   min-width: 0;
 }
 
-.euiFormControlLayoutDelimited__delimeter {
-  line-height: 1 !important;
-  -webkit-flex: 0 0 auto;
-          flex: 0 0 auto;
-  padding-left: 6px;
-  padding-right: 6px;
+.euiFormControlLayoutDelimited__delimiter {
+  -webkit-align-self: stretch;
+          align-self: stretch;
+  -webkit-flex-grow: 0;
+          flex-grow: 0;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+          align-items: center;
+  line-height: 1;
 }
 
 .euiFormControlLayoutIcons {
   pointer-events: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 12px;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
@@ -6226,9 +6144,31 @@ The following files still use the Sass version:
 .euiFormControlLayoutIcons > * + * {
   margin-left: 6px;
 }
-.euiFormControlLayout--compressed .euiFormControlLayoutIcons {
+.euiFormControlLayoutIcons--absolute {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 12px;
+}
+.euiFormControlLayout--compressed .euiFormControlLayoutIcons--absolute {
   left: 8px;
 }
+.euiFormControlLayoutIcons--static {
+  position: static;
+  height: 100%;
+  -webkit-align-self: stretch;
+          align-self: stretch;
+  -webkit-flex-grow: 0;
+          flex-grow: 0;
+  padding-inline: 12px;
+}
+.euiFormControlLayout--compressed .euiFormControlLayoutIcons--static {
+  padding-inline: 8px;
+}
+
+.euiFormControlLayoutIcons--left {
+  z-index: 1;
+}
 
 .euiFormControlLayoutIcons--right {
   left: auto;
@@ -10316,38 +10256,10 @@ button.euiSuggestItem:hover .euiSuggestItem__label, button.euiSuggestItem:focus
   border-radius: 6px;
 }
 
-.euiDatePickerRange {
-  border-radius: 6px;
-}
-
 .euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker {
   border: none;
 }
 
-.euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.euiFormControlLayout--compressed.euiSuperDatePicker .euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.euiDatePopoverButton--start {
-  text-align: center;
-}
-
-.euiDatePopoverButton--end {
-  text-align: center;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-.euiDatePopoverButton--end.euiDatePopoverButton--compressed {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
 .euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__title {
   line-height: 1.5;
 }