@elastic/eui-theme-common 0.0.3 → 0.0.5

package/src/global_styling/react_date_picker/_date_picker.scss

@@ -1,772 +0,0 @@
-/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0
-** https://github.com/Hacker0x01/react-datepicker
-**
-** In places where features were disabled, I've commented out the original Sass
-** selectors rather than removing it so we can better understand what's changed.
-** Commented out selectors that don't have properties indicate that we are not
-** using those dom elements for styling of any kind. For example, react-datepicker
-** has lots of pointer arrows attached to its popovers, but we choose not to render
-** then in any way.
-**
-** Similarly, you will also find several times where we use display: none to
-** completely remove extraneous UI (they had some overly obvious legends for example).
-*/
-
-
-// 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 datePickerArrow {
-  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=);
-  }
-}
-
-// The only "new" css in this component is a wrapper class for dealing with shadows.
-// This is mostly here so that we can provide an inline version that doesn't have the
-// shadows and depth.
-.euiDatePicker {
-  .euiFormControlLayout {
-    height: auto;
-  }
-
-  &.euiDatePicker--shadow {
-    .react-datepicker-popper {
-      @include euiBottomShadowMedium;
-
-      border: $euiBorderThin;
-      background-color: $euiColorEmptyShade;
-      border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-    }
-
-    // If the shadow is on, and it is inline, we need to put the shadow on the datepicker
-    // itself rather than the popper.
-    &.euiDatePicker--inline {
-      .react-datepicker {
-        @include euiBottomShadowMedium;
-
-        border: $euiBorderThin;
-        background-color: $euiColorEmptyShade;
-        border-radius: $euiBorderRadius;
-      }
-    }
-  }
-}
-
-// .react-datepicker-wrapper {
-// }
-
-.react-datepicker {
-  @include euiFont;
-  font-size: $euiFontSizeXS;
-  color: $euiColorFullShade;
-  display: flex;
-  position: relative;
-  border-radius: $euiBorderRadius;
-}
-
-// When in time only mode we make the dropdown look more like the combo box styling.
-.react-datepicker--time-only {
-
-  .react-datepicker__time-container {
-
-    .react-datepicker__time {
-
-      .react-datepicker__time-box {
-        width: 100%;
-
-        .react-datepicker__time-list li.react-datepicker__time-list-item {
-          font-size: $euiFontSizeS;
-          text-align: left;
-          padding-left: $euiSizeXL + $euiSizeXS;
-          padding-right: $euiSizeXL + $euiSizeXS;
-          color: $euiTextColor;
-
-          &.react-datepicker__time-list-item--selected {
-            color: $euiColorGhost;
-          }
-
-          &.react-datepicker__time-list-item--disabled{
-            color: $euiColorDisabledText
-          }
-        }
-      }
-    }
-  }
-
-
-  .react-datepicker__time-container {
-    border-left: 0;
-  }
-
-  // .react-datepicker__triangle {
-  // }
-  // .react-datepicker__time {
-  // }
-  // .react-datepicker__time-box {
-  // }
-}
-
-// .react-datepicker__triangle {
-// }
-
-.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper {
-  z-index: $euiZContentMenu;
-  animation: euiAnimFadeIn $euiAnimSpeedFast ease-in;
-
-  &[data-placement^="bottom"] {
-
-    // .react-datepicker__triangle {
-    // }
-  }
-
-  &[data-placement^="top"] {
-    @include euiBottomShadowFlat;
-
-    border-radius: $euiBorderRadius $euiBorderRadius 0 0;
-
-    // .react-datepicker__triangle {
-    // }
-  }
-
-  &[data-placement^="right"] {
-    margin-left: 0;
-
-    // .react-datepicker__triangle {
-    // }
-  }
-
-  &[data-placement^="left"] {
-    margin-right: 0;
-
-    // .react-datepicker__triangle {
-    // }
-  }
-}
-
-.react-datepicker__header {
-  text-align: center;
-  border-top-left-radius: $euiBorderRadius;
-  border-top-right-radius: $euiBorderRadius;
-
-  &--time {
-    display: none;
-  }
-}
-
-.react-datepicker__header__dropdown {
-  padding: $euiSize 0 $euiSizeS 0;
-}
-
-.react-datepicker__year-dropdown-container--select,
-.react-datepicker__month-dropdown-container--select,
-.react-datepicker__month-year-dropdown-container--select,
-.react-datepicker__year-dropdown-container--scroll,
-.react-datepicker__month-dropdown-container--scroll,
-.react-datepicker__month-year-dropdown-container--scroll {
-  display: inline-block;
-  margin: 0 $euiSizeXS;
-}
-
-.react-datepicker__current-month,
-.react-datepicker-time__header {
-  display: none;
-}
-
-.react-datepicker-time__header {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.react-datepicker__navigation {
-  cursor: pointer;
-  position: absolute;
-  // Pixel pushing because these are icons against text
-  top: $euiSize + ($euiSizeXS / 2);
-  width: 0;
-  padding: 0;
-  z-index: 1;
-  text-indent: -999em;
-  overflow: hidden;
-
-  &--previous {
-    @include datePickerArrow;
-    left: $euiSize + $euiSizeXS;
-    height: $euiSize;
-    width: $euiSize;
-    transform: rotate(90deg);
-    transition: transform $euiAnimSpeedExtraFast ease-in-out;
-
-    &:hover, &:focus {
-      border-radius: $euiBorderRadius;
-      transform: scale(1.2) rotate(90deg);
-    }
-
-    &:hover {
-      background-color: $euiColorLightestShade;
-      box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade;
-    }
-
-    &:focus {
-      background-color: $euiFocusBackgroundColor;
-      box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor;
-    }
-
-    &--disabled,
-    &--disabled:hover {
-      cursor: not-allowed ;
-      opacity: .2;
-    }
-  }
-
-  &--next {
-    @include datePickerArrow;
-    // Pixel value because of some padding on the icon
-    right: 20px;
-    height: $euiSize;
-    width: $euiSize;
-    transform: rotate(-90deg);
-
-    &--with-time:not(&--with-today-button) {
-      // This a pixel value against the width of the cal. It needs
-      // to be left because the timepicker adds more width
-      left: 248px;
-    }
-
-    &:hover, &:focus {
-      border-radius: $euiBorderRadius;
-      transform: scale(1.2) rotate(-90deg);
-    }
-
-    &:hover {
-      background-color: $euiColorLightestShade;
-      box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade;
-    }
-
-    &:focus {
-      background-color: $euiFocusBackgroundColor;
-      box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor;
-    }
-
-    &--disabled,
-    &--disabled:hover {
-      cursor: not-allowed ;
-      opacity: .2;
-    }
-  }
-
-  &--years {
-    position: relative;
-    top: 0;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-
-    &-previous {
-      top: $euiSizeXS;
-      border-top-color: $euiColorLightestShade;
-
-      &:hover {
-        border-top-color: darken($euiColorLightestShade, 10%);
-      }
-    }
-
-    &-upcoming {
-      top: -$euiSizeXS;
-      border-bottom-color: $euiColorLightestShade;
-
-      &:hover {
-        border-bottom-color: darken($euiColorLightestShade, 10%);
-      }
-    }
-  }
-}
-
-// .react-datepicker__month-container {
-// }
-
-.react-datepicker__month {
-  margin: 0 $euiSize $euiSize $euiSize;
-  text-align: center;
-  border-radius: $euiBorderRadius;
-}
-
-.react-datepicker__time-container {
-  border-left: $euiBorderColor;
-  width: auto;
-  display: flex;
-  padding: $euiSize 0;
-  border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
-  flex-grow: 1;
-
-  // &--with-today-button {
-  // }
-
-  .react-datepicker__time {
-    position: relative;
-    flex-grow: 1;
-    display: flex;
-    padding-left: $euiSizeXS;
-    flex-direction: column;
-
-    .react-datepicker__time-box {
-      width: auto;
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-
-      ul.react-datepicker__time-list {
-        @include euiScrollBar;
-        height: 204px !important;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        overflow-y: auto;
-        align-items: center;
-
-        li.react-datepicker__time-list-item {
-          padding: $euiSizeXS $euiSizeS;
-          margin-bottom: $euiSizeXS;
-          text-align: right;
-          color: $euiColorDarkShade;
-          white-space: nowrap;
-          // IE needs this to fix collapsing flex
-          line-height: $euiSizeM;
-
-          &:hover,
-          &:focus {
-            cursor: pointer;
-            text-decoration: underline;
-          }
-          &--selected {
-            background-color: $euiColorPrimary;
-            color: white;
-            border-radius: $euiBorderRadius / 2;
-            &:hover {
-              background-color: $euiColorPrimary;
-            }
-          }
-          &--disabled {
-            color: $euiColorLightShade;
-
-            &:hover {
-              cursor: not-allowed;
-              text-decoration: none;
-              background-color: transparent;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.react-datepicker__week-number {
-  color: $euiColorLightestShade;
-  display: inline-block;
-  width: $euiSizeXL;
-  line-height: $euiSizeXL - $euiSizeXS;
-  text-align: center;
-  margin: 0 $euiSizeXS;
-  &.react-datepicker__week-number--clickable {
-    cursor: pointer;
-    &:hover {
-      border-radius: $euiBorderRadius;
-      background-color: $euiColorEmptyShade;
-    }
-  }
-}
-
-.react-datepicker__day-names,
-.react-datepicker__week {
-  white-space: nowrap;
-}
-
-.react-datepicker__day-name,
-.react-datepicker__day,
-.react-datepicker__time-name {
-  color: $euiColorFullShade;
-  display: inline-block;
-  width: $euiSizeXL;
-  line-height: $euiSizeXL - $euiSizeXS;
-  text-align: center;
-  margin: 0 $euiSizeXS / 2;
-}
-
-.react-datepicker__day-name {
-  color: $euiColorDarkShade;
-  text-transform: uppercase;
-}
-
-.react-datepicker__day {
-  cursor: pointer;
-  border: solid 2px transparent;
-  transition: transform $euiAnimSpeedExtraFast ease-in-out;
-
-  &:hover:not(&--disabled) {
-    text-decoration: underline;
-    font-weight: $euiFontWeightBold;
-    transform: scale(1.2);
-  }
-
-  &--today {
-    font-weight: bold;
-    color: $euiColorPrimary;
-  }
-  &--outside-month {
-    color: $euiColorDarkShade;
-  }
-
-  &--highlighted {
-    border-radius: $euiBorderRadius;
-    background-color: $euiColorSuccess;
-    color: $euiColorGhost;
-
-    &:hover {
-      background-color: darken($euiColorSuccess, 5%);
-    }
-  }
-
-  &--in-range {
-    background-color: transparentize($euiColorPrimary, .9);
-    color: $euiColorFullShade;
-    border-radius: 0;
-    border-top: solid 6px $euiColorEmptyShade;
-    border-bottom: solid 6px $euiColorEmptyShade;
-    border-right: none;
-    border-left: none;
-    line-height: $euiSizeL - $euiSizeXS;
-  }
-
-  &--selected,
-  &--in-selecting-range {
-    height: $euiSizeXL;
-    margin: 0 $euiSizeXS / 2;
-    border-radius: $euiBorderRadius;
-    background-color: $euiColorPrimary;
-    line-height: $euiSizeL + $euiSizeXS;
-    border: solid $euiSizeXS / 2 $euiColorPrimary;
-    color: $euiColorGhost;
-
-    &:hover {
-      background-color: darken($euiColorPrimary, 5%);
-    }
-  }
-
-  &--keyboard-selected {
-    border-radius: $euiBorderRadius;
-    border: solid $euiSizeXS / 2 $euiColorPrimary;
-    font-weight: $euiFontWeightBold;
-
-    &:hover {
-      background-color: darken($euiColorPrimary, 5%);
-      color: $euiColorGhost;
-    }
-  }
-
-  &--in-selecting-range:not(&--in-range) {
-    background-color: rgba($euiColorPrimary, 0.5);
-  }
-
-  &--in-range:not(&--in-selecting-range) {
-    .react-datepicker__month--selecting-range & {
-      background-color: $euiColorEmptyShade;
-      color: $euiColorFullShade;
-    }
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    color: $euiColorLightShade;
-
-    &:hover {
-      background-color: transparent;
-    }
-  }
-}
-
-.react-datepicker__input-container {
-  position: relative;
-}
-
-.react-datepicker__year-read-view {
-  font-weight: $euiFontWeightLight;
-  color: $euiColorDarkShade;
-}
-
-.react-datepicker__month-read-view {
-  font-weight: $euiFontWeightMedium;
-}
-
-.react-datepicker__year-read-view,
-.react-datepicker__month-read-view,
-.react-datepicker__month-year-read-view {
-  font-size: $euiFontSizeL;
-
-  &:hover {
-    cursor: pointer;
-    color: $euiColorPrimary;
-
-    .react-datepicker__year-read-view--down-arrow,
-    .react-datepicker__month-read-view--down-arrow {
-      border-top-color: darken($euiColorLightestShade, 10%);
-    }
-  }
-
-  &--down-arrow {
-    display: none;
-  }
-}
-
-.react-datepicker__year-dropdown,
-.react-datepicker__month-dropdown,
-.react-datepicker__month-year-dropdown {
-  background-color: $euiColorEmptyShade;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: $euiBorderRadius;
-  display: flex;
-  flex-wrap: wrap;
-  animation: euiAnimFadeIn $euiAnimSpeedFast ease-in;
-  align-content: space-around;
-  align-items: center;
-  padding: $euiSizeS;
-
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  // &--scrollable {
-  //   height: 150px;
-  //   overflow-y: scroll;
-  // }
-}
-
-// Strike that, reverse it Willy Wonka style
-.react-datepicker__year-dropdown {
-  flex-wrap: wrap-reverse;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-
-.react-datepicker__year-option,
-.react-datepicker__month-option,
-.react-datepicker__month-year-option {
-  font-size: $euiFontSizeXS;
-  padding: $euiSizeS;
-  color: $euiColorDarkestShade;
-  flex-basis: 33.3%;
-
-  &:first-of-type {
-    border-top-left-radius: $euiBorderRadius;
-    border-top-right-radius: $euiBorderRadius;
-  }
-
-  &:last-of-type {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border-bottom-left-radius: $euiBorderRadius;
-    border-bottom-right-radius: $euiBorderRadius;
-  }
-
-  &:hover {
-    background-color: $euiColorLightestShade;
-
-    .react-datepicker__navigation--years-upcoming {
-      border-bottom-color: darken($euiColorLightestShade, 10%);
-    }
-
-    .react-datepicker__navigation--years-previous {
-      border-top-color: darken($euiColorLightestShade, 10%);
-    }
-  }
-
-  &--selected {
-    display: none;
-  }
-}
-
-.react-datepicker__screenReaderOnly {
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
-.react-datepicker__year-option--preselected,
-.react-datepicker__month-option--preselected {
-  background: $euiFocusBackgroundColor;
-}
-
-.react-datepicker__year-option--selected_year.react-datepicker__year-option--preselected,
-.react-datepicker__month-option--selected_month.react-datepicker__month-option--preselected{
-  background: $euiColorPrimary;
-}
-
-.react-datepicker__time-list-item--preselected,
-.react-datepicker__year-option--preselected,
-.react-datepicker__month-option--preselected {
-  background: darken($euiFocusBackgroundColor, 5%);
-}
-
-.react-datepicker__time-container--focus {
-  background: $euiFocusBackgroundColor;
-}
-
-.react-datepicker__month-read-view:focus,
-.react-datepicker__year-read-view:focus {
-  text-decoration: underline;
-}
-
-.react-datepicker__month--accessible:focus {
-  background: $euiFocusBackgroundColor;
-
-  .react-datepicker__day--in-range:not(.react-datepicker__day--selected) {
-    border-top-color: $euiFocusBackgroundColor;
-    border-bottom-color: $euiFocusBackgroundColor;
-  }
-}
-.react-datepicker__navigation:focus {
-  background-color: $euiFocusBackgroundColor;
-}
-
-// These selectors are not a typo. react-datepicker has a bug where these selectors
-// output as "--selected_year". Sass has trouble compiling .--selected_year, so instead
-// we use this generic selector get around it.
-.react-datepicker__year-option--selected_year,
-.react-datepicker__month-option--selected_month {
-    background: $euiColorPrimary;
-    color: $euiColorEmptyShade;
-    font-weight: $euiFontWeightBold;
-    border-radius: $euiBorderRadius;
-}
-
-.react-datepicker__focusTrap {
-  display: flex;
-}
-
-// The below is for the portal version of react-datepicker which we do not use.
-// It is shown here just to know what their baseline includes.
-
-// .react-datepicker__close-icon {
-//   background-color: transparent;
-//   border: 0;
-//   cursor: pointer;
-//   display: inline-block;
-//   height: 0;
-//   outline: 0;
-//   padding: 0;
-//   vertical-align: middle;
-//
-//   &::after {
-//     background-color: $euiColorPrimary;
-//     border-radius: 50%;
-//     bottom: 0;
-//     box-sizing: border-box;
-//     color: #fff;
-//     content: "\00d7";
-//     cursor: pointer;
-//     font-size: 12px;
-//     height: 16px;
-//     width: 16px;
-//     line-height: 1;
-//     margin: -8px auto 0;
-//     padding: 2px;
-//     position: absolute;
-//     right: 7px;
-//     text-align: center;
-//     top: 50%;
-//   }
-// }
-//
-// .react-datepicker__today-button {
-//   background: $euiColorEmptyShade;
-//   border-top: 1px solid $euiBorderColor;
-//   cursor: pointer;
-//   text-align: center;
-//   font-weight: bold;
-//   padding: 5px 0;
-//   clear: left;
-// }
-//
-// .react-datepicker__portal {
-//   position: fixed;
-//   width: 100vw;
-//   height: 100vh;
-//   background-color: rgba(0, 0, 0, 0.8);
-//   left: 0;
-//   top: 0;
-//   justify-content: center;
-//   align-items: center;
-//   display: flex;
-//   z-index: 2147483647;
-//
-//   .react-datepicker__day-name,
-//   .react-datepicker__day,
-//   .react-datepicker__time-name {
-//     width: 3rem;
-//     line-height: 3rem;
-//   }
-//
-//   // Resize for small screens
-//   @media (max-width: 400px), (max-height: 550px) {
-//     .react-datepicker__day-name,
-//     .react-datepicker__day,
-//     .react-datepicker__time-name {
-//       width: 2rem;
-//       line-height: 2rem;
-//     }
-//   }
-//
-//   .react-datepicker__current-month,
-//   .react-datepicker-time__header {
-//     font-size: $euiFontSizeXS * 1.8;
-//   }
-//
-//   .react-datepicker__navigation {
-//     border: 1.8 * $euiSize solid transparent;
-//   }
-//
-//   .react-datepicker__navigation--previous {
-//     border-right-color: $euiColorLightestShade;
-//
-//     &:hover {
-//       border-right-color: darken($euiColorLightestShade, 10%);
-//     }
-//
-//     &--disabled,
-//     &--disabled:hover {
-//       border-right-color: $datepicker__navigation-disabled-color;
-//       cursor: default;
-//     }
-//   }
-//
-//   .react-datepicker__navigation--next {
-//     border-left-color: $euiColorLightestShade;
-//
-//     &:hover {
-//       border-left-color: darken($euiColorLightestShade, 10%);
-//     }
-//
-//     &--disabled,
-//     &--disabled:hover {
-//       border-left-color: $datepicker__navigation-disabled-color;
-//       cursor: default;
-//     }
-//   }
-// }