fix(states): use direct child selector

vuetifyjs · May 31, 2022 · 4c45cbd · 4c45cbd
1 parent ce7df0e
commit 4c45cbd
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/packages/vuetify/src/styles/tools/_states.sass b/packages/vuetify/src/styles/tools/_states.sass
@@ -1,7 +1,11 @@
 @use 'sass:map'
+@use 'sass:string'
 @use '../settings'
 
 @mixin states ($selector: '&::before', $active: true)
+  @if string.slice(string.unquote($selector), 1, 1) != '&'
+    $selector: #{'>'} #{$selector}
+
   &:hover
     #{$selector}
       opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
@@ -20,11 +24,14 @@
     &[aria-haspopup="menu"][aria-expanded="true"]
       @include active-states($selector)
 
-@mixin active-states ($selector: '::before')
-  &:hover#{$selector},
+@mixin active-states ($selector)
   #{$selector}
     opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier))
 
+  &:hover
+    #{$selector}
+      opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier))
+
   &:focus
     #{$selector}
       opacity: calc(#{map.get(settings.$states, 'pressed')} * var(--v-theme-overlay-multiplier))