52 lines
1.6 KiB
Sass
52 lines
1.6 KiB
Sass
@import 'mixins/m3-mixins'
|
|
|
|
div.m3.m3-card-action-area
|
|
width: 100%
|
|
height: 100%
|
|
cursor: pointer
|
|
contain: content
|
|
position: relative
|
|
border-radius: inherit
|
|
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
& > div.m3.m3-card-action-area-content
|
|
position: absolute
|
|
|
|
& > span.m3.m3-card-state-layer
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
&:hover
|
|
& > span.m3.m3-card-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
|
|
|
&:is(&:focus, &:focus-visible, &:focus-within)
|
|
& > span.m3.m3-card-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
|
|
|
&:is(&:focus, &:focus-visible, &:focus-within, &:hover)
|
|
&:is(.m3-card-outlined, .m3-card-filled)
|
|
@include elevation-1(false)
|
|
|
|
&.m3-card-elevated
|
|
@include elevation-2(false)
|
|
|
|
&:active
|
|
&:is(.m3-card-outlined, .m3-card-filled)
|
|
@include elevation-0(true)
|
|
|
|
&.m3-card-elevated
|
|
@include elevation-1(true)
|
|
|
|
&:not(&:has(span.m3.m3-ripple-domain))
|
|
& > span.m3.m3-card-state-layer
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
|
|
|
& > span.m3.m3-card-state-layer
|
|
background-color: transparent
|
|
|
|
& > span.m3.m3-ripple-domain > .m3.ripple
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|