@elastic/eui 95.4.0 → 95.6.0

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_days.scss

@@ -1,132 +0,0 @@
-/**
- * LEGEND
- * __day-name : Week headers like Su, Mo, etc
- * __day : Number on the calendar
- *       --highlighted
- *       --disabled :               _this.isDisabled(),
- *       --selected :               _this.isSameDay(_this.props.selected),
-    *       --range-start :            _this.isRangeStart(),
-    *       --range-end :              _this.isRangeEnd(),
- *       --keyboard-selected :      _this.isKeyboardSelected(),
- *       --in-range :               _this.isInRange(),
-    *       --in-selecting-range :     _this.isInSelectingRange(),
-    *       --selecting-range-start :  _this.isSelectingRangeStart(),
-    *       --selecting-range-end :    _this.isSelectingRangeEnd(),
- *       --today :                  _this.isSameDay(now(_this.props.utcOffset)),
- *       --weekend :                _this.isWeekend(),
- *       --outside-month :          _this.isOutsideMonth()
- */
-
-
-.react-datepicker__day-names,
-.react-datepicker__week {
-  white-space: nowrap;
-  display: flex;
-  justify-content: space-between;
-  flex-grow: 1;
-}
-
-.react-datepicker__day-name,
-.react-datepicker__day {
-  font-weight: $euiFontWeightMedium;
-  text-align: center;
-  color: $euiTitleColor;
-  display: inline-block;
-  width: $euiSizeXL;
-  line-height: $euiSizeXL;
-  border-radius: $euiBorderRadiusSmall;
-  margin: ($euiSizeXS / 2);
-}
-
-.react-datepicker__day-name {
-  color: $euiTextSubduedColor;
-}
-
-.react-datepicker__day {
-  cursor: pointer;
-  transition: transform $euiAnimSpeedExtraFast ease-in-out;
-
-  &:hover {
-    @include euiButtonDefaultStyle('primary', false);
-    text-decoration: underline;
-
-    @include euiCanAnimate {
-      // Setting the transform under can animate because its jarring
-      transform: scale(1.1);
-    }
-  }
-
-  &--today {
-    color: $euiColorPrimary;
-    font-weight: $euiFontWeightBold;
-  }
-
-  &--outside-month {
-    color: $euiTextSubduedColor;
-  }
-
-  &--highlighted,
-  &--highlighted:hover {
-    @include euiButtonDefaultStyle('success', false);
-  }
-
-  &--in-range,
-  &--in-range:hover {
-    @include euiButtonDefaultStyle('primary', false);
-  }
-
-  // Ranges use 2 side box-shadows that are the same as the button style
-  // to create a solid blue highlight, only rounded at the ends
-  &--in-range:not(&--selected):not(:hover),
-  &--in-range#{&}--disabled:not(.react-datepicker__day--selected),
-  &--in-range#{&}--disabled:not(.react-datepicker__day--selected):hover {
-    $backgroundColor: transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
-
-    box-shadow: -2px 0 $backgroundColor,
-                 2px 0 $backgroundColor;
-    border-radius: 0;
-
-    &:first-of-type {
-      box-shadow: 2px 0 $backgroundColor;
-    }
-
-    &:last-of-type {
-      box-shadow: -2px 0 $backgroundColor;
-    }
-  }
-
-  &--selected,
-  &--in-selecting-range,
-  &--selected:hover,
-  &--in-selecting-range:hover {
-    @include euiButtonFillStyle;
-  }
-
-  &--in-selecting-range:not(&--in-range) {
-    background-color: transparentize($euiColorDanger, .5); //todo
-  }
-
-  &--disabled,
-  &--disabled:hover {
-    $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%);
-    background-color: transparentize($euiButtonColorDisabled, .9);
-    color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated);
-    cursor: not-allowed;
-    text-decoration: none;
-    transform: none;
-
-    &.react-datepicker__day--in-range:not(.react-datepicker__day--selected),
-    &.react-datepicker__day--in-range:not(.react-datepicker__day--selected):hover {
-      $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorPrimary, 80%);
-      color: makeDisabledContrastColor($backgroundColorSimulated, $backgroundColorSimulated);
-      background-color: transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
-    }
-  }
-
-  &--disabled.react-datepicker__day--selected,
-  &--disabled.react-datepicker__day--selected:hover {
-    $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorDanger, 80%);
-    color: makeDisabledContrastColor($euiColorDanger, $backgroundColorSimulated);
-    background-color: transparentize($euiColorDanger, $euiButtonDefaultTransparency);
-  }
-}

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss

