diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 55ce82b..1e85eb5 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,28 +6,15 @@ - - - - - - - - - - - - - + - diff --git a/app/page.tsx b/app/page.tsx index 64bb526..cc72f30 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -15,7 +15,7 @@ export default function Page() { flexDirection:"column", justifyContent: "center", alignItems: "center", - width: "100%", + overflowX: "auto", gap: "0em" }}>

Google Material You UI kit

diff --git a/src/styles/generics.css b/src/styles/generics.css index 819b457..4801e54 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -1,118 +1,150 @@ -@import url(./themes/tokens.css); -@import url(./themes/colors.module.css); -@import url(./themes/typography.module.css); +@import "./themes/tokens.css"; +@import "./themes/colors.module.css"; +@import "./themes/typography.module.css"; @import "./themes/theme.dark.css" (prefers-color-scheme: dark); @import "./themes/theme.light.css" (prefers-color-scheme: light); 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: #00000000; } - button.m3.m3-fab.surface { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); - background-color: var(--md-sys-color-surface-container-high); } - button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface { - color: 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 { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); - background-color: var(--md-sys-color-primary-container); } - button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary { - color: 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 { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); - background-color: var(--md-sys-color-secondary-container); } - button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary { - color: 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 { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); - background-color: var(--md-sys-color-tertiary-container); } - button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary { - color: 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: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: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); } + 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 { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); + background-color: var(--md-sys-color-surface-container-high); +} +button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface { + color: 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 { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); + background-color: var(--md-sys-color-primary-container); +} +button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary { + color: 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 { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); + background-color: var(--md-sys-color-secondary-container); +} +button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary { + color: 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 { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); + background-color: var(--md-sys-color-tertiary-container); +} +button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary { + color: 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: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: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); +} 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: 40px; - aspect-ratio: inherit; - border-radius: 50%; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } + aspect-ratio: 1; +} +label.m3.m3-radio-label > span.m3.m3-radio-state-layer { + position: absolute; + width: 40px; + aspect-ratio: inherit; + border-radius: 50%; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); +} -input[type="radio"].m3.m3-radio { +input[type=radio].m3.m3-radio { appearance: none; display: flex; align-items: center; @@ -123,190 +155,252 @@ input[type="radio"].m3.m3-radio { 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); } + 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); +} @font-face { font-family: Material-Icons-Regular; - src: url("./font/MaterialIcons-Regular.ttf"); } + src: url("./font/MaterialIcons-Regular.ttf"); +} @font-face { font-family: Material-Icons-Outlined-Regular; - src: url("./font/MaterialIconsOutlined-Regular.otf"); } + src: url("./font/MaterialIconsOutlined-Regular.otf"); +} @font-face { font-family: Material-Icons-Round-Regular; - src: url("./font/MaterialIconsRound-Regular.otf"); } + src: url("./font/MaterialIconsRound-Regular.otf"); +} @font-face { font-family: Material-Icons-Sharp-Regular; - src: url("./font/MaterialIconsSharp-Regular.otf"); } + src: url("./font/MaterialIconsSharp-Regular.otf"); +} @font-face { font-family: Material-Icons-Two-Tone-Regular; - src: url("./font/MaterialIconsTwoTone-Regular.otf"); } + src: url("./font/MaterialIconsTwoTone-Regular.otf"); +} @font-face { font-family: Material-Symbols-Outlined-Regular; src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf"); - src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); } + src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); +} @font-face { font-family: Material-Symbols-Round-Regular; src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf"); - src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); } + src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); +} @font-face { font-family: Material-Symbols-Sharp-Regular; src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf"); - src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); } + src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); +} @font-face { font-family: Roboto; font-face-name: Thin; font-weight: 100; - src: url("./font/Roboto-Thin.ttf"); } + src: url("./font/Roboto-Thin.ttf"); +} @font-face { font-family: Roboto; font-face-name: Light; font-weight: 300; - src: url("./font/Roboto-Light.ttf"); } + src: url("./font/Roboto-Light.ttf"); +} @font-face { font-family: Roboto; font-face-name: Regular; font-weight: 400; - src: url("./font/Roboto-Regular.ttf"); } + src: url("./font/Roboto-Regular.ttf"); +} @font-face { font-family: Roboto; font-face-name: Medium; font-weight: 500; - src: url("./font/Roboto-Medium.ttf"); } + src: url("./font/Roboto-Medium.ttf"); +} @font-face { font-family: Roboto; font-face-name: Bold; font-weight: 700; - src: url("./font/Roboto-Bold.ttf"); } + src: url("./font/Roboto-Bold.ttf"); +} @font-face { font-family: Roboto; font-face-name: Black; font-weight: 900; - src: url("./font/Roboto-Black.ttf"); } + src: url("./font/Roboto-Black.ttf"); +} button:not(.m3-fab, .m3-icon-button) { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; } - button:not(.m3-fab, .m3-icon-button) > span.m3-icon { - font-family: Material-Symbols-Outlined-Regular, sans-serif; - font-weight: 500; - font-size: 18px; - line-height: 18px; } - button:not(.m3-fab, .m3-icon-button).m3 { - 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; } - 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 > span.m3-icon { - color: var(--md-sys-color-on-primary); } - button:not(.m3-fab, .m3-icon-button).outlined { - border: 1px solid var(--md-sys-color-outline) !important; - background-color: #00000000; } - button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon { - color: var(--md-sys-color-primary); } - button:not(.m3-fab, .m3-icon-button).text { - padding: 10px 12px !important; - background-color: #00000000; } - button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon { - color: 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); } - button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon { - color: var(--md-sys-color-primary); } - button:not(.m3-fab, .m3-icon-button).tonal { - background-color: var(--md-sys-color-secondary-container); } - button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon { - color: 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; - content: ""; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: absolute; - background: #00000000; } - 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 { - 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); } - 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; } - 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); } - 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); } - 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); } - 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); } - 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); } - button:not(.m3-fab, .m3-icon-button):hover.filled::before { - 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.tonal::before { - 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) { - 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); } - button:not(.m3-fab, .m3-icon-button):disabled.elevated { - box-shadow: none; } - button:not(.m3-fab, .m3-icon-button):disabled.outlined { - border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; } + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; +} +button:not(.m3-fab, .m3-icon-button) > span.m3-icon { + font-family: Material-Symbols-Outlined-Regular, sans-serif; + font-weight: 500; + font-size: 18px; + line-height: 18px; +} +button:not(.m3-fab, .m3-icon-button).m3 { + 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; +} +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 > span.m3-icon { + color: var(--md-sys-color-on-primary); +} +button:not(.m3-fab, .m3-icon-button).outlined { + border: 1px solid var(--md-sys-color-outline) !important; + background-color: rgba(0, 0, 0, 0); +} +button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon { + color: var(--md-sys-color-primary); +} +button:not(.m3-fab, .m3-icon-button).text { + padding: 10px 12px !important; + background-color: rgba(0, 0, 0, 0); +} +button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon { + color: 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); +} +button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon { + color: var(--md-sys-color-primary); +} +button:not(.m3-fab, .m3-icon-button).tonal { + background-color: var(--md-sys-color-secondary-container); +} +button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon { + color: 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; + content: ""; + top: 0; + bottom: 0; + left: 0; + right: 0; + 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):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); +} +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; +} +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); +} +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); +} +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); +} +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); +} +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); +} +button:not(.m3-fab, .m3-icon-button):hover.filled::before { + 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.tonal::before { + 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) { + 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); +} +button:not(.m3-fab, .m3-icon-button):disabled.elevated { + box-shadow: none; +} +button:not(.m3-fab, .m3-icon-button):disabled.outlined { + border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; +} .m3.m3-ripple-domain { position: absolute; width: 100%; height: 100%; z-index: 20; - pointer-events: none; } + pointer-events: none; +} .m3.ripple { position: absolute; @@ -320,16 +414,21 @@ button:not(.m3-fab, .m3-icon-button) { animation-name: rippleAppearanceAnimation; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 0.55s; - transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1); } - .m3.ripple.visible { - opacity: 1 !important; } + transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1); +} +.m3.ripple.visible { + opacity: 1 !important; +} @keyframes rippleAppearanceAnimation { 0% { - transform: scale3d(0, 0, 0); } + transform: scale3d(0, 0, 0); + } 100% { - transform: scale3d(1, 1, 1); } } -input[type="checkbox"].m3.m3-switch { + transform: scale3d(1, 1, 1); + } +} +input[type=checkbox].m3.m3-switch { transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; position: relative; @@ -338,116 +437,150 @@ input[type="checkbox"].m3.m3-switch { height: 32px; appearance: none; padding: 2px 2px 2px 6px; - border-radius: calc(32px / 2); + border-radius: 16px; border: 2px solid var(--md-sys-color-outline); - background-color: var(--md-sys-color-surface-container-high); } - input[type="checkbox"].m3.m3-switch:disabled { - border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); - background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent); } - input[type="checkbox"].m3.m3-switch:checked { - border: 2px solid #00000000; - background-color: var(--md-sys-color-primary); } - input[type="checkbox"].m3.m3-switch::after { - transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); - z-index: 9; - position: absolute; - display: flex; - content: ""; - height: 40px; - width: 40px; - left: -6px; - border-radius: 50%; } - input[type="checkbox"].m3.m3-switch:checked::after { - transform: translateX(50%); } - input[type="checkbox"].m3.m3-switch:checked::after, input[type="checkbox"].m3.m3-switch::after, input[type="checkbox"].m3.m3-switch:checked::before, input[type="checkbox"].m3.m3-switch::before { - transform-origin: center; } - input[type="checkbox"].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before { - font-family: Material-Symbols-Outlined-Regular, sans-serif; - align-items: center; - justify-content: center; - text-align: center; - font-weight: 500; - font-size: 12px; - line-height: 12px; } - input[type="checkbox"].m3.m3-switch[data-icon=true]:checked::before { - content: "done" !important; - color: var(--md-sys-color-on-primary-container); } - @media (prefers-color-scheme: light) { - input[type="checkbox"].m3.m3-switch[data-icon=true]::before { - color: var(--md-sys-color-on-primary); } - input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled::before { - color: var(--md-sys-color-surface-container-highest); } - input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled:checked::before { - color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); } } - @media (prefers-color-scheme: dark) { - input[type="checkbox"].m3.m3-switch[data-icon=true]::before { - color: var(--md-sys-color-surface-container-high); } - input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled::before { - color: var(--md-sys-color-surface-container-highest); } - input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled:checked::before { - color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); } } - input[type="checkbox"].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type="checkbox"].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before { - transform: scale(150%); - content: "close"; } - input[type="checkbox"].m3.m3-switch::before { - z-index: 10; - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - content: ""; - display: flex; - height: 16px; - width: 16px; - border-radius: 50%; - background-color: var(--md-sys-color-outline); } - input[type="checkbox"].m3.m3-switch:checked::before { - opacity: 1; - transform: translateX(125%) scale(150%); - background-color: var(--md-sys-color-on-primary); } - input[type="checkbox"].m3.m3-switch:hover:checked::after { - transform: translateX(50%); - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } - input[type="checkbox"].m3.m3-switch:hover::after { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } - input[type="checkbox"].m3.m3-switch:active:checked::after { - transform: translateX(50%); - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } - input[type="checkbox"].m3.m3-switch:active::after { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } - input[type="checkbox"].m3.m3-switch:active:checked::before { - transform: translateX(125%) scale(175%); - background-color: var(--md-sys-color-primary-container); } - input[type="checkbox"].m3.m3-switch:active::before { - transform: scale(175%); - background-color: var(--md-sys-color-on-surface-variant); } - input[type="checkbox"].m3.m3-switch:disabled:checked { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; } - input[type="checkbox"].m3.m3-switch:disabled:checked::after, input[type="checkbox"].m3.m3-switch:disabled::after { - opacity: 0; } - input[type="checkbox"].m3.m3-switch:disabled::before { - opacity: 0.38; - transform: initial; - background-color: var(--md-sys-color-outline) !important; } - input[type="checkbox"].m3.m3-switch:disabled:checked::before { - opacity: 1; - transform: translateX(125%) scale(150%); - background-color: var(--md-sys-color-surface) !important; } + background-color: var(--md-sys-color-surface-container-high); +} +input[type=checkbox].m3.m3-switch:disabled { + border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent); +} +input[type=checkbox].m3.m3-switch:checked { + border: 2px solid rgba(0, 0, 0, 0); + background-color: var(--md-sys-color-primary); +} +input[type=checkbox].m3.m3-switch::after { + transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + z-index: 9; + position: absolute; + display: flex; + content: ""; + height: 40px; + width: 40px; + left: -6px; + border-radius: 50%; +} +input[type=checkbox].m3.m3-switch:checked::after { + transform: translateX(50%); +} +input[type=checkbox].m3.m3-switch:checked::after, input[type=checkbox].m3.m3-switch::after, input[type=checkbox].m3.m3-switch:checked::before, input[type=checkbox].m3.m3-switch::before { + transform-origin: center; +} +input[type=checkbox].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before { + font-family: Material-Symbols-Outlined-Regular, sans-serif; + align-items: center; + justify-content: center; + text-align: center; + font-weight: 500; + font-size: 12px; + line-height: 12px; +} +input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before { + content: "done" !important; + color: var(--md-sys-color-on-primary-container); +} +@media (prefers-color-scheme: light) { + input[type=checkbox].m3.m3-switch[data-icon=true]::before { + color: var(--md-sys-color-on-primary); + } + input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before { + color: var(--md-sys-color-surface-container-highest); + } + input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before { + color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); + } +} +@media (prefers-color-scheme: dark) { + input[type=checkbox].m3.m3-switch[data-icon=true]::before { + color: var(--md-sys-color-surface-container-high); + } + input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before { + color: var(--md-sys-color-surface-container-highest); + } + input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before { + color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); + } +} +input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before { + transform: scale(150%); + content: "close"; +} +input[type=checkbox].m3.m3-switch::before { + z-index: 10; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + content: ""; + display: flex; + height: 16px; + width: 16px; + border-radius: 50%; + background-color: var(--md-sys-color-outline); +} +input[type=checkbox].m3.m3-switch:checked::before { + opacity: 1; + transform: translateX(125%) scale(150%); + background-color: var(--md-sys-color-on-primary); +} +input[type=checkbox].m3.m3-switch:hover:checked::after { + transform: translateX(50%); + background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); +} +input[type=checkbox].m3.m3-switch:hover::after { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +input[type=checkbox].m3.m3-switch:active:checked::after { + transform: translateX(50%); + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); +} +input[type=checkbox].m3.m3-switch:active::after { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); +} +input[type=checkbox].m3.m3-switch:active:checked::before { + transform: translateX(125%) scale(175%); + background-color: var(--md-sys-color-primary-container); +} +input[type=checkbox].m3.m3-switch:active::before { + transform: scale(175%); + background-color: var(--md-sys-color-on-surface-variant); +} +input[type=checkbox].m3.m3-switch:disabled:checked { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; +} +input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after { + opacity: 0; +} +input[type=checkbox].m3.m3-switch:disabled::before { + opacity: 0.38; + transform: initial; + background-color: var(--md-sys-color-outline) !important; +} +input[type=checkbox].m3.m3-switch:disabled:checked::before { + opacity: 1; + transform: translateX(125%) scale(150%); + background-color: var(--md-sys-color-surface) !important; +} @keyframes toggle-shifting { 50% { - width: 30px; } + width: 30px; + } 100% { - width: 16px; } } + width: 16px; + } +} 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: 40px; - aspect-ratio: inherit; - border-radius: 50%; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } + aspect-ratio: 1; +} +label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer { + position: absolute; + width: 40px; + 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; @@ -455,9 +588,10 @@ span.m3.m3-checkbox-ripple-layer { border-radius: 50%; position: absolute; width: 40px; - height: 40px; } + height: 40px; +} -input[type="checkbox"].m3.m3-checkbox { +input[type=checkbox].m3.m3-checkbox { appearance: none; display: flex; align-items: center; @@ -469,51 +603,283 @@ input[type="checkbox"].m3.m3-checkbox { margin: 0; border-radius: 2px; border: 2px 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)) { - border: 2px solid var(--md-sys-color-error); - background-color: var(--md-sys-color-error); } - input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) { - border: 2px solid var(--md-sys-color-error); } - input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) { - border: 2px solid var(--md-sys-color-primary); - background-color: var(--md-sys-color-primary); } - input[type="checkbox"].m3.m3-checkbox:disabled:is(:hover, &) { - opacity: 38%; - border: 2px solid var(--md-sys-color-on-surface); } - input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(:hover, &) { - opacity: 38%; - background-color: var(--md-sys-color-on-surface); } - input[type="checkbox"].m3.m3-checkbox::after { - line-height: 18px; - font-family: Material-Symbols-Outlined-Regular, sans-serif; - font-weight: 700; - font-size: 18px; - 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 { - border: 2px solid 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); } + 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)) { + border: 2px solid var(--md-sys-color-error); + background-color: var(--md-sys-color-error); +} +input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) { + border: 2px solid 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)) { + border: 2px solid 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: 18px; + font-family: Material-Symbols-Outlined-Regular, sans-serif; + font-weight: 700; + font-size: 18px; + 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 { + border: 2px solid 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); +} + +div.m3.m3-text-field { + position: relative; + display: flex; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + margin: 0; +} +div.m3.m3-text-field span.m3-icon.icon-before { + align-self: start; +} +div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label { + line-height: var(--md-sys-typescale-body-large-line-height); + font-size: var(--md-sys-typescale-body-large-font-size); +} +div.m3.m3-text-field + span.m3-text-field-supporting-text { + display: flex; + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); + color: var(--md-sys-color-on-surface-variant); + margin: 4px 16px 2px 16px; +} +div.m3.m3-text-field > label { + padding-inline: 4px; + pointer-events: none; + transform: translate(16px, 0); + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + position: absolute; +} +div.m3.m3-text-field > input { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + background-color: transparent; + border: none; +} +div.m3.m3-text-field > span.m3-icon { + position: absolute; + align-self: end; + margin: 12px; + width: 24px; + line-height: 24px; + font-size: 24px; + display: inherit; + align-items: center; + justify-content: inherit; + cursor: pointer; + color: var(--md-sys-color-on-surface-variant); + font-family: Material-Symbols-Outlined-Regular, serif; +} +div.m3.m3-text-field > span.m3-text-field-state-layer { + width: 100%; + height: 100%; + pointer-events: none; + position: absolute; +} +div.m3.m3-text-field > input, div.m3.m3-text-field > label { + color: var(--md-sys-color-on-surface); +} +div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder { + color: var(--md-sys-color-on-surface-variant); +} +div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible { + outline: none; + caret-color: var(--md-sys-color-primary); +} +div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text { + opacity: 38%; +} +div.m3.m3-text-field.filled { + contain: content; + border-radius: 4px 4px 0 0; +} +div.m3.m3-text-field.filled > input { + display: inline-flex; + align-items: center; + box-sizing: border-box; + border-radius: 4px 4px 0 0; + background-color: var(--md-sys-color-surface-container-highest); + box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); +} +div.m3.m3-text-field.filled > input.with-after-icon { + padding: 24px 48px 8px 16px; +} +div.m3.m3-text-field.filled > input.with-before-icon { + padding: 24px 16px 8px 48px; +} +div.m3.m3-text-field.filled > input.with-before-icon + label { + margin-left: 32px; +} +div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) { + padding: 24px 16px 8px; +} +div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon { + padding: 24px 48px 8px 48px; +} +div.m3.m3-text-field.filled > label.raised { + transform: translate(12px, -12px); + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); +} +div.m3.m3-text-field.filled > input:required:user-invalid { + caret-color: var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible { + box-shadow: inset 0 -3px 0 var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:required:user-invalid { + box-shadow: inset 0 -1px 0 var(--md-sys-color-error); +} +div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text { + color: var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:focus-visible { + outline-offset: 3px; + box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); +} +div.m3.m3-text-field.filled > input:focus-visible + label { + color: var(--md-sys-color-primary); +} +div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +div.m3.m3-text-field.outlined > fieldset { + margin: 0; + position: absolute; + border-radius: 4px; + pointer-events: none; + padding-inline: 12px; + border: 1px solid var(--md-sys-color-outline); + inset: -7.5px 0px 0px 0px; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field.outlined > fieldset > legend > span { + width: 100%; +} +div.m3.m3-text-field.outlined > fieldset > legend { + opacity: 0; + width: 0; + padding: 0; + pointer-events: none; + border: 0 solid transparent; + transition: 0.05s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field.outlined > fieldset > legend.raised { + border-inline-width: 6px; + border-style: solid; + border-color: transparent; + width: auto; + visibility: visible; +} +div.m3.m3-text-field.outlined > input { + box-sizing: border-box; + border-radius: 4px; +} +div.m3.m3-text-field.outlined > input.with-after-icon { + padding: 16px 48px 16px 16px; +} +div.m3.m3-text-field.outlined > input.with-before-icon { + padding: 16px 16px 16px 48px; +} +div.m3.m3-text-field.outlined > input.with-before-icon + label { + transform: translate(48px, 0); +} +div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) { + padding: 16px; +} +div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon { + padding: 16px 48px; +} +div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset { + border: 3px solid var(--md-sys-color-primary); +} +div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend { + border-top-width: 0; + border-bottom-width: 0; + border-inline-width: 5.5px; + border-style: solid; + border-color: transparent; +} +div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend { + border-top-width: 0; + border-bottom-width: 0; + border-inline-width: 7.5px; + border-style: solid; + border-color: transparent; +} +div.m3.m3-text-field.outlined > input:focus-visible + label { + color: var(--md-sys-color-primary); +} +div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * { + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); +} +div.m3.m3-text-field.outlined > label.raised { + transform: translate(16px, -27px) !important; +} +div.m3.m3-text-field.outlined > input:required:user-invalid { + caret-color: var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text { + color: var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset { + border: 3px solid var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset { + border: 1px solid var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + border-color: var(--md-sys-color-on-surface); +} button.m3.m3-icon-button { transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; @@ -527,118 +893,160 @@ button.m3.m3-icon-button { 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:is(.default, .filled, .tonal, .outlined) { - font-family: Material-Symbols-Round-Regular, serif; } - button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled { - font-size: 13.49px; - font-family: Material-Icons-Regular, serif; - font-weight: 500; } - button.m3.m3-icon-button.default { - color: var(--md-sys-color-on-surface-variant); - background-color: #00000000; } - button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { - color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); - background-color: #00000000; } - button.m3.m3-icon-button.default.selected.toggled { - color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.filled { - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.filled.toggled { - color: var(--md-sys-color-primary); - background-color: var(--md-sys-color-surface-container-highest); } - button.m3.m3-icon-button.filled.selected.toggled { - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.tonal.toggled { - color: 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 { - color: 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 { - color: 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); - color: var(--md-sys-color-on-surface-variant); - background-color: #00000000; } - button.m3.m3-icon-button.outlined:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); - color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); - background-color: #00000000; } - button.m3.m3-icon-button.outlined.toggled.selected:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); - color: 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); } - @media (prefers-color-scheme: light) { - button.m3.m3-icon-button.outlined.selected.toggled { - border: 1px solid #00000000; - background-color: var(--md-sys-color-inverse-surface-light); - color: var(--md-sys-color-inverse-on-surface); } } - @media (prefers-color-scheme: dark) { - button.m3.m3-icon-button.outlined.selected.toggled { - border: 1px solid #00000000; - background-color: var(--md-sys-color-inverse-surface); - color: 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); } + 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:is(.default, .filled, .tonal, .outlined) { + font-family: Material-Symbols-Round-Regular, serif; +} +button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled { + font-size: 13.49px; + font-family: Material-Icons-Regular, serif; + font-weight: 500; +} +button.m3.m3-icon-button.default { + color: 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 { + color: 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 { + color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.filled { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.filled.toggled { + color: var(--md-sys-color-primary); + background-color: var(--md-sys-color-surface-container-highest); +} +button.m3.m3-icon-button.filled.selected.toggled { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.tonal.toggled { + color: 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 { + color: 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 { + color: 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); + color: 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); + color: 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); + color: 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); + color: 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); +} html { font-family: Roboto, serif; - color: var(--md-sys-color-on-surface); } + color: var(--md-sys-color-on-surface); +} +@media (prefers-color-scheme: light) { + html { + background-color: white; + } +} +@media (prefers-color-scheme: dark) { + html { + background-color: black; + } +} .m3 { - user-select: none; } + user-select: none; +} .m3.m3-wrapper { background-color: var(--md-sys-color-surface); border-radius: 25px; padding: 25px; width: max-content; - height: min-content; } + height: min-content; +} /*# sourceMappingURL=generics.css.map */ diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 4be2b92..2f3f725 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","icon-button.sass"], -"names": [], -"file": "generics.css" -} +{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AASQ;AACA;AACA;AACA;AACA;ACXR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;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;;;AC1DhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EHHI;EGKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EHaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EHpCA;;AGuCA;EHjCA;;AGoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EHnDA;;AGsDA;EHhDA;;AGmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;AClIR;ENDI;EACA;EACA;EACA;EACA;;AMDA;ENIA;EACA;EACA;EACA;EACA;;;AMLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AVjIZ;EACE;EACA;;AACA;EAHF;IAII;;;AACF;EALF;IAMI;;;;AAEJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file diff --git a/src/styles/generics.sass b/src/styles/generics.sass index b9470dd..8579ba4 100644 --- a/src/styles/generics.sass +++ b/src/styles/generics.sass @@ -5,6 +5,7 @@ @import "ripple" @import "swtich" @import "checkbox" +@import "text-field" @import "icon-button" @import "./themes/tokens.css" @import "./themes/colors.module.css" @@ -15,6 +16,10 @@ html font-family: Roboto, serif color: var(--md-sys-color-on-surface) + @media (prefers-color-scheme: light) + background-color: white + @media (prefers-color-scheme: dark) + background-color: black .m3 user-select: none diff --git a/src/styles/icon-button.css b/src/styles/icon-button.css index d064e9a..ec820e6 100644 --- a/src/styles/icon-button.css +++ b/src/styles/icon-button.css @@ -10,104 +10,133 @@ button.m3.m3-icon-button { 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:is(.default, .filled, .tonal, .outlined) { - font-family: Material-Symbols-Round-Regular, serif; } - button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled { - font-size: 13.49px; - font-family: Material-Icons-Regular, serif; - font-weight: 500; } - button.m3.m3-icon-button.default { - color: var(--md-sys-color-on-surface-variant); - background-color: #00000000; } - button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { - color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); - background-color: #00000000; } - button.m3.m3-icon-button.default.selected.toggled { - color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.filled { - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.filled.toggled { - color: var(--md-sys-color-primary); - background-color: var(--md-sys-color-surface-container-highest); } - button.m3.m3-icon-button.filled.selected.toggled { - color: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); } - button.m3.m3-icon-button.tonal.toggled { - color: 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 { - color: 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 { - color: 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); - color: var(--md-sys-color-on-surface-variant); - background-color: #00000000; } - button.m3.m3-icon-button.outlined:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); - color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); - background-color: #00000000; } - button.m3.m3-icon-button.outlined.toggled.selected:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); - color: 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); } - @media (prefers-color-scheme: light) { - button.m3.m3-icon-button.outlined.selected.toggled { - border: 1px solid #00000000; - background-color: var(--md-sys-color-inverse-surface-light); - color: var(--md-sys-color-inverse-on-surface); } } - @media (prefers-color-scheme: dark) { - button.m3.m3-icon-button.outlined.selected.toggled { - border: 1px solid #00000000; - background-color: var(--md-sys-color-inverse-surface); - color: 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); } + 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:is(.default, .filled, .tonal, .outlined) { + font-family: Material-Symbols-Round-Regular, serif; +} +button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled { + font-size: 13.49px; + font-family: Material-Icons-Regular, serif; + font-weight: 500; +} +button.m3.m3-icon-button.default { + color: 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 { + color: 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 { + color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.filled { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.filled.toggled { + color: var(--md-sys-color-primary); + background-color: var(--md-sys-color-surface-container-highest); +} +button.m3.m3-icon-button.filled.selected.toggled { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); +} +button.m3.m3-icon-button.tonal.toggled { + color: 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 { + color: 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 { + color: 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); + color: 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); + color: 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); + color: 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); + color: 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 */ diff --git a/src/styles/icon-button.css.map b/src/styles/icon-button.css.map index cc379dc..ffd21be 100644 --- a/src/styles/icon-button.css.map +++ b/src/styles/icon-button.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["icon-button.sass"], -"names": [], -"file": "icon-button.css" -} +{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"} \ No newline at end of file diff --git a/src/styles/icon-button.sass b/src/styles/icon-button.sass index 9919bcd..c1fc74c 100644 --- a/src/styles/icon-button.sass +++ b/src/styles/icon-button.sass @@ -89,17 +89,10 @@ button.m3.m3-icon-button color: 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) - @media (prefers-color-scheme: light) - &.selected.toggled - border: 1px solid #00000000 - background-color: var(--md-sys-color-inverse-surface-light) - color: var(--md-sys-color-inverse-on-surface) - - @media (prefers-color-scheme: dark) - &.selected.toggled - border: 1px solid #00000000 - background-color: var(--md-sys-color-inverse-surface) - color: var(--md-sys-color-inverse-on-surface) + &.selected.toggled + border: 1px solid #00000000 + background-color: var(--md-sys-color-inverse-surface) + color: var(--md-sys-color-inverse-on-surface) &.filled:not(:disabled) & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple diff --git a/src/styles/text-field.css b/src/styles/text-field.css index 4d45226..d541af5 100644 --- a/src/styles/text-field.css +++ b/src/styles/text-field.css @@ -4,163 +4,211 @@ div.m3.m3-text-field { justify-content: center; flex-direction: column; box-sizing: border-box; - margin: 0; } - div.m3.m3-text-field span.m3-icon.icon-before { - align-self: start; } - div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label { - line-height: var(--md-sys-typescale-body-large-line-height); - font-size: var(--md-sys-typescale-body-large-font-size); } - div.m3.m3-text-field + span.m3-text-field-supporting-text { - display: flex; - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-font-size); - color: var(--md-sys-color-on-surface-variant); - margin: 4px 16px 2px 16px; } - div.m3.m3-text-field > label { - padding-inline: 4px; - pointer-events: none; - transform: translate(16px, 0); - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - position: absolute; } - div.m3.m3-text-field > input { - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - background-color: transparent; - border: none; } - div.m3.m3-text-field > span.m3-icon { - position: absolute; - align-self: end; - margin: 12px; - width: 24px; - line-height: 24px; - font-size: 24px; - display: inherit; - align-items: center; - justify-content: inherit; - cursor: pointer; - color: var(--md-sys-color-on-surface-variant); - font-family: Material-Symbols-Outlined-Regular, serif; } - div.m3.m3-text-field > span.m3-text-field-state-layer { - width: 100%; - height: 100%; - pointer-events: none; - position: absolute; } - div.m3.m3-text-field > input, div.m3.m3-text-field > label { - color: var(--md-sys-color-on-surface); } - div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder { - color: var(--md-sys-color-on-surface-variant); } - div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible { - outline: none; - caret-color: var(--md-sys-color-primary); } - div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text { - opacity: 38%; } - div.m3.m3-text-field.filled { - contain: content; - border-radius: 4px 4px 0 0; } - div.m3.m3-text-field.filled > input { - display: inline-flex; - align-items: center; - box-sizing: border-box; - border-radius: 4px 4px 0 0; - background-color: var(--md-sys-color-surface-container-highest); - box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); } - div.m3.m3-text-field.filled > input.with-after-icon { - padding: 24px 48px 8px 16px; } - div.m3.m3-text-field.filled > input.with-before-icon { - padding: 24px 16px 8px 48px; } - div.m3.m3-text-field.filled > input.with-before-icon + label { - margin-left: 32px; } - div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) { - padding: 24px 16px 8px; } - div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon { - padding: 24px 48px 8px 48px; } - div.m3.m3-text-field.filled > label.raised { - transform: translate(12px, -12px); - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-font-size); } - div.m3.m3-text-field.filled > input:required:user-invalid { - caret-color: var(--md-sys-color-error); } - div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible { - box-shadow: inset 0 -3px 0 var(--md-sys-color-error); } - div.m3.m3-text-field.filled > input:required:user-invalid { - box-shadow: inset 0 -1px 0 var(--md-sys-color-error); } - div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text { - color: var(--md-sys-color-error); } - div.m3.m3-text-field.filled > input:focus-visible { - outline-offset: 3px; - box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); } - div.m3.m3-text-field.filled > input:focus-visible + label { - color: var(--md-sys-color-primary); } - div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer { - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } - div.m3.m3-text-field.outlined > fieldset { - margin: 0; - position: absolute; - border-radius: 4px; - pointer-events: none; - padding-inline: 12px; - border: 1px solid var(--md-sys-color-outline); - inset: -7.5px 0px 0px 0px; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-text-field.outlined > fieldset > legend > span { - width: 100%; } - div.m3.m3-text-field.outlined > fieldset > legend { - opacity: 0; - width: 0; - padding: 0; - pointer-events: none; - border: 0 solid transparent; - transition: 0.05s cubic-bezier(0.2, 0, 0, 1); } - div.m3.m3-text-field.outlined > fieldset > legend.raised { - border-inline-width: 6px; - border-style: solid; - border-color: transparent; - width: auto; - visibility: visible; } - div.m3.m3-text-field.outlined > input { - box-sizing: border-box; - border-radius: 4px; } - div.m3.m3-text-field.outlined > input.with-after-icon { - padding: 16px 48px 16px 16px; } - div.m3.m3-text-field.outlined > input.with-before-icon { - padding: 16px 16px 16px 48px; } - div.m3.m3-text-field.outlined > input.with-before-icon + label { - transform: translate(48px, 0); } - div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) { - padding: 16px; } - div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon { - padding: 16px 48px; } - div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset { - border: 3px solid var(--md-sys-color-primary); } - div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend { - border-top-width: 0; - border-bottom-width: 0; - border-inline-width: 5.5px; - border-style: solid; - border-color: transparent; } - div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend { - border-top-width: 0; - border-bottom-width: 0; - border-inline-width: 7.5px; - border-style: solid; - border-color: transparent; } - div.m3.m3-text-field.outlined > input:focus-visible + label { - color: var(--md-sys-color-primary); } - div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * { - line-height: var(--md-sys-typescale-body-small-line-height); - font-size: var(--md-sys-typescale-body-small-font-size); } - div.m3.m3-text-field.outlined > label.raised { - transform: translate(16px, -27px) !important; } - div.m3.m3-text-field.outlined > input:required:user-invalid { - caret-color: var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text { - color: var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset { - border: 3px solid var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset { - border: 1px solid var(--md-sys-color-error); } - div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset { - transition: 0.2s cubic-bezier(0.2, 0, 0, 1); - border-color: var(--md-sys-color-on-surface); } + margin: 0; +} +div.m3.m3-text-field span.m3-icon.icon-before { + align-self: start; +} +div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label { + line-height: var(--md-sys-typescale-body-large-line-height); + font-size: var(--md-sys-typescale-body-large-font-size); +} +div.m3.m3-text-field + span.m3-text-field-supporting-text { + display: flex; + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); + color: var(--md-sys-color-on-surface-variant); + margin: 4px 16px 2px 16px; +} +div.m3.m3-text-field > label { + padding-inline: 4px; + pointer-events: none; + transform: translate(16px, 0); + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + position: absolute; +} +div.m3.m3-text-field > input { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + background-color: transparent; + border: none; +} +div.m3.m3-text-field > span.m3-icon { + position: absolute; + align-self: end; + margin: 12px; + width: 24px; + line-height: 24px; + font-size: 24px; + display: inherit; + align-items: center; + justify-content: inherit; + cursor: pointer; + color: var(--md-sys-color-on-surface-variant); + font-family: Material-Symbols-Outlined-Regular, serif; +} +div.m3.m3-text-field > span.m3-text-field-state-layer { + width: 100%; + height: 100%; + pointer-events: none; + position: absolute; +} +div.m3.m3-text-field > input, div.m3.m3-text-field > label { + color: var(--md-sys-color-on-surface); +} +div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder { + color: var(--md-sys-color-on-surface-variant); +} +div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible { + outline: none; + caret-color: var(--md-sys-color-primary); +} +div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text { + opacity: 38%; +} +div.m3.m3-text-field.filled { + contain: content; + border-radius: 4px 4px 0 0; +} +div.m3.m3-text-field.filled > input { + display: inline-flex; + align-items: center; + box-sizing: border-box; + border-radius: 4px 4px 0 0; + background-color: var(--md-sys-color-surface-container-highest); + box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); +} +div.m3.m3-text-field.filled > input.with-after-icon { + padding: 24px 48px 8px 16px; +} +div.m3.m3-text-field.filled > input.with-before-icon { + padding: 24px 16px 8px 48px; +} +div.m3.m3-text-field.filled > input.with-before-icon + label { + margin-left: 32px; +} +div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) { + padding: 24px 16px 8px; +} +div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon { + padding: 24px 48px 8px 48px; +} +div.m3.m3-text-field.filled > label.raised { + transform: translate(12px, -12px); + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); +} +div.m3.m3-text-field.filled > input:required:user-invalid { + caret-color: var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible { + box-shadow: inset 0 -3px 0 var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:required:user-invalid { + box-shadow: inset 0 -1px 0 var(--md-sys-color-error); +} +div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text { + color: var(--md-sys-color-error); +} +div.m3.m3-text-field.filled > input:focus-visible { + outline-offset: 3px; + box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); +} +div.m3.m3-text-field.filled > input:focus-visible + label { + color: var(--md-sys-color-primary); +} +div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); +} +div.m3.m3-text-field.outlined > fieldset { + margin: 0; + position: absolute; + border-radius: 4px; + pointer-events: none; + padding-inline: 12px; + border: 1px solid var(--md-sys-color-outline); + inset: -7.5px 0px 0px 0px; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field.outlined > fieldset > legend > span { + width: 100%; +} +div.m3.m3-text-field.outlined > fieldset > legend { + opacity: 0; + width: 0; + padding: 0; + pointer-events: none; + border: 0 solid transparent; + transition: 0.05s cubic-bezier(0.2, 0, 0, 1); +} +div.m3.m3-text-field.outlined > fieldset > legend.raised { + border-inline-width: 6px; + border-style: solid; + border-color: transparent; + width: auto; + visibility: visible; +} +div.m3.m3-text-field.outlined > input { + box-sizing: border-box; + border-radius: 4px; +} +div.m3.m3-text-field.outlined > input.with-after-icon { + padding: 16px 48px 16px 16px; +} +div.m3.m3-text-field.outlined > input.with-before-icon { + padding: 16px 16px 16px 48px; +} +div.m3.m3-text-field.outlined > input.with-before-icon + label { + transform: translate(48px, 0); +} +div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) { + padding: 16px; +} +div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon { + padding: 16px 48px; +} +div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset { + border: 3px solid var(--md-sys-color-primary); +} +div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend { + border-top-width: 0; + border-bottom-width: 0; + border-inline-width: 5.5px; + border-style: solid; + border-color: transparent; +} +div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend { + border-top-width: 0; + border-bottom-width: 0; + border-inline-width: 7.5px; + border-style: solid; + border-color: transparent; +} +div.m3.m3-text-field.outlined > input:focus-visible + label { + color: var(--md-sys-color-primary); +} +div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * { + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); +} +div.m3.m3-text-field.outlined > label.raised { + transform: translate(16px, -27px) !important; +} +div.m3.m3-text-field.outlined > input:required:user-invalid { + caret-color: var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text { + color: var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset { + border: 3px solid var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset { + border: 1px solid var(--md-sys-color-error); +} +div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset { + transition: 0.2s cubic-bezier(0.2, 0, 0, 1); + border-color: var(--md-sys-color-on-surface); +} /*# sourceMappingURL=text-field.css.map */ diff --git a/src/styles/text-field.css.map b/src/styles/text-field.css.map index 1275b9a..4975343 100644 --- a/src/styles/text-field.css.map +++ b/src/styles/text-field.css.map @@ -1,7 +1 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["text-field.sass"], -"names": [], -"file": "text-field.css" -} +{"version":3,"sourceRoot":"","sources":["text-field.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA","file":"text-field.css"} \ No newline at end of file