ada-ui 4.7.0 → 5.1.0
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/.github/workflows/release.yml +4 -2
- package/CHANGELOG.md +20 -0
- package/README.md +5 -7
- package/css/ada.blue.css +1 -1
- package/css/ada.css +1 -1
- package/css/ada.green.css +1 -1
- package/index.html +394 -161
- package/package.json +7 -6
- package/scss/_ada.theme-base.scss +9 -10
- package/scss/_command.scss +141 -0
- package/scss/_global.scss +57 -0
- package/scss/_input.scss +7 -8
- package/scss/_panel.scss +43 -39
- package/scss/_reset.scss +88 -0
- package/scss/_spinner.scss +8 -7
- package/scss/_typography.scss +10 -47
- package/scss/ada.blue.scss +17 -87
- package/scss/ada.green.scss +1 -90
- package/scss/ada.scss +3 -49
- package/scss/deprecated/_ada.blue-old.scss +111 -0
- package/scss/deprecated/_ada.green-old.scss +90 -0
- package/scss/deprecated/_button.scss +92 -0
- package/scss/{_commands.scss → deprecated/_commands.scss} +29 -23
- package/scss/{_spinner-lab.scss → deprecated/_spinner-lab.scss} +10 -10
- package/scss/{_tile.scss → deprecated/_tile.scss} +10 -9
- package/scss/_button.scss +0 -52
- package/scss/_corner.scss +0 -47
- package/tailwind.config.js +0 -8
package/index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
2
|
+
<html class="height-100">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<title>Ada</title>
|
|
@@ -17,220 +17,453 @@
|
|
|
17
17
|
rel="stylesheet"
|
|
18
18
|
/>
|
|
19
19
|
<style>
|
|
20
|
-
|
|
20
|
+
html {
|
|
21
|
+
scroll-padding-top: 1rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
html.height-100 {
|
|
25
|
+
height: 100%;
|
|
26
|
+
min-height: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
html.height-100 > body {
|
|
30
|
+
height: 100%;
|
|
31
|
+
min-height: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
html:not(.height-100) > body {
|
|
35
|
+
align-items: start;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.typography {
|
|
39
|
+
display: grid;
|
|
40
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
41
|
+
gap: var(--spacing);
|
|
42
|
+
justify-content: start;
|
|
43
|
+
}
|
|
44
|
+
.typography > p {
|
|
45
|
+
grid-column: span 3;
|
|
46
|
+
display: grid;
|
|
47
|
+
grid-template-columns: subgrid;
|
|
48
|
+
gap: var(--spacing);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.color-shades {
|
|
52
|
+
display: grid;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.color-shades > h3 {
|
|
56
|
+
margin-bottom: var(--spacing-sm);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.color-shades > div {
|
|
21
60
|
display: inline-grid;
|
|
22
61
|
align-items: center;
|
|
23
62
|
justify-items: center;
|
|
24
|
-
width:
|
|
25
|
-
height:
|
|
26
|
-
margin: 1rem;
|
|
63
|
+
width: 8rem;
|
|
64
|
+
height: 3rem;
|
|
27
65
|
box-sizing: border-box;
|
|
28
|
-
color: var(--
|
|
29
|
-
|
|
30
|
-
|
|
66
|
+
color: var(--color100);
|
|
67
|
+
border-bottom: 1px solid transparent;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.color-shades > div:last-of-type {
|
|
71
|
+
border-bottom: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.color-shades.usage > div {
|
|
75
|
+
border-color: var(--color600);
|
|
76
|
+
color: inherit;
|
|
77
|
+
width: auto;
|
|
78
|
+
padding: 0 1rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.color-shades > div.color950 {
|
|
82
|
+
background: var(--color950);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.color-shades > div.color800 {
|
|
86
|
+
background: var(--color800);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.color-shades > div.color700 {
|
|
90
|
+
background: var(--color700);
|
|
31
91
|
}
|
|
32
92
|
|
|
33
|
-
.color-
|
|
34
|
-
|
|
35
|
-
background: var(--default-alpha40);
|
|
36
|
-
border-top: 8px solid var(--light-alpha40);
|
|
93
|
+
.color-shades > div.color600 {
|
|
94
|
+
background: var(--color600);
|
|
37
95
|
}
|
|
38
96
|
|
|
39
|
-
.color-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
97
|
+
.color-shades > div.color500 {
|
|
98
|
+
background: var(--color500);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.color-shades > div.color100 {
|
|
102
|
+
background: var(--color100);
|
|
103
|
+
color: var(--color800);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.spacing {
|
|
107
|
+
display: grid;
|
|
108
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
109
|
+
gap: var(--spacing);
|
|
110
|
+
align-items: center;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.spacing-box {
|
|
114
|
+
display: inline-block;
|
|
115
|
+
background: var(--color500);
|
|
116
|
+
width: var(--spacing);
|
|
117
|
+
height: var(--spacing);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.spacing-box.xs {
|
|
121
|
+
width: var(--spacing-xs);
|
|
122
|
+
height: var(--spacing-xs);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.spacing-box.sm {
|
|
126
|
+
width: var(--spacing-sm);
|
|
127
|
+
height: var(--spacing-sm);
|
|
43
128
|
}
|
|
44
129
|
</style>
|
|
45
130
|
</head>
|
|
46
131
|
|
|
47
|
-
<body
|
|
132
|
+
<body
|
|
133
|
+
style="
|
|
134
|
+
display: grid;
|
|
135
|
+
grid-template-columns: minmax(12vw, auto) 1fr;
|
|
136
|
+
grid-template-rows: 1fr auto;
|
|
137
|
+
column-gap: var(--spacing);
|
|
138
|
+
"
|
|
139
|
+
>
|
|
48
140
|
<div
|
|
49
|
-
class="commands vertical"
|
|
50
|
-
style="
|
|
141
|
+
class="compound-commands vertical"
|
|
142
|
+
style="position: sticky; top: var(--spacing)"
|
|
51
143
|
>
|
|
52
|
-
<
|
|
53
|
-
<
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
<
|
|
144
|
+
<div class="spacer"></div>
|
|
145
|
+
<a href="#typography" class="command shade1">Typography</a>
|
|
146
|
+
<a href="#spacing" class="command shade1">Spacing</a>
|
|
147
|
+
<a href="#colors" class="command shade1">Colors</a>
|
|
148
|
+
<a href="#page-layout" class="command shade1">Page Layout</a>
|
|
149
|
+
<a href="#command" class="command shade3">Command</a>
|
|
150
|
+
<a href="#panel" class="command shade2">Panel</a>
|
|
151
|
+
<a href="#input" class="command">Input</a>
|
|
152
|
+
<a href="#spinner" class="command">Spinner</a>
|
|
153
|
+
<div style="flex: 1" class="spacer"></div>
|
|
154
|
+
<div class="spacer"></div>
|
|
57
155
|
</div>
|
|
58
|
-
<div class="panel"
|
|
59
|
-
<header>
|
|
60
|
-
<article
|
|
156
|
+
<div class="panel">
|
|
157
|
+
<header><h1>Ada UI Design Guide</h1></header>
|
|
158
|
+
<article
|
|
159
|
+
style="
|
|
160
|
+
display: grid;
|
|
161
|
+
grid-auto-rows: max-content;
|
|
162
|
+
gap: var(--spacing);
|
|
163
|
+
scroll-padding-top: 1rem;
|
|
164
|
+
"
|
|
165
|
+
>
|
|
61
166
|
<div class="panel">
|
|
62
|
-
<header>
|
|
63
|
-
<article>
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
167
|
+
<header><h2 id="typography">Typography</h2></header>
|
|
168
|
+
<article class="typography">
|
|
169
|
+
<p style="font-size: var(--scale-3xl)">
|
|
170
|
+
<code>--scale-3xl</code>
|
|
171
|
+
<span>1.8rem</span>
|
|
172
|
+
<span>Headline 1, Text in Compound Commands</span>
|
|
173
|
+
</p>
|
|
174
|
+
<p style="font-size: var(--scale-2xl)">
|
|
175
|
+
<code>--scale-2xl</code>
|
|
176
|
+
<span>1.6rem</span>
|
|
177
|
+
<span>Headline 2</span>
|
|
178
|
+
</p>
|
|
179
|
+
<p style="font-size: var(--scale-xl)">
|
|
180
|
+
<code>--scale-xl</code>
|
|
181
|
+
<span>1.4rem</span>
|
|
182
|
+
<span>Headline 3</span>
|
|
183
|
+
</p>
|
|
184
|
+
<p style="font-size: var(--scale-lg)">
|
|
185
|
+
<code>--scale-lg</code>
|
|
186
|
+
<span>1.2rem</span>
|
|
187
|
+
<span>Headline 4</span>
|
|
188
|
+
</p>
|
|
189
|
+
<p style="font-size: var(--scale-base)">
|
|
190
|
+
<code>--scale-base</code>
|
|
191
|
+
<span>1rem</span>
|
|
192
|
+
<span>Normal Text, Command Label</span>
|
|
193
|
+
</p>
|
|
194
|
+
<p style="font-size: var(--scale-sm)">
|
|
195
|
+
<code>--scale-sm</code>
|
|
196
|
+
<span>0.85rem</span>
|
|
197
|
+
<span>Small Text, Panel Footer</span>
|
|
198
|
+
</p>
|
|
82
199
|
</article>
|
|
83
200
|
<footer></footer>
|
|
84
201
|
</div>
|
|
85
202
|
<div class="panel">
|
|
86
|
-
<header>
|
|
87
|
-
<article>
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
<
|
|
91
|
-
<
|
|
92
|
-
<
|
|
93
|
-
<
|
|
94
|
-
<
|
|
95
|
-
<
|
|
96
|
-
<
|
|
97
|
-
<button class="button small shade2">Button</button>
|
|
98
|
-
<button class="button small accent">Button</button>
|
|
99
|
-
<button class="button small warn">Button</button>
|
|
100
|
-
<h4>Fill</h4>
|
|
101
|
-
<button class="button fill">Button</button>
|
|
102
|
-
<button class="button fill shade1">Button</button>
|
|
103
|
-
<button class="button fill shade2">Button</button>
|
|
104
|
-
<button class="button fill accent">Button</button>
|
|
105
|
-
<button class="button fill warn">Button</button>
|
|
106
|
-
<h4>Disabled</h4>
|
|
107
|
-
<button disabled class="button">Button</button>
|
|
108
|
-
<button disabled class="button fill">Button</button>
|
|
109
|
-
<button disabled class="button fill shade1">Button</button>
|
|
110
|
-
<button disabled class="button fill shade2">Button</button>
|
|
111
|
-
<button disabled class="button fill accent">Button</button>
|
|
112
|
-
<button disabled class="button fill warn">Button</button>
|
|
203
|
+
<header><h2 id="spacing">Spacing</h2></header>
|
|
204
|
+
<article class="spacing">
|
|
205
|
+
<code>--spacing-xs</code>
|
|
206
|
+
<span>2px</span>
|
|
207
|
+
<div class="spacing-box xs shade3"></div>
|
|
208
|
+
<code>--spacing-sm</code>
|
|
209
|
+
<span>6px</span>
|
|
210
|
+
<div class="spacing-box sm shade3"></div>
|
|
211
|
+
<code>--spacing</code>
|
|
212
|
+
<span>10px</span>
|
|
213
|
+
<div class="spacing-box shade3"></div>
|
|
113
214
|
</article>
|
|
114
215
|
<footer></footer>
|
|
115
216
|
</div>
|
|
116
217
|
<div class="panel">
|
|
117
|
-
<header>
|
|
118
|
-
<article>
|
|
119
|
-
<
|
|
218
|
+
<header><h2 id="colors">Colors</h2></header>
|
|
219
|
+
<article style="display: flex; gap: var(--spacing); flex-wrap: wrap">
|
|
220
|
+
<div class="color-shades usage">
|
|
221
|
+
<h3> </h3>
|
|
222
|
+
<div>Text Color</div>
|
|
223
|
+
<div>Active/Focus State</div>
|
|
224
|
+
<div>Border/Flash Color</div>
|
|
225
|
+
<div>Corner Color</div>
|
|
226
|
+
<div>Command Color</div>
|
|
227
|
+
<div>Background</div>
|
|
228
|
+
</div>
|
|
229
|
+
<div class="color-shades">
|
|
230
|
+
<h3>Primary</h3>
|
|
231
|
+
<div class="color100">100</div>
|
|
232
|
+
<div class="color500">500</div>
|
|
233
|
+
<div class="color600">600</div>
|
|
234
|
+
<div class="color700">700</div>
|
|
235
|
+
<div class="color800">800</div>
|
|
236
|
+
<div class="color950">950</div>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="color-shades">
|
|
239
|
+
<h3>Shade 1</h3>
|
|
240
|
+
<div class="color100 shade1">100</div>
|
|
241
|
+
<div class="color500 shade1">500</div>
|
|
242
|
+
<div class="color600 shade1">600</div>
|
|
243
|
+
<div class="color700 shade1">700</div>
|
|
244
|
+
<div class="color800 shade1">800</div>
|
|
245
|
+
<div class="color950 shade1">950</div>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="color-shades">
|
|
248
|
+
<h3>Shade 2</h3>
|
|
249
|
+
<div class="color100 shade2">100</div>
|
|
250
|
+
<div class="color500 shade2">500</div>
|
|
251
|
+
<div class="color600 shade2">600</div>
|
|
252
|
+
<div class="color700 shade2">700</div>
|
|
253
|
+
<div class="color800 shade2">800</div>
|
|
254
|
+
<div class="color950 shade2">950</div>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="color-shades">
|
|
257
|
+
<h3>Shade 3</h3>
|
|
258
|
+
<div class="color100 shade3">100</div>
|
|
259
|
+
<div class="color500 shade3">500</div>
|
|
260
|
+
<div class="color600 shade3">600</div>
|
|
261
|
+
<div class="color700 shade3">700</div>
|
|
262
|
+
<div class="color800 shade3">800</div>
|
|
263
|
+
<div class="color950 shade3">950</div>
|
|
264
|
+
</div>
|
|
265
|
+
<div class="color-shades">
|
|
266
|
+
<h3>Warn</h3>
|
|
267
|
+
<div class="color100 warn">100</div>
|
|
268
|
+
<div class="color500 warn">500</div>
|
|
269
|
+
<div class="color600 warn">600</div>
|
|
270
|
+
<div class="color700 warn">700</div>
|
|
271
|
+
<div class="color800 warn">800</div>
|
|
272
|
+
<div class="color950 warn">950</div>
|
|
273
|
+
</div>
|
|
120
274
|
</article>
|
|
121
275
|
<footer></footer>
|
|
122
276
|
</div>
|
|
123
277
|
<div class="panel">
|
|
124
|
-
<header>
|
|
278
|
+
<header><h2 id="page-layout">Page Layout</h2></header>
|
|
125
279
|
<article>
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<div class="spinner" style="font-size: 32px"></div>
|
|
135
|
-
<div class="spinner shade1" style="font-size: 32px"></div>
|
|
136
|
-
<div class="spinner shade2" style="font-size: 32px"></div>
|
|
137
|
-
<div class="spinner accent" style="font-size: 32px"></div>
|
|
138
|
-
<div class="spinner warn" style="font-size: 32px"></div>
|
|
139
|
-
<h4>16px</h4>
|
|
140
|
-
<div class="spinner" style="font-size: 16px"></div>
|
|
141
|
-
<div class="spinner shade1" style="font-size: 16px"></div>
|
|
142
|
-
<div class="spinner shade2" style="font-size: 16px"></div>
|
|
143
|
-
<div class="spinner accent" style="font-size: 16px"></div>
|
|
144
|
-
<div class="spinner warn" style="font-size: 16px"></div>
|
|
145
|
-
</div>
|
|
280
|
+
<p style="grid-column: span 5; max-width: 35rem">
|
|
281
|
+
Choose yourself whether the body should scroll or the body should
|
|
282
|
+
have a fixed width of 100%. For the latter, you should use one or
|
|
283
|
+
more top-most panels which then will scroll their content. You can
|
|
284
|
+
see both options and how to implement them by toggling the class
|
|
285
|
+
<code>height-100</code> on the <code>html</code> element of this
|
|
286
|
+
demo page.
|
|
287
|
+
</p>
|
|
146
288
|
</article>
|
|
147
289
|
<footer></footer>
|
|
148
290
|
</div>
|
|
149
291
|
<div class="panel">
|
|
150
|
-
<header>
|
|
292
|
+
<header><h2 id="command">Command</h2></header>
|
|
151
293
|
<article
|
|
152
294
|
style="
|
|
153
|
-
display: grid;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
295
|
+
display: inline-grid;
|
|
296
|
+
justify-content: start;
|
|
297
|
+
justify-items: start;
|
|
298
|
+
gap: 1rem;
|
|
157
299
|
"
|
|
158
300
|
>
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
301
|
+
<h3 style="grid-column: span 5">Default</h3>
|
|
302
|
+
<button class="command">Command</button>
|
|
303
|
+
<button class="command shade1">Command</button>
|
|
304
|
+
<button class="command shade2">Command</button>
|
|
305
|
+
<button class="command shade3">Command</button>
|
|
306
|
+
<button class="command warn">Command</button>
|
|
307
|
+
<h3 style="grid-column: span 5">Outline</h3>
|
|
308
|
+
<button class="command outline">Command</button>
|
|
309
|
+
<button class="command outline shade1">Command</button>
|
|
310
|
+
<button class="command outline shade2">Command</button>
|
|
311
|
+
<button class="command outline shade3">Command</button>
|
|
312
|
+
<button class="command outline warn">Command</button>
|
|
313
|
+
<h3 style="grid-column: span 5">Flashing</h3>
|
|
314
|
+
<button class="command flash">Command</button>
|
|
315
|
+
<button class="command flash shade1">Command</button>
|
|
316
|
+
<button class="command flash shade2">Command</button>
|
|
317
|
+
<button class="command flash shade3">Command</button>
|
|
318
|
+
<button class="command flash warn">Command</button>
|
|
319
|
+
<button class="command flash outline">Command</button>
|
|
320
|
+
<button class="command flash outline shade1">Command</button>
|
|
321
|
+
<button class="command flash outline shade2">Command</button>
|
|
322
|
+
<button class="command flash outline shade3">Command</button>
|
|
323
|
+
<button class="command flash outline warn">Command</button>
|
|
324
|
+
<h3 style="grid-column: span 5">Disabled</h3>
|
|
325
|
+
<button disabled class="command">Command</button>
|
|
326
|
+
<button disabled class="command outline">Command</button>
|
|
327
|
+
<h3 style="grid-column: span 5">Wrapping</h3>
|
|
328
|
+
<p style="grid-column: span 5; max-width: 35rem">
|
|
329
|
+
The command's text is wrapped by default which increases the
|
|
330
|
+
height of the command.
|
|
331
|
+
</p>
|
|
332
|
+
<button
|
|
333
|
+
style="max-width: 20rem; grid-column: span 5"
|
|
334
|
+
class="command"
|
|
335
|
+
>
|
|
336
|
+
A command with a quite long description.
|
|
337
|
+
</button>
|
|
338
|
+
<p style="grid-column: span 5; max-width: 35rem">
|
|
339
|
+
If you want to use ellipsis and a single line of text, a wrapper
|
|
340
|
+
element is needed. See page's source code for details.
|
|
341
|
+
</p>
|
|
342
|
+
<p style="grid-column: span 5; max-width: 35rem">
|
|
343
|
+
Double check if ellipsis is really needed and if yes, that the
|
|
344
|
+
full text is visible with another interaction (no tooltip, since
|
|
345
|
+
not mobile friendly and not in the sense of the Ada look and feel)
|
|
346
|
+
</p>
|
|
347
|
+
<button
|
|
348
|
+
style="max-width: 20rem; grid-column: span 5"
|
|
349
|
+
class="command"
|
|
350
|
+
>
|
|
351
|
+
<span
|
|
352
|
+
style="
|
|
353
|
+
text-overflow: ellipsis;
|
|
354
|
+
overflow: hidden;
|
|
355
|
+
white-space: nowrap;
|
|
356
|
+
width: 100%;
|
|
357
|
+
"
|
|
358
|
+
>
|
|
359
|
+
A command with a quite long description.
|
|
360
|
+
</span>
|
|
361
|
+
</button>
|
|
362
|
+
<h3 style="grid-column: span 5">Compound</h3>
|
|
363
|
+
<div style="grid-column: span 5" class="compound-commands">
|
|
364
|
+
<button class="command">Command</button>
|
|
365
|
+
<button class="command"></button>
|
|
366
|
+
<div class="spacer"></div>
|
|
163
367
|
</div>
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
<
|
|
167
|
-
<
|
|
368
|
+
<h4 style="grid-column: span 5">With Text</h4>
|
|
369
|
+
<div style="grid-column: span 5" class="compound-commands">
|
|
370
|
+
<button class="command">Command</button>
|
|
371
|
+
<div class="text">47</div>
|
|
372
|
+
<div class="spacer"></div>
|
|
168
373
|
</div>
|
|
169
|
-
<
|
|
170
|
-
|
|
171
|
-
<
|
|
172
|
-
<
|
|
374
|
+
<h4 style="grid-column: span 5">Vertical</h4>
|
|
375
|
+
<div style="grid-column: span 5" class="compound-commands vertical">
|
|
376
|
+
<div class="spacer"></div>
|
|
377
|
+
<button class="command">Command</button>
|
|
378
|
+
<button class="command"></button>
|
|
379
|
+
</div>
|
|
380
|
+
</article>
|
|
381
|
+
<footer></footer>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="panel">
|
|
384
|
+
<header><h2 id="panel">Panel</h2></header>
|
|
385
|
+
<article style="display: grid; gap: var(--spacing)">
|
|
386
|
+
<h3>Without Header and Footer</h3>
|
|
387
|
+
<div class="panel">
|
|
388
|
+
<header></header>
|
|
389
|
+
<article>Content</article>
|
|
390
|
+
<footer></footer>
|
|
173
391
|
</div>
|
|
174
|
-
<
|
|
392
|
+
<h3>With Header and Footer</h3>
|
|
393
|
+
<div class="panel">
|
|
175
394
|
<header>Header</header>
|
|
176
|
-
<article>
|
|
395
|
+
<article>Content</article>
|
|
177
396
|
<footer>Footer</footer>
|
|
178
397
|
</div>
|
|
179
|
-
<
|
|
398
|
+
<h3>With another color variant</h3>
|
|
399
|
+
<div class="panel shade3">
|
|
180
400
|
<header>Header</header>
|
|
181
|
-
<article>
|
|
401
|
+
<article>Content</article>
|
|
182
402
|
<footer>Footer</footer>
|
|
183
403
|
</div>
|
|
184
|
-
<
|
|
404
|
+
<h3>Stacking</h3>
|
|
405
|
+
<p>
|
|
406
|
+
The panel has a translucent background, so when stacking multiple
|
|
407
|
+
panels the background changes slightly with each level.
|
|
408
|
+
</p>
|
|
409
|
+
<div class="panel" style="margin: var(--spacing)">
|
|
185
410
|
<header></header>
|
|
186
|
-
<article>
|
|
411
|
+
<article>
|
|
412
|
+
<div class="panel" style="margin: var(--spacing)">
|
|
413
|
+
<header></header>
|
|
414
|
+
<article>
|
|
415
|
+
<div class="panel" style="margin: var(--spacing)">
|
|
416
|
+
<header></header>
|
|
417
|
+
<article>Content</article>
|
|
418
|
+
<footer></footer>
|
|
419
|
+
</div>
|
|
420
|
+
</article>
|
|
421
|
+
<footer></footer>
|
|
422
|
+
</div>
|
|
423
|
+
</article>
|
|
187
424
|
<footer></footer>
|
|
188
425
|
</div>
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
<
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
426
|
+
</article>
|
|
427
|
+
<footer></footer>
|
|
428
|
+
</div>
|
|
429
|
+
<div class="panel">
|
|
430
|
+
<header><h2 id="input">Input</h2></header>
|
|
431
|
+
<article style="display: grid; gap: var(--spacing)">
|
|
432
|
+
<h3>Default</h3>
|
|
433
|
+
<input class="input" />
|
|
434
|
+
<h3>Disabled</h3>
|
|
435
|
+
<input disabled class="input" />
|
|
436
|
+
</article>
|
|
437
|
+
<footer></footer>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="panel">
|
|
440
|
+
<header><h2 id="spinner">Spinner</h2></header>
|
|
441
|
+
<article>
|
|
442
|
+
<div>
|
|
443
|
+
<h3>80px</h3>
|
|
444
|
+
<div class="spinner" style="font-size: 80px"></div>
|
|
445
|
+
<div class="spinner shade1" style="font-size: 80px"></div>
|
|
446
|
+
<div class="spinner shade2" style="font-size: 80px"></div>
|
|
447
|
+
<div class="spinner shade3" style="font-size: 80px"></div>
|
|
448
|
+
<div class="spinner warn" style="font-size: 80px"></div>
|
|
449
|
+
<h3>32px</h3>
|
|
450
|
+
<div class="spinner" style="font-size: 32px"></div>
|
|
451
|
+
<div class="spinner shade1" style="font-size: 32px"></div>
|
|
452
|
+
<div class="spinner shade2" style="font-size: 32px"></div>
|
|
453
|
+
<div class="spinner shade3" style="font-size: 32px"></div>
|
|
454
|
+
<div class="spinner warn" style="font-size: 32px"></div>
|
|
455
|
+
<h3>16px</h3>
|
|
456
|
+
<div class="spinner" style="font-size: 16px"></div>
|
|
457
|
+
<div class="spinner shade1" style="font-size: 16px"></div>
|
|
458
|
+
<div class="spinner shade2" style="font-size: 16px"></div>
|
|
459
|
+
<div class="spinner shade3" style="font-size: 16px"></div>
|
|
460
|
+
<div class="spinner warn" style="font-size: 16px"></div>
|
|
212
461
|
</div>
|
|
213
462
|
</article>
|
|
214
463
|
<footer></footer>
|
|
215
464
|
</div>
|
|
216
465
|
</article>
|
|
217
|
-
<footer>
|
|
218
|
-
</div>
|
|
219
|
-
<div
|
|
220
|
-
class="commands"
|
|
221
|
-
style="
|
|
222
|
-
grid-area: cmd;
|
|
223
|
-
grid-template-columns: auto 12rem auto auto 1fr auto;
|
|
224
|
-
"
|
|
225
|
-
>
|
|
226
|
-
<button style="justify-items: center; align-items: center">
|
|
227
|
-
<div class="spinner" style="font-size: 30px"></div>
|
|
228
|
-
</button>
|
|
229
|
-
<button class="shade2">Command and sth more looong</button>
|
|
230
|
-
<button class="warn flash">Blinking</button>
|
|
231
|
-
<button disabled class="warn">Disabled</button>
|
|
232
|
-
<div></div>
|
|
233
|
-
Commands
|
|
466
|
+
<footer>Ada Version 5.0.0</footer>
|
|
234
467
|
</div>
|
|
235
468
|
</body>
|
|
236
469
|
</html>
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.1.0",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
|
|
6
6
|
"build": "rm -rf css && sass scss:css -s compressed --no-source-map",
|
|
7
|
-
"
|
|
8
|
-
"snapshot": "npm run build && changeset version --snapshot $1 && changeset publish --no-git-tag --
|
|
9
|
-
"
|
|
7
|
+
"changeset": "changeset",
|
|
8
|
+
"snapshot": "f(){ if [ -z \"$1\" ]; then echo \"Error: No tag name specified, exiting.\"; exit 1; fi; npm run build && changeset version --snapshot $1 && changeset publish --no-git-tag --tag $1; }; f",
|
|
9
|
+
"remove-snapshot": "f(){ if [ -z \"$1\" ]; then echo \"Error: No tag name specified, exiting.\"; exit 1; fi; npm dist-tag rm ada-ui $1; }; f",
|
|
10
|
+
"version": "npm run build && changeset version",
|
|
11
|
+
"publish-package": "changeset publish"
|
|
10
12
|
},
|
|
11
13
|
"license": "MIT",
|
|
12
14
|
"exports": {
|
|
13
15
|
".": "./css/ada.css",
|
|
14
16
|
"./blue": "./css/ada.blue.css",
|
|
15
|
-
"./green": "./css/ada.green.css"
|
|
16
|
-
"./tailwind": "./tailwind.config.js"
|
|
17
|
+
"./green": "./css/ada.green.css"
|
|
17
18
|
},
|
|
18
19
|
"repository": {
|
|
19
20
|
"type": "git",
|