CHANGED: style and components directories, removed redundant imports from styles
ADDED: container and card component, card-subcomponents WIP
This commit is contained in:
@@ -1,74 +1,67 @@
|
||||
button:not(.m3-fab, .m3-icon-button) {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||
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);
|
||||
box-sizing: border-box;
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).m3 {
|
||||
gap: 8px;
|
||||
border: none;
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
display: inline-flex;
|
||||
border-radius: 100px;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled,
|
||||
button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined {
|
||||
outline-offset: -1px;
|
||||
outline: 1px solid var(--md-sys-color-outline) !important;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: var(--md-sys-color-primary);
|
||||
outline: 1px solid var(--md-sys-color-outline) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text {
|
||||
padding: 10px 12px !important;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
padding: 10px 12px !important;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated {
|
||||
box-shadow:
|
||||
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
color: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button)::before {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@@ -77,130 +70,65 @@ button:not(.m3-fab, .m3-icon-button)::before {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
||||
box-shadow:
|
||||
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
||||
border-color: var(--md-sys-color-primary) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(
|
||||
.outlined,
|
||||
.text,
|
||||
.elevated
|
||||
)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
||||
box-shadow:
|
||||
0 1px 3px 1px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
||||
box-shadow:
|
||||
0 2px 6px 2px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(
|
||||
.outlined,
|
||||
.text,
|
||||
.elevated
|
||||
)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(
|
||||
.filled,
|
||||
.elevated,
|
||||
.tonal,
|
||||
.outlined,
|
||||
.text
|
||||
) {
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
||||
box-shadow: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
||||
outline: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=button.css.map */
|
||||
1
src/styles/button-styles/button.css.map
Normal file
1
src/styles/button-styles/button.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["button.sass","../mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECRI;EDUA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADRA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC7CA;;ADgDA;EC1CA;;AD6CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC5DA;;AD+DA;ECzDA;;AD4DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
||||
@@ -1,44 +1,44 @@
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
button:not(.m3-fab, .m3-icon-button)
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name)
|
||||
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)
|
||||
box-sizing: border-box
|
||||
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
|
||||
box-sizing: border-box
|
||||
border-radius: 100px
|
||||
display: inline-flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
text-align: center
|
||||
padding: 10px 24px
|
||||
border: none
|
||||
gap: 8px
|
||||
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
|
||||
color: var(--md-sys-color-on-primary)
|
||||
fill: var(--md-sys-color-on-primary)
|
||||
color: var(--md-sys-color-on-primary)
|
||||
|
||||
&.outlined
|
||||
outline-offset: -1px
|
||||
outline: 1px solid var(--md-sys-color-outline) !important
|
||||
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
|
||||
padding: 10px 12px !important
|
||||
background-color: #00000000
|
||||
padding: 10px 12px !important
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
& > svg.m3-svg-icon
|
||||
@@ -46,15 +46,15 @@ button:not(.m3-fab, .m3-icon-button)
|
||||
|
||||
&.elevated
|
||||
@include elevation-1(false)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
||||
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
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
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)
|
||||
17
src/styles/button-styles/fabs.css
Normal file
17
src/styles/button-styles/fabs.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 21 | @include state-layer
|
||||
* | ^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* fabs.sass 21:9 root stylesheet */
|
||||
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
||||
"Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Undefined mixin.\a \2577 \a 21 \2502 @include state-layer\a \2502 ^^^^^^^^^^^^^^^^^^^^\a \2575 \a fabs.sass 21:9 root stylesheet";
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
button.m3.m3-fab
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
134
src/styles/button-styles/icon-button.css
Normal file
134
src/styles/button-styles/icon-button.css
Normal file
@@ -0,0 +1,134 @@
|
||||
button.m3.m3-icon-button {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
button.m3.m3-icon-button::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
button.m3.m3-icon-button > span.m3-icon {
|
||||
z-index: 25;
|
||||
font-size: 2em;
|
||||
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
button.m3.m3-icon-button.default {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default.selected.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.selected.toggled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.toggled {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined {
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
fill: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=icon-button.css.map */
|
||||
@@ -1,5 +1,3 @@
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
button.m3.m3-icon-button
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
contain: content
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECNI;EDQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC3CA;;AD8CA;ECxCA;;AD2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC1DA;;AD6DA;ECvDA;;AD0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
||||
8
src/styles/card.css
Normal file
8
src/styles/card.css
Normal file
@@ -0,0 +1,8 @@
|
||||
div.m3.m3-card {
|
||||
min-width: 160px;
|
||||
min-height: 64px;
|
||||
display: flex;
|
||||
border: 2px dashed green;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=card.css.map */
|
||||
1
src/styles/card.css.map
Normal file
1
src/styles/card.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["card.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA","file":"card.css"}
|
||||
51
src/styles/card.sass
Normal file
51
src/styles/card.sass
Normal file
@@ -0,0 +1,51 @@
|
||||
@import 'mixins/m3-mixins'
|
||||
|
||||
div.m3.m3-card-action-area
|
||||
width: 100%
|
||||
height: 100%
|
||||
cursor: pointer
|
||||
contain: content
|
||||
position: relative
|
||||
border-radius: inherit
|
||||
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
& > div.m3.m3-card-action-area-content
|
||||
position: absolute
|
||||
|
||||
& > span.m3.m3-card-state-layer
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: absolute
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&:hover
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||
|
||||
&:is(&:focus, &:focus-visible, &:focus-within)
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
|
||||
&:is(&:focus, &:focus-visible, &:focus-within, &:hover)
|
||||
&:is(.m3-card-outlined, .m3-card-filled)
|
||||
@include elevation-1(false)
|
||||
|
||||
&.m3-card-elevated
|
||||
@include elevation-2(false)
|
||||
|
||||
&:active
|
||||
&:is(.m3-card-outlined, .m3-card-filled)
|
||||
@include elevation-0(true)
|
||||
|
||||
&.m3-card-elevated
|
||||
@include elevation-1(true)
|
||||
|
||||
&:not(&:has(span.m3.m3-ripple-domain))
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
|
||||
& > span.m3.m3-card-state-layer
|
||||
background-color: transparent
|
||||
|
||||
& > span.m3.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
@@ -1,190 +0,0 @@
|
||||
label.m3.m3-checkbox-label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
span.m3.m3-checkbox-ripple-layer {
|
||||
z-index: 20;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"].m3.m3-checkbox {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: content-box;
|
||||
z-index: 10;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
margin: 0;
|
||||
outline-offset: -0.14rem;
|
||||
border-radius: 0.14rem;
|
||||
outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:is(
|
||||
:user-invalid:is(:checked, :indeterminate),
|
||||
.m3.m3-error:is(:checked, :indeterminate)
|
||||
) {
|
||||
outline-color: var(--md-sys-color-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
|
||||
outline-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:is(
|
||||
:checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
|
||||
.m3.m3-error,
|
||||
:disabled
|
||||
),
|
||||
:indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
|
||||
.m3.m3-error,
|
||||
:disabled
|
||||
)
|
||||
) {
|
||||
outline-color: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled:is(
|
||||
:hover,
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled
|
||||
) {
|
||||
opacity: 38%;
|
||||
border: 2px solid var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(
|
||||
:hover,
|
||||
input[type="checkbox"].m3.m3-checkbox:disabled
|
||||
) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox::after {
|
||||
line-height: 1.125rem;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:checked::after {
|
||||
content: "done";
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
|
||||
content: "check_indeterminate_small";
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:hover {
|
||||
outline-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:user-invalid:is(:hover, :indeterminate:hover),
|
||||
.m3.m3-error:hover
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-error) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:user-invalid:is(:active, :indeterminate:active),
|
||||
.m3.m3-error:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-error) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:user-invalid:is(:active, :indeterminate:active),
|
||||
.m3.m3-error:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-error) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:checked:hover,
|
||||
:indeterminate:hover
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-checkbox-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
|
||||
+ span.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
|
||||
+ span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
|
||||
+ span.m3.m3-checkbox-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=checkbox.css.map */
|
||||
17
src/styles/container.css
Normal file
17
src/styles/container.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 21 | @include elevation-1(false)
|
||||
* | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* container.sass 21:9 root stylesheet */
|
||||
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
||||
"Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Undefined mixin.\a \2577 \a 21 \2502 @include elevation-1(false)\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a container.sass 21:9 root stylesheet";
|
||||
}
|
||||
1
src/styles/container.css.map
Normal file
1
src/styles/container.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"container.css"}
|
||||
20
src/styles/container.sass
Normal file
20
src/styles/container.sass
Normal file
@@ -0,0 +1,20 @@
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
div.m3.m3-container
|
||||
display: block
|
||||
border-radius: 12px
|
||||
position: relative
|
||||
contain: content
|
||||
transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&.m3-container-filled
|
||||
background-color: var(--md-sys-color-surface-container-highest)
|
||||
|
||||
&.m3-container-outlined
|
||||
background-color: var(--md-sys-color-surface)
|
||||
outline-offset: -1px
|
||||
outline: 1px solid var(--md-sys-color-outline-variant)
|
||||
|
||||
&.m3-container-elevated
|
||||
@include elevation-1(false)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
||||
@@ -1,211 +0,0 @@
|
||||
button.m3.m3-fab {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button.m3.m3-fab > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
}
|
||||
button.m3.m3-fab.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;
|
||||
}
|
||||
button.m3.m3-fab::before {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-fab.surface {
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-fab.surface:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.surface > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.primary {
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
button.m3.m3-fab.primary:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.primary > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab.secondary {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button.m3.m3-fab.secondary:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.secondary > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab.tertiary {
|
||||
background-color: var(--md-sys-color-tertiary-container);
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
button.m3.m3-fab.tertiary:not(.without-elevation) {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
|
||||
fill: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-tertiary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab.m3-small-fab {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
padding: 11px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-default-fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-large-fab {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 28px;
|
||||
padding: 34.5px;
|
||||
font-size: 36px;
|
||||
}
|
||||
button.m3.m3-fab.m3-extended-fab {
|
||||
width: auto;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab:not(.without-elevation):is(
|
||||
.surface,
|
||||
.primary,
|
||||
.secondary,
|
||||
.tertiary
|
||||
):hover {
|
||||
box-shadow:
|
||||
0 2px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab:not(.without-elevation):is(
|
||||
.surface,
|
||||
.primary,
|
||||
.secondary,
|
||||
.tertiary
|
||||
):active {
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
button.m3.m3-fab:hover.surface::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:hover.primary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:hover.secondary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:hover.tertiary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-tertiary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.surface::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.primary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.secondary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.tertiary::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-tertiary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=fabs.css.map */
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,15 +1,22 @@
|
||||
@import "fabs"
|
||||
@import "card"
|
||||
@import "icon"
|
||||
@import "radio"
|
||||
@import "badge"
|
||||
@import "fonts"
|
||||
@import "button"
|
||||
@import "ripple"
|
||||
@import "swtich"
|
||||
@import "divider"
|
||||
@import "checkbox"
|
||||
@import "text-field"
|
||||
@import "icon-button"
|
||||
@import "container"
|
||||
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
@import "button-styles/fabs"
|
||||
@import "button-styles/button"
|
||||
@import "button-styles/icon-button"
|
||||
|
||||
@import "input-styles/radio"
|
||||
@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"
|
||||
|
||||
@@ -1,268 +0,0 @@
|
||||
button.m3.m3-icon-button {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
button.m3.m3-icon-button::before {
|
||||
transition:
|
||||
background-color,
|
||||
box-shadow,
|
||||
0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
button.m3.m3-icon-button > span.m3-icon {
|
||||
z-index: 25;
|
||||
font-size: 2em;
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 500,
|
||||
"GRAD" 0,
|
||||
"opsz" 48;
|
||||
}
|
||||
button.m3.m3-icon-button.default {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default:disabled,
|
||||
button.m3.m3-icon-button.default.selected:disabled,
|
||||
button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default.selected.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.toggled {
|
||||
fill: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.selected.toggled {
|
||||
fill: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.toggled {
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.selected.toggled,
|
||||
button.m3.m3-icon-button.tonal {
|
||||
fill: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined {
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
fill: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined:disabled {
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 38%,
|
||||
transparent
|
||||
);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
fill: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple,
|
||||
button.m3.m3-icon-button.filled:not(:disabled).selected.toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
|
||||
.outlined
|
||||
).toggled.selected
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
|
||||
.default
|
||||
).toggled.selected
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-inverse-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled)
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple,
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled
|
||||
> .m3.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before,
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before,
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(
|
||||
.default,
|
||||
.outlined
|
||||
)::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before,
|
||||
button.m3.m3-icon-button:focus-visible:not(
|
||||
:disabled
|
||||
).filled.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before,
|
||||
button.m3.m3-icon-button:focus-visible:not(
|
||||
:disabled
|
||||
).tonal.toggled.selected::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-secondary-container) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface-variant) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=icon-button.css.map */
|
||||
17
src/styles/input-styles/checkbox.css
Normal file
17
src/styles/input-styles/checkbox.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/* Error: Undefined mixin.
|
||||
* ,
|
||||
* 4 | @include m3-label-mixin
|
||||
* | ^^^^^^^^^^^^^^^^^^^^^^^
|
||||
* '
|
||||
* checkbox.sass 4:5 root stylesheet */
|
||||
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
||||
"Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Undefined mixin.\a \2577 \a 4 \2502 @include m3-label-mixin\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a checkbox.sass 4:5 root stylesheet";
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
label.m3.m3-checkbox-label
|
||||
@include m3-label-mixin
|
||||
width: 18px
|
||||
91
src/styles/input-styles/radio.css
Normal file
91
src/styles/input-styles/radio.css
Normal file
@@ -0,0 +1,91 @@
|
||||
@import "../mixins/m3-mixins.css";
|
||||
div.m3.m3-radio {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
|
||||
z-index: 5;
|
||||
}
|
||||
div.m3.m3-radio > span.m3.m3-radio-state-layer {
|
||||
width: 40px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke-opacity: 38%;
|
||||
stroke: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 38%;
|
||||
fill: var(--md-sys-color-on-surface);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 0;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
|
||||
stroke: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
|
||||
fill-opacity: 1;
|
||||
fill: var(--md-sys-color-primary);
|
||||
}
|
||||
div.m3.m3-radio svg {
|
||||
margin: 0;
|
||||
width: 20px;
|
||||
z-index: 10;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
aspect-ratio: inherit;
|
||||
}
|
||||
div.m3.m3-radio svg > circle {
|
||||
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
div.m3.m3-radio svg > circle.m3-radio-outline {
|
||||
r: 9px;
|
||||
fill: black;
|
||||
fill-opacity: 0;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
div.m3.m3-radio svg > circle.m3-radio-state {
|
||||
r: 5px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=radio.css.map */
|
||||
1
src/styles/input-styles/radio.css.map
Normal file
1
src/styles/input-styles/radio.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["radio.sass"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI","file":"radio.css"}
|
||||
@@ -1,5 +1,3 @@
|
||||
@import "mixins/m3-mixins"
|
||||
|
||||
div.m3.m3-radio
|
||||
width: 20px
|
||||
height: 20px
|
||||
3
src/styles/main.css
Normal file
3
src/styles/main.css
Normal file
@@ -0,0 +1,3 @@
|
||||
|
||||
@tailwind utilities;
|
||||
@tailwind components;
|
||||
@@ -1,115 +0,0 @@
|
||||
label.m3.m3-radio-label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
|
||||
position: absolute;
|
||||
width: 2.5rem;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
input[type="radio"].m3.m3-radio {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio::after {
|
||||
content: "";
|
||||
width: 10px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:disabled {
|
||||
border: 2px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked {
|
||||
border: 2px solid var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked::after {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked:disabled {
|
||||
border: 2px solid
|
||||
color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:checked:disabled::after {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 38%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):is(
|
||||
:checked:active,
|
||||
:indeterminate:active
|
||||
)
|
||||
+ span.m3.m3-radio-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):hover
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 8%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active
|
||||
+ span.m3.m3-radio-state-layer {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-on-surface) 12%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
input[type="radio"].m3.m3-radio:not(:disabled):active
|
||||
+ span.m3.m3-radio-state-layer
|
||||
+ span.m3-ripple-domain
|
||||
> .m3.ripple {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--md-sys-color-primary) 20%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=radio.css.map */
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sourceRoot":"","sources":["radio.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"radio.css"}
|
||||
Reference in New Issue
Block a user