@expressivecss/expressive 0.7.0 → 0.9.0

package/src/sass/components/_timepicker.scss

@@ -1,6 +1,6 @@
 @use "../abstracts" as *;
 
-.timepicker-container {
+:is(.timepicker-container, .time-picker-container) {
   display: flex;
   flex-direction: column;
   max-width: 325px;
@@ -13,7 +13,7 @@
 }
 
 /* Clock Digital Display */
-.timepicker-digital-display {
+:is(.timepicker-digital-display, .time-picker-digital-display) {
   width: auto;
   flex: 1 auto;
   // background-color: var(--md-sys-color-surface);
@@ -21,7 +21,7 @@
   font-weight: 300;
 }
 
-.timepicker-text-container {
+:is(.timepicker-text-container, .time-picker-text-container) {
   display: flex;
   font-size: 4rem;
   text-align: left;
@@ -40,29 +40,29 @@
   }
 }
 
-.timepicker-display-column {
+:is(.timepicker-display-column, .time-picker-display-column) {
   display: inline-flex;
 }
 
-.timepicker-display-digital-clock {
+:is(.timepicker-display-digital-clock, .time-picker-display-digital-clock) {
   flex-grow: 1;
   display: inline-flex;
 }
 
-.timepicker-input-hours-wrapper,
-.timepicker-input-minutes-wrapper {
+:is(.timepicker-input-hours-wrapper, .time-picker-input-hours-wrapper),
+:is(.timepicker-input-minutes-wrapper, .time-picker-input-minutes-wrapper) {
   width: 6.9rem;
   height: 5.75rem;
 }
 
-.timepicker-input-hours,
-.timepicker-input-minutes,
-.timepicker-span-am-pm div {
+:is(.timepicker-input-hours, .time-picker-input-hours),
+:is(.timepicker-input-minutes, .time-picker-input-minutes),
+:is(.timepicker-span-am-pm, .time-picker-span-am-pm) div {
   cursor: pointer;
 }
 
-input[type=text].timepicker-input-hours,
-input[type=text].timepicker-input-minutes {
+input[type=text]:is(.timepicker-input-hours, .time-picker-input-hours),
+input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   height: 100%;
   padding: 1.33rem .8rem;
   border: 0;
@@ -75,7 +75,7 @@ input[type=text].timepicker-input-minutes {
   }
 }
 
-.timepicker-input-divider-wrapper {
+:is(.timepicker-input-divider-wrapper, .time-picker-input-divider-wrapper) {
   width: 1.6rem;
   text-align: center;
 }
@@ -84,7 +84,7 @@ input[type=text].timepicker-input-minutes {
   color: var(--md-sys-color-on-background);
 }*/
 
-.timepicker-display-am-pm {
+:is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
   font-size: 1.3rem;
   /*position: absolute;
   top: 1rem;
@@ -92,17 +92,20 @@ input[type=text].timepicker-input-minutes {
   font-weight: 400;
 }
 
-.timepicker-span-am-pm {
+:is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
   height: 5.75rem;
   max-width: 3.5rem;
 }
 
-.timepicker-container .am-btn,
-.timepicker-container .pm-btn {
+:is(.timepicker-container, .time-picker-container) .am-btn,
+:is(.timepicker-container, .time-picker-container) .pm-btn {
   width: 3.6rem;
   height: 50%;
-  padding-left: calc(var(--btn-padding) / 1.8);
-  padding-right: calc(var(--btn-padding) / 1.8);
+  // --btn-padding is a Materialize variable that no longer exists, so this
+  // was invalid at computed-value time and the padding resolved to 0 - not
+  // to the base button's inline space, which the invalid declaration still
+  // beat in the cascade. Written as the 0 it has always rendered as.
+  padding-inline: 0;
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
@@ -110,25 +113,25 @@ input[type=text].timepicker-input-minutes {
   border: 1px solid var(--md-sys-color-outline);
 }
 
-.timepicker-container .am-btn {
+:is(.timepicker-container, .time-picker-container) .am-btn {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.timepicker-container .pm-btn {
+:is(.timepicker-container, .time-picker-container) .pm-btn {
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
 /* Analog Clock Display */
-.timepicker-analog-display {
+:is(.timepicker-analog-display, .time-picker-analog-display) {
   flex: 2.5 auto;
   padding: .67rem;
   // background-color: var(--md-sys-color-surface);
 }
 
-.timepicker-plate {
+:is(.timepicker-plate, .time-picker-plate) {
   background-color: var(--md-sys-color-surface-variant);
   border-radius: 50%;
   width: 260px;
@@ -137,10 +140,14 @@ input[type=text].timepicker-input-minutes {
   position: relative;
   margin: 0 1.6rem 1.6rem 1.6rem;
   user-select: none;
+  // Dragging the clock hand is a two-dimensional gesture, so no axis is left
+  // to the page. See the note on the snackbar: under Pointer Events this is
+  // what reserves the gesture, not `preventDefault()`.
+  touch-action: none;
 }
 
-.timepicker-canvas,
-.timepicker-dial {
+:is(.timepicker-canvas, .time-picker-canvas),
+:is(.timepicker-dial, .time-picker-dial) {
   position: absolute;
   left: 0;
   right: 0;
@@ -148,11 +155,11 @@ input[type=text].timepicker-input-minutes {
   bottom: 0;
 }
 
-.timepicker-minutes {
+:is(.timepicker-minutes, .time-picker-minutes) {
   visibility: hidden;
 }
 
-.timepicker-tick {
+:is(.timepicker-tick, .time-picker-tick) {
   border-radius: 50%;
   color: var(--md-sys-color-on-background);
   line-height: 40px;
@@ -164,28 +171,28 @@ input[type=text].timepicker-input-minutes {
   font-size: 15px;
 }
 
-.timepicker-tick.active,
-.timepicker-tick:hover {
+:is(.timepicker-tick, .time-picker-tick).active,
+:is(.timepicker-tick, .time-picker-tick):hover {
   background-color: color-mix(in oklab, var(--md-sys-color-primary) 6%, transparent);
 }
 
-.timepicker-dial {
+:is(.timepicker-dial, .time-picker-dial) {
   transition: transform 350ms, opacity 350ms;
 }
 
-.timepicker-dial-out {
+:is(.timepicker-dial-out, .time-picker-dial-out) {
   opacity: 0;
 
-  &.timepicker-hours {
+  &:is(.timepicker-hours, .time-picker-hours) {
     transform: scale(1.1, 1.1);
   }
 
-  &.timepicker-minutes {
+  &:is(.timepicker-minutes, .time-picker-minutes) {
     transform: scale(.8, .8);
   }
 }
 
-.timepicker-canvas {
+:is(.timepicker-canvas, .time-picker-canvas) {
   transition: opacity 175ms;
 
   line {
@@ -195,100 +202,102 @@ input[type=text].timepicker-input-minutes {
   }
 }
 
-.timepicker-canvas-out {
+:is(.timepicker-canvas-out, .time-picker-canvas-out) {
   opacity: 0.25;
 }
 
-.timepicker-canvas-bearing {
+:is(.timepicker-canvas-bearing, .time-picker-canvas-bearing) {
   stroke: none;
   fill: var(--md-sys-color-primary);
 }
 
-.timepicker-canvas-bg {
+:is(.timepicker-canvas-bg, .time-picker-canvas-bg) {
   stroke: none;
   fill: var(--md-sys-color-primary);
 }
 
 
 /* Footer */
-.timepicker-footer {
+:is(.timepicker-footer, .time-picker-footer) {
   margin: 0 auto;
   padding: 5px 1rem;
   display: flex;
   justify-content: space-between;
 }
 
-.timepicker-clear {
+:is(.timepicker-clear, .time-picker-clear) {
   color: var(--md-sys-color-error);
 }
 
-.timepicker-close {
+:is(.timepicker-close, .time-picker-close) {
   color: var(--md-sys-color-primary);
 }
 
-.timepicker-clear,
-.timepicker-close {
+:is(.timepicker-clear, .time-picker-clear),
+:is(.timepicker-close, .time-picker-close) {
   padding: 0 20px;
 }
 
 /* Media Queries */
-@include bp-up("large") {
-  .timepicker-container {
+@include bp-up("expanded") {
+  :is(.timepicker-container, .time-picker-container) {
     width: auto;
     max-width: 620px;
   }
 
-  .timepicker-container {
+  :is(.timepicker-container, .time-picker-container) {
     flex-direction: row;
   }
 
-  .timepicker-digital-display {
+  :is(.timepicker-digital-display, .time-picker-digital-display) {
     padding: .67rem;
   }
 
-  .timepicker-text-container {
+  :is(.timepicker-text-container, .time-picker-text-container) {
     /*top: 31%;*/
     flex-direction: column;
     margin-top: 4.8rem;
     text-align: center;
   }
 
-  .timepicker-display-column {
+  :is(.timepicker-display-column, .time-picker-display-column) {
     padding: 0 3%;
   }
 
-  .timepicker-display-am-pm {
+  :is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
     margin-top: 1.1rem;
   }
 
-  .timepicker-span-am-pm {
+  :is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
     display: flex;
     flex-grow: 1;
     max-width: unset;
   }
 
-  .timepicker-container .am-btn,
-  .timepicker-container .pm-btn {
+  :is(.timepicker-container, .time-picker-container) .am-btn,
+  :is(.timepicker-container, .time-picker-container) .pm-btn {
     flex-grow: 1;
     /*width: auto;*/
-    padding-left: calc(var(--btn-padding) / .565);
-    padding-right: calc(var(--btn-padding) / .565);
-    border-radius: var(--btn-border-radius);
+    // Same two dead Materialize variables as above; both declarations
+    // rendered as 0. The corner rules that follow square off the inner
+    // edges, so the outer ones are the only radius in play.
+    padding-inline: 0;
+    border-radius: 0;
     border: 1px solid var(--md-sys-color-outline);
   }
 
-  .timepicker-container .am-btn {
+  :is(.timepicker-container, .time-picker-container) .am-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .timepicker-container .pm-btn {
+  :is(.timepicker-container, .time-picker-container) .pm-btn {
     border-left: 0;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  .timepicker-plate {
+  :is(.timepicker-plate, .time-picker-plate) {
     margin-top: 1.6rem;
   }
 }