doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: Mixins for icon buttons, but it's not completed feature

Browse Source 
FIXED: Styles for segmented-button
This commit is contained in:
doryan04
2024-02-24 23:58:23 +04:00
committed by doryan
parent 964534c780
commit 0a8b58668d
22 changed files with 423 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
src/styles/generics.css
View File

@@ -3,25 +3,17 @@
@import "./themes/typography.module.css";
@import "./themes/theme.dark.css" (prefers-color-scheme: dark);
@import "./themes/theme.light.css" (prefers-color-scheme: light);
div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
border-radius: 12px !important;
padding: 0px;
}
div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child {
border-radius: 12px !important;
padding: 0px;
}
div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 {
padding: 16px;
display: block;
box-sizing: border-box;
padding: 16px;
}
.m3.m3-card-media {
width: 100%;
display: block;
contain: content;
position: relative;
@@ -50,7 +42,7 @@ div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain)
height: 100%;
position: absolute;
}
div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.ripple {
div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer {
@@ -235,7 +227,7 @@ svg.m3.m3-badge > text {
pointer-events: none;
}
.m3.ripple {
.m3.m3-ripple {
position: absolute;
overflow: hidden;
pointer-events: none;
@@ -250,7 +242,7 @@ svg.m3.m3-badge > text {
transition-property: opacity, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.m3.ripple.visible {
.m3.m3-ripple.visible {
opacity: 1 !important;
}
@@ -330,11 +322,12 @@ button.m3.m3-fab.m3 {
border: none;
gap: 12px;
}
button.m3.m3-fab > span.m3.m3-fab-state-layer {
button.m3.m3-fab:before {
width: 100%;
height: 100%;
position: absolute;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
content: "";
}
button.m3.m3-fab.surface {
color: var(--md-sys-color-primary);
@@ -346,10 +339,10 @@ button.m3.m3-fab.surface:not(.without-elevation) {
button.m3.m3-fab.surface > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.ripple {
button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
button.m3.m3-fab.primary {
@@ -362,10 +355,10 @@ button.m3.m3-fab.primary:not(.without-elevation) {
button.m3.m3-fab.primary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.ripple {
button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
}
button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
}
button.m3.m3-fab.secondary {
@@ -378,10 +371,10 @@ button.m3.m3-fab.secondary:not(.without-elevation) {
button.m3.m3-fab.secondary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.ripple {
button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
}
button.m3.m3-fab.tertiary {
@@ -394,10 +387,10 @@ button.m3.m3-fab.tertiary:not(.without-elevation) {
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
fill: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.ripple {
button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
}
button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active > span.m3.m3-fab-state-layer {
button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before {
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent);
}
button.m3.m3-fab.m3-small-fab {
@@ -434,162 +427,136 @@ button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .ter
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 > span.m3.m3-fab-state-layer {
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 > span.m3.m3-fab-state-layer {
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 > span.m3.m3-fab-state-layer {
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 > span.m3.m3-fab-state-layer {
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 > span.m3.m3-fab-state-layer {
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 > span.m3.m3-fab-state-layer {
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 > span.m3.m3-fab-state-layer {
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 > span.m3.m3-fab-state-layer {
button.m3.m3-fab:focus-visible.tertiary:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button) {
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);
letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
max-height: 40px;
width: min-content;
white-space: nowrap;
height: min-content;
box-sizing: border-box;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button:not(.m3-fab, .m3-icon-button).m3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
contain: content;
text-align: center;
padding: 10px 24px;
flex-direction: row;
border-radius: 100px;
box-sizing: border-box;
}
button:not(.m3-fab, .m3-icon-button).filled {
button.m3.m3-common-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 {
button.m3.m3-common-button.filled, button.m3.m3-common-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 {
button.m3.m3-common-button.outlined {
outline-offset: -1px;
background-color: transparent;
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 {
button.m3.m3-common-button.outlined > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text {
button.m3.m3-common-button.text {
background-color: transparent;
color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
button.m3.m3-common-button.text > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).elevated {
button.m3.m3-common-button.elevated {
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 {
button.m3.m3-common-button.elevated > svg.m3-svg-icon {
fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).tonal {
button.m3.m3-common-button.tonal {
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 {
button.m3.m3-common-button.tonal > svg.m3-svg-icon {
fill: var(--md-sys-color-on-secondary-container);
}
button:not(.m3-fab, .m3-icon-button).filled > span.m3.m3-ripple-domain > span.m3.ripple {
button.m3.m3-common-button.filled > span.m3.m3-ripple-domain > span.m3.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) > span.m3.m3-ripple-domain > span.m3.ripple {
button.m3.m3-common-button:is(.outlined, .text, .elevated) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button).tonal > span.m3.m3-ripple-domain > span.m3.ripple {
button.m3.m3-common-button.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple {
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) {
button.m3.m3-common-button:active:is(.filled, .tonal) {
box-shadow: none !important;
}
button:not(.m3-fab, .m3-icon-button):active.elevated {
button.m3.m3-common-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;
}
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).outlined {
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).outlined {
border-color: var(--md-sys-color-primary) !important;
}
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).filled {
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).filled {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary));
}
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) {
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
button:not(.m3-fab, .m3-icon-button):active:not(button:not(.m3-fab, .m3-icon-button):active:has(span.m3.m3-ripple-domain)).tonal {
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).tonal {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container));
}
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
button.m3.m3-common-button:focus-visible.outlined {
border-color: var(--md-sys-color-primary) !important;
}
button:not(.m3-fab, .m3-icon-button):focus-visible.filled {
button.m3.m3-common-button:focus-visible.filled {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary));
}
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated) {
button.m3.m3-common-button:focus-visible:is(.outlined, .text, .elevated) {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal {
button.m3.m3-common-button:focus-visible.tonal {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container));
}
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
button.m3.m3-common-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);
}
button:not(.m3-fab, .m3-icon-button):hover.elevated {
button.m3.m3-common-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);
}
button:not(.m3-fab, .m3-icon-button):hover.filled {
button.m3.m3-common-button:hover.filled {
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
}
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated) {
button.m3.m3-common-button:hover:is(.outlined, .text, .elevated) {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
button:not(.m3-fab, .m3-icon-button):hover.tonal {
button.m3.m3-common-button:hover.tonal {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
}
button:not(.m3-fab, .m3-icon-button):disabled {
button.m3.m3-common-button:disabled {
pointer-events: none;
}
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
button.m3.m3-common-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) {
button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal) {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
button.m3.m3-common-button:disabled.elevated {
box-shadow: none;
}
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
button.m3.m3-common-button:disabled.outlined {
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}
@@ -616,83 +583,83 @@ button.m3.m3-icon-button::before {
}
button.m3.m3-icon-button > span.m3-icon {
z-index: 25;
font-size: 2em;
font-size: 24px;
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, button.m3.m3-icon-button.default:not(.selected).toggled {
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
background-color: transparent;
}
button.m3.m3-icon-button.default.selected.toggled {
fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
background-color: transparent;
}
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);
background-color: transparent;
}
button.m3.m3-icon-button.filled {
fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
}
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:not(.selected).toggled {
fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
}
button.m3.m3-icon-button.filled.selected.toggled {
fill: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
}
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:not(.selected).toggled {
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
}
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);
fill: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 100%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 100%, transparent);
}
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);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 100%, transparent);
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
background-color: transparent;
}
button.m3.m3-icon-button.outlined.selected.toggled {
border: 0 solid transparent;
fill: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 100%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface) 100%, transparent);
}
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);
background-color: transparent;
}
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
button.m3.m3-icon-button.outlined.selected.toggled: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.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 {
button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).selected.toggled, button.m3.m3-icon-button.filled:not(:disabled)) > span.m3.m3-ripple-domain > span.m3.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 {
button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).toggled):not(button.m3.m3-icon-button.filled:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.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 {
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > span.m3.m3-ripple-domain > span.m3.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 {
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.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 {
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.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 {
button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled) > span.m3.m3-ripple-domain > span.m3.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 {
button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.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 {
@@ -710,24 +677,25 @@ button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-b
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 {
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):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 {
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).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 {
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).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 {
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).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 {
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
}
.m3.m3-density-0 > button.m3.m3-button-segment {
height: 40px;
padding: 10px 12px;
}
.m3.m3-density-0 > button.m3.m3-button-segment:first-child {
border-radius: 20px 0 0 20px;
@@ -735,99 +703,87 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
.m3.m3-density-0 > button.m3.m3-button-segment:last-child {
border-radius: 0 20px 20px 0;
}
.m3.m3-density-0 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 10px;
padding-bottom: 10px;
}
.m3.m3-density--1 > button.m3.m3-button-segment {
height: 38px;
height: 36px;
padding: 8px 12px;
}
.m3.m3-density--1 > button.m3.m3-button-segment:first-child {
border-radius: 19px 0 0 19px;
border-radius: 18px 0 0 18px;
}
.m3.m3-density--1 > button.m3.m3-button-segment:last-child {
border-radius: 0 19px 19px 0;
}
.m3.m3-density--1 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 9px;
padding-bottom: 9px;
border-radius: 0 18px 18px 0;
}
.m3.m3-density--2 > button.m3.m3-button-segment {
height: 36px;
height: 32px;
padding: 6px 12px;
}
.m3.m3-density--2 > button.m3.m3-button-segment:first-child {
border-radius: 18px 0 0 18px;
border-radius: 16px 0 0 16px;
}
.m3.m3-density--2 > button.m3.m3-button-segment:last-child {
border-radius: 0 18px 18px 0;
}
.m3.m3-density--2 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 8px;
padding-bottom: 8px;
border-radius: 0 16px 16px 0;
}
.m3.m3-density--3 > button.m3.m3-button-segment {
height: 34px;
height: 28px;
padding: 4px 12px;
}
.m3.m3-density--3 > button.m3.m3-button-segment:first-child {
border-radius: 17px 0 0 17px;
border-radius: 14px 0 0 14px;
}
.m3.m3-density--3 > button.m3.m3-button-segment:last-child {
border-radius: 0 17px 17px 0;
}
.m3.m3-density--3 > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0 14px 14px 0;
}
div.m3.m3-segmented-buttons {
display: flex;
width: 100%;
padding: 4px 0;
border-radius: 20px;
display: inline-flex;
box-sizing: border-box;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
flex: 1 1;
padding: 0;
width: 100%;
min-width: 108px;
min-width: 48px;
border-radius: 0;
margin: 0 -0.5px;
display: inline-flex;
background-color: transparent;
border: 1px solid var(--md-sys-color-outline);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before {
width: 100%;
height: 100%;
position: absolute;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
box-sizing: border-box;
content: "";
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer > * {
visibility: hidden;
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: inherit;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) > svg.m3.m3-svg-icon {
height: inherit;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer {
box-sizing: border-box;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer > * {
visibility: hidden;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
position: absolute;
max-height: inherit;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon > text {
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > label.m3.m3-typography {
color: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
display: none;
@@ -844,11 +800,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
display: initial;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible) > span.m3.m3-button-segment-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible):before {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
@@ -894,7 +850,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):checked
div.m3.m3-radio-container > 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-container > 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 {
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
@@ -903,7 +859,7 @@ div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover +
div.m3.m3-radio-container > 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-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
@@ -1275,7 +1231,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :
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 {
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.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 {
@@ -1284,7 +1240,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indetermi
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 {
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.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 {
@@ -1293,7 +1249,7 @@ input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-stat
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 {
input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
@@ -1535,4 +1491,31 @@ html {
border-radius: 25px;
}
button:not(.m3-fab, .m3-icon-button) {
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);
letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
max-height: 40px;
width: min-content;
white-space: nowrap;
height: min-content;
box-sizing: border-box;
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button:not(.m3-fab, .m3-icon-button).m3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
contain: content;
text-align: center;
padding: 10px 24px;
flex-direction: row;
border-radius: 100px;
box-sizing: border-box;
}
/*# sourceMappingURL=generics.css.map */