@arcgis/core 4.33.0-next.20250414 → 4.33.0-next.20250416

package/assets/esri/themes/base/widgets/_TimeSlider.scss

@@ -1,21 +1,14 @@
 @mixin timeSlider() {
-  $widget-min-width: 375px;
-  $primary-color: $border-color--contrast;
-  $highlight-color: $button-color;
-  $invalid-color: #d83020;
-
   .esri-time-slider {
     @include defaultBoxShadow();
 
-    cursor: default;
-    min-width: $widget-min-width;
+    min-width: 375px;
 
     &__layout {
       &--wide {
         .esri-time-slider {
           &__row {
             height: 88px;
-            overflow: hidden;
           }
 
           &__playback-controls {
@@ -24,7 +17,7 @@
             direction: ltr;
           }
 
-          &__animation {
+          &__play {
             width: 64px;
           }
 
@@ -34,6 +27,15 @@
             align-items: center;
             justify-content: center;
             width: 110px;
+
+            &-separator {
+              opacity: var(--calcite-opacity-disabled);
+              margin-top: var(--calcite-spacing-fixed-xxs);
+              margin-bottom: var(--calcite-spacing-fixed-xs);
+              background-color: var(--calcite-color-brand);
+              width: 75px;
+              height: var(--calcite-size-px);
+            }
           }
 
           &__time-extent,
@@ -41,18 +43,18 @@
           &__previous,
           &__actions {
             border: {
-              left: 1px solid $border-color;
+              left: var(--calcite-border-width-sm) solid var(--calcite-color-border-1);
             }
           }
 
           &__min,
           &__max {
-            align-items: center;
             width: 110px;
           }
 
           &__slider {
             flex: auto;
+            overflow: hidden;
           }
 
           &__previous,
@@ -61,19 +63,7 @@
           }
 
           &__warning {
-            margin-bottom: 4px;
-            font-size: $font-size__h1;
-
-            &-text {
-              margin-inline: 3px;
-              text-align: center;
-            }
-          }
-
-          &__actions {
-            &-button {
-              height: 88px;
-            }
+            flex-flow: column nowrap;
           }
         }
       }
@@ -102,7 +92,7 @@
             }
           }
 
-          &__animation {
+          &__play {
             width: 35px;
           }
 
@@ -114,16 +104,17 @@
             justify-content: center;
 
             &-separator {
+              opacity: var(--calcite-opacity-disabled);
               margin-inline: 7px;
+              background-color: var(--calcite-color-brand);
+              width: var(--calcite-size-px);
+              height: 20px;
             }
           }
 
-          &__slider {
-            flex: auto;
-          }
-
           &__min,
-          &__max {
+          &__max,
+          &__slider {
             flex: auto;
           }
 
@@ -143,15 +134,10 @@
           }
 
           &__warning {
-            margin-inline-end: 4px;
-            line-height: $font-size__body;
-          }
-
-          &__actions {
-            align-items: flex-end;
+            flex-flow: row nowrap;
 
-            &-button {
-              height: 36px;
+            &-label {
+              margin-inline-start: var(--calcite-spacing-xs);
             }
           }
         }
@@ -167,7 +153,7 @@
         .esri-slider {
           &__segment-0,
           &__segment-1 {
-            background-color: $primary-color;
+            background-color: var(--calcite-color-border-input);
           }
         }
       }
@@ -176,13 +162,13 @@
         .esri-slider {
           &__segment-1 {
             margin-top: -1px;
-            background-color: $highlight-color;
+            background-color: var(--calcite-color-brand);
             height: 6px;
           }
 
           &__segment-0,
           &__segment-2 {
-            background-color: $primary-color;
+            background-color: var(--calcite-color-border-input);
           }
         }
 
@@ -190,7 +176,7 @@
           &--out-of-bounds {
             .esri-slider {
               &__segment-1 {
-                background-color: $invalid-color;
+                background-color: var(--calcite-color-status-danger);
               }
             }
           }
@@ -201,12 +187,12 @@
         .esri-slider {
           &__segment-0 {
             margin-top: -1px;
-            background-color: $highlight-color;
+            background-color: var(--calcite-color-brand);
             height: 6px;
           }
 
           &__segment-1 {
-            background-color: $primary-color;
+            background-color: var(--calcite-color-border-input);
           }
         }
 
@@ -214,7 +200,7 @@
           &--out-of-bounds {
             .esri-slider {
               &__segment-0 {
-                background-color: $invalid-color;
+                background-color: var(--calcite-color-status-danger);
               }
             }
           }
