166 lines
3.6 KiB
SCSS
166 lines
3.6 KiB
SCSS
@use "sass:color";
|
|
|
|
@mixin daylight() {
|
|
@-webkit-keyframes pulse {
|
|
to {
|
|
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
|
|
}
|
|
}
|
|
@-moz-keyframes pulse {
|
|
to {
|
|
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
|
|
}
|
|
}
|
|
@-ms-keyframes pulse {
|
|
to {
|
|
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
|
|
}
|
|
}
|
|
@keyframes pulse {
|
|
to {
|
|
box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
|
|
}
|
|
}
|
|
|
|
.esri-daylight {
|
|
padding: var(--esri-widget-padding);
|
|
width: 350px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
flex-basis: auto;
|
|
justify-content: space-between;
|
|
gap: $cap-spacing;
|
|
|
|
&__anchor {
|
|
font-size: $font-size--small;
|
|
}
|
|
|
|
&__panel--error {
|
|
padding: 0 $side-spacing;
|
|
animation: esri-fade-in 250ms ease-in-out;
|
|
}
|
|
|
|
&__container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: $side-spacing;
|
|
}
|
|
|
|
.esri-date-picker,
|
|
&__season-picker {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.esri-date-picker__calendar-toggle {
|
|
height: 32px;
|
|
font-size: $font-size--small;
|
|
}
|
|
|
|
&__container,
|
|
&__season-picker {
|
|
&--disabled {
|
|
opacity: $opacity--disabled;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&__play-pause-button {
|
|
flex: 0;
|
|
}
|
|
|
|
@include timeSlider();
|
|
|
|
.esri-slider.esri-slider--horizontal .esri-slider__thumb {
|
|
$thumb-size: 27px;
|
|
|
|
width: $thumb-size;
|
|
height: $thumb-size;
|
|
left: -$thumb-size * 0.5;
|
|
top: -$thumb-size * 0.5;
|
|
background-color: $button-color;
|
|
border: 7px solid #0079c14d;
|
|
background-clip: padding-box;
|
|
background-position: 0 0 !important;
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background-color: $button-color--hover;
|
|
}
|
|
}
|
|
|
|
.esri-slider.esri-slider--horizontal {
|
|
z-index: 1;
|
|
.esri-slider-with-dropdown__box {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $font-size--tiny-time-slider;
|
|
min-width: inherit;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
margin-top: -$cap-spacing--three-quarters;
|
|
gap: $cap-spacing--eighth;
|
|
z-index: 1;
|
|
will-change: left;
|
|
text-align: center;
|
|
|
|
.esri-slider__label {
|
|
display: inline-block;
|
|
position: static;
|
|
inset-inline-start: auto;
|
|
margin: 0;
|
|
min-width: auto;
|
|
outline: none;
|
|
list-style: none;
|
|
line-height: 1em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.esri-slider__tick-label {
|
|
line-height: 1em;
|
|
}
|
|
|
|
.esri-slider__label-input {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.esri-slider-with-dropdown__box--drop-down-on,
|
|
.esri-slider-with-dropdown__box--drop-down-off {
|
|
width: min-content;
|
|
}
|
|
}
|
|
|
|
.esri-slider--ampm-on .esri-slider.esri-slider--horizontal {
|
|
padding: 30px 8px 42px 8px;
|
|
|
|
~ .esri-daylight__play-pause-button {
|
|
margin-bottom: 10px; // Align vertically with the slider
|
|
}
|
|
}
|
|
|
|
.esri-slider--shadow-on .esri-slider__thumb {
|
|
box-shadow: 2px 2px 5px 0px rgba(148, 148, 148, 0.63);
|
|
}
|
|
|
|
.esri-slider.esri-slider--horizontal .esri-widget__anchor.esri-slider-with-dropdown__anchor {
|
|
font-size: $font-size--tiny-time-slider;
|
|
color: $interactive-font-color;
|
|
&:hover {
|
|
color: $interactive-font-color--hover;
|
|
}
|
|
}
|
|
|
|
calcite-label {
|
|
--calcite-label-margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $include_Daylight == true {
|
|
@include daylight();
|
|
}
|