From acb9112c95cd57cf814f2bfe34bf6f223c1a2f66 Mon Sep 17 00:00:00 2001 From: doryan Date: Thu, 8 Feb 2024 12:49:46 +0400 Subject: [PATCH] ADDED: base styles for segmented buttons --- app/page.tsx | 101 +- .../segmented-buttons/segmented-buttons.tsx | 15 +- .../segmented-button.sassc | Bin 0 -> 13197 bytes .../card.sassc | Bin 17599 -> 28766 bytes .../generics.sassc | Bin 7386 -> 7534 bytes .../segmented-button.sassc | Bin 0 -> 1922 bytes src/styles/button-styles/segmented-button.css | 4 + .../button-styles/segmented-button.css.map | 7 + .../button-styles/segmented-button.sass | 38 + src/styles/card.sass | 4 +- src/styles/generics.css | 2614 ++++++----------- src/styles/generics.css.map | 8 +- src/styles/generics.sass | 7 +- 13 files changed, 906 insertions(+), 1892 deletions(-) create mode 100644 src/styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc create mode 100644 src/styles/button-styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc create mode 100644 src/styles/button-styles/segmented-button.css create mode 100644 src/styles/button-styles/segmented-button.css.map create mode 100644 src/styles/button-styles/segmented-button.sass diff --git a/app/page.tsx b/app/page.tsx index 4fcd76f..f172209 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,6 +8,10 @@ import { CardHeader } from '../src/primitive-components/card/card-header'; import { CardActionArea } from '../src/primitive-components/card/card-action-area'; import { Button } from '../src/primitive-components/button-components/button/button'; import { Typography } from '../src/primitive-components/typography/typography'; +import { + ButtonLayout, + SegmentedButtons, +} from '../src/primitive-components/components'; export default function Page() { return ( @@ -21,15 +25,10 @@ export default function Page() { padding: '8px', }} > -
+
- Header-1 - Header-2 Header-3 - Header-4 - Header-5 - Header-6 @@ -50,88 +49,14 @@ export default function Page() { - - - - - - - -

- Sub-header -

-

- Lorem ipsum dolor sit amet, consecrate - adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure - dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. -

- - - - - - - - - - -

- Sub-header -

-

- Lorem ipsum dolor sit amet, consecrate - adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure - dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. -

- - - - - - - - -

Header

- - - - -

- Sub-header -

-

- Lorem ipsum dolor sit amet, consecrate - adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure - dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. -

- - - - +
+ + + Label 1 + Label 2 + Label 3 + +
diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx index 976a5bb..afb8bae 100644 --- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx +++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React, { cloneElement, forwardRef, ReactElement } from 'react'; import { SegmentedButtonProps } from './segmented-buttons.types'; export const SegmentedButtons = forwardRef< @@ -9,12 +9,21 @@ export const SegmentedButtons = forwardRef< throw 'You must build segmented button with 2 or more buttton'; } + const buttons = children.map((button: ReactElement, index) => { + const classes = + `m3-button-segment ${button.props.className ?? ''}`.trimEnd(); + return cloneElement(button, { + className: classes, + key: index, + }); + }); + return (
- {children} + {buttons}
); -}); \ No newline at end of file +}); diff --git a/src/styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc b/src/styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc new file mode 100644 index 0000000000000000000000000000000000000000..d5c23cd86f2cc0103f8193f2996a8a8a9a3bbef3 GIT binary patch literal 13197 zcmcIq`FGpK5mwwhiXwH=hb~)!Wm}ePQ=)t+#=B_v~il=uvZj|LMchmqpK9KD2|tG~fA-W12sDUiijqIwf<~YMi>Q zrtfs#7t&09{|5XF$r0sMaoMVP;)?uvIWvq2 zMv6|*JNh?8u7mN77v}UK<1v>!Rdb{UQx`WPj%n!oH(Aj)VDwKC0mFG(>W=Yz2rnq($rs869sB9nkZ`> zNi8O`So7M4XK|~-|I%XxJb#?@!D=D z@p*!}hv&N|^ka)U@?OMBF`i1rc#1q-RWSy&ru?QDLyWYZ7MBvK=mq1;fCtFmbLI-V zdA4;+^tr+}o-0tvxtij+Dt&O9;i;M;Ed}Svn`*8iL3+#?H{ za(>cXkkD7Z3kp#be@64U{D&G{G#XN3NqYadtQic7m$0aR%p~R}$}W|9=Ityb_1X=> zK3Jb7R6<=GyUqX|K0=mqE+t$NS?gT_16@f?on|EYmPj`pY{=L1hIG&f3-~%k!&!jGE8NEzQd3Nh`^WpPjQ0RQUAT>wN9ZV3GqE{+7E1DO{hIECKej&zg!`jkuv9|MMXlE+X zM+M)mrt9d0?tnQhp*wD(0m zcdw<~y+%scmAjzEU2sN8(A@aU?J+9#7xPnTi>k7wp76%)d2Okn4b%!_Ez1qH7Q&v+!TP20OaRIfV zxqJTk&L|1GtKei;K_xdXtMP#+uqU0)(>Z-TzGk6KcYIt>*))$`KM1Sxo2=Mju$WFS zV_19x!n4i_0;kvX%H|bIp1#u2W}_}oeM=48Lja=9r_>P!BEW-V{P>t2=NG}#YpGmWBfSi|K=C4p z@a9?ovxG99hEVP+Qs}2_#aYT3CPTRflZUk8EGZ0eAw_TKXvKdQ2jU+Ebm2)VQE$lmy*NaI%-6lB^!kzlXM^1N;Od}{ ztW%#jaPq`~;uVvu;)xq}3@jH-x^v=C<-Bycm714Zr2D4w9F*4VG!2OZXX}gq;yOp2 zIA@9F9ERAtN#OQJ#PW&=v3x_2SmVdIgvv6U8v!)zBn{`4GHak7NPS?w6oSHGQuGu8 zC#Mjob!BLUPzr@ZRw^LdcL{{LuxS!@92214kpNY^E{pHQ8^F%Fl#Cy0;w^xtWE>M{ zRus^TMng(0Ne7yD$V&#Ap!oFr^8wAxRLN{gz47Z7P!|B2Swb0TLg;4%npw)Zte`v( z(9Dv;Koe31v7!Q+S%VoOW)D6eXky$jDSG*UlgkHG5@>F62mW*?h<8(YbeEL!2_h(7 zy-~gAyE{sP?k+glT~M5}756T?s~tOC0A_BboZKQ+ybgonH8G!)qa^4~f|H#D#WhrM zw}v?R8BykTDj3^j5}&Ps(kmqU3@A$qhZItDteS77!MI^k^ss`H!wM=H)@=@J2Feuw zoEAT7t9?%VcrO*Yd!&}}BPb0&io>Lm{ID@g4MzoP^mL72qZ(yhTKkg%PlMd~W@6Aa z)~U|~IC&;OC1K+|o{2GF;|Nf9KQ#yUNg;z1P}&?MXCNmU&C+m71r!>F!^V7%jIuQF zQU?tW6l_W($T34x)eP6spIY~_?9pSY56qWBgEPZY^b`Uorx2(lY`mX3?62cu!t3=%4;WS<}FqP5F!dc+)iKou>RKBPXSWY-cO;%6+T(PyF;E9!If z1jID(s3S54iZ<1EP|+~cAomP;(QnYj`&Rbt`gX?1D!sWp4NXH{&t`qc_2)UCql+{% z(w`+m>NuARnxf|b=7pRXcdWX0py=TuAra!_NqmMwpE2C|LKSgI_>n(Wn!j}1VpNCE sdh|jwssp1&|8had987EkKW%(IMY>%ikuDOPC@L~EMy({zRKI)oe-ym$d;kCd literal 0 HcmV?d00001 diff --git a/src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/card.sassc b/src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/card.sassc index 801b4cb4f21e8a1592c2249f9f7173a10b1bc567..a799a374e8cda9f648be99c3a66a7ea57e83e704 100644 GIT binary patch literal 28766 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 S$fY0o@GHHaPgQnUSp8pqvT>{c literal 17599 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 ZOc^AHSMkIyY2xFr^t7IQqwwYN{{dLXq&@%u diff --git a/src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/generics.sassc b/src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/generics.sassc index be5b716f5f95287f06c85aa8d2c2fe72261defd5..79d76acb6cf4cced6f882f1b3b7051d5f23c1e8f 100644 GIT binary patch delta 1484 zcmZuxOK1~O6eYzZotaD~GnvWc(|m_CNs}gNCrwQswkcI;Z3~Kjgi4zZHC5Y1f8IK}2`D6p9N$EEII(#-$70xEH!9ZYqfH#W3?SWRc;W!#(Gnd+#IPYljm>y*OU1 zu%n|VYldOyMzvAXM;ptvvOYF4hL6>;<(e_lXpC1zR*jXFC&i2-x_5cb8PrzpwpyDT z!&|NG+s0OD%UHW(Y_yD3Sa9azek3)$$iInvZX`AdDk8bgBBd@63{RbPsJJ9PMX?GT zIj7+nW;Kcpzy;R~9J?e(8hEz~2d;^Du*;pG45bJ{$UPkochwL?yM|%gJqv|?i65er z5%}p|fOE_Vh_GIsPCNkf{lDW;#BU-mgM?0BQS6#EyNtpOW)fbpGB-(aADQd0#7X=N zbx#zk?9F)0<`%?xj4mnym~lk>m!N1u&(a-3fH`s zgbwVCED8JGVR-G6c!dg=1V-3}DN*JW(>w(qgj=v9%7SQd*t!G{Ro$P$Cp&*A=6Hc} zO~Gg1{kUd}r(tEnbktx;%xJx82CN#am~P)nw08cHPt6ma?Wzw`Ikfh;xjNS#cUfxS zr@SufH3rFLq?9q6?kps2o-17sEsg!H^`v+GSF}M}TZ6d7+7>|(IIooay?7Ft@K$7k z=!FbYk<;+kzu?Hiyd1;db@@~&+liaSasQvY<7Tm&6*mjt1WaGMZ}g7c|M-GRNo$)4IM!!tTN_5?z>9(P2WEp+ejh+ delta 1398 zcmZ{i&ui0Q7{}?vwo8_#d6P6v+nKg&Nq=aYt(|Rs+14^98&1499SF)c8Z0{uVc@}w zh=@n^ImnPP{0l_H9X%FjzFXZjxrA4 z#UB9+K8>B1EGpn^m7c|ZP?3tVg}k6gu)vjet@O}+(wH&4Od7J0(?@13E^{+dOZs4mHKT)Rm ziRQVMIp}H20UP$U6Zn5XYAuaw4%HoOY9F??z30K!Hgf&eHgxpWiNa9p0%kOCnoOl2 zV^-Cpd~9wp-*3(o;pSU_daMmQx+be0vxu2^pUIwveYSf&MkIx!6hSs_z;=w^eF^pq zyYKmXF2OgWA(xQKd*yf%ej$r>|T bVbjHnRB$N!hQ^k%BlqE@`TNDk#O}ynA66=4 diff --git a/src/styles/button-styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc b/src/styles/button-styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc new file mode 100644 index 0000000000000000000000000000000000000000..12d43e4aeb1da265abb310b62dd2863b0699402f GIT binary patch literal 1922 zcmb_d-*4MC5YEFO%Sz*<>971~7e(6&bbw=}agv4{3IRn67}$njHulm7jh0R^2T9aO zx`{FDf8UX^oY?KMJQrG~USo@y;hA0FRC0G)H>DC}<6(bMek#r`tnQYfyuC|iaic@T*#Q=sv2BZ4xuF7&xI(ii*?Lz|L>SQ@Oj zkQ!vz*s9f6WP}dC5w=ey-eobmVM-9VzoUCX(LDyZY zc)DSf?+V&6+QtcJy0{ppONO(nUF@KmW*NURZD|?F(I+8&x}ZaM#r-X4(Swls3-3YT zytN{)BO`;&w$b%^P1n+VxIj1ZzE!=Y(7b+%s{cZo|COk>q?PZMiQ06Vn+}(fY@u>* zea-1rt+VKWzMMB^c`sf{QJIyuNw-Y1ylbB7iB-*d^oiwD+<^;?4im{M-E7n!IjWH5 zZTkIZfM1OxAww-uAP5))TLru6CIXjdsqO6>k*Lftsz29^Ze|sbO`f8aXB;F6q7*6# z2`W8}Il9Rz#s$ie5@Jjj+?D>inCz29+04mbq;9l<>63?1h3Up>R%&)b+!C%)s%us{ z-RLK>Q)m3oV|-5x^33kl`+Yl0{2nd%nQRP4Bw?D1yAHQr-26?A?${i9ipS6(aWUbF isB$dPAo%T`e<{z$&%X?z#TcCJKk@Ih%d^Tq9sLck{V7HO literal 0 HcmV?d00001 diff --git a/src/styles/button-styles/segmented-button.css b/src/styles/button-styles/segmented-button.css new file mode 100644 index 0000000..d5e6d52 --- /dev/null +++ b/src/styles/button-styles/segmented-button.css @@ -0,0 +1,4 @@ +div.m3.m3-segmented-buttons > button.m3.m3-button-segment { + width: max-content; } + +/*# sourceMappingURL=segmented-button.css.map */ diff --git a/src/styles/button-styles/segmented-button.css.map b/src/styles/button-styles/segmented-button.css.map new file mode 100644 index 0000000..28999d6 --- /dev/null +++ b/src/styles/button-styles/segmented-button.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AACI,yDAA+B;EAC3B,KAAK,EAAE,WAAW", +"sources": ["segmented-button.sass"], +"names": [], +"file": "segmented-button.css" +} diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass new file mode 100644 index 0000000..ebd7297 --- /dev/null +++ b/src/styles/button-styles/segmented-button.sass @@ -0,0 +1,38 @@ +div.m3.m3-segmented-buttons + display: flex + flex-direction: row + outline-offset: -1px + width: min-content + border-radius: 20px + + & > button.m3.m3-button-segment + width: max-content + border-radius: 0 + box-sizing: border-box + height: 40px + + & + border: 1px solid var(--md-sys-color-outline) + border-right: 0.5px + border-left: 0.5px + border-left-style: solid + border-right-style: solid + border-left-color: var(--md-sys-color-outline) + border-right-color: var(--md-sys-color-outline) + min-width: 107px + + &:first-child + border: 1px solid var(--md-sys-color-outline) + border-right: 0.5px + border-right-style: solid + border-right-color: var(--md-sys-color-outline) + min-width: 108px - 0.5px + border-radius: 20px 0 0 20px + + &:last-child + border: 1px solid var(--md-sys-color-outline) + border-left: 0.5px + border-left-style: solid + border-left-color: var(--md-sys-color-outline) + min-width: 108px - 0.5px + border-radius: 0 20px 20px 0 diff --git a/src/styles/card.sass b/src/styles/card.sass index fcbd951..834c730 100644 --- a/src/styles/card.sass +++ b/src/styles/card.sass @@ -3,7 +3,7 @@ $padding: 16px @function padding-calculating($has-padding) - @if($has-padding == true) + @if $has-padding == true @return $padding @else @return 0px @@ -19,7 +19,7 @@ div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content padding: padding-calculating(false) border-radius: 12px !important -:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3 +div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 padding: padding-calculating(true) display: block box-sizing: border-box diff --git a/src/styles/generics.css b/src/styles/generics.css index 173a24c..30f4d13 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -1,31 +1,29 @@ +@import url(./themes/tokens.css); +@import url(./themes/colors.module.css); +@import url(./themes/typography.module.css); @import "./themes/theme.dark.css" (prefers-color-scheme: dark); @import "./themes/theme.light.css" (prefers-color-scheme: light); div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child { padding: 0px; - border-radius: 12px !important; -} + border-radius: 12px !important; } div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child { padding: 0px; - border-radius: 12px !important; -} + border-radius: 12px !important; } -:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3 { +div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 { padding: 16px; display: block; - box-sizing: border-box; -} + box-sizing: border-box; } .m3.m3-card-media { width: 100%; display: block; contain: content; position: relative; - box-sizing: border-box; -} -.m3.m3-card-media.m3-rounded { - border-radius: 28px; -} + box-sizing: border-box; } + .m3.m3-card-media.m3-rounded { + border-radius: 28px; } div.m3.m3-card-action-area { display: block; @@ -33,204 +31,164 @@ div.m3.m3-card-action-area { contain: content; position: relative; border-radius: inherit; - transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); -} -div.m3.m3-card-action-area > div.m3.m3-card-action-area-content { - top: 0; - width: 100%; - position: relative; -} -div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain) { - top: 0; - width: 100%; - height: 100%; - position: absolute; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); -} -div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); -} -div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within) > span.m3.m3-card-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); -} -div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover):is(.m3-card-outlined, .m3-card-filled) { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); -} -div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover).m3-card-elevated { - box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); -} -div.m3.m3-card-action-area:active:is(.m3-card-outlined, .m3-card-filled) { - box-shadow: none !important; -} -div.m3.m3-card-action-area:active.m3-card-elevated { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; -} -div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); -} -div.m3.m3-card-action-area:active > span.m3.m3-card-state-layer { - background-color: transparent; -} -div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); -} + transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); } + div.m3.m3-card-action-area > div.m3.m3-card-action-area-content { + top: 0; + width: 100%; + position: relative; } + div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain) { + top: 0; + width: 100%; + height: 100%; + position: absolute; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } + div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } + div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within) > span.m3.m3-card-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } + div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within, &:hover):is(.m3-card-outlined, .m3-card-filled) { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } + div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within, &:hover).m3-card-elevated { + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); } + div.m3.m3-card-action-area:active:is(.m3-card-outlined, .m3-card-filled) { + box-shadow: none !important; } + div.m3.m3-card-action-area:active.m3-card-elevated { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; } + div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } + div.m3.m3-card-action-area:active > span.m3.m3-card-state-layer { + background-color: transparent; } + div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } svg.m3.m3-svg-icon > text { alignment-baseline: central; - text-anchor: middle; -} + text-anchor: middle; } svg.m3.m3-svg-icon > text.m3-size-12px { width: 12px; aspect-ratio: 1; line-height: 12px; - font-size: 12px; -} + font-size: 12px; } svg.m3.m3-svg-icon > text.m3-size-16px { width: 16px; aspect-ratio: 1; line-height: 16px; - font-size: 16px; -} + font-size: 16px; } svg.m3.m3-svg-icon > text.m3-size-20px { width: 20px; aspect-ratio: 1; line-height: 20px; - font-size: 20px; -} + font-size: 20px; } svg.m3.m3-svg-icon > text.m3-size-24px { width: 24px; aspect-ratio: 1; line-height: 24px; - font-size: 24px; -} + font-size: 24px; } svg.m3.m3-svg-icon > text.m3-size-28px { width: 28px; aspect-ratio: 1; line-height: 28px; - font-size: 28px; -} + font-size: 28px; } svg.m3.m3-svg-icon > text.m3-size-32px { width: 32px; aspect-ratio: 1; line-height: 32px; - font-size: 32px; -} + font-size: 32px; } svg.m3.m3-svg-icon > text.m3-size-36px { width: 36px; aspect-ratio: 1; line-height: 36px; - font-size: 36px; -} + font-size: 36px; } svg.m3.m3-svg-icon > text.m3-size-40px { width: 40px; aspect-ratio: 1; line-height: 40px; - font-size: 40px; -} + font-size: 40px; } svg.m3.m3-svg-icon > text.m3-size-48px { width: 48px; aspect-ratio: 1; line-height: 48px; - font-size: 48px; -} + font-size: 48px; } svg.m3.m3-svg-icon > text.m3-Outlined { - font-family: Material-Symbols-Outlined-Regular; -} + font-family: Material-Symbols-Outlined-Regular; } svg.m3.m3-svg-icon > text.m3-Rounded { - font-family: Material-Symbols-Rounded-Regular; -} + font-family: Material-Symbols-Rounded-Regular; } svg.m3.m3-svg-icon > text.m3-Sharp { - font-family: Material-Symbols-Sharp-Regular; -} + font-family: Material-Symbols-Sharp-Regular; } svg.m3.m3-badge { position: absolute; - background-color: var(--md-sys-color-error); -} -svg.m3.m3-badge.disable-value { - padding: 0; - height: 6px; - width: 6px; - border-radius: 3px; -} -svg.m3.m3-badge.disable-value > text { - display: none; -} -svg.m3.m3-badge { - border-radius: 8px; - height: 16px; -} -svg.m3.m3-badge > text { - fill: var(--md-sys-color-on-error); - 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-optical-sizing: none; - alignment-baseline: central; - text-anchor: middle; - display: flex; - align-items: center; - justify-content: center; -} + background-color: var(--md-sys-color-error); } + svg.m3.m3-badge.disable-value { + padding: 0; + height: 6px; + width: 6px; + border-radius: 3px; } + svg.m3.m3-badge.disable-value > text { + display: none; } + svg.m3.m3-badge { + border-radius: 8px; + height: 16px; } + svg.m3.m3-badge > text { + fill: var(--md-sys-color-on-error); + 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-optical-sizing: none; + alignment-baseline: central; + text-anchor: middle; + display: flex; + align-items: center; + justify-content: center; } @font-face { font-family: Material-Symbols-Rounded-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-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-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"); } .m3.m3-ripple-domain { position: absolute; width: 100%; height: 100%; z-index: 20; - pointer-events: none; -} + pointer-events: none; } .m3.ripple { position: absolute; @@ -244,204 +202,154 @@ svg.m3.m3-badge > text { 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); - } -} + transform: scale3d(1, 1, 1); } } hr.m3.m3-divider { border: none; outline: 0.5px solid var(--md-sys-color-outline-variant); position: relative; - margin: 0; -} -hr.m3.m3-divider.vertical { - height: auto; - writing-mode: vertical-lr; -} -hr.m3.m3-divider.vertical.inset { - margin-inline-start: 16px; -} -hr.m3.m3-divider.vertical.middle-inset { - margin-inline: 16px; -} -hr.m3.m3-divider.horizontal { - width: auto; - writing-mode: horizontal-tb; -} -hr.m3.m3-divider.horizontal.inset { - margin-inline-start: 16px; -} -hr.m3.m3-divider.horizontal.middle-inset { - margin-inline: 16px; -} + margin: 0; } + hr.m3.m3-divider.vertical { + height: auto; + writing-mode: vertical-lr; } + hr.m3.m3-divider.vertical.inset { + margin-inline-start: 16px; } + hr.m3.m3-divider.vertical.middle-inset { + margin-inline: 16px; } + hr.m3.m3-divider.horizontal { + width: auto; + writing-mode: horizontal-tb; } + hr.m3.m3-divider.horizontal.inset { + margin-inline-start: 16px; } + hr.m3.m3-divider.horizontal.middle-inset { + margin-inline: 16px; } div.m3.m3-container { display: block; border-radius: 12px; position: relative; contain: content; - transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); -} -div.m3.m3-container.m3-container-filled { - background-color: var(--md-sys-color-surface-container-highest); -} -div.m3.m3-container.m3-container-outlined { - background-color: var(--md-sys-color-surface); - outline-offset: -1px; - outline: 1px solid var(--md-sys-color-outline-variant); -} -div.m3.m3-container.m3-container-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); -} + transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); } + div.m3.m3-container.m3-container-filled { + background-color: var(--md-sys-color-surface-container-highest); } + div.m3.m3-container.m3-container-outlined { + background-color: var(--md-sys-color-surface); + outline-offset: -1px; + outline: 1px solid var(--md-sys-color-outline-variant); } + div.m3.m3-container.m3-container-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.m3.m3-fab { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; -} -button.m3.m3-fab > span.m3-icon { - font-family: Material-Symbols-Outlined-Regular, sans-serif; -} -button.m3.m3-fab.m3 { - contain: content; - box-sizing: border-box; - display: inline-flex; - flex-direction: row; - justify-content: center; - align-items: center; - text-align: center; - border: none; - gap: 12px; -} -button.m3.m3-fab::before { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; - content: ""; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: absolute; - background: rgba(0, 0, 0, 0); -} -button.m3.m3-fab.surface { - background-color: var(--md-sys-color-surface-container-high); - color: var(--md-sys-color-primary); -} -button.m3.m3-fab.surface:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); -} -button.m3.m3-fab.surface > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); -} -button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); -} -button.m3.m3-fab.primary { - background-color: var(--md-sys-color-primary-container); - color: var(--md-sys-color-on-primary-container); -} -button.m3.m3-fab.primary:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); -} -button.m3.m3-fab.primary > svg.m3-svg-icon { - fill: var(--md-sys-color-on-primary-container); -} -button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); -} -button.m3.m3-fab.secondary { - background-color: var(--md-sys-color-secondary-container); - color: var(--md-sys-color-on-secondary-container); -} -button.m3.m3-fab.secondary:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); -} -button.m3.m3-fab.secondary > svg.m3-svg-icon { - fill: var(--md-sys-color-on-secondary-container); -} -button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); -} -button.m3.m3-fab.tertiary { - background-color: var(--md-sys-color-tertiary-container); - color: var(--md-sys-color-on-tertiary-container); -} -button.m3.m3-fab.tertiary:not(.without-elevation) { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); -} -button.m3.m3-fab.tertiary > svg.m3-svg-icon { - fill: var(--md-sys-color-on-tertiary-container); -} -button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple { - background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); -} -button.m3.m3-fab.m3-small-fab { - width: 40px; - height: 40px; - border-radius: 12px; - padding: 11px; - font-size: 24px; -} -button.m3.m3-fab.m3-default-fab { - width: 56px; - height: 56px; - border-radius: 16px; - padding: 19px; - font-size: 24px; -} -button.m3.m3-fab.m3-large-fab { - width: 96px; - height: 96px; - border-radius: 28px; - padding: 34.5px; - font-size: 36px; -} -button.m3.m3-fab.m3-extended-fab { - width: auto; - height: 56px; - border-radius: 16px; - padding: 19px; - font-size: 24px; -} -button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover { - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); -} -button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; -} -button.m3.m3-fab:hover.surface::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); -} -button.m3.m3-fab:hover.primary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); -} -button.m3.m3-fab:hover.secondary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); -} -button.m3.m3-fab:hover.tertiary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); -} -button.m3.m3-fab:focus-visible.surface::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); -} -button.m3.m3-fab:focus-visible.primary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); -} -button.m3.m3-fab:focus-visible.secondary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); -} -button.m3.m3-fab:focus-visible.tertiary::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); -} + 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 { + background-color: var(--md-sys-color-surface-container-high); + color: var(--md-sys-color-primary); } + button.m3.m3-fab.surface:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } + button.m3.m3-fab.surface > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); } + button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple { + background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } + button.m3.m3-fab.primary { + background-color: var(--md-sys-color-primary-container); + color: var(--md-sys-color-on-primary-container); } + button.m3.m3-fab.primary:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } + button.m3.m3-fab.primary > svg.m3-svg-icon { + fill: var(--md-sys-color-on-primary-container); } + button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple { + background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); } + button.m3.m3-fab.secondary { + background-color: var(--md-sys-color-secondary-container); + color: var(--md-sys-color-on-secondary-container); } + button.m3.m3-fab.secondary:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } + button.m3.m3-fab.secondary > svg.m3-svg-icon { + fill: var(--md-sys-color-on-secondary-container); } + button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple { + background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } + button.m3.m3-fab.tertiary { + background-color: var(--md-sys-color-tertiary-container); + color: var(--md-sys-color-on-tertiary-container); } + button.m3.m3-fab.tertiary:not(.without-elevation) { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); } + button.m3.m3-fab.tertiary > svg.m3-svg-icon { + fill: var(--md-sys-color-on-tertiary-container); } + button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple { + background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); } + button.m3.m3-fab.m3-small-fab { + width: 40px; + height: 40px; + border-radius: 12px; + padding: 11px; + font-size: 24px; } + button.m3.m3-fab.m3-default-fab { + width: 56px; + height: 56px; + border-radius: 16px; + padding: 19px; + font-size: 24px; } + button.m3.m3-fab.m3-large-fab { + width: 96px; + height: 96px; + border-radius: 28px; + padding: 34.5px; + font-size: 36px; } + button.m3.m3-fab.m3-extended-fab { + width: auto; + height: 56px; + border-radius: 16px; + padding: 19px; + font-size: 24px; } + button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover { + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); } + button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; } + button.m3.m3-fab:hover.surface::before { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } + button.m3.m3-fab:hover.primary::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); } + button.m3.m3-fab:hover.secondary::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); } + button.m3.m3-fab:hover.tertiary::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); } + button.m3.m3-fab:focus-visible.surface::before { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } + button.m3.m3-fab:focus-visible.primary::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); } + button.m3.m3-fab:focus-visible.secondary::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } + button.m3.m3-fab:focus-visible.tertiary::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); } button:not(.m3-fab, .m3-icon-button) { width: min-content; @@ -451,130 +359,97 @@ button:not(.m3-fab, .m3-icon-button) { font-weight: var(--md-sys-typescale-label-large-font-weight); line-height: var(--md-sys-typescale-label-large-line-height); font-family: var(--md-sys-typescale-label-large-font-family-name); - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; -} -button:not(.m3-fab, .m3-icon-button).m3 { - gap: 8px; - border: none; - contain: content; - 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); -} -button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon { - fill: var(--md-sys-color-on-primary); - color: var(--md-sys-color-on-primary); -} -button:not(.m3-fab, .m3-icon-button).outlined { - outline-offset: -1px; - background-color: rgba(0, 0, 0, 0); - color: var(--md-sys-color-primary); - outline: 1px solid var(--md-sys-color-outline) !important; -} -button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); -} -button:not(.m3-fab, .m3-icon-button).text { - background-color: rgba(0, 0, 0, 0); - padding: 10px 12px !important; - color: var(--md-sys-color-primary); -} -button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); -} -button:not(.m3-fab, .m3-icon-button).elevated { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); - color: var(--md-sys-color-primary); - background-color: var(--md-sys-color-surface-container-low); -} -button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon { - fill: var(--md-sys-color-primary); -} -button:not(.m3-fab, .m3-icon-button).tonal { - color: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); -} -button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon { - fill: var(--md-sys-color-on-secondary-container); -} -button:not(.m3-fab, .m3-icon-button)::before { - transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; - 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 { - outline: 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).m3 { + 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); } + button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon { + fill: var(--md-sys-color-on-primary); + color: var(--md-sys-color-on-primary); } + button:not(.m3-fab, .m3-icon-button).outlined { + outline-offset: -1px; + background-color: #00000000; + color: var(--md-sys-color-primary); + outline: 1px solid var(--md-sys-color-outline) !important; } + button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); } + button:not(.m3-fab, .m3-icon-button).text { + background-color: #00000000; + padding: 10px 12px !important; + color: var(--md-sys-color-primary); } + button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); } + button:not(.m3-fab, .m3-icon-button).elevated { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); + color: var(--md-sys-color-primary); + background-color: var(--md-sys-color-surface-container-low); } + button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon { + fill: var(--md-sys-color-primary); } + button:not(.m3-fab, .m3-icon-button).tonal { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); } + button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon { + fill: var(--md-sys-color-on-secondary-container); } + button:not(.m3-fab, .m3-icon-button)::before { + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; + 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 { + outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; } button.m3.m3-icon-button { transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; @@ -588,215 +463,197 @@ 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.default { - fill: var(--md-sys-color-on-surface-variant); - background-color: rgba(0, 0, 0, 0); -} -button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled { - fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); - background-color: rgba(0, 0, 0, 0); -} -button.m3.m3-icon-button.default.selected.toggled { - fill: var(--md-sys-color-primary); -} -button.m3.m3-icon-button.filled { - fill: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); -} -button.m3.m3-icon-button.filled.toggled { - fill: var(--md-sys-color-primary); - background-color: var(--md-sys-color-surface-container-highest); -} -button.m3.m3-icon-button.filled.selected.toggled { - fill: var(--md-sys-color-on-primary); - background-color: var(--md-sys-color-primary); -} -button.m3.m3-icon-button.tonal.toggled { - fill: var(--md-sys-color-on-surface-variant); - background-color: var(--md-sys-color-surface-container-highest); -} -button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { - fill: var(--md-sys-color-on-secondary-container); - background-color: var(--md-sys-color-secondary-container); -} -button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { - fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); -} -button.m3.m3-icon-button.outlined { - border: 1px solid var(--md-sys-color-outline); - fill: var(--md-sys-color-on-surface-variant); - background-color: rgba(0, 0, 0, 0); -} -button.m3.m3-icon-button.outlined:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); - fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); - background-color: rgba(0, 0, 0, 0); -} -button.m3.m3-icon-button.outlined.toggled.selected:disabled { - border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); - fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); -} -button.m3.m3-icon-button.outlined.selected.toggled { - border: 1px solid rgba(0, 0, 0, 0); - background-color: var(--md-sys-color-inverse-surface); - fill: var(--md-sys-color-inverse-on-surface); -} -button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); -} -button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); -} -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); -} -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); -} -button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); -} -button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); -} -button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); -} -button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); -} -button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); -} -button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); -} -button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); -} -button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); -} -button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); -} -button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); -} -button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); -} -button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); -} -button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); -} + padding: 0; } + button.m3.m3-icon-button::before { + transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; + content: ""; + width: 100%; + height: 100%; + position: absolute; } + button.m3.m3-icon-button > span.m3-icon { + z-index: 25; + font-size: 2em; + font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; } + button.m3.m3-icon-button.default { + fill: var(--md-sys-color-on-surface-variant); + background-color: #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 { + fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); + background-color: #00000000; } + button.m3.m3-icon-button.default.selected.toggled { + fill: var(--md-sys-color-primary); } + button.m3.m3-icon-button.filled { + fill: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); } + button.m3.m3-icon-button.filled.toggled { + fill: var(--md-sys-color-primary); + background-color: var(--md-sys-color-surface-container-highest); } + button.m3.m3-icon-button.filled.selected.toggled { + fill: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); } + button.m3.m3-icon-button.tonal.toggled { + fill: var(--md-sys-color-on-surface-variant); + background-color: var(--md-sys-color-surface-container-highest); } + button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal { + fill: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-secondary-container); } + button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled { + fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } + button.m3.m3-icon-button.outlined { + border: 1px solid var(--md-sys-color-outline); + fill: var(--md-sys-color-on-surface-variant); + background-color: #00000000; } + button.m3.m3-icon-button.outlined:disabled { + border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); + fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); + background-color: #00000000; } + button.m3.m3-icon-button.outlined.toggled.selected:disabled { + border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent); + fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } + button.m3.m3-icon-button.outlined.selected.toggled { + border: 1px solid #00000000; + background-color: var(--md-sys-color-inverse-surface); + fill: var(--md-sys-color-inverse-on-surface); } + button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } + button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } + button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } + button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } + button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); } + button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } + button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } + button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); } + button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); } + button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } + button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); } + button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); } + button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } + button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); } + button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } + button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); } + button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); } + +div.m3.m3-segmented-buttons { + display: flex; + flex-direction: row; + outline-offset: -1px; + width: min-content; + border-radius: 20px; } + div.m3.m3-segmented-buttons > button.m3.m3-button-segment { + width: max-content; + border-radius: 0; + box-sizing: border-box; + height: 40px; } + div.m3.m3-segmented-buttons > button.m3.m3-button-segment { + border: 1px solid var(--md-sys-color-outline); + border-right: 0.5px; + border-left: 0.5px; + border-left-style: solid; + border-right-style: solid; + border-left-color: var(--md-sys-color-outline); + border-right-color: var(--md-sys-color-outline); + min-width: 107px; } + div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child { + border: 1px solid var(--md-sys-color-outline); + border-right: 0.5px; + border-right-style: solid; + border-right-color: var(--md-sys-color-outline); + min-width: 107.5px; + border-radius: 20px 0 0 20px; } + div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child { + border: 1px solid var(--md-sys-color-outline); + border-left: 0.5px; + border-left-style: solid; + border-left-color: var(--md-sys-color-outline); + min-width: 107.5px; + border-radius: 0 20px 20px 0; } div.m3.m3-radio { width: 20px; height: 20px; align-items: center; display: inline-flex; - justify-content: center; -} -div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer { - z-index: 5; -} -div.m3.m3-radio > span.m3.m3-radio-state-layer { - width: 40px; - aspect-ratio: 1; - border-radius: 50%; - position: absolute; - pointer-events: none; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio { - margin: 0; - width: 20px; - height: 20px; - aspect-ratio: 1; - cursor: pointer; - appearance: none; - position: absolute; -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer { - background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { - background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline { - stroke-opacity: 38%; - stroke: var(--md-sys-color-on-surface); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state { - fill-opacity: 38%; - fill: var(--md-sys-color-on-surface); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline { - stroke: var(--md-sys-color-on-surface-variant); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state { - fill-opacity: 0; - fill: var(--md-sys-color-primary); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline { - stroke: var(--md-sys-color-primary); -} -div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state { - fill-opacity: 1; - fill: var(--md-sys-color-primary); -} -div.m3.m3-radio svg { - margin: 0; - width: 20px; - z-index: 10; - border-radius: 50%; - pointer-events: none; - aspect-ratio: inherit; -} -div.m3.m3-radio svg > circle { - transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1); -} -div.m3.m3-radio svg > circle.m3-radio-outline { - r: 9px; - fill: black; - fill-opacity: 0; - stroke-width: 2px; - stroke: var(--md-sys-color-on-surface-variant); -} -div.m3.m3-radio svg > circle.m3-radio-state { - r: 5px; -} + justify-content: center; } + div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer { + z-index: 5; } + div.m3.m3-radio > span.m3.m3-radio-state-layer { + width: 40px; + aspect-ratio: 1; + border-radius: 50%; + position: absolute; + pointer-events: none; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio { + margin: 0; + width: 20px; + height: 20px; + aspect-ratio: 1; + cursor: pointer; + appearance: none; + position: absolute; } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer { + background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple { + background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:disabled:is(:not(:checked), &:checked) ~ svg > circle.m3-radio-outline { + stroke-opacity: 38%; + stroke: var(--md-sys-color-on-surface); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state { + fill-opacity: 38%; + fill: var(--md-sys-color-on-surface); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline { + stroke: var(--md-sys-color-on-surface-variant); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state { + fill-opacity: 0; + fill: var(--md-sys-color-primary); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:checked ~ svg > circle.m3-radio-outline { + stroke: var(--md-sys-color-primary); } + div.m3.m3-radio > input[type="radio"].m3.m3-radio:checked ~ svg > circle.m3-radio-state { + fill-opacity: 1; + fill: var(--md-sys-color-primary); } + div.m3.m3-radio svg { + margin: 0; + width: 20px; + z-index: 10; + border-radius: 50%; + pointer-events: none; + aspect-ratio: inherit; } + div.m3.m3-radio svg > circle { + transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1); } + div.m3.m3-radio svg > circle.m3-radio-outline { + r: 9px; + fill: black; + fill-opacity: 0; + stroke-width: 2px; + stroke: var(--md-sys-color-on-surface-variant); } + div.m3.m3-radio svg > circle.m3-radio-state { + r: 5px; } div.m3.m3-switch { margin: 4px; @@ -806,146 +663,110 @@ div.m3.m3-switch { align-items: center; justify-content: center; width: 52px; - height: 32px; -} -div.m3.m3-switch > svg { - overflow: visible; - transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); - width: 52px; - height: 32px; -} -div.m3.m3-switch > svg > g { - transform: translate(11.5%, 81%); - transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} -div.m3.m3-switch > svg > g > text { - font-family: Material-Symbols-Outlined-Regular; - font-size: 20px; -} -div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler { - transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); - cy: 50%; - cx: 16px; -} -div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer { - r: 20px; - fill-opacity: 0; -} -div.m3.m3-switch > svg > circle.m3.m3-switch-handler { - r: 8px; -} -div.m3.m3-switch > svg > rect.m3.m3-switch-track { - transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); - stroke-width: 2px; - border-radius: 16px; - rx: 15px; - width: 50px; - height: 30px; -} -div.m3.m3-switch > input.m3 { - cursor: pointer; - appearance: none; - opacity: 0 !important; - margin: 0; - width: 52px; - height: 32px; - position: absolute; -} -div.m3.m3-switch > input.m3:disabled { - cursor: not-allowed; -} -div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-outline); -} -div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g { - transform: translate(50%, 81%); -} -div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-on-primary); -} -div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked { - fill: var(--md-sys-color-on-primary); -} -div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked { - fill: var(--md-sys-color-on-primary-container); -} -div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-surface); -} -div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler { - r: 12px; -} -div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked { - opacity: 0; -} -div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) { - cx: calc(100% - 16px); -} -div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked { - opacity: 0; -} -div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler { - r: 14px; -} -div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-on-surface); - fill-opacity: 38%; -} -div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-primary-container); -} -div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { - fill: var(--md-sys-color-primary); - fill-opacity: 8%; -} -div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler { - fill: var(--md-sys-color-on-surface-variant); -} -div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { - fill: var(--md-sys-color-on-surface); - fill-opacity: 8%; -} -div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { - fill: var(--md-sys-color-primary); - fill-opacity: 12%; -} -div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { - fill: var(--md-sys-color-on-surface); - fill-opacity: 12%; -} -div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track { - rx: 16px; - width: 52px; - height: 32px; - stroke-width: 0; -} -div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track { - x: 1px; - y: 1px; -} -div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track { - stroke: var(--md-sys-color-outline); - fill: var(--md-sys-color-surface-container-highest); -} -div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track { - stroke: var(--md-sys-color-primary); - fill: var(--md-sys-color-primary); -} -div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 { - fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); -} -div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track { - stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); - fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); -} -div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 { - transform: translateX(38.5%); - fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); -} -div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track { - stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent); - fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); -} + height: 32px; } + div.m3.m3-switch > svg { + overflow: visible; + transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + width: 52px; + height: 32px; } + div.m3.m3-switch > svg > g { + transform: translate(11.5%, 81%); + transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } + div.m3.m3-switch > svg > g > text { + font-family: Material-Symbols-Outlined-Regular; + font-size: 20px; } + div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler { + transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + cy: 50%; + cx: 16px; } + div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer { + r: 20px; + fill-opacity: 0; } + div.m3.m3-switch > svg > circle.m3.m3-switch-handler { + r: 8px; } + div.m3.m3-switch > svg > rect.m3.m3-switch-track { + transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + stroke-width: 2px; + border-radius: 16px; + rx: 15px; + width: 50px; + height: 30px; } + div.m3.m3-switch > input.m3 { + cursor: pointer; + appearance: none; + opacity: 0 !important; + margin: 0; + width: 52px; + height: 32px; + position: absolute; } + div.m3.m3-switch > input.m3:disabled { + cursor: not-allowed; } + div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-outline); } + div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g { + transform: translate(50%, 81%); } + div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-on-primary); } + div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked { + fill: var(--md-sys-color-on-primary); } + div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked { + fill: var(--md-sys-color-on-primary-container); } + div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-surface); } + div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler { + r: 12px; } + div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked { + opacity: 0; } + div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) { + cx: calc(100% - 16px); } + div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked { + opacity: 0; } + div.m3.m3-switch > input.m3:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler { + r: 14px; } + div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-on-surface); + fill-opacity: 38%; } + div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-primary-container); } + div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { + fill: var(--md-sys-color-primary); + fill-opacity: 8%; } + div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler { + fill: var(--md-sys-color-on-surface-variant); } + div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { + fill: var(--md-sys-color-on-surface); + fill-opacity: 8%; } + div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer { + fill: var(--md-sys-color-primary); + fill-opacity: 12%; } + div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer { + fill: var(--md-sys-color-on-surface); + fill-opacity: 12%; } + div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track { + rx: 16px; + width: 52px; + height: 32px; + stroke-width: 0; } + div.m3.m3-switch > input.m3:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track { + x: 1px; + y: 1px; } + div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track { + stroke: var(--md-sys-color-outline); + fill: var(--md-sys-color-surface-container-highest); } + div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track { + stroke: var(--md-sys-color-primary); + fill: var(--md-sys-color-primary); } + div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 { + fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); } + div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track { + stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); + fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); } + div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 { + transform: translateX(38.5%); + fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); } + div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track { + stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent); + fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); } label.m3.m3-checkbox-label { display: flex; @@ -954,15 +775,13 @@ label.m3.m3-checkbox-label { justify-content: center; aspect-ratio: 1; width: 18px; - height: 18px; -} -label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer { - position: absolute; - width: 2.5rem; - aspect-ratio: inherit; - border-radius: 50%; - transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); -} + height: 18px; } + label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer { + position: absolute; + width: 2.5rem; + aspect-ratio: inherit; + border-radius: 50%; + transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } span.m3.m3-checkbox-ripple-layer { z-index: 20; @@ -970,10 +789,9 @@ span.m3.m3-checkbox-ripple-layer { height: 2.5rem; contain: content; border-radius: 50%; - position: absolute; -} + position: absolute; } -input[type=checkbox].m3.m3-checkbox { +input[type="checkbox"].m3.m3-checkbox { margin: 0; z-index: 10; display: flex; @@ -985,81 +803,59 @@ input[type=checkbox].m3.m3-checkbox { 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 { - transition: color 0.2s cubic-bezier(0.2, 0, 0, 1); - color: var(--md-sys-color-on-surface-variant); -} -input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) { - background: var(--md-sys-color-on-error); -} -input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state { - color: var(--md-sys-color-error); -} -input[type=checkbox].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state { - color: var(--md-sys-color-error); -} -input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) { - background: var(--md-sys-color-on-primary); -} -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)) ~ span.m3-checkbox-state { - color: var(--md-sys-color-primary); -} -input[type=checkbox].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state { - color: var(--md-sys-color-on-surface); -} -input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled ~ *, :checked) { - opacity: 38%; -} -input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state { - pointer-events: none; - z-index: 10; - display: flex; - align-items: center; - justify-content: center; - line-height: 24px; - font-family: Material-Symbols-Outlined-Regular, sans-serif; - font-weight: 700; - font-size: 24px; - font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; -} -input[type=checkbox].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before { - content: "check_box_outline_blank"; -} -input[type=checkbox].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before { - content: "indeterminate_check_box"; -} -input[type=checkbox].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before { - content: "check_box"; -} -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 ~ span.m3-checkbox-state { + transition: color 0.2s cubic-bezier(0.2, 0, 0, 1); + color: var(--md-sys-color-on-surface-variant); } + input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) { + background: var(--md-sys-color-on-error); } + input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state { + color: var(--md-sys-color-error); } + input[type="checkbox"].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state { + color: 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)) { + background: var(--md-sys-color-on-primary); } + input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state { + color: var(--md-sys-color-primary); } + input[type="checkbox"].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state { + color: var(--md-sys-color-on-surface); } + input[type="checkbox"].m3.m3-checkbox:disabled ~ *:is(:hover, &, :checked) { + opacity: 38%; } + input[type="checkbox"].m3.m3-checkbox ~ span.m3-checkbox-state { + pointer-events: none; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + line-height: 24px; + font-family: Material-Symbols-Outlined-Regular, sans-serif; + font-weight: 700; + font-size: 24px; + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } + input[type="checkbox"].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before { + content: "check_box_outline_blank"; } + input[type="checkbox"].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before { + content: "indeterminate_check_box"; } + input[type="checkbox"].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before { + content: "check_box"; } + 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; @@ -1067,949 +863,177 @@ 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); -} - -:root { - /* display - hero */ - --md-sys-typescale-display-hero-font-family-name: Roboto; - --md-sys-typescale-display-hero-font-family-style: Regular; - --md-sys-typescale-display-hero-font-weight: 475; - --md-sys-typescale-display-hero-font-size: 112px; - --md-sys-typescale-display-hero-line-height: 1; - --md-sys-typescale-display-hero-letter-spacing: 0; - /* display - xl */ - --md-sys-typescale-display-xl-font-family-name: Roboto; - --md-sys-typescale-display-xl-font-family-style: Regular; - --md-sys-typescale-display-xl-font-weight: 475; - --md-sys-typescale-display-xl-font-size: 88px; - --md-sys-typescale-display-xl-line-height: 96px; - --md-sys-typescale-display-xl-letter-spacing: 0; - /* display - large */ - --md-sys-typescale-display-large-font-family-name: Roboto; - --md-sys-typescale-display-large-font-family-style: Regular; - --md-sys-typescale-display-large-font-weight: 400; - --md-sys-typescale-display-large-font-size: 57px; - --md-sys-typescale-display-large-line-height: 64px; - --md-sys-typescale-display-large-letter-spacing: -0.25px; - /* display - medium */ - --md-sys-typescale-display-medium-font-family-name: Roboto; - --md-sys-typescale-display-medium-font-family-style: Regular; - --md-sys-typescale-display-medium-font-weight: 400; - --md-sys-typescale-display-medium-font-size: 45px; - --md-sys-typescale-display-medium-line-height: 52px; - --md-sys-typescale-display-medium-letter-spacing: 0px; - /* display - small */ - --md-sys-typescale-display-small-font-family-name: Roboto; - --md-sys-typescale-display-small-font-family-style: Regular; - --md-sys-typescale-display-small-font-weight: 400; - --md-sys-typescale-display-small-font-size: 36px; - --md-sys-typescale-display-small-line-height: 44px; - --md-sys-typescale-display-small-letter-spacing: 0px; - /* headline - large */ - --md-sys-typescale-headline-large-font-family-name: Roboto; - --md-sys-typescale-headline-large-font-family-style: Regular; - --md-sys-typescale-headline-large-font-weight: 400; - --md-sys-typescale-headline-large-font-size: 32px; - --md-sys-typescale-headline-large-line-height: 40px; - --md-sys-typescale-headline-large-letter-spacing: 0px; - /* headline - medium */ - --md-sys-typescale-headline-medium-font-family-name: Roboto; - --md-sys-typescale-headline-medium-font-family-style: Regular; - --md-sys-typescale-headline-medium-font-weight: 400; - --md-sys-typescale-headline-medium-font-size: 28px; - --md-sys-typescale-headline-medium-line-height: 36px; - --md-sys-typescale-headline-medium-letter-spacing: 0px; - /* headline - small */ - --md-sys-typescale-headline-small-font-family-name: Roboto; - --md-sys-typescale-headline-small-font-family-style: Regular; - --md-sys-typescale-headline-small-font-weight: 400; - --md-sys-typescale-headline-small-font-size: 24px; - --md-sys-typescale-headline-small-line-height: 32px; - --md-sys-typescale-headline-small-letter-spacing: 0px; - /* title - large */ - --md-sys-typescale-title-large-font-family-name: Roboto; - --md-sys-typescale-title-large-font-family-style: Regular; - --md-sys-typescale-title-large-font-weight: 400; - --md-sys-typescale-title-large-font-size: 22px; - --md-sys-typescale-title-large-line-height: 28px; - --md-sys-typescale-title-large-letter-spacing: 0px; - /* title - medium */ - --md-sys-typescale-title-medium-font-family-name: Roboto; - --md-sys-typescale-title-medium-font-family-style: Medium; - --md-sys-typescale-title-medium-font-weight: 500; - --md-sys-typescale-title-medium-font-size: 16px; - --md-sys-typescale-title-medium-line-height: 24px; - --md-sys-typescale-title-medium-letter-spacing: 0.15px; - /* title - small */ - --md-sys-typescale-title-small-font-family-name: Roboto; - --md-sys-typescale-title-small-font-family-style: Medium; - --md-sys-typescale-title-small-font-weight: 500; - --md-sys-typescale-title-small-font-size: 14px; - --md-sys-typescale-title-small-line-height: 20px; - --md-sys-typescale-title-small-letter-spacing: 0.1px; - /* body - large */ - --md-sys-typescale-body-large-font-family-name: Roboto; - --md-sys-typescale-body-large-font-family-style: Regular; - --md-sys-typescale-body-large-font-weight: 400; - --md-sys-typescale-body-large-font-size: 16px; - --md-sys-typescale-body-large-line-height: 24px; - --md-sys-typescale-body-large-letter-spacing: 0.5px; - /* body - medium */ - --md-sys-typescale-body-medium-font-family-name: Roboto; - --md-sys-typescale-body-medium-font-family-style: Regular; - --md-sys-typescale-body-medium-font-weight: 400; - --md-sys-typescale-body-medium-font-size: 14px; - --md-sys-typescale-body-medium-line-height: 20px; - --md-sys-typescale-body-medium-letter-spacing: 0.25px; - /* body - small */ - --md-sys-typescale-body-small-font-family-name: Roboto; - --md-sys-typescale-body-small-font-family-style: Regular; - --md-sys-typescale-body-small-font-weight: 400; - --md-sys-typescale-body-small-font-size: 12px; - --md-sys-typescale-body-small-line-height: 16px; - --md-sys-typescale-body-small-letter-spacing: 0.4px; - /* label - large */ - --md-sys-typescale-label-large-font-family-name: Roboto; - --md-sys-typescale-label-large-font-family-style: Medium; - --md-sys-typescale-label-large-font-weight: 500; - --md-sys-typescale-label-large-font-size: 14px; - --md-sys-typescale-label-large-line-height: 20px; - --md-sys-typescale-label-large-letter-spacing: 0.1px; - /* label - medium */ - --md-sys-typescale-label-medium-font-family-name: Roboto; - --md-sys-typescale-label-medium-font-family-style: Medium; - --md-sys-typescale-label-medium-font-weight: 500; - --md-sys-typescale-label-medium-font-size: 12px; - --md-sys-typescale-label-medium-line-height: 16px; - --md-sys-typescale-label-medium-letter-spacing: 0.5px; - /* label - small */ - --md-sys-typescale-label-small-font-family-name: Roboto; - --md-sys-typescale-label-small-font-family-style: Medium; - --md-sys-typescale-label-small-font-weight: 500; - --md-sys-typescale-label-small-font-size: 11px; - --md-sys-typescale-label-small-line-height: 16px; - --md-sys-typescale-label-small-letter-spacing: 0.5px; - /* shape - extra large top rounding */ - --md-sys-shape-extra-large-top-rounding: 28px 28px 0 0; - /* shape - extra large rounding */ - --md-sys-shape-extra-large-rounding: 28px; - /* shape - large top rounding */ - --md-sys-shape-large-top-rounding: 16px 16px 0 0; - /* shape - large end rounding */ - --md-sys-shape-large-end-rounding: 0 16px 16px 0; - /* shape - large start rounding */ - --md-sys-shape-large-start-rounding: 16px 0 0 16px; - /* shape - large rounding */ - --md-sys-shape-large-rounding: 16px; - /* shape - medium rounding */ - --md-sys-shape-medium-rounding: 12px; - /* shape - small rounding */ - --md-sys-shape-small-rounding: 8px; - /* shape - extra small top rounding */ - --md-sys-shape-extra-small-top-rounding: 4px 4px 0 0; - /* shape - extra small rounding */ - --md-sys-shape-extra-small-rounding: 4px; -} - -.primary { - background-color: var(--md-sys-color-primary); -} - -.primary-text { - color: var(--md-sys-color-primary); -} - -.on-primary { - background-color: var(--md-sys-color-on-primary); -} - -.on-primary-text { - color: var(--md-sys-color-on-primary); -} - -.primary-container { - background-color: var(--md-sys-color-primary-container); -} - -.primary-container-text { - color: var(--md-sys-color-primary-container); -} - -.on-primary-container { - background-color: var(--md-sys-color-on-primary-container); -} - -.on-primary-container-text { - color: var(--md-sys-color-on-primary-container); -} - -.primary-fixed { - background-color: var(--md-sys-color-primary-fixed); -} - -.primary-fixed-text { - color: var(--md-sys-color-primary-fixed); -} - -.on-primary-fixed { - background-color: var(--md-sys-color-on-primary-fixed); -} - -.on-primary-fixed-text { - color: var(--md-sys-color-on-primary-fixed); -} - -.primary-fixed-dim { - background-color: var(--md-sys-color-primary-fixed-dim); -} - -.primary-fixed-dim-text { - color: var(--md-sys-color-primary-fixed-dim); -} - -.on-primary-fixed-variant { - background-color: var(--md-sys-color-on-primary-fixed-variant); -} - -.on-primary-fixed-variant-text { - color: var(--md-sys-color-on-primary-fixed-variant); -} - -.secondary { - background-color: var(--md-sys-color-secondary); -} - -.secondary-text { - color: var(--md-sys-color-secondary); -} - -.on-secondary { - background-color: var(--md-sys-color-on-secondary); -} - -.on-secondary-text { - color: var(--md-sys-color-on-secondary); -} - -.secondary-container { - background-color: var(--md-sys-color-secondary-container); -} - -.secondary-container-text { - color: var(--md-sys-color-secondary-container); -} - -.on-secondary-container { - background-color: var(--md-sys-color-on-secondary-container); -} - -.on-secondary-container-text { - color: var(--md-sys-color-on-secondary-container); -} - -.secondary-fixed { - background-color: var(--md-sys-color-secondary-fixed); -} - -.secondary-fixed-text { - color: var(--md-sys-color-secondary-fixed); -} - -.on-secondary-fixed { - background-color: var(--md-sys-color-on-secondary-fixed); -} - -.on-secondary-fixed-text { - color: var(--md-sys-color-on-secondary-fixed); -} - -.secondary-fixed-dim { - background-color: var(--md-sys-color-secondary-fixed-dim); -} - -.secondary-fixed-dim-text { - color: var(--md-sys-color-secondary-fixed-dim); -} - -.on-secondary-fixed-variant { - background-color: var(--md-sys-color-on-secondary-fixed-variant); -} - -.on-secondary-fixed-variant-text { - color: var(--md-sys-color-on-secondary-fixed-variant); -} - -.tertiary { - background-color: var(--md-sys-color-tertiary); -} - -.tertiary-text { - color: var(--md-sys-color-tertiary); -} - -.on-tertiary { - background-color: var(--md-sys-color-on-tertiary); -} - -.on-tertiary-text { - color: var(--md-sys-color-on-tertiary); -} - -.tertiary-container { - background-color: var(--md-sys-color-tertiary-container); -} - -.tertiary-container-text { - color: var(--md-sys-color-tertiary-container); -} - -.on-tertiary-container { - background-color: var(--md-sys-color-on-tertiary-container); -} - -.on-tertiary-container-text { - color: var(--md-sys-color-on-tertiary-container); -} - -.tertiary-fixed { - background-color: var(--md-sys-color-tertiary-fixed); -} - -.tertiary-fixed-text { - color: var(--md-sys-color-tertiary-fixed); -} - -.on-tertiary-fixed { - background-color: var(--md-sys-color-on-tertiary-fixed); -} - -.on-tertiary-fixed-text { - color: var(--md-sys-color-on-tertiary-fixed); -} - -.tertiary-fixed-dim { - background-color: var(--md-sys-color-tertiary-fixed-dim); -} - -.tertiary-fixed-dim-text { - color: var(--md-sys-color-tertiary-fixed-dim); -} - -.on-tertiary-fixed-variant { - background-color: var(--md-sys-color-on-tertiary-fixed-variant); -} - -.on-tertiary-fixed-variant-text { - color: var(--md-sys-color-on-tertiary-fixed-variant); -} - -.error { - background-color: var(--md-sys-color-error); -} - -.error-text { - color: var(--md-sys-color-error); -} - -.error-container { - background-color: var(--md-sys-color-error-container); -} - -.error-container-text { - color: var(--md-sys-color-error-container); -} - -.on-error { - background-color: var(--md-sys-color-on-error); -} - -.on-error-text { - color: var(--md-sys-color-on-error); -} - -.on-error-container { - background-color: var(--md-sys-color-on-error-container); -} - -.on-error-container-text { - color: var(--md-sys-color-on-error-container); -} - -.background { - background-color: var(--md-sys-color-background); -} - -.background-text { - color: var(--md-sys-color-background); -} - -.on-background { - background-color: var(--md-sys-color-on-background); -} - -.on-background-text { - color: var(--md-sys-color-on-background); -} - -.outline { - background-color: var(--md-sys-color-outline); -} - -.outline-text { - color: var(--md-sys-color-outline); -} - -.inverse-on-surface { - background-color: var(--md-sys-color-inverse-on-surface); -} - -.inverse-on-surface-text { - color: var(--md-sys-color-inverse-on-surface); -} - -.inverse-surface { - background-color: var(--md-sys-color-inverse-surface); -} - -.inverse-surface-text { - color: var(--md-sys-color-inverse-surface); -} - -.inverse-primary { - background-color: var(--md-sys-color-inverse-primary); -} - -.inverse-primary-text { - color: var(--md-sys-color-inverse-primary); -} - -.shadow { - background-color: var(--md-sys-color-shadow); -} - -.shadow-text { - color: var(--md-sys-color-shadow); -} - -.surface-tint { - background-color: var(--md-sys-color-surface-tint); -} - -.surface-tint-text { - color: var(--md-sys-color-surface-tint); -} - -.outline-variant { - background-color: var(--md-sys-color-outline-variant); -} - -.outline-variant-text { - color: var(--md-sys-color-outline-variant); -} - -.scrim { - background-color: var(--md-sys-color-scrim); -} - -.scrim-text { - color: var(--md-sys-color-scrim); -} - -.surface { - background-color: var(--md-sys-color-surface); -} - -.surface-text { - color: var(--md-sys-color-surface); -} - -.on-surface { - background-color: var(--md-sys-color-on-surface); -} - -.on-surface-text { - color: var(--md-sys-color-on-surface); -} - -.surface-variant { - background-color: var(--md-sys-color-surface-variant); -} - -.surface-variant-text { - color: var(--md-sys-color-surface-variant); -} - -.on-surface-variant { - background-color: var(--md-sys-color-on-surface-variant); -} - -.on-surface-variant-text { - color: var(--md-sys-color-on-surface-variant); -} - -.surface-container-highest { - background-color: var(--md-sys-color-surface-container-highest); -} - -.surface-container-highest-text { - color: var(--md-sys-color-surface-container-highest); -} - -.surface-container-high { - background-color: var(--md-sys-color-surface-container-high); -} - -.surface-container-high-text { - color: var(--md-sys-color-surface-container-high); -} - -.surface-container { - background-color: var(--md-sys-color-surface-container); -} - -.surface-container-text { - color: var(--md-sys-color-surface-container); -} - -.surface-container-low { - background-color: var(--md-sys-color-surface-container-low); -} - -.surface-container-low-text { - color: var(--md-sys-color-surface-container-low); -} - -.surface-container-lowest { - background-color: var(--md-sys-color-surface-container-lowest); -} - -.surface-container-lowest-text { - color: var(--md-sys-color-surface-container-lowest); -} - -.surface-dim { - background-color: var(--md-sys-color-surface-dim); -} - -.surface-dim-text { - color: var(--md-sys-color-surface-dim); -} - -.surface-bright { - background-color: var(--md-sys-color-surface-bright); -} - -.surface-bright-text { - color: var(--md-sys-color-surface-bright); -} - -.display-hero { - font-family: var(--md-sys-typescale-display-hero-font-family-name); - font-style: var(--md-sys-typescale-display-hero-font-family-style); - font-weight: var(--md-sys-typescale-display-hero-font-weight); - font-size: var(--md-sys-typescale-display-hero-font-size); - letter-spacing: var(--md-sys-typescale-display-hero-letter-spacing); - line-height: var(--md-sys-typescale-display-hero-line-height); - text-transform: var(--md-sys-typescale-display-hero-text-transform); - text-decoration: var(--md-sys-typescale-display-hero-text-decoration); -} - -.display-xl { - font-family: var(--md-sys-typescale-display-xl-font-family-name); - font-style: var(--md-sys-typescale-display-xl-font-family-style); - font-weight: var(--md-sys-typescale-display-xl-font-weight); - font-size: var(--md-sys-typescale-display-xl-font-size); - letter-spacing: var(--md-sys-typescale-display-xl-letter-spacing); - line-height: var(--md-sys-typescale-display-xl-line-height); - text-transform: var(--md-sys-typescale-display-xl-text-transform); - text-decoration: var(--md-sys-typescale-display-xl-text-decoration); -} - -.display-large { - font-family: var(--md-sys-typescale-display-large-font-family-name); - font-style: var(--md-sys-typescale-display-large-font-family-style); - font-weight: var(--md-sys-typescale-display-large-font-weight); - font-size: var(--md-sys-typescale-display-large-font-size); - letter-spacing: var(--md-sys-typescale-display-large-letter-spacing); - line-height: var(--md-sys-typescale-display-large-line-height); - text-transform: var(--md-sys-typescale-display-large-text-transform); - text-decoration: var(--md-sys-typescale-display-large-text-decoration); -} - -.display-medium { - font-family: var(--md-sys-typescale-display-medium-font-family-name); - font-style: var(--md-sys-typescale-display-medium-font-family-style); - font-weight: var(--md-sys-typescale-display-medium-font-weight); - font-size: var(--md-sys-typescale-display-medium-font-size); - letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing); - line-height: var(--md-sys-typescale-display-medium-line-height); - text-transform: var(--md-sys-typescale-display-medium-text-transform); - text-decoration: var(--md-sys-typescale-display-medium-text-decoration); -} - -.display-small { - font-family: var(--md-sys-typescale-display-small-font-family-name); - font-style: var(--md-sys-typescale-display-small-font-family-style); - font-weight: var(--md-sys-typescale-display-small-font-weight); - font-size: var(--md-sys-typescale-display-small-font-size); - letter-spacing: var(--md-sys-typescale-display-small-letter-spacing); - line-height: var(--md-sys-typescale-display-small-line-height); - text-transform: var(--md-sys-typescale-display-small-text-transform); - text-decoration: var(--md-sys-typescale-display-small-text-decoration); -} - -.headline-large { - font-family: var(--md-sys-typescale-headline-large-font-family-name); - font-style: var(--md-sys-typescale-headline-large-font-family-style); - font-weight: var(--md-sys-typescale-headline-large-font-weight); - font-size: var(--md-sys-typescale-headline-large-font-size); - letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing); - line-height: var(--md-sys-typescale-headline-large-line-height); - text-transform: var(--md-sys-typescale-headline-large-text-transform); - text-decoration: var(--md-sys-typescale-headline-large-text-decoration); -} - -.headline-medium { - font-family: var(--md-sys-typescale-headline-medium-font-family-name); - font-style: var(--md-sys-typescale-headline-medium-font-family-style); - font-weight: var(--md-sys-typescale-headline-medium-font-weight); - font-size: var(--md-sys-typescale-headline-medium-font-size); - letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing); - line-height: var(--md-sys-typescale-headline-medium-line-height); - text-transform: var(--md-sys-typescale-headline-medium-text-transform); - text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); -} - -.headline-small { - font-family: var(--md-sys-typescale-headline-small-font-family-name); - font-style: var(--md-sys-typescale-headline-small-font-family-style); - font-weight: var(--md-sys-typescale-headline-small-font-weight); - font-size: var(--md-sys-typescale-headline-small-font-size); - letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing); - line-height: var(--md-sys-typescale-headline-small-line-height); - text-transform: var(--md-sys-typescale-headline-small-text-transform); - text-decoration: var(--md-sys-typescale-headline-small-text-decoration); -} - -.body-large { - font-family: var(--md-sys-typescale-body-large-font-family-name); - font-style: var(--md-sys-typescale-body-large-font-family-style); - font-weight: var(--md-sys-typescale-body-large-font-weight); - font-size: var(--md-sys-typescale-body-large-font-size); - letter-spacing: var(--md-sys-typescale-body-large-letter-spacing); - line-height: var(--md-sys-typescale-body-large-line-height); - text-transform: var(--md-sys-typescale-body-large-text-transform); - text-decoration: var(--md-sys-typescale-body-large-text-decoration); -} - -.body-medium { - font-family: var(--md-sys-typescale-body-medium-font-family-name); - font-style: var(--md-sys-typescale-body-medium-font-family-style); - font-weight: var(--md-sys-typescale-body-medium-font-weight); - font-size: var(--md-sys-typescale-body-medium-font-size); - letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing); - line-height: var(--md-sys-typescale-body-medium-line-height); - text-transform: var(--md-sys-typescale-body-medium-text-transform); - text-decoration: var(--md-sys-typescale-body-medium-text-decoration); -} - -.body-small { - font-family: var(--md-sys-typescale-body-small-font-family-name); - font-style: var(--md-sys-typescale-body-small-font-family-style); - font-weight: var(--md-sys-typescale-body-small-font-weight); - font-size: var(--md-sys-typescale-body-small-font-size); - letter-spacing: var(--md-sys-typescale-body-small-letter-spacing); - line-height: var(--md-sys-typescale-body-small-line-height); - text-transform: var(--md-sys-typescale-body-small-text-transform); - text-decoration: var(--md-sys-typescale-body-small-text-decoration); -} - -.label-large { - font-family: var(--md-sys-typescale-label-large-font-family-name); - font-style: var(--md-sys-typescale-label-large-font-family-style); - font-weight: var(--md-sys-typescale-label-large-font-weight); - font-size: var(--md-sys-typescale-label-large-font-size); - letter-spacing: var(--md-sys-typescale-label-large-letter-spacing); - line-height: var(--md-sys-typescale-label-large-line-height); - text-transform: var(--md-sys-typescale-label-large-text-transform); - text-decoration: var(--md-sys-typescale-label-large-text-decoration); -} - -.label-medium { - font-family: var(--md-sys-typescale-label-medium-font-family-name); - font-style: var(--md-sys-typescale-label-medium-font-family-style); - font-weight: var(--md-sys-typescale-label-medium-font-weight); - font-size: var(--md-sys-typescale-label-medium-font-size); - letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing); - line-height: var(--md-sys-typescale-label-medium-line-height); - text-transform: var(--md-sys-typescale-label-medium-text-transform); - text-decoration: var(--md-sys-typescale-label-medium-text-decoration); -} - -.label-small { - font-family: var(--md-sys-typescale-label-small-font-family-name); - font-style: var(--md-sys-typescale-label-small-font-family-style); - font-weight: var(--md-sys-typescale-label-small-font-weight); - font-size: var(--md-sys-typescale-label-small-font-size); - letter-spacing: var(--md-sys-typescale-label-small-letter-spacing); - line-height: var(--md-sys-typescale-label-small-line-height); - text-transform: var(--md-sys-typescale-label-small-text-transform); - text-decoration: var(--md-sys-typescale-label-small-text-decoration); -} - -.title-large { - font-family: var(--md-sys-typescale-title-large-font-family-name); - font-style: var(--md-sys-typescale-title-large-font-family-style); - font-weight: var(--md-sys-typescale-title-large-font-weight); - font-size: var(--md-sys-typescale-title-large-font-size); - letter-spacing: var(--md-sys-typescale-title-large-letter-spacing); - line-height: var(--md-sys-typescale-title-large-line-height); - text-transform: var(--md-sys-typescale-title-large-text-transform); - text-decoration: var(--md-sys-typescale-title-large-text-decoration); -} - -.title-medium { - font-family: var(--md-sys-typescale-title-medium-font-family-name); - font-style: var(--md-sys-typescale-title-medium-font-family-style); - font-weight: var(--md-sys-typescale-title-medium-font-weight); - font-size: var(--md-sys-typescale-title-medium-font-size); - letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing); - line-height: var(--md-sys-typescale-title-medium-line-height); - text-transform: var(--md-sys-typescale-title-medium-text-transform); - text-decoration: var(--md-sys-typescale-title-medium-text-decoration); -} - -.title-small { - font-family: var(--md-sys-typescale-title-small-font-family-name); - font-style: var(--md-sys-typescale-title-small-font-family-style); - font-weight: var(--md-sys-typescale-title-small-font-weight); - font-size: var(--md-sys-typescale-title-small-font-size); - letter-spacing: var(--md-sys-typescale-title-small-letter-spacing); - line-height: var(--md-sys-typescale-title-small-line-height); - text-transform: var(--md-sys-typescale-title-small-text-transform); - text-decoration: var(--md-sys-typescale-title-small-text-decoration); -} + 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); } html { font-family: Roboto, serif; color: var(--md-sys-color-on-surface); - background-color: var(--md-sys-color-surface-container); -} + background-color: var(--md-sys-color-surface-container); } .m3 { - user-select: none; -} + user-select: none; } .m3.m3-wrapper { position: relative; display: block; background-color: var(--md-sys-color-surface); - border-radius: 25px; -} + border-radius: 25px; } /*# sourceMappingURL=generics.css.map */ diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 0fda353..3ab4b76 100644 --- a/src/styles/generics.css.map +++ b/src/styles/generics.css.map @@ -1 +1,7 @@ -{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAsBQ;AACA;ACZJ;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;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECzBA;;AD4BA;ECtBA;;AD0BA;ECxCA;;AD2CA;ECrCA;;ADyCI;EACI;;AAER;EACI;;AAEJ;EACI;;;AElFR;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;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;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;E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ACA;;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;;;AC7JhB;EZCI;EACA;EACA;EACA;EACA;EYHA;EACA;;AACA;EZIA;EACA;EACA;EACA;EACA;;;AYLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;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;;;ACpGhB;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;;;ACvNhB;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;;;AC5IF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACpSF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AlB/IF;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"} \ No newline at end of file +{ +"version": 3, +"mappings": "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", +"sources": ["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.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/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"], +"names": [], +"file": "generics.css" +} diff --git a/src/styles/generics.sass b/src/styles/generics.sass index 15d60db..82bcb63 100644 --- a/src/styles/generics.sass +++ b/src/styles/generics.sass @@ -11,15 +11,16 @@ @import "button-styles/fabs" @import "button-styles/button" @import "button-styles/icon-button" +@import "button-styles/segmented-button" @import "input-styles/radio" @import "input-styles/swtich" @import "input-styles/checkbox" @import "input-styles/text-field" -@import "./themes/tokens" -@import "./themes/colors.module" -@import "./themes/typography.module" +@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)