opui-css 3.2.1 → 3.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/op.css
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Open Props
|
|
3
|
+
* Import as many props as you need here.
|
|
4
|
+
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
5
|
+
*/
|
|
6
|
+
@custom-media --motionOK (prefers-reduced-motion: no-preference);
|
|
7
|
+
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
|
|
8
|
+
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
|
|
9
|
+
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
|
|
10
|
+
@custom-media --useDataOK (prefers-reduced-data: no-preference);
|
|
11
|
+
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
|
|
12
|
+
@custom-media --OSdark (prefers-color-scheme: dark);
|
|
13
|
+
@custom-media --OSlight (prefers-color-scheme: light);
|
|
14
|
+
@custom-media --highContrast (prefers-contrast: more);
|
|
15
|
+
@custom-media --lowContrast (prefers-contrast: less);
|
|
16
|
+
@custom-media --portrait (orientation: portrait);
|
|
17
|
+
@custom-media --landscape (orientation: landscape);
|
|
18
|
+
@custom-media --HDcolor (dynamic-range: high);
|
|
19
|
+
@custom-media --touch (hover: none) and (pointer: coarse);
|
|
20
|
+
@custom-media --stylus (hover: none) and (pointer: fine);
|
|
21
|
+
@custom-media --pointer (hover) and (pointer: coarse);
|
|
22
|
+
@custom-media --mouse (hover) and (pointer: fine);
|
|
23
|
+
@custom-media --xxs-only (0px <= width <= 240px);
|
|
24
|
+
@custom-media --xxs-n-above (width >= 240px);
|
|
25
|
+
@custom-media --xxs-n-below (width < 240px);
|
|
26
|
+
@custom-media --xxs-phone (--xxs-only) and (--portrait);
|
|
27
|
+
@custom-media --xs-only (240px <= width <= 360px);
|
|
28
|
+
@custom-media --xs-n-above (width >= 360px);
|
|
29
|
+
@custom-media --xs-n-below (width < 360px);
|
|
30
|
+
@custom-media --xs-phone (--xs-only) and (--portrait);
|
|
31
|
+
@custom-media --sm-only (360px <= width <= 480px);
|
|
32
|
+
@custom-media --sm-n-above (width >= 480px);
|
|
33
|
+
@custom-media --sm-n-below (width < 480px);
|
|
34
|
+
@custom-media --sm-phone (--sm-only) and (--portrait);
|
|
35
|
+
@custom-media --md-only (480px <= width <= 768px);
|
|
36
|
+
@custom-media --md-n-above (width >= 768px);
|
|
37
|
+
@custom-media --md-n-below (width < 768px);
|
|
38
|
+
@custom-media --md-phone (--md-only) and (--portrait);
|
|
39
|
+
@custom-media --lg-only (768px <= width <= 1024px);
|
|
40
|
+
@custom-media --lg-n-above (width >= 1024px);
|
|
41
|
+
@custom-media --lg-n-below (width < 1024px);
|
|
42
|
+
@custom-media --lg-phone (--lg-only) and (--portrait);
|
|
43
|
+
@custom-media --xl-only (1024px <= width <= 1440px);
|
|
44
|
+
@custom-media --xl-n-above (width >= 1440px);
|
|
45
|
+
@custom-media --xl-n-below (width < 1440px);
|
|
46
|
+
@custom-media --xxl-only (1440px <= width <= 1920px);
|
|
47
|
+
@custom-media --xxl-n-above (width >= 1920px);
|
|
48
|
+
@custom-media --xxl-n-below (width < 1920px);
|
|
49
|
+
@layer openprops{
|
|
50
|
+
:where(:root){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-bottom:var(--layer-1);--layer-top:var(--layer-5);--layer-important:2147480000;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:100000px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%)*100000,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%)*100000,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%)*100000,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%)*100000,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%)*100000,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%)*100000,var(--radius-6))}*{--shadow-strength:1%;--shadow-chroma:3%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 #0001;--shadow-1:0 1px 2px -1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight)}@media (prefers-color-scheme:dark){*{--shadow-strength:25%;--shadow-chroma:10%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff1,inset 0 .5px 0 0 #0007}}:where(:root){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-.5,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-spring-1:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,.007,.029 2.2%,.118 4.7%,.625 14.4%,.826 19%,.902,.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,.999 61.6%,.995 71.2%,1);--ease-spring-3:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,.009,.037 1.7%,.153 3.6%,.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,.973,.955 39.2%,.953 41.1%,.957 43.3%,.998 53.3%,1.009 59.1% 63.7%,.998 78.9%,1);--ease-spring-5:linear(0,.01,.04 1.6%,.161 3.3%,.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,.999 29.4%,.955 32.1%,.942,.935 34.9%,.933,.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,.004,.016,.035,.063,.098,.141,.191,.25,.316,.391 36.8%,.563,.766,1 58.8%,.946,.908 69.1%,.895,.885,.879,.878,.879,.885,.895,.908 89.7%,.946,1);--ease-bounce-2:linear(0,.004,.016,.035,.063,.098,.141 15.1%,.25,.391,.562,.765,1,.892 45.2%,.849,.815,.788,.769,.757,.753,.757,.769,.788,.815,.85,.892 75.2%,1 80.2%,.973,.954,.943,.939,.943,.954,.973,1);--ease-bounce-3:linear(0,.004,.016,.035,.062,.098,.141 11.4%,.25,.39,.562,.764,1 30.3%,.847 34.8%,.787,.737,.699,.672,.655,.65,.656,.672,.699,.738,.787,.847 61.7%,1 66.2%,.946,.908,.885 74.2%,.879,.878,.879,.885 79.5%,.908,.946,1 87.4%,.981,.968,.96,.957,.96,.968,.981,1);--ease-bounce-4:linear(0,.004,.016 3%,.062,.141,.25,.391,.562 18.2%,1 24.3%,.81,.676 32.3%,.629,.595,.575,.568,.575,.595,.629,.676 48.2%,.811,1 56.2%,.918,.86,.825,.814,.825,.86,.918,1 77.2%,.94 80.6%,.925,.92,.925,.94 87.5%,1 90.9%,.974,.965,.974,1);--ease-bounce-5:linear(0,.004,.016 2.5%,.063,.141,.25 10.1%,.562,1 20.2%,.783,.627,.534 30.9%,.511,.503,.511,.534 38%,.627,.782,1 48.7%,.892,.815,.769 56.3%,.757,.753,.757,.769 61.3%,.815,.892,1 68.8%,.908 72.4%,.885,.878,.885,.908 79.4%,1 83%,.954 85.5%,.943,.939,.943,.954 90.5%,1 93%,.977,.97,.977,1)}:where(:root){--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:.15}*{--color-1:oklch(98% calc(.03*var(--palette-chroma,1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));--color-2:oklch(97% calc(.06*var(--palette-chroma,1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));--color-3:oklch(93% calc(.1*var(--palette-chroma,1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));--color-4:oklch(84% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));--color-5:oklch(80% calc(.16*var(--palette-chroma,1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));--color-6:oklch(71% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));--color-7:oklch(66% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));--color-8:oklch(58% calc(.21*var(--palette-chroma,1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));--color-9:oklch(53% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));--color-10:oklch(49% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));--color-11:oklch(42% calc(.17*var(--palette-chroma,1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));--color-12:oklch(35% calc(.15*var(--palette-chroma,1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));--color-13:oklch(27% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));--color-14:oklch(20% calc(.09*var(--palette-chroma,1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));--color-15:oklch(16% calc(.07*var(--palette-chroma,1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));--color-16:oklch(10% calc(.05*var(--palette-chroma,1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by))))}}
|
|
51
|
+
@layer openprops{
|
|
52
|
+
:where(:root) {
|
|
53
|
+
--size-xxs: 240px;
|
|
54
|
+
--size-xs: 360px;
|
|
55
|
+
--size-sm: 480px;
|
|
56
|
+
--size-md: 768px;
|
|
57
|
+
--size-lg: 1024px;
|
|
58
|
+
--size-xl: 1440px;
|
|
59
|
+
--size-xxl: 1920px;
|
|
60
|
+
}}
|
|
61
|
+
@layer openprops{
|
|
62
|
+
:where(:root) {
|
|
63
|
+
--font-lineheight-00: 0.95;
|
|
64
|
+
--font-lineheight-0: 1.1;
|
|
65
|
+
--font-lineheight-1: 1.25;
|
|
66
|
+
--font-lineheight-2: 1.375;
|
|
67
|
+
--font-lineheight-3: 1.5;
|
|
68
|
+
--font-lineheight-4: 1.75;
|
|
69
|
+
--font-lineheight-5: 2;
|
|
70
|
+
}}
|
|
71
|
+
@layer openprops{
|
|
72
|
+
:where(:root){--oklch-red:25;--oklch-pink:350;--oklch-purple:310;--oklch-violet:290;--oklch-indigo:270;--oklch-blue:240;--oklch-cyan:210;--oklch-teal:185;--oklch-green:145;--oklch-lime:125;--oklch-yellow:100;--oklch-orange:75}}
|
package/dist/theme-one.css
CHANGED
|
@@ -1972,8 +1972,8 @@
|
|
|
1972
1972
|
&::before {
|
|
1973
1973
|
background-color: var(--_accent-color);
|
|
1974
1974
|
border-color: var(--_accent-color);
|
|
1975
|
-
transition:
|
|
1976
|
-
|
|
1975
|
+
transition:
|
|
1976
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
1977
1977
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
1978
1978
|
}
|
|
1979
1979
|
|
|
@@ -1992,8 +1992,8 @@
|
|
|
1992
1992
|
@media (prefers-reduced-motion: no-preference) {
|
|
1993
1993
|
/* Track */
|
|
1994
1994
|
&::before {
|
|
1995
|
-
transition:
|
|
1996
|
-
|
|
1995
|
+
transition:
|
|
1996
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
1997
1997
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
1998
1998
|
}
|
|
1999
1999
|
|
|
@@ -2014,6 +2014,42 @@
|
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
2016
2016
|
|
|
2017
|
+
/* Icons */
|
|
2018
|
+
&:has(.icon-checked, .icon-unchecked) {
|
|
2019
|
+
[role="switch"] {
|
|
2020
|
+
grid-column: 1 / -1;
|
|
2021
|
+
grid-row: 1;
|
|
2022
|
+
}
|
|
2023
|
+
|
|
2024
|
+
&:has([role="switch"]:checked) {
|
|
2025
|
+
.icon-unchecked {
|
|
2026
|
+
display: none;
|
|
2027
|
+
}
|
|
2028
|
+
.icon-checked {
|
|
2029
|
+
display: block;
|
|
2030
|
+
}
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
.icon-checked {
|
|
2034
|
+
display: none;
|
|
2035
|
+
}
|
|
2036
|
+
|
|
2037
|
+
svg {
|
|
2038
|
+
grid-column: 1;
|
|
2039
|
+
grid-row: 1;
|
|
2040
|
+
inline-size: var(--_dot-size);
|
|
2041
|
+
margin-inline-start: calc(
|
|
2042
|
+
var(--_track-width) - var(--_dot-size) - var(--size-1)
|
|
2043
|
+
);
|
|
2044
|
+
pointer-events: none;
|
|
2045
|
+
z-index: 1;
|
|
2046
|
+
|
|
2047
|
+
&.icon-checked {
|
|
2048
|
+
margin-inline-start: var(--size-1);
|
|
2049
|
+
}
|
|
2050
|
+
}
|
|
2051
|
+
}
|
|
2052
|
+
|
|
2017
2053
|
/* Required dot */
|
|
2018
2054
|
&:has([required]:not(:checked)) {
|
|
2019
2055
|
.label:after {
|
package/dist/theme-two.css
CHANGED
|
@@ -1922,8 +1922,8 @@
|
|
|
1922
1922
|
&::before {
|
|
1923
1923
|
background-color: var(--_accent-color);
|
|
1924
1924
|
border-color: var(--_accent-color);
|
|
1925
|
-
transition:
|
|
1926
|
-
|
|
1925
|
+
transition:
|
|
1926
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
1927
1927
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
1928
1928
|
}
|
|
1929
1929
|
|
|
@@ -1942,8 +1942,8 @@
|
|
|
1942
1942
|
@media (prefers-reduced-motion: no-preference) {
|
|
1943
1943
|
/* Track */
|
|
1944
1944
|
&::before {
|
|
1945
|
-
transition:
|
|
1946
|
-
|
|
1945
|
+
transition:
|
|
1946
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
1947
1947
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
1948
1948
|
}
|
|
1949
1949
|
|
|
@@ -1964,6 +1964,42 @@
|
|
|
1964
1964
|
}
|
|
1965
1965
|
}
|
|
1966
1966
|
|
|
1967
|
+
/* Icons */
|
|
1968
|
+
&:has(.icon-checked, .icon-unchecked) {
|
|
1969
|
+
[role="switch"] {
|
|
1970
|
+
grid-column: 1 / -1;
|
|
1971
|
+
grid-row: 1;
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
&:has([role="switch"]:checked) {
|
|
1975
|
+
.icon-unchecked {
|
|
1976
|
+
display: none;
|
|
1977
|
+
}
|
|
1978
|
+
.icon-checked {
|
|
1979
|
+
display: block;
|
|
1980
|
+
}
|
|
1981
|
+
}
|
|
1982
|
+
|
|
1983
|
+
.icon-checked {
|
|
1984
|
+
display: none;
|
|
1985
|
+
}
|
|
1986
|
+
|
|
1987
|
+
svg {
|
|
1988
|
+
grid-column: 1;
|
|
1989
|
+
grid-row: 1;
|
|
1990
|
+
inline-size: var(--_dot-size);
|
|
1991
|
+
margin-inline-start: calc(
|
|
1992
|
+
var(--_track-width) - var(--_dot-size) - var(--size-1)
|
|
1993
|
+
);
|
|
1994
|
+
pointer-events: none;
|
|
1995
|
+
z-index: 1;
|
|
1996
|
+
|
|
1997
|
+
&.icon-checked {
|
|
1998
|
+
margin-inline-start: var(--size-1);
|
|
1999
|
+
}
|
|
2000
|
+
}
|
|
2001
|
+
}
|
|
2002
|
+
|
|
1967
2003
|
/* Required dot */
|
|
1968
2004
|
&:has([required]:not(:checked)) {
|
|
1969
2005
|
.label:after {
|
package/package.json
CHANGED
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
&::before {
|
|
66
66
|
background-color: var(--_accent-color);
|
|
67
67
|
border-color: var(--_accent-color);
|
|
68
|
-
transition:
|
|
69
|
-
|
|
68
|
+
transition:
|
|
69
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
70
70
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
71
71
|
}
|
|
72
72
|
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
@media (prefers-reduced-motion: no-preference) {
|
|
86
86
|
/* Track */
|
|
87
87
|
&::before {
|
|
88
|
-
transition:
|
|
89
|
-
|
|
88
|
+
transition:
|
|
89
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
90
90
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
91
91
|
}
|
|
92
92
|
|
|
@@ -107,6 +107,42 @@
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
+
/* Icons */
|
|
111
|
+
&:has(.icon-checked, .icon-unchecked) {
|
|
112
|
+
[role="switch"] {
|
|
113
|
+
grid-column: 1 / -1;
|
|
114
|
+
grid-row: 1;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&:has([role="switch"]:checked) {
|
|
118
|
+
.icon-unchecked {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
.icon-checked {
|
|
122
|
+
display: block;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.icon-checked {
|
|
127
|
+
display: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
svg {
|
|
131
|
+
grid-column: 1;
|
|
132
|
+
grid-row: 1;
|
|
133
|
+
inline-size: var(--_dot-size);
|
|
134
|
+
margin-inline-start: calc(
|
|
135
|
+
var(--_track-width) - var(--_dot-size) - var(--size-1)
|
|
136
|
+
);
|
|
137
|
+
pointer-events: none;
|
|
138
|
+
z-index: 1;
|
|
139
|
+
|
|
140
|
+
&.icon-checked {
|
|
141
|
+
margin-inline-start: var(--size-1);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
110
146
|
/* Required dot */
|
|
111
147
|
&:has([required]:not(:checked)) {
|
|
112
148
|
.label:after {
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
&::before {
|
|
66
66
|
background-color: var(--_accent-color);
|
|
67
67
|
border-color: var(--_accent-color);
|
|
68
|
-
transition:
|
|
69
|
-
|
|
68
|
+
transition:
|
|
69
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
70
70
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
71
71
|
}
|
|
72
72
|
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
@media (prefers-reduced-motion: no-preference) {
|
|
86
86
|
/* Track */
|
|
87
87
|
&::before {
|
|
88
|
-
transition:
|
|
89
|
-
|
|
88
|
+
transition:
|
|
89
|
+
background-color var(--_transition-time) var(--_transition-tf),
|
|
90
90
|
border-color var(--_transition-time) var(--_transition-tf);
|
|
91
91
|
}
|
|
92
92
|
|
|
@@ -107,6 +107,42 @@
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
+
/* Icons */
|
|
111
|
+
&:has(.icon-checked, .icon-unchecked) {
|
|
112
|
+
[role="switch"] {
|
|
113
|
+
grid-column: 1 / -1;
|
|
114
|
+
grid-row: 1;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&:has([role="switch"]:checked) {
|
|
118
|
+
.icon-unchecked {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
.icon-checked {
|
|
122
|
+
display: block;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.icon-checked {
|
|
127
|
+
display: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
svg {
|
|
131
|
+
grid-column: 1;
|
|
132
|
+
grid-row: 1;
|
|
133
|
+
inline-size: var(--_dot-size);
|
|
134
|
+
margin-inline-start: calc(
|
|
135
|
+
var(--_track-width) - var(--_dot-size) - var(--size-1)
|
|
136
|
+
);
|
|
137
|
+
pointer-events: none;
|
|
138
|
+
z-index: 1;
|
|
139
|
+
|
|
140
|
+
&.icon-checked {
|
|
141
|
+
margin-inline-start: var(--size-1);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
110
146
|
/* Required dot */
|
|
111
147
|
&:has([required]:not(:checked)) {
|
|
112
148
|
.label:after {
|