@@ -1,147 +0,0 @@
-/**
- * LEGEND
- * __header__dropdown : Contains the month and year, but affords for the navigational arrows
-
- *   __month-dropdown-container: Contains both static/selected control and the dropdown
- *     __month-read-view: The static control
- *     __month-dropdown: The absolutely positioned list
- *       __month-option: Each option in the list
- *                       --selected_month
- *                       --selected
- *                       --preselected
-
- *   __year-dropdown-container: Contains both static/selected control and the dropdown
- *     __year-read-view: The static control
- *     __year-dropdown: The absolutely positioned list
- *       __year-option: Each option in the list
- *                       --selected_year
- *                       --selected
- *                       --preselected
- */
-
-// Absolutely positioned across the *whole* top of the calendar
-.react-datepicker__header__dropdown {
-  padding: $euiDatePickerGap * 2;
-  display: flex;
-  gap: $euiDatePickerGap;
-  position: absolute;
-  top: 0;
-  left: $euiDatePickerButtonSize + $euiDatePickerGap;
-  right: $euiDatePickerButtonSize + $euiDatePickerGap;
-  justify-content: center;
-}
-
-/**
- * Make the top selectors look like select inputs
- */
-.react-datepicker__year-read-view,
-.react-datepicker__month-read-view,
-.react-datepicker__month-year-read-view {
-  @include euiFormControlStyle($borderOnly: false, $includeStates: false, $includeSizes: false);
-  @include euiFormControlStyleCompressed($borderOnly: true, $includeStates: false);
-  height: $euiFormControlCompressedHeight;
-  font-weight: $euiFontWeightMedium;
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  &--down-arrow {
-    @include datePickerCaret;
-    right: $euiSizeS;
-    height: $euiSizeM;
-    width: $euiSizeM;
-    display: inline-block;
-    background-size: cover;
-  }
-
-  &--selected-month,
-  &--selected-year {
-    @include euiTextTruncate;
-  }
-}
-
-.react-datepicker__year-dropdown-container,
-.react-datepicker__month-dropdown-container {
-  position: relative;
-  display: inline-block;
-  flex-grow: 1;
-  max-width: $euiFormMaxWidth;
-}
-
-// Using the unnamed div for the years dropdown because we want to be able to control the
-// flex direction of the years but you can't put overflow on a flex group
-.react-datepicker__year-dropdown-container > div:not([class*='read-view']),
-.react-datepicker__month-dropdown {
-  @include euiYScroll;
-  @include euiBottomShadowSmall;
-  height: auto;
-  max-height: 250px; // Set an explicit height, something at least smaller than the overall height
-  background-color: $euiColorEmptyShade;
-  position: absolute;
-  z-index: 1;
-  border-radius: $euiBorderRadius;
-  min-width: $euiDatePickerMinControlWidth;
-  width: 100%;
-}
-
-.react-datepicker__year-dropdown-container > div:not([class*='read-view']) {
-  // Reverse the direction of the years so that earlier is first
-  .react-datepicker__year-dropdown {
-    padding: $euiSizeXS;
-    display: flex;
-    flex-direction: column-reverse;
-    justify-content: flex-end;
-  }
-}
-
-.react-datepicker__month-dropdown-container {
-  flex-grow: 2;
-
-  .react-datepicker__month-dropdown {
-    padding: $euiSizeXS;
-    min-width: $euiDatePickerMaxControlWidth;
-  }
-}
-
-.react-datepicker__year-option,
-.react-datepicker__month-option,
-.react-datepicker__month-year-option {
-  padding: 0 $euiSizeS;
-  height: $euiButtonHeightXSmall;
-  line-height: $euiButtonHeightXSmall;
-  border-radius: $euiBorderRadiusSmall;
-  font-size: $euiFontSizeS;
-  margin:  $euiDatePickerGap 0;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-
-  &--selected {
-    display: none;
-  }
-}
-
-.react-datepicker__year-option--preselected,
-.react-datepicker__month-option--preselected {
-  &,
-  &:hover {
-    background: $euiFocusBackgroundColor;
-  }
-}
-
-.react-datepicker__year-option--selected_year,
-.react-datepicker__month-option--selected_month {
-  &,
-  &:hover {
-    @include euiButtonFillStyle;
-  }
-}

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss

@@ -1,30 +0,0 @@
-.react-datepicker__navigation--next,
-.react-datepicker__navigation--previous {
-  @include datePickerArrow;
-  cursor: pointer;
-  position: absolute;
-  top: $euiDatePickerGap * 2;
-  height: $euiDatePickerButtonSize;
-  width: $euiDatePickerButtonSize;
-  z-index: 1;
-  text-indent: -999em;
-  overflow: hidden;
-  background-repeat: no-repeat;
-  border-radius: $euiBorderRadiusSmall;
-  background-position: center;
-
-  &:hover,
-  &:focus {
-    background-color: $euiFocusBackgroundColor;
-  }
-}
-
-.react-datepicker__navigation--previous {
-  left: $euiDatePickerGap * 2;
-  transform: rotate(180deg);
-  transform-origin: center;
-}
-
-.react-datepicker__navigation--next {
-  right: $euiDatePickerGap * 2;
-}

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_times.scss

