43 lines
1.3 KiB
Sass
43 lines
1.3 KiB
Sass
|
@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))
|
||
|
|
|
||
|
|
&:focus-visible
|
||
|
|
#{$selector}
|
||
|
|
opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
@supports not selector(:focus-visible)
|
||
|
|
&:focus
|
||
|
|
#{$selector}
|
||
|
|
opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
@if ($active)
|
||
|
|
&--active,
|
||
|
|
&[aria-haspopup="menu"][aria-expanded="true"]
|
||
|
|
@include active-states($selector)
|
||
|
|
|
||
|
|
@mixin active-states ($selector, $base: map.get(settings.$states, 'activated'))
|
||
|
|
#{$selector}
|
||
|
|
opacity: calc(#{$base} * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
#{$selector}
|
||
|
|
opacity: calc((#{$base} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
&:focus-visible
|
||
|
|
#{$selector}
|
||
|
|
opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
|
||
|
|
|
||
|
|
@supports not selector(:focus-visible)
|
||
|
|
&:focus
|
||
|
|
#{$selector}
|
||
|
|
opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
|