@vuetify/nightly 3.9.0-master.2025-07-08 → 3.9.0-next.2025-07-09

package/lib/components/VTimePicker/VTimePickerControls.css

@@ -1,105 +1,104 @@
-.v-time-picker-controls {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  margin-inline: 24px;
-  margin-bottom: 18px;
-}
-.v-time-picker-controls__text {
-  padding-bottom: 12px;
-}
-.v-time-picker-controls__time {
-  display: flex;
-  white-space: nowrap;
-  direction: ltr;
-  justify-content: center;
-}
-.v-time-picker-controls__time__btn.v-btn--density-default.v-btn {
-  width: 96px;
-  height: 80px;
-  font-size: 56px;
-}
-.v-time-picker-controls__time__btn.v-btn--density-default.v-btn__active {
-  background: rgb(var(--v-theme-primary));
-}
-.v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-ampm__btn {
-  width: 96px;
-  height: 80px;
-}
-.v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-seconds__btn {
-  width: 64px;
-  height: 80px;
-  font-size: 40px;
-}
-.v-time-picker-controls__time__separator {
-  font-size: 56px;
-  height: 80px;
-  width: 24px;
-  text-align: center;
-}
-.v-time-picker-controls__time__separator.v-time-picker-controls--with-seconds__time__separator {
-  height: 80px;
-  font-size: 56px;
-}
-
-.v-time-picker-controls__ampm {
-  margin-left: 12px;
-  align-self: flex-end;
-  display: flex;
-  flex-direction: column;
-  font-size: 18px;
-  text-transform: uppercase;
-}
-.v-time-picker-controls__ampm--readonly {
-  pointer-events: none;
-}
-.v-time-picker-controls__ampm--readonly .v-picker__title__btn.v-picker__title__btn--active {
-  opacity: 0.6;
-}
-.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default {
-  font-size: 18px;
-  padding: 0 8px;
-  min-width: 52px;
-  height: 40px;
-}
-.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__am {
-  border-radius: 4px 4px 0 0;
-  border: 1px solid;
-}
-.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__pm {
-  border-radius: 0 0 4px 4px;
-  border: 1px solid;
-  border-top: none;
-}
-.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default__active {
-  background: rgb(var(--v-theme-primary));
-}
-
-.v-picker__title--landscape .v-time-picker-controls {
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-}
-.v-picker__title--landscape .v-time-picker-controls__time {
-  text-align: right;
-}
-.v-picker__title--landscape .v-time-picker-controls__time .v-picker__title__btn,
-.v-picker__title--landscape .v-time-picker-controls__time span {
-  height: 55px;
-  font-size: 55px;
-}
-.v-picker__title--landscape .v-time-picker-controls__ampm {
-  margin: 16px 0 0;
-  align-self: initial;
-  text-align: center;
-}
-
-.v-picker--time .v-picker__title--landscape {
-  padding: 0;
-}
-.v-picker--time .v-picker__title--landscape .v-time-picker-controls__time {
-  text-align: center;
+@layer vuetify.components {
+  .v-time-picker-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    margin-inline: 24px;
+    margin-bottom: 18px;
+  }
+  .v-time-picker-controls__text {
+    padding-bottom: 12px;
+  }
+  .v-time-picker-controls__time {
+    display: flex;
+    white-space: nowrap;
+    direction: ltr;
+    justify-content: center;
+  }
+  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn {
+    width: 96px;
+    height: 80px;
+    font-size: 56px;
+  }
+  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn__active {
+    background: rgb(var(--v-theme-primary));
+  }
+  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-ampm__btn {
+    width: 96px;
+    height: 80px;
+  }
+  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-seconds__btn {
+    width: 64px;
+    height: 80px;
+    font-size: 40px;
+  }
+  .v-time-picker-controls__time__separator {
+    font-size: 56px;
+    height: 80px;
+    width: 24px;
+    text-align: center;
+  }
+  .v-time-picker-controls__time__separator.v-time-picker-controls--with-seconds__time__separator {
+    height: 80px;
+    font-size: 56px;
+  }
+  .v-time-picker-controls__ampm {
+    margin-left: 12px;
+    align-self: flex-end;
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    text-transform: uppercase;
+  }
+  .v-time-picker-controls__ampm--readonly {
+    pointer-events: none;
+  }
+  .v-time-picker-controls__ampm--readonly .v-picker__title__btn.v-picker__title__btn--active {
+    opacity: 0.6;
+  }
+  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default {
+    font-size: 18px;
+    padding: 0 8px;
+    min-width: 52px;
+    height: 40px;
+  }
+  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__am {
+    border-radius: 4px 4px 0 0;
+    border: 1px solid;
+  }
+  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__pm {
+    border-radius: 0 0 4px 4px;
+    border: 1px solid;
+    border-top: none;
+  }
+  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default__active {
+    background: rgb(var(--v-theme-primary));
+  }
+  .v-picker__title--landscape .v-time-picker-controls {
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }
+  .v-picker__title--landscape .v-time-picker-controls__time {
+    text-align: right;
+  }
+  .v-picker__title--landscape .v-time-picker-controls__time .v-picker__title__btn,
+  .v-picker__title--landscape .v-time-picker-controls__time span {
+    height: 55px;
+    font-size: 55px;
+  }
+  .v-picker__title--landscape .v-time-picker-controls__ampm {
+    margin: 16px 0 0;
+    align-self: initial;
+    text-align: center;
+  }
+  .v-picker--time .v-picker__title--landscape {
+    padding: 0;
+  }
+  .v-picker--time .v-picker__title--landscape .v-time-picker-controls__time {
+    text-align: center;
+  }
 }