free-astro-components 0.0.6 → 0.0.7
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 +2 -2
- package/src/components/Button.astro +113 -184
- package/src/css/main.css +62 -59
- package/src/css/preflight.css +125 -125
- package/src/pages/index.astro +81 -91
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "A collection of free Astro components",
|
|
4
4
|
"author": "Denis Ventura",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.7",
|
|
7
7
|
"exports": {
|
|
8
8
|
".": {
|
|
9
9
|
"import": {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"main": "./src/index.js",
|
|
16
16
|
"types": "./src/types/index.d.ts",
|
|
17
17
|
"scripts": {
|
|
18
|
-
"dev": "astro dev",
|
|
18
|
+
"dev": "astro dev --host",
|
|
19
19
|
"start": "astro dev",
|
|
20
20
|
"build": "astro check && astro build",
|
|
21
21
|
"preview": "astro preview",
|
|
@@ -6,266 +6,195 @@ interface Props {
|
|
|
6
6
|
href?: string
|
|
7
7
|
icon?: string
|
|
8
8
|
label?: string
|
|
9
|
-
|
|
10
|
-
| 'primary'
|
|
11
|
-
| 'primary-outline'
|
|
12
|
-
| 'secondary'
|
|
13
|
-
| 'secondary-outline'
|
|
14
|
-
| 'tertiary'
|
|
15
|
-
| 'tertiary-outline'
|
|
9
|
+
variant?: 'primary' | 'secondary' | 'dark' | 'light'
|
|
16
10
|
iconPosition?: 'left' | 'right'
|
|
17
|
-
size?: 'small' | 'medium'
|
|
11
|
+
size?: 'small' | 'medium'
|
|
18
12
|
}
|
|
19
13
|
|
|
20
14
|
const {
|
|
21
15
|
href,
|
|
22
16
|
icon,
|
|
23
17
|
label,
|
|
24
|
-
|
|
18
|
+
variant = 'primary',
|
|
25
19
|
iconPosition = 'right',
|
|
26
20
|
size = 'medium',
|
|
27
21
|
...props
|
|
28
22
|
} = Astro.props
|
|
29
23
|
|
|
30
|
-
const
|
|
31
|
-
primary:
|
|
32
|
-
|
|
33
|
-
'
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
'btn-secondary',
|
|
37
|
-
'secondary-outline':
|
|
38
|
-
'btn-secondary-outline',
|
|
39
|
-
tertiary:
|
|
40
|
-
'btn-tertiary',
|
|
41
|
-
'tertiary-outline':
|
|
42
|
-
'btn-tertiary-outline',
|
|
43
|
-
}[type]
|
|
24
|
+
const variantClasses = {
|
|
25
|
+
primary: 'ac-btn--primary',
|
|
26
|
+
secondary: 'ac-btn--secondary',
|
|
27
|
+
dark: 'ac-btn--dark',
|
|
28
|
+
light: 'ac-btn--light',
|
|
29
|
+
}[variant]
|
|
44
30
|
|
|
45
31
|
const sizeClasses = {
|
|
46
|
-
small: 'btn
|
|
47
|
-
medium: 'btn
|
|
48
|
-
large: 'btn-large',
|
|
32
|
+
small: 'ac-btn--small',
|
|
33
|
+
medium: 'ac-btn--medium',
|
|
49
34
|
}[size]
|
|
50
35
|
|
|
51
36
|
const onlyIconClasses = {
|
|
52
|
-
small: 'btn
|
|
53
|
-
medium: 'btn
|
|
54
|
-
large: 'btn-icon-large',
|
|
37
|
+
small: 'ac-btn--icon-small',
|
|
38
|
+
medium: 'ac-btn--icon-medium',
|
|
55
39
|
}[size]
|
|
56
40
|
|
|
57
41
|
const buttonClasses = [
|
|
58
|
-
'btn',
|
|
59
|
-
|
|
42
|
+
'ac-btn',
|
|
43
|
+
variantClasses,
|
|
60
44
|
label ? sizeClasses : onlyIconClasses,
|
|
61
45
|
]
|
|
62
46
|
.filter(Boolean)
|
|
63
47
|
.join(' ')
|
|
64
|
-
|
|
65
|
-
const iconClasses = {
|
|
66
|
-
small: 'w-5 h-5',
|
|
67
|
-
medium: 'w-6 h-6',
|
|
68
|
-
large: 'w-6 h-6',
|
|
69
|
-
}[size]
|
|
70
48
|
---
|
|
71
49
|
|
|
72
50
|
{
|
|
73
51
|
href ? (
|
|
74
52
|
<a class={buttonClasses} href={href} {...props}>
|
|
75
|
-
{icon && iconPosition === 'left' &&
|
|
76
|
-
<Icon icon={icon} />
|
|
77
|
-
)}
|
|
53
|
+
{icon && iconPosition === 'left' && <Icon icon={icon} />}
|
|
78
54
|
{label && <span>{label}</span>}
|
|
79
|
-
{icon && iconPosition === 'right' &&
|
|
80
|
-
<Icon icon={icon} />
|
|
81
|
-
)}
|
|
55
|
+
{icon && iconPosition === 'right' && <Icon icon={icon} />}
|
|
82
56
|
</a>
|
|
83
57
|
) : (
|
|
84
58
|
<button class={buttonClasses} {...props}>
|
|
85
|
-
{icon && iconPosition === 'left' &&
|
|
86
|
-
<Icon icon={icon} />
|
|
87
|
-
)}
|
|
59
|
+
{icon && iconPosition === 'left' && <Icon icon={icon} />}
|
|
88
60
|
{label && <span>{label}</span>}
|
|
89
|
-
{icon && iconPosition === 'right' &&
|
|
90
|
-
<Icon icon={icon} />
|
|
91
|
-
)}
|
|
61
|
+
{icon && iconPosition === 'right' && <Icon icon={icon} />}
|
|
92
62
|
</button>
|
|
93
63
|
)
|
|
94
64
|
}
|
|
95
65
|
|
|
96
66
|
<style>
|
|
97
|
-
.btn {
|
|
67
|
+
.ac-btn {
|
|
68
|
+
--ac-btn-border-radius: var(--ac-rounded-xl);
|
|
69
|
+
-webkit-appearance: button;
|
|
98
70
|
align-items: center;
|
|
99
|
-
border-radius: var(--
|
|
71
|
+
border-radius: var(--ac-btn-border-radius);
|
|
100
72
|
border: 1px solid;
|
|
101
|
-
|
|
73
|
+
cursor: pointer;
|
|
102
74
|
display: inline-flex;
|
|
103
|
-
font-
|
|
75
|
+
font-family: var(--ac-font-sans);
|
|
104
76
|
font-weight: 700;
|
|
105
|
-
gap: var(--spacing-2);
|
|
77
|
+
gap: var(--ac-spacing-2);
|
|
106
78
|
justify-content: center;
|
|
79
|
+
line-height: var(--ac-leading-normal);
|
|
80
|
+
text-decoration: none;
|
|
81
|
+
text-transform: none;
|
|
107
82
|
transition: all 0.3s ease-in-out;
|
|
108
83
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
&:hover {
|
|
115
|
-
background-color: var(--primary-200);
|
|
116
|
-
border-color: var(--primary-200);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
&:active {
|
|
120
|
-
background-color: var(--primary-400);
|
|
121
|
-
border-color: var(--primary-400);
|
|
122
|
-
}
|
|
84
|
+
&:disabled {
|
|
85
|
+
opacity: 0.4;
|
|
86
|
+
cursor: default;
|
|
87
|
+
pointer-events: none;
|
|
123
88
|
}
|
|
89
|
+
}
|
|
124
90
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
&:hover {
|
|
131
|
-
border-color: var(--primary-200);
|
|
132
|
-
color: var(--primary-200);
|
|
133
|
-
}
|
|
91
|
+
.ac-btn--primary {
|
|
92
|
+
background-color: var(--ac-color-primary);
|
|
93
|
+
border-color: var(--ac-color-primary);
|
|
94
|
+
color: var(--ac-color-white);
|
|
134
95
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
96
|
+
&:hover {
|
|
97
|
+
background-color: rgba(var(--ac-primary), 0.9);
|
|
98
|
+
border-color: rgba(var(--ac-primary), 0.9);
|
|
139
99
|
}
|
|
140
100
|
|
|
141
|
-
|
|
142
|
-
background-color: var(--
|
|
143
|
-
border-color: var(--
|
|
144
|
-
color: var(--white);
|
|
145
|
-
|
|
146
|
-
&:hover {
|
|
147
|
-
background-color: var(--secondary-200);
|
|
148
|
-
border-color: var(--secondary-200);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
&:active {
|
|
152
|
-
background-color: var(--secondary-400);
|
|
153
|
-
border-color: var(--secondary-400);
|
|
154
|
-
}
|
|
101
|
+
&:active {
|
|
102
|
+
background-color: var(--ac-color-primary);
|
|
103
|
+
border-color: var(--ac-color-primary);
|
|
155
104
|
}
|
|
105
|
+
}
|
|
156
106
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
&:hover {
|
|
163
|
-
border-color: var(--secondary-200);
|
|
164
|
-
color: var(--secondary-200);
|
|
165
|
-
}
|
|
107
|
+
.ac-btn--secondary {
|
|
108
|
+
background-color: var(--ac-color-secondary);
|
|
109
|
+
border-color: var(--ac-color-secondary);
|
|
110
|
+
color: var(--ac-color-dark);
|
|
166
111
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
}
|
|
112
|
+
&:hover {
|
|
113
|
+
background-color: rgba(var(--ac-secondary), 0.9);
|
|
114
|
+
border-color: rgba(var(--ac-secondary), 0.9);
|
|
171
115
|
}
|
|
172
116
|
|
|
173
|
-
|
|
174
|
-
background-color: var(--
|
|
175
|
-
border-color: var(--
|
|
176
|
-
color: var(--white);
|
|
177
|
-
|
|
178
|
-
&:hover {
|
|
179
|
-
background-color: var(--tertiary-200);
|
|
180
|
-
border-color: var(--tertiary-200);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&:active {
|
|
184
|
-
background-color: var(--tertiary-400);
|
|
185
|
-
border-color: var(--tertiary-400);
|
|
186
|
-
}
|
|
117
|
+
&:active {
|
|
118
|
+
background-color: var(--ac-color-secondary);
|
|
119
|
+
border-color: var(--ac-color-secondary);
|
|
187
120
|
}
|
|
121
|
+
}
|
|
188
122
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
123
|
+
.ac-btn--dark {
|
|
124
|
+
background-color: var(--ac-color-dark);
|
|
125
|
+
border-color: var(--ac-color-dark);
|
|
126
|
+
color: var(--ac-color-white);
|
|
193
127
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
128
|
+
&:hover {
|
|
129
|
+
background-color: rgba(var(--ac-dark), 0.9);
|
|
130
|
+
border-color: rgba(var(--ac-dark), 0.9);
|
|
131
|
+
}
|
|
198
132
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
}
|
|
133
|
+
&:active {
|
|
134
|
+
background-color: var(--ac-color-dark);
|
|
135
|
+
border-color: var(--ac-color-dark);
|
|
203
136
|
}
|
|
137
|
+
}
|
|
204
138
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
font-size: var(--text-xs);
|
|
139
|
+
.ac-btn--light {
|
|
140
|
+
background-color: var(--ac-color-white);
|
|
141
|
+
border-color: var(--ac-color-white);
|
|
142
|
+
color: var(--ac-color-dark);
|
|
210
143
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
}
|
|
144
|
+
&:hover {
|
|
145
|
+
background-color: rgba(var(--ac-white), 0.9);
|
|
146
|
+
border-color: rgba(var(--ac-white), 0.9);
|
|
215
147
|
}
|
|
216
148
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
height: var(--spacing-10);
|
|
221
|
-
font-size: var(--text-sm);
|
|
222
|
-
|
|
223
|
-
> svg {
|
|
224
|
-
width: var(--spacing-6);
|
|
225
|
-
height: var(--spacing-6);
|
|
226
|
-
}
|
|
149
|
+
&:active {
|
|
150
|
+
background-color: var(--ac-color-white);
|
|
151
|
+
border-color: var(--ac-color-white);
|
|
227
152
|
}
|
|
153
|
+
}
|
|
228
154
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
155
|
+
.ac-btn--small {
|
|
156
|
+
font-size: var(--ac-text-xs);
|
|
157
|
+
height: var(--ac-spacing-8);
|
|
158
|
+
padding-left: var(--ac-spacing-5);
|
|
159
|
+
padding-right: var(--ac-spacing-5);
|
|
234
160
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
161
|
+
> svg {
|
|
162
|
+
height: var(--ac-spacing-5);
|
|
163
|
+
width: var(--ac-spacing-5);
|
|
239
164
|
}
|
|
165
|
+
}
|
|
240
166
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
167
|
+
.ac-btn--medium {
|
|
168
|
+
font-size: var(--ac-text-sm);
|
|
169
|
+
height: var(--ac-spacing-12);
|
|
170
|
+
padding-left: var(--ac-spacing-7);
|
|
171
|
+
padding-right: var(--ac-spacing-7);
|
|
244
172
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
}
|
|
173
|
+
> svg {
|
|
174
|
+
height: var(--ac-spacing-6);
|
|
175
|
+
width: var(--ac-spacing-6);
|
|
249
176
|
}
|
|
177
|
+
}
|
|
250
178
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
179
|
+
.ac-btn--icon-small {
|
|
180
|
+
height: var(--ac-spacing-8);
|
|
181
|
+
padding: 0;
|
|
182
|
+
width: var(--ac-spacing-8);
|
|
254
183
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}
|
|
184
|
+
> svg {
|
|
185
|
+
height: var(--ac-spacing-5);
|
|
186
|
+
width: var(--ac-spacing-5);
|
|
259
187
|
}
|
|
188
|
+
}
|
|
260
189
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
190
|
+
.ac-btn--icon-medium {
|
|
191
|
+
height: var(--ac-spacing-12);
|
|
192
|
+
padding: 0;
|
|
193
|
+
width: var(--ac-spacing-12);
|
|
264
194
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
}
|
|
195
|
+
> svg {
|
|
196
|
+
height: var(--ac-spacing-6);
|
|
197
|
+
width: var(--ac-spacing-6);
|
|
269
198
|
}
|
|
270
199
|
}
|
|
271
|
-
</style>
|
|
200
|
+
</style>
|
package/src/css/main.css
CHANGED
|
@@ -1,68 +1,71 @@
|
|
|
1
|
-
@import 'preflight.css';
|
|
2
|
-
|
|
3
1
|
:root {
|
|
4
2
|
/* Colors */
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--secondary
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--
|
|
19
|
-
--tertiary-400: #F26C0C;
|
|
20
|
-
--neutral-100: #F7F8FA;
|
|
21
|
-
--neutral-200: #E1E2E6;
|
|
22
|
-
--neutral-300: #98A1B3;
|
|
23
|
-
--neutral-400: #666E80;
|
|
24
|
-
--neutral-500: #17181A;
|
|
25
|
-
--success-100: #9CF0BD;
|
|
26
|
-
--success-200: #07D95A;
|
|
27
|
-
--error-100: #FCA3B2;
|
|
28
|
-
--error-200: #F8183E;
|
|
29
|
-
--warning-100: #FFD06E;
|
|
30
|
-
--warning-200: #FFB800;
|
|
3
|
+
--ac-white: 255, 255, 255;
|
|
4
|
+
--ac-primary: 3, 103, 252;
|
|
5
|
+
--ac-secondary: 210, 248, 1;
|
|
6
|
+
--ac-dark: 22, 22, 22;
|
|
7
|
+
|
|
8
|
+
--ac-color-transparent: transparent;
|
|
9
|
+
--ac-color-current: currentColor;
|
|
10
|
+
--ac-color-white: rgb(var(--ac-white));
|
|
11
|
+
--ac-color-primary: rgb(var(--ac-primary));
|
|
12
|
+
--ac-color-secondary: rgb(var(--ac-secondary));
|
|
13
|
+
--ac-color-dark: rgb(var(--ac-dark));
|
|
14
|
+
|
|
15
|
+
/* Font family */
|
|
16
|
+
--ac-font-sans: ui-sans-serif, system-ui, sans-serif;
|
|
31
17
|
|
|
32
18
|
/* Font size */
|
|
33
|
-
--text-xs: 0.75rem;
|
|
34
|
-
--text-sm: 0.875rem;
|
|
35
|
-
--text-md: 1rem;
|
|
36
|
-
--text-lg: 1.125rem;
|
|
37
|
-
--text-xl: 1.25rem;
|
|
38
|
-
--text-2xl: 1.5rem;
|
|
39
|
-
--text-3xl: 1.875rem;
|
|
19
|
+
--ac-text-xs: 0.75rem;
|
|
20
|
+
--ac-text-sm: 0.875rem;
|
|
21
|
+
--ac-text-md: 1rem;
|
|
22
|
+
--ac-text-lg: 1.125rem;
|
|
23
|
+
--ac-text-xl: 1.25rem;
|
|
24
|
+
--ac-text-2xl: 1.5rem;
|
|
25
|
+
--ac-text-3xl: 1.875rem;
|
|
26
|
+
|
|
27
|
+
/* Font weight */
|
|
28
|
+
--ac-font-light: 300;
|
|
29
|
+
--ac-font-normal: 400;
|
|
30
|
+
--ac-font-bold: 700;
|
|
31
|
+
|
|
32
|
+
/* Line height */
|
|
33
|
+
--ac-leading-none: 1;
|
|
34
|
+
--ac-leading-normal: 1.5;
|
|
40
35
|
|
|
41
36
|
/* Spacing */
|
|
42
|
-
--spacing-px: 1px;
|
|
43
|
-
--spacing-1: 0.25rem;
|
|
44
|
-
--spacing-2: 0.5rem;
|
|
45
|
-
--spacing-2-5: 0.625rem;
|
|
46
|
-
--spacing-3: 0.75rem;
|
|
47
|
-
--spacing-3-5: 0.875rem;
|
|
48
|
-
--spacing-4: 1rem;
|
|
49
|
-
--spacing-5: 1.25rem;
|
|
50
|
-
--spacing-6: 1.5rem;
|
|
51
|
-
--spacing-7: 1.75rem;
|
|
52
|
-
--spacing-8: 2rem;
|
|
53
|
-
--spacing-9: 2.25rem;
|
|
54
|
-
--spacing-10: 2.5rem;
|
|
55
|
-
--spacing-12: 3rem;
|
|
37
|
+
--ac-spacing-px: 1px;
|
|
38
|
+
--ac-spacing-1: 0.25rem;
|
|
39
|
+
--ac-spacing-2: 0.5rem;
|
|
40
|
+
--ac-spacing-2-5: 0.625rem;
|
|
41
|
+
--ac-spacing-3: 0.75rem;
|
|
42
|
+
--ac-spacing-3-5: 0.875rem;
|
|
43
|
+
--ac-spacing-4: 1rem;
|
|
44
|
+
--ac-spacing-5: 1.25rem;
|
|
45
|
+
--ac-spacing-6: 1.5rem;
|
|
46
|
+
--ac-spacing-7: 1.75rem;
|
|
47
|
+
--ac-spacing-8: 2rem;
|
|
48
|
+
--ac-spacing-9: 2.25rem;
|
|
49
|
+
--ac-spacing-10: 2.5rem;
|
|
50
|
+
--ac-spacing-12: 3rem;
|
|
56
51
|
|
|
57
52
|
/* Border radius */
|
|
58
|
-
--rounded-none: 0;
|
|
59
|
-
--rounded-sm: 0.125rem;
|
|
60
|
-
--rounded: 0.25rem;
|
|
61
|
-
--rounded-md: 0.375rem;
|
|
62
|
-
--rounded-lg: 0.5rem;
|
|
63
|
-
--rounded-xl: 0.75rem;
|
|
64
|
-
--rounded-2xl: 1rem;
|
|
65
|
-
--rounded-3xl: 1.5rem;
|
|
66
|
-
--rounded-4xl: 2rem;
|
|
67
|
-
--rounded-full: 9999px;
|
|
53
|
+
--ac-rounded-none: 0;
|
|
54
|
+
--ac-rounded-sm: 0.125rem;
|
|
55
|
+
--ac-rounded: 0.25rem;
|
|
56
|
+
--ac-rounded-md: 0.375rem;
|
|
57
|
+
--ac-rounded-lg: 0.5rem;
|
|
58
|
+
--ac-rounded-xl: 0.75rem;
|
|
59
|
+
--ac-rounded-2xl: 1rem;
|
|
60
|
+
--ac-rounded-3xl: 1.5rem;
|
|
61
|
+
--ac-rounded-4xl: 2rem;
|
|
62
|
+
--ac-rounded-full: 9999px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
*,
|
|
66
|
+
::before,
|
|
67
|
+
::after {
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
border-width: 0;
|
|
70
|
+
border-style: solid;
|
|
68
71
|
}
|
package/src/css/preflight.css
CHANGED
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
*,
|
|
7
7
|
::before,
|
|
8
8
|
::after {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
/* 1 */
|
|
11
|
+
border-width: 0;
|
|
12
|
+
/* 2 */
|
|
13
|
+
border-style: solid;
|
|
14
|
+
/* 2 */
|
|
15
|
+
border-color: theme('borderColor.DEFAULT', currentColor);
|
|
16
|
+
/* 2 */
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
::before,
|
|
20
20
|
::after {
|
|
21
|
-
|
|
21
|
+
--tw-content: '';
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
/*
|
|
@@ -33,22 +33,22 @@
|
|
|
33
33
|
|
|
34
34
|
html,
|
|
35
35
|
:host {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
line-height: 1.5;
|
|
37
|
+
/* 1 */
|
|
38
|
+
-webkit-text-size-adjust: 100%;
|
|
39
|
+
/* 2 */
|
|
40
|
+
-moz-tab-size: 4;
|
|
41
|
+
/* 3 */
|
|
42
|
+
tab-size: 4;
|
|
43
|
+
/* 3 */
|
|
44
|
+
font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
45
|
+
/* 4 */
|
|
46
|
+
font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal);
|
|
47
|
+
/* 5 */
|
|
48
|
+
font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal);
|
|
49
|
+
/* 6 */
|
|
50
|
+
-webkit-tap-highlight-color: transparent;
|
|
51
|
+
/* 7 */
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
/*
|
|
@@ -57,10 +57,10 @@ html,
|
|
|
57
57
|
*/
|
|
58
58
|
|
|
59
59
|
body {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
margin: 0;
|
|
61
|
+
/* 1 */
|
|
62
|
+
line-height: inherit;
|
|
63
|
+
/* 2 */
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
/*
|
|
@@ -70,12 +70,12 @@ body {
|
|
|
70
70
|
*/
|
|
71
71
|
|
|
72
72
|
hr {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
73
|
+
height: 0;
|
|
74
|
+
/* 1 */
|
|
75
|
+
color: inherit;
|
|
76
|
+
/* 2 */
|
|
77
|
+
border-top-width: 1px;
|
|
78
|
+
/* 3 */
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
/*
|
|
@@ -83,7 +83,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
|
|
|
83
83
|
*/
|
|
84
84
|
|
|
85
85
|
abbr:where([title]) {
|
|
86
|
-
|
|
86
|
+
text-decoration: underline dotted;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
/*
|
|
@@ -96,8 +96,8 @@ h3,
|
|
|
96
96
|
h4,
|
|
97
97
|
h5,
|
|
98
98
|
h6 {
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
font-size: inherit;
|
|
100
|
+
font-weight: inherit;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
/*
|
|
@@ -105,8 +105,8 @@ Reset links to optimize for opt-in styling instead of opt-out.
|
|
|
105
105
|
*/
|
|
106
106
|
|
|
107
107
|
a {
|
|
108
|
-
|
|
109
|
-
|
|
108
|
+
color: inherit;
|
|
109
|
+
text-decoration: inherit;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
/*
|
|
@@ -115,7 +115,7 @@ Add the correct font weight in Edge and Safari.
|
|
|
115
115
|
|
|
116
116
|
b,
|
|
117
117
|
strong {
|
|
118
|
-
|
|
118
|
+
font-weight: bolder;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
/*
|
|
@@ -129,14 +129,14 @@ code,
|
|
|
129
129
|
kbd,
|
|
130
130
|
samp,
|
|
131
131
|
pre {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
132
|
+
font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
133
|
+
/* 1 */
|
|
134
|
+
font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal);
|
|
135
|
+
/* 2 */
|
|
136
|
+
font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal);
|
|
137
|
+
/* 3 */
|
|
138
|
+
font-size: 1em;
|
|
139
|
+
/* 4 */
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
/*
|
|
@@ -144,7 +144,7 @@ Add the correct font size in all browsers.
|
|
|
144
144
|
*/
|
|
145
145
|
|
|
146
146
|
small {
|
|
147
|
-
|
|
147
|
+
font-size: 80%;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
/*
|
|
@@ -153,18 +153,18 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|
|
153
153
|
|
|
154
154
|
sub,
|
|
155
155
|
sup {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
156
|
+
font-size: 75%;
|
|
157
|
+
line-height: 0;
|
|
158
|
+
position: relative;
|
|
159
|
+
vertical-align: baseline;
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
sub {
|
|
163
|
-
|
|
163
|
+
bottom: -0.25em;
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
sup {
|
|
167
|
-
|
|
167
|
+
top: -0.5em;
|
|
168
168
|
}
|
|
169
169
|
|
|
170
170
|
/*
|
|
@@ -174,12 +174,12 @@ sup {
|
|
|
174
174
|
*/
|
|
175
175
|
|
|
176
176
|
table {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
177
|
+
text-indent: 0;
|
|
178
|
+
/* 1 */
|
|
179
|
+
border-color: inherit;
|
|
180
|
+
/* 2 */
|
|
181
|
+
border-collapse: collapse;
|
|
182
|
+
/* 3 */
|
|
183
183
|
}
|
|
184
184
|
|
|
185
185
|
/*
|
|
@@ -193,26 +193,26 @@ input,
|
|
|
193
193
|
optgroup,
|
|
194
194
|
select,
|
|
195
195
|
textarea {
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
196
|
+
font-family: inherit;
|
|
197
|
+
/* 1 */
|
|
198
|
+
font-feature-settings: inherit;
|
|
199
|
+
/* 1 */
|
|
200
|
+
font-variation-settings: inherit;
|
|
201
|
+
/* 1 */
|
|
202
|
+
font-size: 100%;
|
|
203
|
+
/* 1 */
|
|
204
|
+
font-weight: inherit;
|
|
205
|
+
/* 1 */
|
|
206
|
+
line-height: inherit;
|
|
207
|
+
/* 1 */
|
|
208
|
+
letter-spacing: inherit;
|
|
209
|
+
/* 1 */
|
|
210
|
+
color: inherit;
|
|
211
|
+
/* 1 */
|
|
212
|
+
margin: 0;
|
|
213
|
+
/* 2 */
|
|
214
|
+
padding: 0;
|
|
215
|
+
/* 3 */
|
|
216
216
|
}
|
|
217
217
|
|
|
218
218
|
/*
|
|
@@ -221,7 +221,7 @@ Remove the inheritance of text transform in Edge and Firefox.
|
|
|
221
221
|
|
|
222
222
|
button,
|
|
223
223
|
select {
|
|
224
|
-
|
|
224
|
+
text-transform: none;
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
/*
|
|
@@ -233,12 +233,12 @@ button,
|
|
|
233
233
|
input:where([type='button']),
|
|
234
234
|
input:where([type='reset']),
|
|
235
235
|
input:where([type='submit']) {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
236
|
+
-webkit-appearance: button;
|
|
237
|
+
/* 1 */
|
|
238
|
+
background-color: transparent;
|
|
239
|
+
/* 2 */
|
|
240
|
+
background-image: none;
|
|
241
|
+
/* 2 */
|
|
242
242
|
}
|
|
243
243
|
|
|
244
244
|
/*
|
|
@@ -246,7 +246,7 @@ Use the modern Firefox focus style for all focusable elements.
|
|
|
246
246
|
*/
|
|
247
247
|
|
|
248
248
|
:-moz-focusring {
|
|
249
|
-
|
|
249
|
+
outline: auto;
|
|
250
250
|
}
|
|
251
251
|
|
|
252
252
|
/*
|
|
@@ -254,7 +254,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/
|
|
|
254
254
|
*/
|
|
255
255
|
|
|
256
256
|
:-moz-ui-invalid {
|
|
257
|
-
|
|
257
|
+
box-shadow: none;
|
|
258
258
|
}
|
|
259
259
|
|
|
260
260
|
/*
|
|
@@ -262,7 +262,7 @@ Add the correct vertical alignment in Chrome and Firefox.
|
|
|
262
262
|
*/
|
|
263
263
|
|
|
264
264
|
progress {
|
|
265
|
-
|
|
265
|
+
vertical-align: baseline;
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
/*
|
|
@@ -271,7 +271,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
|
|
|
271
271
|
|
|
272
272
|
::-webkit-inner-spin-button,
|
|
273
273
|
::-webkit-outer-spin-button {
|
|
274
|
-
|
|
274
|
+
height: auto;
|
|
275
275
|
}
|
|
276
276
|
|
|
277
277
|
/*
|
|
@@ -280,10 +280,10 @@ Correct the cursor style of increment and decrement buttons in Safari.
|
|
|
280
280
|
*/
|
|
281
281
|
|
|
282
282
|
[type='search'] {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
283
|
+
-webkit-appearance: textfield;
|
|
284
|
+
/* 1 */
|
|
285
|
+
outline-offset: -2px;
|
|
286
|
+
/* 2 */
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
/*
|
|
@@ -291,7 +291,7 @@ Remove the inner padding in Chrome and Safari on macOS.
|
|
|
291
291
|
*/
|
|
292
292
|
|
|
293
293
|
::-webkit-search-decoration {
|
|
294
|
-
|
|
294
|
+
-webkit-appearance: none;
|
|
295
295
|
}
|
|
296
296
|
|
|
297
297
|
/*
|
|
@@ -300,10 +300,10 @@ Remove the inner padding in Chrome and Safari on macOS.
|
|
|
300
300
|
*/
|
|
301
301
|
|
|
302
302
|
::-webkit-file-upload-button {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
303
|
+
-webkit-appearance: button;
|
|
304
|
+
/* 1 */
|
|
305
|
+
font: inherit;
|
|
306
|
+
/* 2 */
|
|
307
307
|
}
|
|
308
308
|
|
|
309
309
|
/*
|
|
@@ -311,7 +311,7 @@ Add the correct display in Chrome and Safari.
|
|
|
311
311
|
*/
|
|
312
312
|
|
|
313
313
|
summary {
|
|
314
|
-
|
|
314
|
+
display: list-item;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
317
|
/*
|
|
@@ -331,31 +331,31 @@ hr,
|
|
|
331
331
|
figure,
|
|
332
332
|
p,
|
|
333
333
|
pre {
|
|
334
|
-
|
|
334
|
+
margin: 0;
|
|
335
335
|
}
|
|
336
336
|
|
|
337
337
|
fieldset {
|
|
338
|
-
|
|
339
|
-
|
|
338
|
+
margin: 0;
|
|
339
|
+
padding: 0;
|
|
340
340
|
}
|
|
341
341
|
|
|
342
342
|
legend {
|
|
343
|
-
|
|
343
|
+
padding: 0;
|
|
344
344
|
}
|
|
345
345
|
|
|
346
346
|
ol,
|
|
347
347
|
ul,
|
|
348
348
|
menu {
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
349
|
+
list-style: none;
|
|
350
|
+
margin: 0;
|
|
351
|
+
padding: 0;
|
|
352
352
|
}
|
|
353
353
|
|
|
354
354
|
/*
|
|
355
355
|
Reset default styling for dialogs.
|
|
356
356
|
*/
|
|
357
357
|
dialog {
|
|
358
|
-
|
|
358
|
+
padding: 0;
|
|
359
359
|
}
|
|
360
360
|
|
|
361
361
|
/*
|
|
@@ -363,7 +363,7 @@ Prevent resizing textareas horizontally by default.
|
|
|
363
363
|
*/
|
|
364
364
|
|
|
365
365
|
textarea {
|
|
366
|
-
|
|
366
|
+
resize: vertical;
|
|
367
367
|
}
|
|
368
368
|
|
|
369
369
|
/*
|
|
@@ -373,10 +373,10 @@ textarea {
|
|
|
373
373
|
|
|
374
374
|
input::placeholder,
|
|
375
375
|
textarea::placeholder {
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
376
|
+
opacity: 1;
|
|
377
|
+
/* 1 */
|
|
378
|
+
color: theme('colors.gray.400', #9ca3af);
|
|
379
|
+
/* 2 */
|
|
380
380
|
}
|
|
381
381
|
|
|
382
382
|
/*
|
|
@@ -385,14 +385,14 @@ Set the default cursor for buttons.
|
|
|
385
385
|
|
|
386
386
|
button,
|
|
387
387
|
[role="button"] {
|
|
388
|
-
|
|
388
|
+
cursor: pointer;
|
|
389
389
|
}
|
|
390
390
|
|
|
391
391
|
/*
|
|
392
392
|
Make sure disabled buttons don't get the pointer cursor.
|
|
393
393
|
*/
|
|
394
394
|
:disabled {
|
|
395
|
-
|
|
395
|
+
cursor: default;
|
|
396
396
|
}
|
|
397
397
|
|
|
398
398
|
/*
|
|
@@ -409,10 +409,10 @@ audio,
|
|
|
409
409
|
iframe,
|
|
410
410
|
embed,
|
|
411
411
|
object {
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
412
|
+
display: block;
|
|
413
|
+
/* 1 */
|
|
414
|
+
vertical-align: middle;
|
|
415
|
+
/* 2 */
|
|
416
416
|
}
|
|
417
417
|
|
|
418
418
|
/*
|
|
@@ -421,11 +421,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
421
421
|
|
|
422
422
|
img,
|
|
423
423
|
video {
|
|
424
|
-
|
|
425
|
-
|
|
424
|
+
max-width: 100%;
|
|
425
|
+
height: auto;
|
|
426
426
|
}
|
|
427
427
|
|
|
428
428
|
/* Make elements with the HTML hidden attribute stay hidden by default */
|
|
429
429
|
[hidden] {
|
|
430
|
-
|
|
430
|
+
display: none;
|
|
431
431
|
}
|
package/src/pages/index.astro
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import Layout from '../layouts/Layout.astro'
|
|
3
3
|
import Button from '../components/Button.astro'
|
|
4
4
|
---
|
|
5
|
+
|
|
5
6
|
<Layout title="Welcome to Astro.">
|
|
6
7
|
<main class="p-16">
|
|
7
8
|
<h1 class="text-3xl">Components</h1>
|
|
@@ -12,120 +13,109 @@ import Button from '../components/Button.astro'
|
|
|
12
13
|
<div class="flex flex-wrap gap-4">
|
|
13
14
|
<Button size="small" icon="arrow-right" label="Primary Button" />
|
|
14
15
|
<Button icon="arrow-right" label="Primary Button" />
|
|
15
|
-
<Button size="large" icon="arrow-right" label="Primary Button" />
|
|
16
16
|
<Button size="small" icon="arrow-right" />
|
|
17
17
|
<Button icon="arrow-right" />
|
|
18
|
-
<Button size="large" icon="arrow-right" />
|
|
19
18
|
</div>
|
|
20
|
-
<p>Primary outline buttons</p>
|
|
21
19
|
<div class="flex flex-wrap gap-4">
|
|
22
20
|
<Button
|
|
23
|
-
|
|
21
|
+
href="#"
|
|
24
22
|
size="small"
|
|
25
23
|
icon="arrow-right"
|
|
26
24
|
label="Primary Button"
|
|
27
25
|
/>
|
|
28
|
-
<Button
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
label="Primary Button"
|
|
32
|
-
/>
|
|
33
|
-
<Button
|
|
34
|
-
type="primary-outline"
|
|
35
|
-
size="large"
|
|
36
|
-
icon="arrow-right"
|
|
37
|
-
label="Primary Button"
|
|
38
|
-
/>
|
|
39
|
-
|
|
40
|
-
<Button type="primary-outline" size="small" icon="arrow-right" />
|
|
41
|
-
<Button type="primary-outline" icon="arrow-right" />
|
|
42
|
-
<Button type="primary-outline" size="large" icon="arrow-right" />
|
|
26
|
+
<Button href="#" icon="arrow-right" label="Primary Button" />
|
|
27
|
+
<Button href="#" size="small" icon="arrow-right" />
|
|
28
|
+
<Button href="#" icon="arrow-right" />
|
|
43
29
|
</div>
|
|
44
|
-
<p>Secondary buttons</p>
|
|
45
|
-
|
|
46
30
|
<div class="flex flex-wrap gap-4">
|
|
47
31
|
<Button
|
|
48
|
-
type="secondary"
|
|
49
32
|
size="small"
|
|
50
33
|
icon="arrow-right"
|
|
51
|
-
label="
|
|
52
|
-
|
|
53
|
-
<Button type="secondary" icon="arrow-right" label="Secondary Button" />
|
|
54
|
-
<Button
|
|
55
|
-
type="secondary"
|
|
56
|
-
size="large"
|
|
57
|
-
icon="arrow-right"
|
|
58
|
-
label="Secondary Button"
|
|
59
|
-
/>
|
|
60
|
-
<Button type="secondary" size="small" icon="arrow-right" />
|
|
61
|
-
<Button type="secondary" icon="arrow-right" />
|
|
62
|
-
<Button type="secondary" size="large" icon="arrow-right" />
|
|
63
|
-
</div>
|
|
64
|
-
<p>Secondary outline buttons</p>
|
|
65
|
-
<div class="flex flex-wrap gap-4">
|
|
66
|
-
<Button
|
|
67
|
-
type="secondary-outline"
|
|
68
|
-
size="small"
|
|
69
|
-
icon="arrow-right"
|
|
70
|
-
label="Secondary Button"
|
|
71
|
-
/>
|
|
72
|
-
<Button
|
|
73
|
-
type="secondary-outline"
|
|
74
|
-
icon="arrow-right"
|
|
75
|
-
label="Secondary Button"
|
|
76
|
-
/>
|
|
77
|
-
<Button
|
|
78
|
-
type="secondary-outline"
|
|
79
|
-
size="large"
|
|
80
|
-
icon="arrow-right"
|
|
81
|
-
label="Secondary Button"
|
|
34
|
+
label="Primary Button"
|
|
35
|
+
disabled
|
|
82
36
|
/>
|
|
83
|
-
<Button
|
|
84
|
-
<Button
|
|
85
|
-
<Button
|
|
37
|
+
<Button icon="arrow-right" label="Primary Button" disabled />
|
|
38
|
+
<Button size="small" icon="arrow-right" disabled />
|
|
39
|
+
<Button icon="arrow-right" disabled />
|
|
86
40
|
</div>
|
|
87
|
-
|
|
41
|
+
|
|
42
|
+
<p>Dark buttons</p>
|
|
43
|
+
|
|
88
44
|
<div class="flex flex-wrap gap-4">
|
|
89
45
|
<Button
|
|
90
|
-
|
|
46
|
+
variant="dark"
|
|
91
47
|
size="small"
|
|
92
48
|
icon="arrow-right"
|
|
93
|
-
label="
|
|
49
|
+
label="dark Button"
|
|
94
50
|
/>
|
|
95
|
-
<Button
|
|
96
|
-
<Button
|
|
97
|
-
|
|
98
|
-
size="large"
|
|
99
|
-
icon="arrow-right"
|
|
100
|
-
label="Tertiary Button"
|
|
101
|
-
/>
|
|
102
|
-
<Button type="tertiary" size="small" icon="arrow-right" />
|
|
103
|
-
<Button type="tertiary" icon="arrow-right" />
|
|
104
|
-
<Button type="tertiary" size="large" icon="arrow-right" />
|
|
51
|
+
<Button variant="dark" icon="arrow-right" label="dark Button" />
|
|
52
|
+
<Button variant="dark" size="small" icon="arrow-right" />
|
|
53
|
+
<Button variant="dark" icon="arrow-right" />
|
|
105
54
|
</div>
|
|
106
|
-
|
|
107
|
-
<div class="
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
size="
|
|
122
|
-
icon="arrow-right"
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
55
|
+
|
|
56
|
+
<div class="dark-bg">
|
|
57
|
+
<p>Secondary buttons</p>
|
|
58
|
+
<div class="flex flex-wrap gap-4">
|
|
59
|
+
<Button
|
|
60
|
+
variant="secondary"
|
|
61
|
+
size="small"
|
|
62
|
+
icon="arrow-right"
|
|
63
|
+
label="Primary Button"
|
|
64
|
+
/>
|
|
65
|
+
<Button
|
|
66
|
+
variant="secondary"
|
|
67
|
+
icon="arrow-right"
|
|
68
|
+
label="Primary Button"
|
|
69
|
+
/>
|
|
70
|
+
<Button variant="secondary" size="small" icon="arrow-right" />
|
|
71
|
+
<Button variant="secondary" icon="arrow-right" />
|
|
72
|
+
</div>
|
|
73
|
+
<div class="flex flex-wrap gap-4">
|
|
74
|
+
<Button
|
|
75
|
+
variant="secondary"
|
|
76
|
+
size="small"
|
|
77
|
+
icon="arrow-right"
|
|
78
|
+
label="Primary Button"
|
|
79
|
+
disabled
|
|
80
|
+
/>
|
|
81
|
+
<Button
|
|
82
|
+
variant="secondary"
|
|
83
|
+
icon="arrow-right"
|
|
84
|
+
label="Primary Button"
|
|
85
|
+
disabled
|
|
86
|
+
/>
|
|
87
|
+
<Button
|
|
88
|
+
variant="secondary"
|
|
89
|
+
size="small"
|
|
90
|
+
icon="arrow-right"
|
|
91
|
+
disabled
|
|
92
|
+
/>
|
|
93
|
+
<Button variant="secondary" icon="arrow-right" disabled />
|
|
94
|
+
</div>
|
|
95
|
+
<p>light buttons</p>
|
|
96
|
+
<div class="flex flex-wrap gap-4">
|
|
97
|
+
<Button
|
|
98
|
+
variant="light"
|
|
99
|
+
size="small"
|
|
100
|
+
icon="arrow-right"
|
|
101
|
+
label="light Button"
|
|
102
|
+
/>
|
|
103
|
+
<Button variant="light" icon="arrow-right" label="light Button" />
|
|
104
|
+
<Button variant="light" size="small" icon="arrow-right" />
|
|
105
|
+
<Button variant="light" icon="arrow-right" />
|
|
106
|
+
</div>
|
|
128
107
|
</div>
|
|
129
108
|
</div>
|
|
130
109
|
</main>
|
|
131
110
|
</Layout>
|
|
111
|
+
|
|
112
|
+
<style>
|
|
113
|
+
body {
|
|
114
|
+
margin: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.dark-bg {
|
|
118
|
+
background-color: var(--ac-color-dark);
|
|
119
|
+
padding: 1rem;
|
|
120
|
+
}
|
|
121
|
+
</style>
|