material-you-react/src/styles/generics.sass

60 lines
1.5 KiB
Sass

@import "card"
@import "icon"
@import "badge"
@import "fonts"
@import "ripple"
@import "divider"
@import "container"
@import "mixins/m3-mixins"
@import "button-styles/fabs"
@import "button-styles/button"
@import "button-styles/icon-button"
@import "button-styles/segmented-button"
@import "input-styles/radio"
@import "input-styles/slider"
@import "input-styles/swtich"
@import "input-styles/checkbox"
@import "input-styles/text-field"
@import "./themes/tokens.css"
@import "./themes/colors.module.css"
@import "./themes/typography.module.css"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light)
html
font-family: Roboto, serif
color: var(--md-sys-color-on-surface)
background-color: var(--md-sys-color-surface-container)
.m3.m3-wrapper
position: relative
display: block
background-color: var(--md-sys-color-surface)
border-radius: 25px
button:not(.m3-fab, .m3-icon-button)
@include m3-typography-mixin('label-large')
max-height: 40px
width: min-content
white-space: nowrap
height: min-content
box-sizing: border-box
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
&.m3
@include center(inline-flex)
gap: 8px
border: none
contain: content
text-align: center
padding: 10px 24px
flex-direction: row
border-radius: 100px
box-sizing: border-box