vuetify 3.5.11 → 3.5.13

package/lib/labs/VTimePicker/VTimePickerControls.sass

@@ -0,0 +1,102 @@
+@import './_variables.scss'
+@import '../VPicker/_variables.scss'
+
+
+.v-time-picker-controls
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: .875rem
+  padding-top: 4px
+  padding-bottom: 4px
+  // padding-inline-start: 6px
+  // padding-inline-end: 12px
+  margin-bottom: 36px
+
+  &__text
+    padding-bottom: 12px
+
+  &__time
+    display: flex
+    white-space: nowrap
+    direction: ltr
+    justify-content: center
+
+    &__btn.v-btn--density-default.v-btn
+      width: $time-picker-contols-btn-width
+      height: $time-picker-contols-btn-height
+      font-size: $time-picker-contols-btn-font
+
+      &__active
+        background: rgb(var(--v-theme-primary))
+      &.v-time-picker-controls__time--with-ampm__btn
+        width: $time-picker-contols-ampm-btn-width
+        height: $time-picker-contols-ampm-btn-height
+      &.v-time-picker-controls__time--with-seconds__btn
+        // overridden
+        width: $time-picker-contols-seconds-btn-width
+        height: $time-picker-contols-seconds-btn-height
+        font-size: $time-picker-contols-seconds-btn-font
+    &__separator
+      font-size: $time-picker-contols-btn-font
+      height: $time-picker-contols-btn-height
+      width: $time-picker-contols-separator-width
+      text-align: center
+    &__separator.v-time-picker-controls--with-seconds__time__separator
+      height: $time-picker-contols-seconds-btn-height
+      font-size: $time-picker-contols-btn-font
+
+.v-time-picker-controls__ampm
+  margin-left: 12px
+  align-self: flex-end
+  display: flex
+  flex-direction: column
+  font-size: $time-picker-ampm-title-font-size
+  text-transform: uppercase
+
+  &--readonly
+    pointer-events: none
+
+  &--readonly
+    .v-picker__title__btn.v-picker__title__btn--active
+      opacity: $picker-inactive-btn-opacity
+
+  &__btn.v-btn.v-btn--density-default
+    font-size: $time-picker-ampm-title-font-size
+    padding: 0 8px
+    min-width: 52px
+    height: $time-picker-contols-ampm-height
+    &.v-time-picker-controls__ampm__am
+      border-radius: $time-picker-contols-ampm-am-border-radius
+      border: 1px solid
+    &.v-time-picker-controls__ampm__pm
+      border-radius: $time-picker-contols-ampm-pm-border-radius
+      border: 1px solid
+      border-top: none
+    &__active
+      background: rgb(var(--v-theme-primary))
+
+.v-picker__title--landscape
+  .v-time-picker-controls
+    flex-direction: column
+    justify-content: center
+    height: 100%
+
+  .v-time-picker-controls__time
+    text-align: right
+
+    .v-picker__title__btn,
+    span
+      height: $time-picker-landscape-title-btn-height
+      font-size: $time-picker-landscape-title-btn-height
+
+  .v-time-picker-controls__ampm
+    margin: $time-picker-landscape-ampm-title-margin
+    align-self: initial
+    text-align: center
+
+.v-picker--time .v-picker__title--landscape
+  padding: 0
+
+  .v-time-picker-controls__time
+    text-align: center

package/lib/labs/VTimePicker/_variables.scss

@@ -0,0 +1,34 @@
+// @import '../../styles/styles.sass';
+
+$time-picker-padding: 24px !default;
+$time-picker-contols-btn-font: 56px !default;
+$time-picker-contols-btn-height: 80px !default;
+$time-picker-contols-btn-width: 96px !default;
+$time-picker-contols-seconds-btn-width: 64px !default;
+$time-picker-contols-seconds-btn-height: 80px !default;
+$time-picker-contols-seconds-btn-font: 40px !default;
+$time-picker-contols-separator-width: 24px !default;
+$time-picker-contols-ampm-btn-width: 96px !default;
+$time-picker-contols-ampm-btn-height: 80px !default;
+$time-picker-contols-ampm-height: 40px !default;
+$time-picker-contols-ampm-am-border-radius: 4px 4px 0 0 !default;
+$time-picker-contols-ampm-pm-border-radius: 0 0 4px 4px !default;
+$time-picker-ampm-title-font-size: 18px !default;
+$time-picker-number-font-size: 16px !default;
+$time-picker-indicator-size: 40px !default;
+$time-picker-clock-padding: 10px !default;
+$time-picker-clock-max-width: 290px !default;
+$time-picker-clock-hand-height: calc(50% - 4px) !default;
+$time-picker-clock-hand-width: 2px !default;
+$time-picker-clock-hand-left: calc(50% - 1px) !default;
+$time-picker-clock-center-size: 8px !default;
+$time-picker-clock-end-size: 10px !default;
+$time-picker-clock-end-top: -4px !default;
+$time-picker-clock-inner-hand-height: 14px !default;
+$time-picker-clock-inner-offset: 27px !default;
+$time-picker-clock-end-border-width: 2px !default;
+$time-picker-clock-end-border-style: solid !default;
+$time-picker-clock-end-border-color: currentColor !default;
+$time-picker-width: 328px !default;
+$time-picker-landscape-title-btn-height: 55px !default;
+$time-picker-landscape-ampm-title-margin: 16px 0 0 !default;