@vuetify/nightly 3.7.4-dev.2024-11-06 → 3.7.4-next.2024-11-06

package/lib/labs/VTimePicker/VTimePickerControls.css

@@ -1,104 +1,103 @@
-.v-time-picker-controls {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  margin-bottom: 36px;
-}
-.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-bottom: 36px;
+  }
+  .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;
+  }
 }

package/lib/labs/VTreeview/VTreeviewItem.css

@@ -1,17 +1,19 @@
-.v-treeview-item.v-treeview-item--filtered {
-  display: none;
+@layer vuetify.components {
+  .v-treeview-item.v-treeview-item--filtered {
+    display: none;
+  }
+  .v-treeview {
+    --indent-padding: 0px;
+  }
+  .v-treeview-group.v-list-group {
+    --list-indent-size: 16px;
+  }
+  .v-list--slim .v-treeview-group.v-list-group {
+    --prepend-width: 16px;
+  }
 }
-
-.v-treeview {
-  --indent-padding: 0px;
-}
-
-.v-treeview-group.v-list-group {
-  --list-indent-size: 16px;
-}
-.v-list--slim .v-treeview-group.v-list-group {
-  --prepend-width: 16px;
-}
-.v-treeview-group.v-list-group .v-list-group__items .v-list-item {
-  padding-inline-start: calc(12px + var(--indent-padding)) !important;
+@layer vuetify.overrides {
+  .v-treeview-group.v-list-group .v-list-group__items .v-list-item {
+    padding-inline-start: calc(12px + var(--indent-padding));
+  }
 }

package/lib/labs/VTreeview/VTreeviewItem.sass

@@ -15,4 +15,5 @@
       --prepend-width: #{$treeview-group-list-prepend-width}
 
     .v-list-group__items .v-list-item
-      padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+      @include tools.layer('overrides')
+        padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding))

package/lib/styles/elements/_global.sass

@@ -13,7 +13,7 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
 
   html.overflow-y-hidden
-    overflow-y: hidden !important
+    overflow-y: hidden
 
   :root
     --v-theme-overlay-multiplier: 1

package/lib/styles/generic/_colors.scss

@@ -6,19 +6,19 @@
 
 @mixin background-color($color_value) {
   & {
-    background-color: $color_value !important;
+    background-color: $color_value;
   }
 }
 @mixin text-color($color_value) {
   & {
-    color: $color_value !important;
+    color: $color_value;
   }
 }
 @mixin background-text-color($color_name, $color_type) {
   $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
 
   & {
-    color: $map_value !important;
+    color: $map_value;
   }
 }
 

package/lib/styles/generic/_layers.scss

@@ -2,6 +2,18 @@
 
 @if (settings.$layers) {
   @layer vuetify {
-    @layer reset, transitions, base, components, overrides, colors, theme, utilities;
+    @layer reset, base, components, transitions;
+
+    // Use to override styles in other components
+    // This replaces hacks like .v-btn.v-btn and most of !important
+    @layer overrides;
+
+    @layer colors, theme, utilities;
+
+    // Only use for rules that need to override theme or utils
+    @layer trumps;
+
+    // Don't use, this is for consumers
+    @layer custom;
   }
 }

package/lib/styles/generic/_transitions.scss

@@ -3,19 +3,19 @@
 
 @mixin transition-default() {
   &-enter-active {
-    transition-duration: settings.$transition-duration-root !important;
-    transition-timing-function: settings.$standard-easing !important;
+    transition-duration: settings.$transition-duration-root;
+    transition-timing-function: settings.$standard-easing;
   }
 
   &-leave-active {
-    transition-duration: settings.$transition-duration-root !important;
-    transition-timing-function: settings.$standard-easing !important;
+    transition-duration: settings.$transition-duration-root;
+    transition-timing-function: settings.$standard-easing;
   }
 
   &-move {
-    transition-duration: settings.$transition-move-duration-root !important;
-    transition-property: transform !important;
-    transition-timing-function: settings.$standard-easing !important;
+    transition-duration: settings.$transition-move-duration-root;
+    transition-property: transform;
+    transition-timing-function: settings.$standard-easing;
   }
 }
 @mixin fade-out() {
@@ -23,7 +23,7 @@
     opacity: 0;
   }
   &-leave-active {
-    transition-duration: 100ms !important;
+    transition-duration: 100ms;
   }
 }
 
@@ -33,18 +33,18 @@
   .dialog-bottom-transition,
   .dialog-top-transition {
     &-enter-active {
-      transition-duration: 225ms !important;
-      transition-timing-function: settings.$decelerated-easing !important;
+      transition-duration: 225ms;
+      transition-timing-function: settings.$decelerated-easing;
     }
 
     &-leave-active {
-      transition-duration: 125ms !important;
-      transition-timing-function: settings.$accelerated-easing !important;
+      transition-duration: 125ms;
+      transition-timing-function: settings.$accelerated-easing;
     }
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
       pointer-events: none;
     }
   }
@@ -84,12 +84,12 @@
     &-leave-from,
     &-leave-active,
     &-leave-to {
-      position: absolute !important;
+      position: absolute;
     }
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -123,7 +123,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: height !important;
+      transition-property: height;
     }
   }
 
@@ -132,7 +132,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: width !important;
+      transition-property: width;
     }
   }
 
@@ -147,7 +147,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -162,7 +162,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -177,7 +177,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -195,7 +195,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -209,7 +209,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -223,7 +223,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -244,7 +244,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -265,7 +265,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -286,7 +286,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -307,7 +307,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -321,7 +321,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -335,7 +335,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform, opacity !important;
+      transition-property: transform, opacity;
     }
   }
 
@@ -343,12 +343,12 @@
     @include transition-default();
 
     &-enter-from, &-leave-to {
-      opacity: 0 !important;
+      opacity: 0;
     }
 
     &-enter-active,
     &-leave-active {
-      transition-property: opacity !important;
+      transition-property: opacity;
     }
   }
 
@@ -361,7 +361,7 @@
 
     &-enter-active,
     &-leave-active {
-      transition-property: transform !important;
+      transition-property: transform;
     }
   }
 }