76 lines
2.4 KiB
Sass
76 lines
2.4 KiB
Sass
@mixin m3-label-mixin
|
|
display: flex
|
|
position: relative
|
|
align-items: center
|
|
justify-content: center
|
|
aspect-ratio: 1
|
|
|
|
@mixin m3-state-layer-mixin
|
|
position: absolute
|
|
width: 2.5rem
|
|
aspect-ratio: inherit
|
|
border-radius: 50%
|
|
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
|
|
|
@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
|
|
width: $width
|
|
height: $height
|
|
border-radius: $b-radius
|
|
padding: $padding
|
|
|
|
@mixin m3-fab-colors-palette($bg-color, $color)
|
|
&:not(.without-elevation)
|
|
@include elevation-3(false)
|
|
background-color: var($bg-color)
|
|
color: var($color)
|
|
& > svg.m3-svg-icon
|
|
fill: var($color)
|
|
& > .m3.m3-ripple-domain > .m3.ripple
|
|
background: color-mix(in srgb, var($color) 12%, transparent)
|
|
|
|
@mixin elevation-0($important)
|
|
@if $important == true
|
|
box-shadow: none !important
|
|
@else
|
|
box-shadow: none
|
|
|
|
@mixin elevation-1($important)
|
|
@if $important == true
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
|
|
@else
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
|
|
|
|
@mixin elevation-2($important)
|
|
@if $important == true
|
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
|
|
@else
|
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
|
|
|
|
@mixin elevation-3($important)
|
|
@if $important == true
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important
|
|
@else
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
|
|
|
|
@mixin elevation-4($important)
|
|
@if $important == true
|
|
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) !important
|
|
@else
|
|
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
|
|
|
|
@mixin elevation-5($important)
|
|
@if $important == true
|
|
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) !important
|
|
@else
|
|
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
|
|
|
|
@mixin state-layer
|
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
|
content: ""
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
position: absolute
|
|
background: #00000000
|