128 lines
4.1 KiB
Sass
128 lines
4.1 KiB
Sass
button:not(.m3-fab, .m3-icon-button)
|
|
width: min-content
|
|
height: min-content
|
|
box-sizing: border-box
|
|
font-size: var(--md-sys-typescale-label-large-font-size)
|
|
font-weight: var(--md-sys-typescale-label-large-font-weight)
|
|
line-height: var(--md-sys-typescale-label-large-line-height)
|
|
font-family: var(--md-sys-typescale-label-large-font-family-name)
|
|
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
|
|
|
&.m3
|
|
gap: 8px
|
|
border: none
|
|
contain: content
|
|
text-align: center
|
|
padding: 10px 24px
|
|
align-items: center
|
|
flex-direction: row
|
|
display: inline-flex
|
|
border-radius: 100px
|
|
box-sizing: border-box
|
|
justify-content: center
|
|
|
|
&.filled
|
|
background-color: var(--md-sys-color-primary)
|
|
&, & > svg.m3-svg-icon
|
|
fill: var(--md-sys-color-on-primary)
|
|
color: var(--md-sys-color-on-primary)
|
|
|
|
&.outlined
|
|
outline-offset: -1px
|
|
background-color: #00000000
|
|
color: var(--md-sys-color-primary)
|
|
outline: 1px solid var(--md-sys-color-outline) !important
|
|
|
|
& > svg.m3-svg-icon
|
|
fill: var(--md-sys-color-primary)
|
|
|
|
&.text
|
|
background-color: #00000000
|
|
padding: 10px 12px !important
|
|
color: var(--md-sys-color-primary)
|
|
|
|
& > svg.m3-svg-icon
|
|
fill: var(--md-sys-color-primary)
|
|
|
|
&.elevated
|
|
@include elevation-1(false)
|
|
color: var(--md-sys-color-primary)
|
|
background-color: var(--md-sys-color-surface-container-low)
|
|
|
|
& > svg.m3-svg-icon
|
|
fill: var(--md-sys-color-primary)
|
|
|
|
&.tonal
|
|
color: var(--md-sys-color-on-secondary-container)
|
|
background-color: var(--md-sys-color-secondary-container)
|
|
|
|
& > svg.m3-svg-icon
|
|
fill: var(--md-sys-color-on-secondary-container)
|
|
|
|
&::before
|
|
@include state-layer
|
|
|
|
&.filled > .m3.m3-ripple-domain > .m3.ripple
|
|
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
|
|
|
&:is(.outlined, .text, .elevated)
|
|
& > .m3.m3-ripple-domain > .m3.ripple
|
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
|
|
&.tonal > .m3.m3-ripple-domain > .m3.ripple
|
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
|
|
|
&:active
|
|
&:is(.filled, .tonal)
|
|
@include elevation-0(true)
|
|
|
|
&.elevated
|
|
@include elevation-1(true)
|
|
|
|
&.tonal::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
|
|
|
&:focus-visible
|
|
&.outlined
|
|
border-color: var(--md-sys-color-primary) !important
|
|
|
|
&.filled::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
|
|
|
&:is(.outlined, .text, .elevated)::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
|
|
|
&.tonal::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
|
|
|
&:hover
|
|
&:is(.filled, .tonal)
|
|
@include elevation-1(false)
|
|
|
|
&.elevated
|
|
@include elevation-2(false)
|
|
|
|
&.filled::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
|
|
|
&:is(.outlined, .text, .elevated)::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
|
|
|
&.tonal::before
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
|
|
|
&:disabled
|
|
pointer-events: none
|
|
|
|
&:is(.filled, .elevated, .tonal, .outlined, .text)
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
|
|
|
&:is(.filled, .elevated, .tonal)
|
|
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
|
|
|
&.elevated
|
|
box-shadow: none
|
|
|
|
&.outlined
|
|
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
|