79 lines
2.7 KiB
Sass
79 lines
2.7 KiB
Sass
|
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-Outlined-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 state-layer
|
||
|
|
|
||
|
|
&.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)
|