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