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

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;
     }
   }
 }