@@ -224,12 +210,12 @@
       &--cumulative-from-end {
         .esri-slider {
           &__segment-0 {
-            background-color: $primary-color;
+            background-color: var(--calcite-color-border-input);
           }
 
           &__segment-1 {
             margin-top: -1px;
-            background-color: $highlight-color;
+            background-color: var(--calcite-color-brand);
             height: 6px;
           }
         }
@@ -238,7 +224,7 @@
           &--out-of-bounds {
             .esri-slider {
               &__segment-1 {
-                background-color: $invalid-color;
+                background-color: var(--calcite-color-status-danger);
               }
             }
           }
@@ -247,19 +233,23 @@
     }
 
     &__time-extent {
-      line-height: $font-size__body;
-      color: $highlight-color;
-      font-size: $font-size__body;
-
-      &-group {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-      }
+      &-start,
+      &-end {
+        &-group {
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: center;
+        }
 
-      &-date,
-      &-separator {
-        font-weight: $font-weight--bold;
+        &-date,
+        &-time {
+          --calcite-label-margin-bottom: 0;
+          --calcite-label-text-color: var(--calcite-color-brand);
+        }
+
+        &-date {
+          font-weight: var(--calcite-font-weight-bold);
+        }
       }
     }
 
@@ -268,26 +258,24 @@
       display: flex;
       flex-flow: column nowrap;
       justify-content: center;
-      line-height: $font-size__body;
-      font-size: $font-size__body;
 
       &-date {
-        font-weight: $font-weight--bold;
+        font-weight: var(--calcite-font-weight-bold);
+      }
+
+      &-date,
+      &-time {
+        --calcite-label-margin-bottom: 0;
       }
     }
 
     &__slider {
-      background-color: $background-color--offset;
+      background-color: var(--calcite-color-foreground-2);
       padding: 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;
-        }
+        background-color: var(--calcite-color-foreground-2);
 
         &__thumb {
           top: -6px;
@@ -297,11 +285,11 @@
         &__tick-label {
           margin-top: 23px;
           white-space: nowrap;
-          font-size: $font-size__body;
+          font-size: var(--calcite-font-size--2);
         }
 
         &__tick {
-          background: $primary-color;
+          background: var(--calcite-color-border-input);
           width: 1px;
 
           &.minorTick {
@@ -323,39 +311,58 @@
       }
     }
 
-    &__animation,
-    &__previous,
-    &__next {
-      &-button {
-        border: none;
-        width: 100%;
-        height: 100%;
+    &__warning {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &-label {
+        --calcite-label-margin-bottom: 0;
+        --calcite-label-text-color: var(--calcite-color-status-danger);
       }
-    }
 
-    .esri-icon-play,
-    .esri-icon-pause,
-    .esri-icon-reverse,
-    .esri-icon-forward {
-      font-size: 24px;
+      &-icon {
+        --calcite-icon-color: var(--calcite-color-status-danger);
+      }
     }
 
     &--out-of-bounds {
       .esri-slider {
         &__thumb {
-          border-color: $invalid-color;
+          border-color: var(--calcite-color-status-danger);
         }
       }
+    }
 
+    &--disabled {
       .esri-time-slider {
-        &__time-extent {
-          color: $invalid-color;
+        &__max-date,
+        &__max-time,
+        &__min-date,
+        &__min-time,
+        &__time-extent-end-date,
+        &__time-extent-end-time,
+        &__time-extent-separator,
+        &__time-extent-start-date,
+        &__time-extent-start-time {
+          opacity: var(--calcite-opacity-disabled);
         }
       }
     }
   }
 
   [dir="rtl"] .esri-time-slider {
+    &__max-date,
+    &__max-time,
+    &__min-date,
+    &__min-time,
+    &__time-extent-end-date,
+    &__time-extent-end-time,
+    &__time-extent-start-date,
+    &__time-extent-start-time {
+      direction: rtl;
+    }
+
     &__layout {
       &--compact {
         .esri-time-slider {
@@ -364,14 +371,6 @@
               direction: ltr;
             }
           }
-
-          &__min,
-          &__max {
-            &-date,
-            &-time {
-              direction: rtl;
-            }
-          }
         }
       }
 
@@ -380,15 +379,6 @@
           &__playback-controls {
             direction: ltr;
           }
-
-          &__min,
-          &__max,
-          &__time-extent {
-            &-date,
-            &-time {
-              direction: rtl;
-            }
-          }
         }
 
         &.esri-time-slider {
@@ -400,9 +390,9 @@
                 }
               }
 
-              &__animation {
+              &__play {
                 border: {
-                  left: 1px solid $border-color;
+                  left: var(--calcite-border-width-sm) solid var(--calcite-color-border-1);
                 }
               }
             }