From 0219596ed1ea67a1886abf251fbb3be7027bd55e Mon Sep 17 00:00:00 2001 From: doryan04 Date: Sat, 24 Feb 2024 00:15:35 +0400 Subject: [PATCH] ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc. CHANGED: For optimizing write styles added a few mixins FIXED: Bug with width in segmented-buttons --- app/page.tsx | 26 +--------- src/styles/badge.sass | 4 +- src/styles/button-styles/button.sass | 5 +- src/styles/button-styles/icon-button.sass | 21 ++++---- .../button-styles/segmented-button.sass | 2 +- src/styles/generics.css | 48 +++++++++---------- src/styles/generics.css.map | 2 +- src/styles/input-styles/checkbox.sass | 10 ++-- src/styles/input-styles/radio.sass | 5 +- src/styles/input-styles/slider.sass | 2 +- src/styles/input-styles/text-field.sass | 18 +++---- 11 files changed, 58 insertions(+), 85 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index d30a79f..8533424 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,10 +1,6 @@ import React from 'react'; import { Card } from '../src/primitive-components/card/card'; -import { - Button, - FAB, - IconButton, -} from '../src/primitive-components/components'; +import { IconButton } from '../src/primitive-components/components'; import { CardFooter } from '../src/primitive-components/card/card-footer'; import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button'; import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; @@ -52,25 +48,7 @@ export default function Page() { Label 4 - - - - - - - - + diff --git a/src/styles/badge.sass b/src/styles/badge.sass index d0b6f05..02af22e 100644 --- a/src/styles/badge.sass +++ b/src/styles/badge.sass @@ -13,12 +13,10 @@ svg.m3.m3-badge border-radius: 8px & > text + @include center(flex) @include m3-typography-mixin('label-small') - display: flex - align-items: center text-anchor: middle - justify-content: center font-optical-sizing: none alignment-baseline: central fill: var(--md-sys-color-on-error) diff --git a/src/styles/button-styles/button.sass b/src/styles/button-styles/button.sass index 2cd71d5..8423a79 100644 --- a/src/styles/button-styles/button.sass +++ b/src/styles/button-styles/button.sass @@ -9,17 +9,16 @@ button:not(.m3-fab, .m3-icon-button) transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important &.m3 + @include center(inline-flex) + gap: 8px border: none contain: content text-align: center padding: 10px 24px - align-items: center flex-direction: row - display: inline-flex border-radius: 100px box-sizing: border-box - justify-content: center &.filled background-color: var(--md-sys-color-primary) diff --git a/src/styles/button-styles/icon-button.sass b/src/styles/button-styles/icon-button.sass index 9b947a9..713ccc9 100644 --- a/src/styles/button-styles/icon-button.sass +++ b/src/styles/button-styles/icon-button.sass @@ -1,16 +1,15 @@ button.m3.m3-icon-button - transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important - contain: content - border-radius: 50% - position: relative - display: inline-flex - flex-direction: row - justify-content: center - align-items: center + @include center(inline-flex) + + padding: 0 width: 40px height: 40px border: none - padding: 0 + contain: content + border-radius: 50% + position: relative + flex-direction: row + transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important &::before transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important @@ -93,10 +92,10 @@ button.m3.m3-icon-button & > .m3.m3-ripple-domain > .m3.ripple background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent) - &:not(.outlined).toggled.selected> .m3.m3-ripple-domain > .m3.ripple + &:not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) - &:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple + &: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) &.tonal:not(:disabled) diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass index 30dac87..9dced2b 100644 --- a/src/styles/button-styles/segmented-button.sass +++ b/src/styles/button-styles/segmented-button.sass @@ -34,7 +34,7 @@ div.m3.m3-segmented-buttons flex: 1 1 padding: 0 width: 100% - min-width: 48px + min-width: 108px border-radius: 0 margin: 0 -0.5px display: inline-flex diff --git a/src/styles/generics.css b/src/styles/generics.css index c47e956..4d4b7d5 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -161,15 +161,15 @@ svg.m3.m3-badge { border-radius: 8px; } svg.m3.m3-badge > text { + display: flex; + align-items: center; + justify-content: center; font-size: var(--md-sys-typescale-label-small-font-size); font-weight: var(--md-sys-typescale-label-small-font-weight); line-height: var(--md-sys-typescale-label-small-line-height); font-family: var(--md-sys-typescale-label-small-font-family-name); letter-spacing: var(--md-sys-typescale-label-small-letter-spacing); - display: flex; - align-items: center; text-anchor: middle; - justify-content: center; font-optical-sizing: none; alignment-baseline: central; fill: var(--md-sys-color-on-error); @@ -474,17 +474,17 @@ 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).m3 { + display: inline-flex; + align-items: center; + justify-content: center; gap: 8px; border: none; contain: content; text-align: center; padding: 10px 24px; - align-items: center; flex-direction: row; - display: inline-flex; border-radius: 100px; box-sizing: border-box; - justify-content: center; } button:not(.m3-fab, .m3-icon-button).filled { background-color: var(--md-sys-color-primary); @@ -595,18 +595,18 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined { } button.m3.m3-icon-button { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; - contain: content; - border-radius: 50%; - position: relative; display: inline-flex; - flex-direction: row; - justify-content: center; align-items: center; + justify-content: center; + padding: 0; width: 40px; height: 40px; border: none; - padding: 0; + contain: content; + border-radius: 50%; + position: relative; + flex-direction: row; + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; } button.m3.m3-icon-button::before { transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; @@ -793,7 +793,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment { flex: 1 1; padding: 0; width: 100%; - min-width: 48px; + min-width: 108px; border-radius: 0; margin: 0 -0.5px; display: inline-flex; @@ -859,11 +859,11 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * { } div.m3.m3-radio-container { + display: inline-flex; + align-items: center; + justify-content: center; width: 20px; height: 20px; - align-items: center; - display: inline-flex; - justify-content: center; } div.m3.m3-radio-container + label.m3.m3-radio-label { margin-inline: 3px; @@ -1006,11 +1006,11 @@ input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) { outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } input[type=range].m3.m3-slider::-webkit-slider-container { + height: 4px; appearance: none; box-shadow: none; border-radius: 2px; min-block-size: 4px; - height: 4px; } input[type=range].m3.m3-slider::-webkit-slider-runnable-track { height: 20px; @@ -1210,16 +1210,16 @@ div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer { } input[type=checkbox].m3.m3-checkbox { - z-index: 10; display: flex; + align-items: center; + justify-content: center; + z-index: 10; width: 1.125rem; height: 1.125rem; appearance: none; position: absolute; - align-items: center; border-radius: 0.14rem; box-sizing: content-box; - justify-content: center; transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state { @@ -1249,14 +1249,14 @@ input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox] opacity: 38%; } input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state { - z-index: 10; display: flex; + align-items: center; + justify-content: center; + z-index: 10; font-size: 24px; font-weight: 700; line-height: 24px; - align-items: center; pointer-events: none; - justify-content: center; font-family: Material-Symbols-Outlined-Regular, sans-serif; font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24; } diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 7e22a3d..17753f9 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAsBQ;AACA;AACA;AACA;AACA;ACfJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EC7BA;;ADgCA;EC1BA;;AD8BA;EC5CA;;AD+CA;ECzCA;;AD6CI;EACI;;;AE9EZ;EACI;EACA;EACA;;AAGA;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AAgBJ;EACI;;AADJ;EACI;;AADJ;EACI;;;AClBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EFCA;EACA;EACA;EACA;EACA;EEFI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;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;;AAEA;EACI;;AAER;EXxDJ,SWyDwB;EXxDxB;EACA;EW0DQ;EACA;EACA;;AA3CR;EACI;;AAEJ;EACI;;AAyCI;EACI;;AAER;EAEI;;AAlDR;EACI;;AAEJ;EACI;;AAmDQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACvEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACzGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBIA;EACA;EACA;EACA;EACA;;AgBLA;EhBCA;EACA;EACA;EACA;EACA;EgBFI;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;EhB/EJ;EACA;EACA;EACA;EACA;EgB8EQ;;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;EhBhLJ;EACA;EACA;EACA;EACA;;AgB+KI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlBzLhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAsBQ;AACA;AACA;AACA;AACA;ACfJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EC7BA;;ADgCA;EC1BA;;AD8BA;EC5CA;;AD+CA;ECzCA;;AD6CI;EACI;;;AE9EZ;EACI;EACA;EACA;;AAGA;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AAgBJ;EACI;;AADJ;EACI;;AADJ;EACI;;;AClBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EFbA,SEcoB;EFbpB;EACA;EAYA;EACA;EACA;EACA;EACA;EEDI;EACA;EACA;EACA;;;AClBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;ACjCJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;;ACvBZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;ENqBI;EMnBA;;;ACnBR;EACI;;;ACuBJ;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ERwBA;EACA;EACA;EACA;;AQxBA;EAlCA;EACA;;AAJA;ER2CI;;AQrCJ;EACI;;AAEJ;EACI;;AAGA;EACI;;AA0BR;EArCA;EACA;;AAJA;ER2CI;;AQrCJ;EACI;;AAEJ;EACI;;AAGA;EACI;;AA6BR;EAxCA;EACA;;AAJA;ER2CI;;AQrCJ;EACI;;AAEJ;EACI;;AAGA;EACI;;AAgCR;EA3CA;EACA;;AAJA;ER2CI;;AQrCJ;EACI;;AAEJ;EACI;;AAGA;EACI;;AAmCR;EAvDA,OAwDkC;EAvDlC,QAuDwC;EAtDxC,SAsD8C;EArD9C,eAqD4B;EACxB;;AAEJ;EA3DA,OA4DkC;EA3DlC,QA2DwC;EA1DxC,SA0D8C;EAzD9C,eAyD4B;EACxB;;AAEJ;EA/DA,OAgEkC;EA/DlC,QA+DwC;EA9DxC,SA8D8C;EA7D9C,eA6D4B;EACxB;;AAEJ;EAnEA,OAoEkC;EAnElC,QAmEwC;EAlExC,SAkE8C;EAjE9C,eAiE4B;EACxB;;AAEJ;ERhBI;;AQmBJ;ER3BI;;AQ+BA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACtGZ;ETeI;EACA;EACA;EACA;EACA;EShBA;EACA;EACA;EACA;EACA;EACA;;AAEA;ETTA,SSUoB;ETTpB;EACA;ESUI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ETPI;ESUA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ET1CA;;AS6CA;ETvCA;;AS2CI;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ETnEA;;ASsEA;EThEA;;ASmEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrIZ;EVCI;EACA;EACA;EUAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;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;;;AC9HJ;EACI,QAHK;;AAKL;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;;AAXR;EACI,QAHK;;AAKL;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;;AAXR;EACI,QAHK;;AAKL;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;;AAXR;EACI,QAHK;;AAKL;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;;AAShB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAER;EXgBJ;EACA;EACA;EACA;EWhBQ;;AAEA;EACI;;AAER;EXxDJ,SWyDwB;EXxDxB;EACA;EW0DQ;EACA;EACA;;AA3CR;EACI;;AAEJ;EACI;;AAyCI;EACI;;AAER;EAEI;;AAlDR;EACI;;AAEJ;EACI;;AAmDQ;EACI;;AAGR;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;AC1FhB;EZCI;EACA;EACA;EYAA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACtEhB;EACI;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbjBI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAuCI;;AAvDJ;EAII;;AAHA;EACI;;AAIR;EACI;;AAkDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbhCI;Ea1BJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhBA;EAII;;AAHA;EACI;;AAIR;EACI;;;ACVR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EfMI;EACA;EACA;EACA;EACA;EACA;EACA;;AeTA;EfmBA;EACA;EACA;EACA;EACA;;AepBA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EfbI,SecgB;EfbhB;EACA;EecA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EfrDA,SesDoB;EfrDpB;EACA;EesDI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACjGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EhBFA;EACA;EACA;EACA;EACA;;AgBCA;EhBLA;EACA;EACA;EACA;EACA;EgBII;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;EhBrFJ;EACA;EACA;EACA;EACA;EgBoFQ;;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;EAnLJ;EACA;EACA;EACA;EAmLQ;;AAEJ;EAxLJ;EACA;EACA;EACA;EAwLQ;;AAEJ;EACI;;AAEJ;EhBlLJ;EACA;EACA;EACA;EACA;;AgBiLI;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AlB3LhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file diff --git a/src/styles/input-styles/checkbox.sass b/src/styles/input-styles/checkbox.sass index 2735b8d..7e61228 100644 --- a/src/styles/input-styles/checkbox.sass +++ b/src/styles/input-styles/checkbox.sass @@ -13,16 +13,15 @@ div.m3.m3-checkbox-container position: absolute input[type="checkbox"].m3.m3-checkbox + @include center(flex) + z-index: 10 - display: flex width: 1.125rem height: 1.125rem appearance: none position: absolute - align-items: center border-radius: .14rem box-sizing: content-box - justify-content: center transition: background-color .2s cubic-bezier(0.2, 0, 0, 1) & ~ span.m3-checkbox-state @@ -54,14 +53,13 @@ input[type="checkbox"].m3.m3-checkbox opacity: 38% & ~ span.m3-checkbox-state + @include center(flex) + z-index: 10 - display: flex font-size: 24px font-weight: 700 line-height: 24px - align-items: center pointer-events: none - justify-content: center font-family: Material-Symbols-Outlined-Regular, sans-serif font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 diff --git a/src/styles/input-styles/radio.sass b/src/styles/input-styles/radio.sass index 5dd0e10..656341b 100644 --- a/src/styles/input-styles/radio.sass +++ b/src/styles/input-styles/radio.sass @@ -1,9 +1,8 @@ div.m3.m3-radio-container + @include center(inline-flex) + width: 20px height: 20px - align-items: center - display: inline-flex - justify-content: center & + label.m3.m3-radio-label margin-inline: 3px diff --git a/src/styles/input-styles/slider.sass b/src/styles/input-styles/slider.sass index 7759243..53d5dc3 100644 --- a/src/styles/input-styles/slider.sass +++ b/src/styles/input-styles/slider.sass @@ -59,11 +59,11 @@ input[type="range"].m3.m3-slider border: none &::-webkit-slider-container + height: 4px appearance: none box-shadow: none border-radius: 2px min-block-size: 4px - height: 4px &::-webkit-slider-runnable-track height: 20px diff --git a/src/styles/input-styles/text-field.sass b/src/styles/input-styles/text-field.sass index 12e847d..410968f 100644 --- a/src/styles/input-styles/text-field.sass +++ b/src/styles/input-styles/text-field.sass @@ -1,3 +1,9 @@ +@mixin m3-text-field-fieldset-legend + border-top-width: 0 + border-style: solid + border-bottom-width: 0 + border-color: transparent + div.m3.m3-text-field margin: 0 display: flex @@ -173,17 +179,13 @@ div.m3.m3-text-field border: 3px solid var(--md-sys-color-primary) &:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend - border-top-width: 0 - border-style: solid - border-bottom-width: 0 - border-color: transparent + @include m3-text-field-fieldset-legend + border-inline-width: 5.5px &:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend - border-top-width: 0 - border-style: solid - border-bottom-width: 0 - border-color: transparent + @include m3-text-field-fieldset-legend + border-inline-width: 7.5px & > input:focus-visible + label