105 lines
3.3 KiB
Sass
105 lines
3.3 KiB
Sass
@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
|
|
width: $width
|
|
height: $height
|
|
padding: $padding
|
|
border-radius: $b-radius
|
|
|
|
@mixin m3-fab-colors-palette($bg-color, $color)
|
|
&:not(.without-elevation)
|
|
@include elevation-3(false)
|
|
|
|
color: var($color)
|
|
background-color: var($bg-color)
|
|
|
|
& > svg.m3-svg-icon
|
|
fill: var($color)
|
|
|
|
& > span.m3.m3-ripple-domain > span.m3.m3-ripple
|
|
background: color-mix(in srgb, var($color) 12%, transparent)
|
|
|
|
&:not(&:has(span.m3.m3-ripple-domain)):active
|
|
&::before
|
|
background: color-mix(in srgb, var($color) 20%, transparent)
|
|
|
|
|
|
button.m3.m3-fab
|
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
|
|
|
& > span.m3-icon
|
|
font-family: Material-Symbols-Rounded-Regular, sans-serif
|
|
|
|
&.m3
|
|
contain: content
|
|
box-sizing: border-box
|
|
display: inline-flex
|
|
flex-direction: row
|
|
justify-content: center
|
|
align-items: center
|
|
text-align: center
|
|
border: none
|
|
gap: 12px
|
|
|
|
&::before
|
|
@include m3-buttons-state-layer-mixin
|
|
|
|
content: ""
|
|
|
|
&.surface
|
|
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
|
|
|
|
&.primary
|
|
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
|
|
|
|
&.secondary
|
|
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
|
|
|
|
&.tertiary
|
|
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
|
|
|
|
&.m3-small-fab
|
|
@include m3-fab-default(12px, 40px, 40px, 11px)
|
|
font-size: 24px
|
|
|
|
&.m3-default-fab
|
|
@include m3-fab-default(16px, 56px, 56px, 19px)
|
|
font-size: 24px
|
|
|
|
&.m3-large-fab
|
|
@include m3-fab-default(28px, 96px, 96px, 34.5px)
|
|
font-size: 36px
|
|
|
|
&.m3-extended-fab
|
|
@include m3-fab-default(16px, auto, 56px, 19px)
|
|
font-size: 24px
|
|
|
|
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover
|
|
@include elevation-4(false)
|
|
|
|
&:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active
|
|
@include elevation-3(true)
|
|
|
|
&:hover
|
|
&.surface:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
|
|
|
&.primary:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
|
|
|
|
&.secondary:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
|
|
|
&.tertiary:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
|
|
|
|
&:focus-visible
|
|
&.surface:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
|
|
&.primary:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
|
|
|
|
&.secondary:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
|
|
|
&.tertiary:before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent) |