@elastic/eui-theme-common 0.0.1

package/src/global_styling/react_date_picker/_date_picker.scss

@@ -0,0 +1,772 @@
+/* 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;
+//     }
+//   }
+// }