@splendidlabz/styles 3.0.0-alpha.3 → 3.0.0-beta.6
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/package.json +7 -6
- package/src/animation/animation.css +14 -0
- package/src/animation/fly.css +74 -0
- package/src/animation/index.css +2 -0
- package/src/components/accordion.css +1 -0
- package/src/components/drawer.css +23 -17
- package/src/components/index.css +2 -0
- package/src/components/modal.css +60 -0
- package/src/components/popover.css +36 -0
- package/src/effects/fancy-box.css +259 -0
- package/src/effects/gradients.css +8 -9
- package/src/effects/index.css +1 -0
- package/src/form/checkbox-and-radio.css +137 -0
- package/src/form/index.css +3 -1
- package/src/form/{text-field.css → input.css} +5 -17
- package/src/form/select.css +55 -0
- package/src/generic/anchors-and-buttons.css +10 -6
- package/src/generic/form.css +1 -7
- package/src/layouts/macro/grid.css +35 -6
- package/src/layouts/position/fixed.css +80 -49
- package/src/primitives/index.css +0 -2
- package/src/reset.css +1 -2
- package/src/styles.css +2 -0
- package/src/tools/object.css +4 -1
- package/src/tools/outlines.css +30 -0
- package/src/tools/transitions.css +13 -2
- package/src/transitions/index.css +1 -0
- package/src/transitions/starting-style.css +74 -0
- package/src/primitives/backdrop.css +0 -8
- package/src/primitives/focus-within.css +0 -12
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@splendidlabz/styles",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.6",
|
|
4
4
|
"description": "",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"author": "Zell Liew <zellwk@gmail.com>",
|
|
6
7
|
"files": [
|
|
7
8
|
"src",
|
|
@@ -26,13 +27,13 @@
|
|
|
26
27
|
"build": "npm run build-styles & npm run build-layouts"
|
|
27
28
|
},
|
|
28
29
|
"dependencies": {
|
|
29
|
-
"@splendidlabz/utils": "1.5.0-alpha.
|
|
30
|
+
"@splendidlabz/utils": "1.5.0-alpha.3"
|
|
30
31
|
},
|
|
31
32
|
"devDependencies": {
|
|
32
|
-
"@splendidlabz/stylelint-config": "3.0.0-alpha.
|
|
33
|
-
"@tailwindcss/cli": "^4.
|
|
34
|
-
"lightningcss-cli": "^1.29.
|
|
35
|
-
"tailwindcss": "^4.
|
|
33
|
+
"@splendidlabz/stylelint-config": "3.0.0-alpha.3",
|
|
34
|
+
"@tailwindcss/cli": "^4.1.3",
|
|
35
|
+
"lightningcss-cli": "^1.29.3",
|
|
36
|
+
"tailwindcss": "^4.1.3",
|
|
36
37
|
"turbowatch": "^2.29.4"
|
|
37
38
|
}
|
|
38
39
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@utility animation {
|
|
2
|
+
& {
|
|
3
|
+
--_duration: var(--animation-duration, var(--transition-duration));
|
|
4
|
+
--_delay: var(--animation-delay, var(--transition-delay));
|
|
5
|
+
--_easing: var(--animation-easing, var(--transition-easing));
|
|
6
|
+
--_direction: var(--animation-direction, normal);
|
|
7
|
+
--_play-state: var(--animation-play-state, running);
|
|
8
|
+
--_fill-mode: var(--animation-fill-mode, none);
|
|
9
|
+
--_iteration-count: var(--animation-iteration-count, 1);
|
|
10
|
+
animation: var(--animation-name) var(--_duration) var(--_delay)
|
|
11
|
+
var(--_easing) var(--_direction) var(--_play-state) var(--_fill-mode)
|
|
12
|
+
var(--_iteration-count);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@keyframes fly {
|
|
2
|
+
from {
|
|
3
|
+
opacity: var(--from-opacity, 0);
|
|
4
|
+
transform: translate(var(--from-x, 0), var(--from-y, 0));
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
to {
|
|
8
|
+
opacity: var(--to-opacity, 1);
|
|
9
|
+
transform: translate(var(--to-x, 0), var(--to-y, 0));
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@utility animation-fly {
|
|
14
|
+
& {
|
|
15
|
+
@apply animation;
|
|
16
|
+
--animation-name: fly;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@utility animation-fly-in-left {
|
|
21
|
+
@apply animation-fly;
|
|
22
|
+
--from-x: -100%;
|
|
23
|
+
--to-x: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@utility animation-fly-in-right {
|
|
27
|
+
@apply animation-fly;
|
|
28
|
+
--from-x: 100%;
|
|
29
|
+
--to-x: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@utility animation-fly-in-top {
|
|
33
|
+
@apply animation-fly;
|
|
34
|
+
--from-y: -100%;
|
|
35
|
+
--to-y: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@utility animation-fly-in-bottom {
|
|
39
|
+
@apply animation-fly;
|
|
40
|
+
--from-y: 100%;
|
|
41
|
+
--to-y: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@utility animation-fly-out-left {
|
|
45
|
+
@apply animation-fly;
|
|
46
|
+
--from-x: 0;
|
|
47
|
+
--to-x: -100%;
|
|
48
|
+
--from-opacity: 1;
|
|
49
|
+
--to-opacity: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@utility animation-fly-out-right {
|
|
53
|
+
@apply animation-fly;
|
|
54
|
+
--from-x: 0;
|
|
55
|
+
--to-x: 100%;
|
|
56
|
+
--from-opacity: 1;
|
|
57
|
+
--to-opacity: 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@utility animation-fly-out-top {
|
|
61
|
+
@apply animation-fly;
|
|
62
|
+
--from-y: 0;
|
|
63
|
+
--to-y: -100%;
|
|
64
|
+
--from-opacity: 1;
|
|
65
|
+
--to-opacity: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@utility animation-fly-out-bottom {
|
|
69
|
+
@apply animation-fly;
|
|
70
|
+
--from-y: 0;
|
|
71
|
+
--to-y: 100%;
|
|
72
|
+
--from-opacity: 1;
|
|
73
|
+
--to-opacity: 0;
|
|
74
|
+
}
|
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
1
|
+
/* @utility backdrop {
|
|
2
|
+
position: fixed;
|
|
3
|
+
inset: 0;
|
|
4
|
+
z-index: 200;
|
|
5
|
+
background-color: oklch(0% 0 0deg / 50%);
|
|
6
|
+
} */
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
8
|
+
/* // Note to self: */
|
|
9
|
+
/* // Need to create another Class to contain default z-index for Absolute Drawers — so this doesn't show above it. */
|
|
10
|
+
@utility drawer-content {
|
|
11
|
+
overflow-y: auto;
|
|
12
|
+
z-index: 100;
|
|
13
|
+
}
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
15
|
+
@utility drawer-close-button {
|
|
16
|
+
@apply button-icon;
|
|
20
17
|
}
|
|
18
|
+
|
|
19
|
+
/* Attributes */
|
|
20
|
+
/* open -> nonmodal. Needs for dialog to be visible */
|
|
21
|
+
|
|
22
|
+
/* Methods */
|
|
23
|
+
/* showmodal -> modal */
|
|
24
|
+
/* show -> non-modal */
|
|
25
|
+
/* close -> close */
|
|
26
|
+
/* Focus on first item otherwise */
|
package/src/components/index.css
CHANGED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
/* Prevent scroll when modal is open */
|
|
3
|
+
|
|
4
|
+
html:has(.modal) {
|
|
5
|
+
@apply transition-scaffold;
|
|
6
|
+
--transition-props: overflow;
|
|
7
|
+
transition-duration: 300ms;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
html:has(.modal[open]) {
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
transition-delay: 0s;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.modal:not([open]) {
|
|
16
|
+
pointer-events: none;
|
|
17
|
+
opacity: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Position fixed and some inset has been automatically applied */
|
|
21
|
+
|
|
22
|
+
/* Base/Closing Style */
|
|
23
|
+
.modal {
|
|
24
|
+
@apply border-scaffold;
|
|
25
|
+
margin: auto;
|
|
26
|
+
padding: 2rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.modal::backdrop {
|
|
30
|
+
backdrop-filter: blur(var(--blur, 0));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.modal,
|
|
34
|
+
.modal::backdrop {
|
|
35
|
+
@apply transition-scaffold;
|
|
36
|
+
--transition-duration: 300ms;
|
|
37
|
+
--transition-easing: ease-in;
|
|
38
|
+
opacity: 0;
|
|
39
|
+
transition-property: var(--transition-props);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Opened Style */
|
|
43
|
+
.modal[open],
|
|
44
|
+
.modal[open]::backdrop {
|
|
45
|
+
--transition-easing: ease-out;
|
|
46
|
+
opacity: 1;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.modal[open]::backdrop {
|
|
50
|
+
background-color: oklch(0% 0 0deg / 50%);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@starting-style {
|
|
54
|
+
.modal[open],
|
|
55
|
+
.modal[open]::backdrop {
|
|
56
|
+
--blur: 0;
|
|
57
|
+
opacity: 0;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
[popover] {
|
|
3
|
+
@apply border-scaffold;
|
|
4
|
+
@apply transition-scaffold;
|
|
5
|
+
--transition-duration: 300ms;
|
|
6
|
+
--transition-easing: ease-out;
|
|
7
|
+
position: absolute;
|
|
8
|
+
max-width: 100%;
|
|
9
|
+
padding: 1rem;
|
|
10
|
+
opacity: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
[popover]:popover-open {
|
|
14
|
+
--transition-easing: ease-in;
|
|
15
|
+
opacity: 1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@starting-style {
|
|
19
|
+
[popover]:popover-open {
|
|
20
|
+
opacity: 0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* All modals should use `dialog` element with the `modal` class. */
|
|
25
|
+
/* They should not use [popover] dialogs with backdrops are modals — it only gives the right affordance this way. */
|
|
26
|
+
|
|
27
|
+
[popover]::backdrop {
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[popover] > .content,
|
|
33
|
+
.popover-content {
|
|
34
|
+
overflow: auto;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* --inner-gradient: linear-gradient(var(--gradient-angle), #563444, #4ecdc4); */
|
|
3
|
+
/* --bg-color: transparent;
|
|
4
|
+
--outer-gradient: linear-gradient(
|
|
5
|
+
var(--gradient-angle) in oklch,
|
|
6
|
+
rgb(112 190 190) 0%,
|
|
7
|
+
rgb(13 13 98)
|
|
8
|
+
);
|
|
9
|
+
--text-color: white; */
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@utility fancy-box {
|
|
13
|
+
& {
|
|
14
|
+
@apply border-scaffold;
|
|
15
|
+
--a: var(--arrow-angle, 90deg);
|
|
16
|
+
--h: var(--arrow-height, 0.75em);
|
|
17
|
+
--p: var(--arrow-position, 50%);
|
|
18
|
+
--b: var(--border-width);
|
|
19
|
+
--r: var(--radius);
|
|
20
|
+
--_bg-gradient-fallback: linear-gradient(
|
|
21
|
+
var(--bg-color, transparent),
|
|
22
|
+
var(--bg-color, transparent)
|
|
23
|
+
);
|
|
24
|
+
--_border-gradient-fallback: linear-gradient(
|
|
25
|
+
var(--border-color),
|
|
26
|
+
var(--border-color)
|
|
27
|
+
);
|
|
28
|
+
overflow: visible;
|
|
29
|
+
position: relative;
|
|
30
|
+
z-index: 0;
|
|
31
|
+
padding: 0.5em; /* To remove */
|
|
32
|
+
border-width: var(--b);
|
|
33
|
+
border-color: transparent;
|
|
34
|
+
color: var(--text-color);
|
|
35
|
+
background:
|
|
36
|
+
padding-box var(--inner-gradient, var(--_bg-gradient-fallback)),
|
|
37
|
+
border-box var(--outer-gradient, var(--_border-gradient-fallback));
|
|
38
|
+
|
|
39
|
+
/* animation: rotate-angle 10s linear infinite paused; */
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@utility fancy-box-arrow {
|
|
44
|
+
& {
|
|
45
|
+
@apply fancy-box;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&.arrow-top,
|
|
49
|
+
&.arrow-bottom {
|
|
50
|
+
background-size: 100% calc(100% + var(--h));
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&.arrow-left,
|
|
54
|
+
&.arrow-right {
|
|
55
|
+
background-size: calc(100% + var(--h)) 100%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&::before,
|
|
59
|
+
&::after {
|
|
60
|
+
content: '';
|
|
61
|
+
position: absolute;
|
|
62
|
+
inset: calc(-1 * var(--b));
|
|
63
|
+
z-index: -1;
|
|
64
|
+
background: inherit;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&::before {
|
|
68
|
+
background-size:
|
|
69
|
+
0 0,
|
|
70
|
+
100% 100%;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&::after {
|
|
74
|
+
border: inherit;
|
|
75
|
+
background-size:
|
|
76
|
+
100% 100%,
|
|
77
|
+
0 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.arrow-top {
|
|
81
|
+
border-radius: min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
|
|
82
|
+
min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r)
|
|
83
|
+
var(--r) / var(--r);
|
|
84
|
+
background-position: bottom;
|
|
85
|
+
|
|
86
|
+
&::before,
|
|
87
|
+
&::after {
|
|
88
|
+
top: calc(-1 * var(--b) - var(--h));
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&::before {
|
|
92
|
+
clip-path: polygon(
|
|
93
|
+
min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
|
|
94
|
+
calc(var(--h) + var(--b)),
|
|
95
|
+
min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) var(--h),
|
|
96
|
+
var(--p) 0,
|
|
97
|
+
max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) var(--h),
|
|
98
|
+
max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
|
|
99
|
+
calc(var(--h) + var(--b))
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&::after {
|
|
104
|
+
clip-path: polygon(
|
|
105
|
+
min(
|
|
106
|
+
100% - var(--b),
|
|
107
|
+
var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
|
|
108
|
+
tan(45deg - var(--a) / 4)
|
|
109
|
+
)
|
|
110
|
+
calc(var(--h) + var(--b)),
|
|
111
|
+
var(--p) calc(var(--b) / sin(var(--a) / 2)),
|
|
112
|
+
max(
|
|
113
|
+
var(--b),
|
|
114
|
+
var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
|
|
115
|
+
tan(45deg - var(--a) / 4)
|
|
116
|
+
)
|
|
117
|
+
calc(var(--h) + var(--b)),
|
|
118
|
+
50% 50%
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&.arrow-bottom {
|
|
124
|
+
border-radius: var(--r) var(--r)
|
|
125
|
+
min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2))
|
|
126
|
+
min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) / var(--r);
|
|
127
|
+
|
|
128
|
+
&::before,
|
|
129
|
+
&::after {
|
|
130
|
+
bottom: calc(-1 * var(--b) - var(--h));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&::before {
|
|
134
|
+
clip-path: polygon(
|
|
135
|
+
min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
|
|
136
|
+
calc(100% - var(--h) - var(--b)),
|
|
137
|
+
min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
|
|
138
|
+
var(--p) 100%,
|
|
139
|
+
max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
|
|
140
|
+
max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
|
|
141
|
+
calc(100% - var(--h) - var(--b))
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&::after {
|
|
146
|
+
clip-path: polygon(
|
|
147
|
+
min(
|
|
148
|
+
100% - var(--b),
|
|
149
|
+
var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
|
|
150
|
+
tan(45deg - var(--a) / 4)
|
|
151
|
+
)
|
|
152
|
+
calc(100% - var(--h) - var(--b)),
|
|
153
|
+
var(--p) calc(100% - var(--b) / sin(var(--a) / 2)),
|
|
154
|
+
max(
|
|
155
|
+
var(--b),
|
|
156
|
+
var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
|
|
157
|
+
tan(45deg - var(--a) / 4)
|
|
158
|
+
)
|
|
159
|
+
calc(100% - var(--h) - var(--b)),
|
|
160
|
+
50% 50%
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&.arrow-left {
|
|
166
|
+
border-radius: var(--r) /
|
|
167
|
+
min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) var(--r)
|
|
168
|
+
min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2));
|
|
169
|
+
background-position: right;
|
|
170
|
+
|
|
171
|
+
&::before,
|
|
172
|
+
&::after {
|
|
173
|
+
left: calc(-1 * var(--b) - var(--h));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&::before {
|
|
177
|
+
clip-path: polygon(
|
|
178
|
+
calc(var(--h) + var(--b))
|
|
179
|
+
min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
|
|
180
|
+
var(--h) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
|
|
181
|
+
0 var(--p),
|
|
182
|
+
var(--h) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
|
|
183
|
+
calc(var(--h) + var(--b))
|
|
184
|
+
max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
&::after {
|
|
189
|
+
clip-path: polygon(
|
|
190
|
+
calc(var(--h) + var(--b))
|
|
191
|
+
min(
|
|
192
|
+
100% - var(--b),
|
|
193
|
+
var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
|
|
194
|
+
tan(45deg - var(--a) / 4)
|
|
195
|
+
),
|
|
196
|
+
calc(var(--b) / sin(var(--a) / 2)) var(--p),
|
|
197
|
+
calc(var(--h) + var(--b))
|
|
198
|
+
max(
|
|
199
|
+
var(--b),
|
|
200
|
+
var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
|
|
201
|
+
tan(45deg - var(--a) / 4)
|
|
202
|
+
),
|
|
203
|
+
50% 50%
|
|
204
|
+
);
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
&.arrow-right {
|
|
209
|
+
border-radius: var(--r) / var(--r)
|
|
210
|
+
min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
|
|
211
|
+
min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r);
|
|
212
|
+
|
|
213
|
+
&::before,
|
|
214
|
+
&::after {
|
|
215
|
+
right: calc(-1 * var(--b) - var(--h));
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
&::before {
|
|
219
|
+
clip-path: polygon(
|
|
220
|
+
calc(100% - var(--h) - var(--b))
|
|
221
|
+
min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
|
|
222
|
+
calc(100% - var(--h)) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
|
|
223
|
+
100% var(--p),
|
|
224
|
+
calc(100% - var(--h)) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
|
|
225
|
+
calc(100% - var(--h) - var(--b))
|
|
226
|
+
max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
&::after {
|
|
231
|
+
clip-path: polygon(
|
|
232
|
+
calc(100% - var(--h) - var(--b))
|
|
233
|
+
min(
|
|
234
|
+
100% - var(--b),
|
|
235
|
+
var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
|
|
236
|
+
tan(45deg - var(--a) / 4)
|
|
237
|
+
),
|
|
238
|
+
calc(100% - var(--b) / sin(var(--a) / 2)) var(--p),
|
|
239
|
+
calc(100% - var(--h) - var(--b))
|
|
240
|
+
max(
|
|
241
|
+
var(--b),
|
|
242
|
+
var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
|
|
243
|
+
tan(45deg - var(--a) / 4)
|
|
244
|
+
),
|
|
245
|
+
50% 50%
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
@keyframes rotate-angle {
|
|
252
|
+
from {
|
|
253
|
+
--gradient-angle: 0deg;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
to {
|
|
257
|
+
--gradient-angle: 360deg;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
@property --gradient-angle {
|
|
2
|
+
syntax: '<angle>';
|
|
3
|
+
initial-value: 0deg;
|
|
4
|
+
inherits: false;
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
/* Gradient Defaults */
|
|
2
8
|
@layer base {
|
|
3
9
|
:root {
|
|
@@ -23,17 +29,10 @@
|
|
|
23
29
|
@utility gradient {
|
|
24
30
|
& {
|
|
25
31
|
@apply tw-gradient;
|
|
26
|
-
background
|
|
27
|
-
var(--gradient-angle),
|
|
32
|
+
background: linear-gradient(
|
|
33
|
+
var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
|
|
28
34
|
var(--gradient, var(--tw-gradient))
|
|
29
35
|
);
|
|
30
|
-
|
|
31
|
-
@supports (linear-gradient(in oklab)) {
|
|
32
|
-
background: linear-gradient(
|
|
33
|
-
var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
|
|
34
|
-
var(--gradient, var(--tw-gradient))
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
38
|
|
package/src/effects/index.css
CHANGED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
@utility checkbox-and-radio {
|
|
2
|
+
& {
|
|
3
|
+
--size: 1em;
|
|
4
|
+
--fill-color: none;
|
|
5
|
+
--stroke-color: transparent;
|
|
6
|
+
--fill-checked-color: none;
|
|
7
|
+
--stroke-checked-color: white;
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: 0.5em;
|
|
11
|
+
|
|
12
|
+
> .group {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: start;
|
|
15
|
+
gap: inherit;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.checkmark-container,
|
|
19
|
+
.radiomark-container {
|
|
20
|
+
@apply stack;
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
display: grid;
|
|
23
|
+
place-items: center;
|
|
24
|
+
|
|
25
|
+
.input {
|
|
26
|
+
@apply transition-scaffold;
|
|
27
|
+
@apply focus-outline-visible;
|
|
28
|
+
appearance: none;
|
|
29
|
+
display: grid;
|
|
30
|
+
place-content: center;
|
|
31
|
+
width: var(--size);
|
|
32
|
+
height: var(--size);
|
|
33
|
+
margin-block: calc((1lh - var(--size)) / 2);
|
|
34
|
+
padding: 0;
|
|
35
|
+
border: var(--border-width, 1px) var(--border-style, solid)
|
|
36
|
+
var(--border-color, black);
|
|
37
|
+
font: inherit;
|
|
38
|
+
background-color: var(--bg-color, transparent);
|
|
39
|
+
|
|
40
|
+
&:checked {
|
|
41
|
+
background-color: var(--border-color);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:active {
|
|
45
|
+
transform: scale(0.85);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&[type='checkbox'] {
|
|
49
|
+
border-radius: var(--checkbox-radius, var(--border-radius, 0.25em));
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&[type='radio'] {
|
|
53
|
+
border-radius: 50%;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Checkbox and SVG */
|
|
59
|
+
svg {
|
|
60
|
+
@apply transition-scaffold;
|
|
61
|
+
pointer-events: none;
|
|
62
|
+
transition-property: transform, opacity;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.checkmark {
|
|
66
|
+
width: calc(var(--size) - 2px);
|
|
67
|
+
height: calc(var(--size) - 2px);
|
|
68
|
+
|
|
69
|
+
path {
|
|
70
|
+
@apply transition-scaffold;
|
|
71
|
+
fill: var(--fill-color);
|
|
72
|
+
stroke: var(--stroke-color);
|
|
73
|
+
stroke-width: var(--stroke-width, 3);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.radiomark {
|
|
78
|
+
width: calc(var(--size) * 1);
|
|
79
|
+
height: calc(var(--size) * 1);
|
|
80
|
+
|
|
81
|
+
circle {
|
|
82
|
+
@apply transition-scaffold;
|
|
83
|
+
fill: var(--stroke-color);
|
|
84
|
+
stroke: var(--stroke-color);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Show the SVG/radio item when the input is checked */
|
|
89
|
+
input:checked {
|
|
90
|
+
& ~ svg {
|
|
91
|
+
opacity: 1;
|
|
92
|
+
transform: scale(1);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
& ~ .checkmark path {
|
|
96
|
+
@apply transition-scaffold;
|
|
97
|
+
fill: var(--fill-checked-color);
|
|
98
|
+
stroke: var(--stroke-checked-color);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
& ~ .radiomark circle {
|
|
102
|
+
@apply transition-scaffold;
|
|
103
|
+
fill: var(--stroke-checked-color);
|
|
104
|
+
stroke: var(--stroke-checked-color);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/*********************
|
|
109
|
+
* Text Input that is used along with Checkboxes and Radios *
|
|
110
|
+
* Usually for an others field *
|
|
111
|
+
*********************/
|
|
112
|
+
.text-input {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
:where(.group):has(:checked) ~ .text-input {
|
|
117
|
+
display: block;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@layer utility {
|
|
123
|
+
.checkbox,
|
|
124
|
+
.radio {
|
|
125
|
+
@apply checkbox-and-radio;
|
|
126
|
+
--transition-duration: 125ms;
|
|
127
|
+
--transition-easing: ease-in;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* TODO: Display flex doesn't work on fieldset */
|
|
131
|
+
.fieldset,
|
|
132
|
+
.checkboxes,
|
|
133
|
+
.radios {
|
|
134
|
+
@apply vertical;
|
|
135
|
+
gap: 0.125em;
|
|
136
|
+
}
|
|
137
|
+
}
|
package/src/form/index.css
CHANGED
|
@@ -30,7 +30,10 @@
|
|
|
30
30
|
> :where(astro-slot, astro-content, astro-island) > * {
|
|
31
31
|
padding: var(--padding);
|
|
32
32
|
border-width: 0;
|
|
33
|
-
|
|
33
|
+
|
|
34
|
+
&:where(:not(:first-child, :last-child)) {
|
|
35
|
+
border-radius: 0;
|
|
36
|
+
}
|
|
34
37
|
|
|
35
38
|
/* Raise position for nicer focus */
|
|
36
39
|
&:focus,
|
|
@@ -53,20 +56,5 @@
|
|
|
53
56
|
|
|
54
57
|
/* Use this when you want the button or arrow to be floating over the input element. When doing this, make sure you set a minimum width for the input! (or input-group) */
|
|
55
58
|
.input-group.stack {
|
|
56
|
-
|
|
57
|
-
*********************/
|
|
58
|
-
*:has(~ :where(.input)),
|
|
59
|
-
*:has(~ :where(.input)):where(astro-slot, astro-content, astro-island) > * {
|
|
60
|
-
z-index: 2;
|
|
61
|
-
display: flex;
|
|
62
|
-
place-self: center start;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/* After elements *
|
|
66
|
-
*********************/
|
|
67
|
-
:where(.input) ~ *,
|
|
68
|
-
:where(.input) ~ *:where(astro-slot, astro-content, astro-island) > * {
|
|
69
|
-
display: flex;
|
|
70
|
-
place-self: center end;
|
|
71
|
-
}
|
|
59
|
+
display: grid;
|
|
72
60
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* The :selected state of the options is fairly customizable in Chrome, somewhat in Firefox, and not at all in Safari. See the CodePen demo for a section that can be uncommented to preview this. */
|
|
2
|
+
/* Might want to create a custom select component in the future */
|
|
3
|
+
@utility select {
|
|
4
|
+
select {
|
|
5
|
+
appearance: none;
|
|
6
|
+
color: var(--text-color);
|
|
7
|
+
background: var(--bg-color);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
select[multiple],
|
|
11
|
+
select[multiple]:focus {
|
|
12
|
+
overflow: auto;
|
|
13
|
+
padding: 0;
|
|
14
|
+
|
|
15
|
+
option {
|
|
16
|
+
padding: 0.375em 0.75em;
|
|
17
|
+
color: var(--text-color);
|
|
18
|
+
background-image: linear-gradient(
|
|
19
|
+
0deg,
|
|
20
|
+
var(--bg-color) 0%,
|
|
21
|
+
var(--bg-color) 100%
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
option:hover {
|
|
26
|
+
color: var(--text-hover-color, var(--text-color));
|
|
27
|
+
background-image: linear-gradient(
|
|
28
|
+
0deg,
|
|
29
|
+
var(--bg-hover-color, var(--bg-color)) 0%,
|
|
30
|
+
var(--bg-hover-color, var(--bg-color)) 100%
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
option:focus {
|
|
35
|
+
color: var(
|
|
36
|
+
--text-focus-color,
|
|
37
|
+
var(--text-hover-color, var(--text-color))
|
|
38
|
+
);
|
|
39
|
+
background-image: linear-gradient(
|
|
40
|
+
0deg,
|
|
41
|
+
var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 0%,
|
|
42
|
+
var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 100%
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
option:checked {
|
|
47
|
+
color: var(--text-selected-color);
|
|
48
|
+
background-image: linear-gradient(
|
|
49
|
+
0deg,
|
|
50
|
+
var(--bg-selected-color,) 0%,
|
|
51
|
+
var(--bg-selected-color,) 100%
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -27,17 +27,23 @@
|
|
|
27
27
|
|
|
28
28
|
@utility button-icon {
|
|
29
29
|
& {
|
|
30
|
-
padding:
|
|
31
|
-
line-height: 1;
|
|
30
|
+
padding: 0.5em;
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
|
|
35
|
-
@
|
|
34
|
+
@utility button-round {
|
|
35
|
+
& {
|
|
36
|
+
border-radius: 50%;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@layer base {
|
|
36
41
|
a {
|
|
37
42
|
@apply pigment;
|
|
38
43
|
}
|
|
39
44
|
|
|
40
45
|
a:where(:not(.button)) {
|
|
46
|
+
--bg-color: transparent;
|
|
41
47
|
--border-color: transparent;
|
|
42
48
|
}
|
|
43
49
|
|
|
@@ -48,8 +54,6 @@
|
|
|
48
54
|
/* focus states with outlines */
|
|
49
55
|
:is(a, button, .button),
|
|
50
56
|
:where([tabindex]:not([tabindex='-1'])) {
|
|
51
|
-
|
|
52
|
-
@apply outline-visible;
|
|
53
|
-
}
|
|
57
|
+
@apply focus-outline-visible;
|
|
54
58
|
}
|
|
55
59
|
}
|
package/src/generic/form.css
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
.field {
|
|
18
18
|
@apply pigment;
|
|
19
19
|
@apply border-scaffold;
|
|
20
|
+
@apply focus-outline-visible;
|
|
20
21
|
display: block;
|
|
21
22
|
width: 100%;
|
|
22
23
|
padding: 0.25em 0.5em;
|
|
@@ -26,13 +27,6 @@
|
|
|
26
27
|
background-color: var(--bg-color);
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
input,
|
|
30
|
-
textarea {
|
|
31
|
-
&:focus-visible {
|
|
32
|
-
@apply outline-visible;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
30
|
/* Friendly password dots */
|
|
37
31
|
|
|
38
32
|
/* See https://pqina.nl/blog/styling-password-field-dots/ */
|
|
@@ -1,10 +1,38 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
1
|
+
@property --cols {
|
|
2
|
+
syntax: '<integer>';
|
|
3
|
+
initial-value: 1;
|
|
4
|
+
inherits: false;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@property --colstart {
|
|
8
|
+
syntax: '<integer>';
|
|
9
|
+
initial-value: auto;
|
|
10
|
+
inherits: false;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Gotta test for subgrid after adding inherit-false to --span */
|
|
14
|
+
@property --span {
|
|
15
|
+
syntax: '<integer>';
|
|
16
|
+
initial-value: 1;
|
|
17
|
+
inherits: false;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@property --rowspan {
|
|
21
|
+
syntax: '<integer>';
|
|
22
|
+
initial-value: 1;
|
|
23
|
+
inherits: false;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@property --rowstart {
|
|
27
|
+
syntax: '<integer>';
|
|
28
|
+
initial-value: auto;
|
|
29
|
+
inherits: false;
|
|
3
30
|
}
|
|
4
31
|
|
|
5
32
|
@utility grid-scaffold {
|
|
6
33
|
& {
|
|
7
|
-
--span: 1;
|
|
34
|
+
/* --span: 1; */
|
|
35
|
+
/* Revert to default span for children in nested grids */
|
|
8
36
|
display: grid;
|
|
9
37
|
gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
|
|
10
38
|
max-width: 100%;
|
|
@@ -15,9 +43,10 @@
|
|
|
15
43
|
> *,
|
|
16
44
|
> *:where(.contents) > *,
|
|
17
45
|
> *:where(astro-island, astro-slot) > * {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
grid-
|
|
46
|
+
/* Reset cols */
|
|
47
|
+
/* --cols: 1; */
|
|
48
|
+
grid-column: var(--colstart) / span var(--span);
|
|
49
|
+
grid-row: var(--rowstart) / span var(--rowspan);
|
|
21
50
|
max-width: 100%;
|
|
22
51
|
}
|
|
23
52
|
}
|
|
@@ -5,98 +5,129 @@
|
|
|
5
5
|
/* top *
|
|
6
6
|
*********************/
|
|
7
7
|
@utility fixed-top {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
& {
|
|
9
|
+
position: fixed;
|
|
10
|
+
top: 0;
|
|
11
|
+
bottom: auto;
|
|
12
|
+
inset-inline: 0;
|
|
13
|
+
}
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
@utility fixed-topleft {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
& {
|
|
18
|
+
@apply fixed-top;
|
|
19
|
+
right: auto;
|
|
20
|
+
}
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
@utility fixed-topright {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
& {
|
|
25
|
+
@apply fixed-top;
|
|
26
|
+
left: auto;
|
|
27
|
+
}
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
@utility fixed-topfull {
|
|
27
|
-
|
|
28
|
-
|
|
31
|
+
& {
|
|
32
|
+
@apply fixed-top;
|
|
33
|
+
width: 100%;
|
|
34
|
+
max-width: none;
|
|
35
|
+
margin-inline: 0;
|
|
36
|
+
}
|
|
29
37
|
}
|
|
30
38
|
|
|
31
39
|
/* bottom *
|
|
32
40
|
*********************/
|
|
33
41
|
@utility fixed-bottom {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
42
|
+
& {
|
|
43
|
+
position: fixed;
|
|
44
|
+
top: auto;
|
|
45
|
+
bottom: 0;
|
|
46
|
+
inset-inline: 0;
|
|
47
|
+
}
|
|
38
48
|
}
|
|
39
49
|
|
|
40
50
|
@utility fixed-bottomleft {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
51
|
+
& {
|
|
52
|
+
@apply fixed-bottom;
|
|
53
|
+
right: auto;
|
|
54
|
+
}
|
|
44
55
|
}
|
|
45
56
|
|
|
46
57
|
@utility fixed-bottomright {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
58
|
+
& {
|
|
59
|
+
@apply fixed-bottom;
|
|
60
|
+
left: auto;
|
|
61
|
+
}
|
|
50
62
|
}
|
|
51
63
|
|
|
52
64
|
@utility fixed-bottomfull {
|
|
53
|
-
|
|
54
|
-
|
|
65
|
+
& {
|
|
66
|
+
@apply fixed-bottom;
|
|
67
|
+
width: 100%;
|
|
68
|
+
max-width: none;
|
|
69
|
+
margin-inline: 0;
|
|
70
|
+
}
|
|
55
71
|
}
|
|
56
72
|
|
|
57
73
|
/* left *
|
|
58
|
-
|
|
74
|
+
*********************/
|
|
59
75
|
@utility fixed-left {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
76
|
+
& {
|
|
77
|
+
position: fixed;
|
|
78
|
+
inset-block: 0;
|
|
79
|
+
left: 0;
|
|
80
|
+
right: auto;
|
|
81
|
+
}
|
|
64
82
|
}
|
|
65
83
|
|
|
66
84
|
@utility fixed-leftfull {
|
|
67
|
-
|
|
68
|
-
|
|
85
|
+
& {
|
|
86
|
+
@apply fixed-left;
|
|
87
|
+
height: auto;
|
|
88
|
+
max-height: none;
|
|
89
|
+
margin-block: 0;
|
|
90
|
+
}
|
|
69
91
|
}
|
|
70
92
|
|
|
71
93
|
/* right *
|
|
72
|
-
|
|
94
|
+
*********************/
|
|
73
95
|
@utility fixed-right {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
96
|
+
& {
|
|
97
|
+
position: fixed;
|
|
98
|
+
inset-block: 0;
|
|
99
|
+
left: auto;
|
|
100
|
+
right: 0;
|
|
101
|
+
}
|
|
78
102
|
}
|
|
79
103
|
|
|
80
104
|
@utility fixed-rightfull {
|
|
81
|
-
|
|
82
|
-
|
|
105
|
+
& {
|
|
106
|
+
@apply fixed-right;
|
|
107
|
+
height: auto;
|
|
108
|
+
max-height: none;
|
|
109
|
+
margin-block: 0;
|
|
110
|
+
}
|
|
83
111
|
}
|
|
84
112
|
|
|
85
113
|
/* center *
|
|
86
|
-
|
|
114
|
+
*********************/
|
|
87
115
|
@utility fixed-center {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
116
|
+
& {
|
|
117
|
+
position: fixed;
|
|
118
|
+
width: fit-content;
|
|
119
|
+
height: fit-content;
|
|
120
|
+
margin: auto;
|
|
121
|
+
}
|
|
92
122
|
}
|
|
93
123
|
|
|
94
124
|
/* overlay *
|
|
95
|
-
|
|
125
|
+
*********************/
|
|
96
126
|
@utility fixed-overlay {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
127
|
+
& {
|
|
128
|
+
position: fixed;
|
|
129
|
+
inset-block: var(--nudge-y, var(--nudge, 0));
|
|
130
|
+
inset-inline: var(--nudge-x, var(--nudge, 0));
|
|
131
|
+
display: grid;
|
|
132
|
+
}
|
|
102
133
|
}
|
package/src/primitives/index.css
CHANGED
package/src/reset.css
CHANGED
|
@@ -82,13 +82,12 @@ canvas {
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
svg {
|
|
85
|
-
pointer-events: none; /* Because SVGs should not intercept events */
|
|
86
85
|
flex-shrink: 0; /* Prevents SVG from being squished when used as flexbox descendant */
|
|
87
86
|
box-sizing: content-box; /* Prevents SVG from being squished when adding padding values */
|
|
88
87
|
|
|
89
88
|
/* Default SVG dimensions. Override as necessary */
|
|
90
89
|
width: var(--svg-width, auto);
|
|
91
|
-
height: var(--svg-height,
|
|
90
|
+
height: var(--svg-height, auto);
|
|
92
91
|
}
|
|
93
92
|
|
|
94
93
|
hr {
|
package/src/styles.css
CHANGED
package/src/tools/object.css
CHANGED
package/src/tools/outlines.css
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
* Setup outlines *
|
|
3
3
|
* Useful for all outline transitions and animations
|
|
4
4
|
*********************/
|
|
5
|
+
|
|
6
|
+
/* Can improve this... */
|
|
5
7
|
@layer base {
|
|
6
8
|
* {
|
|
7
9
|
outline: var(--outline-width) var(--outline-style) transparent;
|
|
@@ -9,11 +11,39 @@
|
|
|
9
11
|
}
|
|
10
12
|
}
|
|
11
13
|
|
|
14
|
+
@utility outline-scaffold {
|
|
15
|
+
& {
|
|
16
|
+
outline: var(--outline-width) var(--outline-style) transparent;
|
|
17
|
+
outline-offset: var(--outline-offset);
|
|
18
|
+
|
|
19
|
+
&:focus {
|
|
20
|
+
@apply outline-visible;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
12
25
|
/* Utility to make outline visible. typically used in focus or focus-visible */
|
|
13
26
|
@utility outline-visible {
|
|
14
27
|
outline-color: var(--outline-color);
|
|
15
28
|
}
|
|
16
29
|
|
|
30
|
+
@utility focus-outline-visible {
|
|
31
|
+
&:focus {
|
|
32
|
+
@apply outline-visible;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@utility focus-within {
|
|
37
|
+
& {
|
|
38
|
+
outline: var(--outline-width) var(--outline-style) transparent;
|
|
39
|
+
outline-offset: var(--outline-offset);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:focus-within {
|
|
43
|
+
outline-color: var(--outline-color);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
17
47
|
/* These preserve outlines on scrollable elements that use a flex display *
|
|
18
48
|
* Notes:
|
|
19
49
|
- content-box is necessary, if not present, box will be cut on the right side
|
|
@@ -6,8 +6,19 @@
|
|
|
6
6
|
--transition-values: var(--transition-duration) var(--transition-delay)
|
|
7
7
|
var(--transition-easing);
|
|
8
8
|
--transition-props:
|
|
9
|
-
backdrop-filter, background, border, color, fill, filter, gap,
|
|
10
|
-
opacity, outline, stroke, transform;
|
|
9
|
+
backdrop-filter, background, border, color, display, fill, filter, gap,
|
|
10
|
+
opacity, outline, overlay, stroke, transform;
|
|
11
|
+
transition: var(--transition-values);
|
|
12
|
+
transition-property: var(--transition-props);
|
|
13
|
+
transition-behavior: allow-discrete;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@utility transition-svg {
|
|
18
|
+
& {
|
|
19
|
+
--transition-values: var(--transition-duration) var(--transition-delay)
|
|
20
|
+
var(--transition-easing);
|
|
21
|
+
--transition-props: opacity, fill, stroke;
|
|
11
22
|
transition: var(--transition-values);
|
|
12
23
|
transition-property: var(--transition-props);
|
|
13
24
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import './starting-style.css';
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/*********************
|
|
2
|
+
* Fade *
|
|
3
|
+
*********************/
|
|
4
|
+
@utility fade {
|
|
5
|
+
& {
|
|
6
|
+
--opacity: var(--closed-opacity, 0);
|
|
7
|
+
opacity: var(--opacity, 0);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&:where([open], :popover-open, .open, .show) {
|
|
11
|
+
--opacity: var(--opened-opacity, 1);
|
|
12
|
+
|
|
13
|
+
@starting-style {
|
|
14
|
+
--opacity: var(--opening-opacity, 0);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/*********************
|
|
20
|
+
* Fly *
|
|
21
|
+
*********************/
|
|
22
|
+
@utility fly {
|
|
23
|
+
& {
|
|
24
|
+
--tx: var(--closed-tx, 0);
|
|
25
|
+
--ty: var(--closed-ty, 0);
|
|
26
|
+
transform: translateX(var(--tx)) translateY(var(--ty));
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:where([open], :popover-open, .open, .show) {
|
|
30
|
+
--tx: var(--opened-tx, 0);
|
|
31
|
+
--ty: var(--opened-ty, 0);
|
|
32
|
+
|
|
33
|
+
@starting-style {
|
|
34
|
+
--tx: var(--opening-tx, 0);
|
|
35
|
+
--ty: var(--opening-ty, 0);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@utility fly-from-top {
|
|
41
|
+
& {
|
|
42
|
+
@apply fly;
|
|
43
|
+
--closed-ty: -100%;
|
|
44
|
+
--opened-ty: 0;
|
|
45
|
+
--opening-ty: -100%;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@utility fly-from-bottom {
|
|
50
|
+
& {
|
|
51
|
+
@apply fly;
|
|
52
|
+
--closed-ty: 100%;
|
|
53
|
+
--opened-ty: 0;
|
|
54
|
+
--opening-ty: 100%;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@utility fly-from-left {
|
|
59
|
+
& {
|
|
60
|
+
@apply fly;
|
|
61
|
+
--closed-tx: -100%;
|
|
62
|
+
--opened-tx: 0;
|
|
63
|
+
--opening-tx: -100%;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@utility fly-from-right {
|
|
68
|
+
& {
|
|
69
|
+
@apply fly;
|
|
70
|
+
--closed-tx: 100%;
|
|
71
|
+
--opened-tx: 0;
|
|
72
|
+
--opening-tx: 100%;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/* Transfers outlines from the focusable element within to the container */
|
|
2
|
-
@utility has-focus-within {
|
|
3
|
-
&:focus-within {
|
|
4
|
-
outline: var(--outline-width) var(--outline-style) transparent;
|
|
5
|
-
outline-offset: var(--outline-offset);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
*:focus,
|
|
9
|
-
*:focus-visible {
|
|
10
|
-
outline-color: transparent;
|
|
11
|
-
}
|
|
12
|
-
}
|