@mixin timeSlider() { $widget-min-width: 375px; $primary-color: $border-color--contrast; $highlight-color: $button-color; $invalid-color: #d83020; .esri-time-slider { cursor: default; min-width: $widget-min-width; @include defaultBoxShadow(); &__layout { &--wide { .esri-time-slider { &__row { display: flex; height: 88px; overflow: hidden; } &__animation { width: 64px; } &__time-extent { align-items: center; border: { left: 1px solid $border-color; right: 1px solid $border-color; } display: flex; flex-flow: column nowrap; justify-content: center; width: 110px; } &__min, &__max { width: 110px; } &__max { border: { right: 1px solid $border-color; } } &__slider { flex: auto; } &__previous, &__next { width: 42px; } &__warning { font-size: $font-size__h1; margin: 0 0 4px 0; &-text { margin: 0 3px 0 3px; text-align: center; } } } } &--compact { .esri-time-slider { &__row { display: flex; &:nth-child(1), &:nth-child(3) { padding: { bottom: $cap-spacing--half; top: $cap-spacing--half; } } &:nth-child(2) { height: 88px; overflow: hidden; } } &__animation { width: 35px; } &__time-extent { align-items: center; display: flex; flex: auto; flex-flow: row nowrap; justify-content: center; &-separator { margin: 0 7px 0 7px; } } &__slider { flex: auto; } &__min, &__max { flex: auto; margin: 0 35px 0 35px; } &__min { align-items: flex-start; } &__max { align-items: flex-end; } &__previous, &__next { width: 35px; } &__warning { line-height: $font-size__body; margin: 0 4px 0 0; } } } } &__mode { &--instant { .esri-slider { &__segment-0, &__segment-1 { background-color: $primary-color; } } } &--time-window { .esri-slider { &__segment-1 { background-color: $highlight-color; height: 6px; margin-top: -1px; } &__segment-0, &__segment-2 { background-color: $primary-color; } } &.esri-time-slider { &--out-of-bounds { .esri-slider { &__segment-1 { background-color: $invalid-color; } } } } } &--cumulative-from-start { .esri-slider { &__segment-0 { background-color: $highlight-color; height: 6px; margin-top: -1px; } &__segment-1 { background-color: $primary-color; } } &.esri-time-slider { &--out-of-bounds { .esri-slider { &__segment-0 { background-color: $invalid-color; } } } } } &--cumulative-from-end { .esri-slider { &__segment-0 { background-color: $primary-color; } &__segment-1 { background-color: $highlight-color; height: 6px; margin-top: -1px; } } &.esri-time-slider { &--out-of-bounds { .esri-slider { &__segment-1 { background-color: $invalid-color; } } } } } } &__animation { &-button { border: none; height: 100%; width: 100%; .esri-icon-play, .esri-icon-pause { font-size: 24px; } } } &__time-extent { font-size: $font-size__body; line-height: $font-size__body; color: $highlight-color; &-group { display: flex; flex-flow: column nowrap; align-items: center; } &-date, &-separator { font-weight: $font-weight--bold; } } &__min, &__max { align-items: center; display: flex; flex-flow: column nowrap; font-size: $font-size__body; justify-content: center; line-height: $font-size__body; &-date { font-weight: $font-weight--bold; } } &__slider { background-color: $background-color--offset; padding: 0 40px 0 40px; .esri-slider { margin-top: -19px; background-color: $background-color--offset; // This is a fix specifically for IE11. Without it ticks and tick labels are severely displaced. &__content { height: 2px; } &__thumb { border-width: 3px; top: -6px; } &__tick-label { font-size: $font-size__body; margin-top: 23px; white-space: nowrap; } &__tick { background: $primary-color; width: 1px; &.minorTick { height: 4px; } &.majorTick { height: 8px; } } &__ticks { margin: 16px 0 0 0; } &__track { height: 4px; } } } &__previous, &__next { &-button { border: none; height: 100%; width: 100%; .esri-icon-reverse, .esri-icon-forward { font-size: 24px; } } } &--out-of-bounds { .esri-slider { &__thumb { border-color: $invalid-color; } } .esri-time-slider { &__time-extent { color: $invalid-color; } } } } html[dir="rtl"] .esri-time-slider { &__layout { &--wide { .esri-time-slider { &__row { flex-direction: row-reverse; } } } &--compact { .esri-time-slider { &__row { &:nth-child(3) { flex-direction: row-reverse; } } &__min { align-items: flex-end; } &__max { align-items: flex-start; } } } } } } @if $include_TimeSlider == true { @include timeSlider(); }