@@ -1,111 +0,0 @@
-/**
- * LEGEND
- * __time-list-item :
- *       --preselected : closest current time but not selected (also applied when using arrow keys to indicate focus)
- *       --selected
- *       --disabled
- *       --injected
- */
-
-.react-datepicker__header--time {
-  display: none;
-}
-
-.react-datepicker__time-container {
-  border-left: $euiBorderColor;
-  width: auto;
-  display: flex;
-  margin-top: $euiSizeXL + ($euiDatePickerGap * 2);
-  margin-left: $euiSizeS;
-  flex-grow: 1;
-  background-color: $euiPageBackgroundColor;
-  border-radius: $euiBorderRadius;
-
-  &--focus {
-    .react-datepicker__time-list-item--preselected {
-      text-decoration: underline;
-    }
-  }
-
-  @include euiBreakpoint('xs') {
-    margin-top: 0;
-  }
-}
-
-.react-datepicker__time,
-.react-datepicker__time-box {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.react-datepicker__time-list {
-  @include euiYScroll;
-  padding: $euiSizeXS $euiSizeM;
-  // Set the min-height with the following, but it should stretch to fit if the container is larger
-  height: 100px !important;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  align-items: center;
-  gap: $euiSizeXS;
-}
-
-// Mainly a copy/paste of .euiEmptyButton
-.react-datepicker__time-list-item {
-  @include euiButton;
-  transform: none !important; /* 1 */
-  animation: none !important; /* 1 */
-  transition-timing-function: ease-in; /* 2 */
-  transition-duration: $euiAnimSpeedFast; /* 2 */
-
-  padding: 0 $euiSizeS;
-  height: $euiButtonHeightXSmall;
-  line-height: $euiButtonHeightXSmall;
-  border-radius: $euiBorderRadiusSmall;
-  font-size: $euiFontSizeXS;
-
-  &--disabled,
-  &--disabled:hover {
-    text-decoration: none !important;
-    cursor: not-allowed;
-    color: $euiButtonColorDisabledText;
-    background-color: transparent;
-  }
-
-  &--injected,
-  &--injected:hover {
-    @include euiButtonDefaultStyle('success', false);
-  }
-
-  &--preselected,
-  &--preselected:hover {
-    background: $euiFocusBackgroundColor;
-  }
-
-  &--selected,
-  &--selected:hover {
-    @include euiButtonFillStyle;
-  }
-}
-
-
-// When in time only mode we make the dropdown look more like the combo box styling.
-.react-datepicker--time-only {
-  padding: 0 !important;
-
-  .react-datepicker__time-container {
-    background-color: transparent;
-    margin: 0;
-  }
-
-  .react-datepicker__time-list {
-    height: 204px !important;
-  }
-
-  .react-datepicker__time-list-item {
-    font-size: $euiFontSizeS;
-    min-width: $euiButtonMinWidth;
-    text-align: left;
-  }
-}

package/src/themes/amsterdam/global_styling/react_date_picker/_index.scss

@@ -1,8 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-@import 'date_picker_days';
-@import 'date_picker_times';
-@import 'date_picker_month_year';
-@import 'date_picker_navigation';
-@import 'date_picker';

package/src/themes/amsterdam/global_styling/react_date_picker/_mixins.scss

@@ -1,19 +0,0 @@
-// Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows.
-// There is one for light and dark.
-@mixin datePickerCaret {
-  background-position: center;
-  @if (lightness($euiColorEmptyShade) > 50) {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+);
-  } @else {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=);
-  }
-}
-
-@mixin datePickerArrow {
-  background-position: center;
-  @if (lightness($euiColorEmptyShade) > 50) {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzM0Mzc0MSIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=);
-  } @else {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=);
-  }
-}

package/src/themes/amsterdam/global_styling/react_date_picker/_variables.scss

@@ -1,9 +0,0 @@
-$euiDatePickerCalendarWidth: 284px;
-
-$euiDatePickerPadding: $euiSizeS;
-$euiDatePickerGap: $euiSizeXS;
-$euiDatePickerCalendarColumns: 7; // Just to make calculations obvious
-$euiDatePickerButtonSize: $euiSizeXL;
-
-$euiDatePickerMinControlWidth: 100px;
-$euiDatePickerMaxControlWidth: 140px;