ada-ui 5.1.2-test-78f41d7705169e98447060a979808d45697a468b → 5.2.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/CHANGELOG.md +6 -2
- package/css/ada.css +1 -1
- package/index.html +168 -237
- package/package.json +1 -1
- package/scss/_command.scss +12 -7
- package/scss/_global.scss +3 -3
- package/scss/ada.green.scss +0 -1
- package/style.css +147 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
# ada-ui
|
|
2
2
|
|
|
3
|
-
## 5.
|
|
3
|
+
## 5.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 1bb7ec4: Add abbreviations for commands to be shown on small screens instead of the default label
|
|
4
8
|
|
|
5
9
|
### Patch Changes
|
|
6
10
|
|
|
7
|
-
-
|
|
11
|
+
- d9ec56e: Using whole border as focus state
|
|
8
12
|
|
|
9
13
|
## 5.1.1
|
|
10
14
|
|
package/css/ada.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--
|
|
1
|
+
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--spacing-lg: 14px;--border-width: 2px;--border-radius: 0.3rem}@media screen and (min-width: 640px){:root{--font-size: 14px}}:root.light-theme{--box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4)}.panel>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:1rem;padding:var(--spacing);background:var(--bg-body);color:var(--fg-body);transition:background-color .15s ease-in-out}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}h1{font-size:var(--scale-3xl)}h2{font-size:var(--scale-2xl)}h3{font-size:var(--scale-xl)}h4{font-size:var(--scale-lg)}.command{background-color:var(--color800);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:var(--border-width);padding:var(--spacing-xs) var(--spacing-sm);min-height:3rem;min-width:3rem;border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--color100);font-family:inherit;font-size:var(--scale-base);cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command.flash{animation:flash-background 1s ease-in-out infinite}.command[data-label][data-abbr]::after{content:attr(data-abbr)}@media(min-width: 640px){.command[data-label][data-abbr]::after{content:attr(data-label)}}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:active{color:var(--color100)}.command:focus{border-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.compound-commands>.text{font-size:var(--scale-3xl);line-height:var(--scale-3xl);align-self:center;padding:var(--spacing-xs)}.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.compound-commands.vertical{flex-direction:column}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>.command:first-child,.compound-commands.vertical .spacer:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.compound-commands.vertical>.command:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}@keyframes flash-background{50%{background-color:var(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-base)}.input:focus{border:var(--border-width) solid var(--color500)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--color700);position:absolute;height:1rem;width:1rem;z-index:2}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:var(--scale-xl);padding:var(--spacing-sm) var(--spacing)}.panel>header:empty{padding:0}.panel>header::before{border-width:var(--border-width) 0 0 var(--border-width);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after{border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article{z-index:1;padding:var(--spacing);overflow:auto}.panel>footer{position:relative;padding:var(--spacing-sm) var(--spacing);font-size:var(--scale-sm);text-align:right}.panel>footer:empty{padding:0}.panel>footer::before{border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after{border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
|
package/index.html
CHANGED
|
@@ -10,143 +10,36 @@
|
|
|
10
10
|
name="viewport"
|
|
11
11
|
content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
|
|
12
12
|
/>
|
|
13
|
+
<link rel="stylesheet" href="style.css" />
|
|
13
14
|
<link rel="stylesheet" href="css/ada.blue.css" />
|
|
14
15
|
<link rel="stylesheet" href="css/ada.css" />
|
|
15
16
|
<link
|
|
16
17
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
|
17
18
|
rel="stylesheet"
|
|
18
19
|
/>
|
|
19
|
-
<style>
|
|
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 {
|
|
60
|
-
display: inline-grid;
|
|
61
|
-
align-items: center;
|
|
62
|
-
justify-items: center;
|
|
63
|
-
width: 8rem;
|
|
64
|
-
height: 3rem;
|
|
65
|
-
box-sizing: border-box;
|
|
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);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.color-shades > div.color600 {
|
|
94
|
-
background: var(--color600);
|
|
95
|
-
}
|
|
96
|
-
|
|
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);
|
|
128
|
-
}
|
|
129
|
-
</style>
|
|
130
20
|
</head>
|
|
131
21
|
|
|
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
|
-
>
|
|
22
|
+
<body>
|
|
140
23
|
<div
|
|
141
24
|
class="compound-commands vertical"
|
|
142
25
|
style="position: sticky; top: var(--spacing)"
|
|
143
26
|
>
|
|
144
27
|
<div class="spacer"></div>
|
|
145
|
-
<a
|
|
28
|
+
<a
|
|
29
|
+
href="#typography"
|
|
30
|
+
class="command shade1"
|
|
31
|
+
data-label="Typography"
|
|
32
|
+
data-abbr="Typo"
|
|
33
|
+
></a>
|
|
146
34
|
<a href="#spacing" class="command shade1">Spacing</a>
|
|
147
35
|
<a href="#colors" class="command shade1">Colors</a>
|
|
148
36
|
<a href="#page-layout" class="command shade1">Page Layout</a>
|
|
149
|
-
<a
|
|
37
|
+
<a
|
|
38
|
+
href="#command"
|
|
39
|
+
class="command shade3"
|
|
40
|
+
data-label="Command"
|
|
41
|
+
data-abbr="Cmd"
|
|
42
|
+
></a>
|
|
150
43
|
<a href="#panel" class="command shade2">Panel</a>
|
|
151
44
|
<a href="#input" class="command">Input</a>
|
|
152
45
|
<a href="#spinner" class="command">Spinner</a>
|
|
@@ -157,42 +50,42 @@
|
|
|
157
50
|
<header><h1>Ada UI Design Guide</h1></header>
|
|
158
51
|
<article
|
|
159
52
|
style="
|
|
53
|
+
scroll-padding-top: 1rem;
|
|
160
54
|
display: grid;
|
|
161
55
|
grid-auto-rows: max-content;
|
|
162
56
|
gap: var(--spacing);
|
|
163
|
-
scroll-padding-top: 1rem;
|
|
164
57
|
"
|
|
165
58
|
>
|
|
166
59
|
<div class="panel">
|
|
167
60
|
<header><h2 id="typography">Typography</h2></header>
|
|
168
61
|
<article class="typography">
|
|
169
|
-
<p
|
|
170
|
-
<code>--scale-3xl</code>
|
|
62
|
+
<p>
|
|
63
|
+
<code style="font-size: var(--scale-3xl)">--scale-3xl</code>
|
|
171
64
|
<span>1.8rem</span>
|
|
172
65
|
<span>Headline 1, Text in Compound Commands</span>
|
|
173
66
|
</p>
|
|
174
|
-
<p
|
|
175
|
-
<code>--scale-2xl</code>
|
|
67
|
+
<p>
|
|
68
|
+
<code style="font-size: var(--scale-2xl)">--scale-2xl</code>
|
|
176
69
|
<span>1.6rem</span>
|
|
177
70
|
<span>Headline 2</span>
|
|
178
71
|
</p>
|
|
179
|
-
<p
|
|
180
|
-
<code>--scale-xl</code>
|
|
72
|
+
<p>
|
|
73
|
+
<code style="font-size: var(--scale-xl)">--scale-xl</code>
|
|
181
74
|
<span>1.4rem</span>
|
|
182
75
|
<span>Headline 3</span>
|
|
183
76
|
</p>
|
|
184
|
-
<p
|
|
185
|
-
<code>--scale-lg</code>
|
|
77
|
+
<p>
|
|
78
|
+
<code style="font-size: var(--scale-lg)">--scale-lg</code>
|
|
186
79
|
<span>1.2rem</span>
|
|
187
80
|
<span>Headline 4</span>
|
|
188
81
|
</p>
|
|
189
|
-
<p
|
|
190
|
-
<code>--scale-base</code>
|
|
82
|
+
<p>
|
|
83
|
+
<code style="font-size: var(--scale-base)">--scale-base</code>
|
|
191
84
|
<span>1rem</span>
|
|
192
85
|
<span>Normal Text, Command Label</span>
|
|
193
86
|
</p>
|
|
194
|
-
<p
|
|
195
|
-
<code>--scale-sm</code>
|
|
87
|
+
<p>
|
|
88
|
+
<code style="font-size: var(--scale-sm)">--scale-sm</code>
|
|
196
89
|
<span>0.85rem</span>
|
|
197
90
|
<span>Small Text, Panel Footer</span>
|
|
198
91
|
</p>
|
|
@@ -211,65 +104,76 @@
|
|
|
211
104
|
<code>--spacing</code>
|
|
212
105
|
<span>10px</span>
|
|
213
106
|
<div class="spacing-box shade3"></div>
|
|
107
|
+
<code>--spacing-lg</code>
|
|
108
|
+
<span>14px</span>
|
|
109
|
+
<div class="spacing-box lg shade3"></div>
|
|
214
110
|
</article>
|
|
215
111
|
<footer></footer>
|
|
216
112
|
</div>
|
|
217
113
|
<div class="panel">
|
|
218
114
|
<header><h2 id="colors">Colors</h2></header>
|
|
219
|
-
<article style="display:
|
|
220
|
-
<div class="
|
|
221
|
-
<
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
<
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
115
|
+
<article style="display: grid; gap: var(--spacing)">
|
|
116
|
+
<div class="colors">
|
|
117
|
+
<div class="color-shades">
|
|
118
|
+
<h4>Primary</h4>
|
|
119
|
+
<div class="color100">100</div>
|
|
120
|
+
<div class="color500">500</div>
|
|
121
|
+
<div class="color600">600</div>
|
|
122
|
+
<div class="color700">700</div>
|
|
123
|
+
<div class="color800">800</div>
|
|
124
|
+
<div class="color950">950</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="color-shades">
|
|
127
|
+
<h4>Shade 1</h4>
|
|
128
|
+
<div class="color100 shade1">100</div>
|
|
129
|
+
<div class="color500 shade1">500</div>
|
|
130
|
+
<div class="color600 shade1">600</div>
|
|
131
|
+
<div class="color700 shade1">700</div>
|
|
132
|
+
<div class="color800 shade1">800</div>
|
|
133
|
+
<div class="color950 shade1">950</div>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="color-shades">
|
|
136
|
+
<h4>Shade 2</h4>
|
|
137
|
+
<div class="color100 shade2">100</div>
|
|
138
|
+
<div class="color500 shade2">500</div>
|
|
139
|
+
<div class="color600 shade2">600</div>
|
|
140
|
+
<div class="color700 shade2">700</div>
|
|
141
|
+
<div class="color800 shade2">800</div>
|
|
142
|
+
<div class="color950 shade2">950</div>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="color-shades">
|
|
145
|
+
<h4>Shade 3</h4>
|
|
146
|
+
<div class="color100 shade3">100</div>
|
|
147
|
+
<div class="color500 shade3">500</div>
|
|
148
|
+
<div class="color600 shade3">600</div>
|
|
149
|
+
<div class="color700 shade3">700</div>
|
|
150
|
+
<div class="color800 shade3">800</div>
|
|
151
|
+
<div class="color950 shade3">950</div>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="color-shades">
|
|
154
|
+
<h4>Warn</h4>
|
|
155
|
+
<div class="color100 warn">100</div>
|
|
156
|
+
<div class="color500 warn">500</div>
|
|
157
|
+
<div class="color600 warn">600</div>
|
|
158
|
+
<div class="color700 warn">700</div>
|
|
159
|
+
<div class="color800 warn">800</div>
|
|
160
|
+
<div class="color950 warn">950</div>
|
|
161
|
+
</div>
|
|
264
162
|
</div>
|
|
265
|
-
<
|
|
266
|
-
|
|
267
|
-
<
|
|
268
|
-
<
|
|
269
|
-
<
|
|
270
|
-
<
|
|
271
|
-
<
|
|
272
|
-
<
|
|
163
|
+
<h3>Usage</h3>
|
|
164
|
+
<div class="color-usages">
|
|
165
|
+
<code>100</code>
|
|
166
|
+
<span>Text Color</span>
|
|
167
|
+
<code>500</code>
|
|
168
|
+
<span>Active/Focus State</span>
|
|
169
|
+
<code>600</code>
|
|
170
|
+
<span>Border/Flash Color</span>
|
|
171
|
+
<code>700</code>
|
|
172
|
+
<span>Corner Color</span>
|
|
173
|
+
<code>800</code>
|
|
174
|
+
<span>Command Color</span>
|
|
175
|
+
<code>950</code>
|
|
176
|
+
<span>Background</span>
|
|
273
177
|
</div>
|
|
274
178
|
</article>
|
|
275
179
|
<footer></footer>
|
|
@@ -277,13 +181,15 @@
|
|
|
277
181
|
<div class="panel">
|
|
278
182
|
<header><h2 id="page-layout">Page Layout</h2></header>
|
|
279
183
|
<article>
|
|
280
|
-
<p
|
|
184
|
+
<p>
|
|
281
185
|
Choose yourself whether the body should scroll or the body should
|
|
282
186
|
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.
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
187
|
+
more top-most panels which then will scroll their content.
|
|
188
|
+
</p>
|
|
189
|
+
<p>
|
|
190
|
+
You can see both options and how to implement them by toggling the
|
|
191
|
+
class <code>height-100</code> on the <code>html</code> element of
|
|
192
|
+
this demo page.
|
|
287
193
|
</p>
|
|
288
194
|
</article>
|
|
289
195
|
<footer></footer>
|
|
@@ -298,56 +204,81 @@
|
|
|
298
204
|
gap: 1rem;
|
|
299
205
|
"
|
|
300
206
|
>
|
|
301
|
-
<h3
|
|
302
|
-
<
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
<
|
|
310
|
-
<
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
<
|
|
318
|
-
<
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
<
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
207
|
+
<h3>Default</h3>
|
|
208
|
+
<div class="row">
|
|
209
|
+
<button class="command">Command</button>
|
|
210
|
+
<button class="command shade1">Command</button>
|
|
211
|
+
<button class="command shade2">Command</button>
|
|
212
|
+
<button class="command shade3">Command</button>
|
|
213
|
+
<button class="command warn">Command</button>
|
|
214
|
+
</div>
|
|
215
|
+
<h3>Outline</h3>
|
|
216
|
+
<div class="row">
|
|
217
|
+
<button class="command outline">Command</button>
|
|
218
|
+
<button class="command outline shade1">Command</button>
|
|
219
|
+
<button class="command outline shade2">Command</button>
|
|
220
|
+
<button class="command outline shade3">Command</button>
|
|
221
|
+
<button class="command outline warn">Command</button>
|
|
222
|
+
</div>
|
|
223
|
+
<h3>Flashing</h3>
|
|
224
|
+
<div class="row">
|
|
225
|
+
<button class="command flash">Command</button>
|
|
226
|
+
<button class="command flash shade1">Command</button>
|
|
227
|
+
<button class="command flash shade2">Command</button>
|
|
228
|
+
<button class="command flash shade3">Command</button>
|
|
229
|
+
<button class="command flash warn">Command</button>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="row">
|
|
232
|
+
<button class="command flash outline">Command</button>
|
|
233
|
+
<button class="command flash outline shade1">Command</button>
|
|
234
|
+
<button class="command flash outline shade2">Command</button>
|
|
235
|
+
<button class="command flash outline shade3">Command</button>
|
|
236
|
+
<button class="command flash outline warn">Command</button>
|
|
237
|
+
</div>
|
|
238
|
+
<h3>Disabled</h3>
|
|
239
|
+
<div class="row">
|
|
240
|
+
<button disabled class="command">Command</button>
|
|
241
|
+
<button disabled class="command outline">Command</button>
|
|
242
|
+
</div>
|
|
243
|
+
<h3>Abbreviations for small screens</h3>
|
|
244
|
+
<p>
|
|
245
|
+
When rendered on small screens (<640px) an abbreviation can be
|
|
246
|
+
used to reduce the space a command needs. When doing so, the text
|
|
247
|
+
node of the command should be empty and two
|
|
248
|
+
<code>data-</code> attributes should be used:
|
|
249
|
+
<code>data-label</code> and <code>data-abbr</code>.
|
|
250
|
+
</p>
|
|
251
|
+
<p>
|
|
252
|
+
In order to see the difference below, reduce/increase the browser
|
|
253
|
+
window width.
|
|
331
254
|
</p>
|
|
332
255
|
<button
|
|
333
|
-
|
|
256
|
+
data-label="Internationalization"
|
|
257
|
+
data-abbr="i18n"
|
|
334
258
|
class="command"
|
|
335
|
-
>
|
|
259
|
+
></button>
|
|
260
|
+
<h3>Wrapping</h3>
|
|
261
|
+
<p>
|
|
262
|
+
The command's text is wrapped by default which increases the
|
|
263
|
+
height of the command.
|
|
264
|
+
</p>
|
|
265
|
+
<button style="max-width: 20rem" class="command">
|
|
336
266
|
A command with a quite long description.
|
|
337
267
|
</button>
|
|
338
|
-
<p
|
|
268
|
+
<p>
|
|
339
269
|
If you want to use ellipsis and a single line of text, a wrapper
|
|
340
270
|
element is needed. See page's source code for details.
|
|
341
271
|
</p>
|
|
342
|
-
<p
|
|
272
|
+
<p
|
|
273
|
+
class="warn"
|
|
274
|
+
style="font-size: var(--scale-lg); color: var(--color100)"
|
|
275
|
+
>
|
|
343
276
|
Double check if ellipsis is really needed and if yes, that the
|
|
344
277
|
full text is visible with another interaction (no tooltip, since
|
|
345
|
-
not mobile friendly and not in the sense of the Ada look and
|
|
278
|
+
not mobile friendly and not in the sense of the Ada look and
|
|
279
|
+
feel).
|
|
346
280
|
</p>
|
|
347
|
-
<button
|
|
348
|
-
style="max-width: 20rem; grid-column: span 5"
|
|
349
|
-
class="command"
|
|
350
|
-
>
|
|
281
|
+
<button style="max-width: 20rem" class="command">
|
|
351
282
|
<span
|
|
352
283
|
style="
|
|
353
284
|
text-overflow: ellipsis;
|
|
@@ -359,20 +290,20 @@
|
|
|
359
290
|
A command with a quite long description.
|
|
360
291
|
</span>
|
|
361
292
|
</button>
|
|
362
|
-
<h3
|
|
363
|
-
<div
|
|
293
|
+
<h3>Compound</h3>
|
|
294
|
+
<div class="compound-commands">
|
|
364
295
|
<button class="command">Command</button>
|
|
365
296
|
<button class="command"></button>
|
|
366
297
|
<div class="spacer"></div>
|
|
367
298
|
</div>
|
|
368
|
-
<h4
|
|
369
|
-
<div
|
|
299
|
+
<h4>With Text</h4>
|
|
300
|
+
<div class="compound-commands">
|
|
370
301
|
<button class="command">Command</button>
|
|
371
302
|
<div class="text">47</div>
|
|
372
303
|
<div class="spacer"></div>
|
|
373
304
|
</div>
|
|
374
|
-
<h4
|
|
375
|
-
<div
|
|
305
|
+
<h4>Vertical</h4>
|
|
306
|
+
<div class="compound-commands vertical">
|
|
376
307
|
<div class="spacer"></div>
|
|
377
308
|
<button class="command">Command</button>
|
|
378
309
|
<button class="command"></button>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.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",
|
package/scss/_command.scss
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
text-align: end;
|
|
8
8
|
border-style: solid;
|
|
9
9
|
border-color: transparent;
|
|
10
|
-
border-width:
|
|
10
|
+
border-width: var(--border-width);
|
|
11
11
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
12
12
|
min-height: 3rem;
|
|
13
13
|
min-width: 3rem;
|
|
@@ -26,6 +26,16 @@
|
|
|
26
26
|
animation: flash-background 1s ease-in-out infinite;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
&[data-label][data-abbr]::after {
|
|
30
|
+
content: attr(data-abbr);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media (min-width: 640px) {
|
|
34
|
+
&[data-label][data-abbr]::after {
|
|
35
|
+
content: attr(data-label);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
29
39
|
&:disabled {
|
|
30
40
|
opacity: 0.7;
|
|
31
41
|
cursor: default;
|
|
@@ -37,7 +47,6 @@
|
|
|
37
47
|
&.outline {
|
|
38
48
|
background-color: transparent;
|
|
39
49
|
border-color: var(--color700);
|
|
40
|
-
border-width: var(--border-width);
|
|
41
50
|
color: var(--fg-body);
|
|
42
51
|
|
|
43
52
|
&.flash {
|
|
@@ -50,17 +59,13 @@
|
|
|
50
59
|
color: #6d6d6d;
|
|
51
60
|
}
|
|
52
61
|
|
|
53
|
-
&:focus {
|
|
54
|
-
border-color: var(--color500);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
62
|
&:active {
|
|
58
63
|
color: var(--color100);
|
|
59
64
|
}
|
|
60
65
|
}
|
|
61
66
|
|
|
62
67
|
&:focus {
|
|
63
|
-
border-
|
|
68
|
+
border-color: var(--color500);
|
|
64
69
|
}
|
|
65
70
|
|
|
66
71
|
&:active {
|
package/scss/_global.scss
CHANGED
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
--spacing-xs: 2px;
|
|
12
12
|
--spacing-sm: 6px;
|
|
13
13
|
--spacing: 10px;
|
|
14
|
-
--
|
|
15
|
-
--
|
|
14
|
+
--spacing-lg: 14px;
|
|
15
|
+
--border-width: 2px;
|
|
16
16
|
--border-radius: 0.3rem;
|
|
17
17
|
|
|
18
|
-
@media screen and (min-width:
|
|
18
|
+
@media screen and (min-width: 640px) {
|
|
19
19
|
--font-size: 14px;
|
|
20
20
|
}
|
|
21
21
|
|
package/scss/ada.green.scss
CHANGED
package/style.css
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
html {
|
|
2
|
+
scroll-padding-top: 1rem;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
html.height-100 {
|
|
6
|
+
height: 100%;
|
|
7
|
+
min-height: 100%;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
html.height-100 > body {
|
|
11
|
+
height: 100%;
|
|
12
|
+
min-height: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
html:not(.height-100) > body {
|
|
16
|
+
align-items: start;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
body {
|
|
20
|
+
display: grid;
|
|
21
|
+
grid-template-columns: minmax(12vw, min-content) 1fr;
|
|
22
|
+
gap: var(--spacing);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.row {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-wrap: wrap;
|
|
28
|
+
align-items: center;
|
|
29
|
+
gap: var(--spacing);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.typography {
|
|
33
|
+
display: grid;
|
|
34
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
35
|
+
gap: var(--spacing);
|
|
36
|
+
justify-content: start;
|
|
37
|
+
|
|
38
|
+
@media (max-width: 48rem) {
|
|
39
|
+
gap: var(--spacing-lg);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
> p {
|
|
43
|
+
grid-column: span 3;
|
|
44
|
+
display: grid;
|
|
45
|
+
grid-template-columns: subgrid;
|
|
46
|
+
gap: var(--spacing);
|
|
47
|
+
align-items: center;
|
|
48
|
+
|
|
49
|
+
@media (max-width: 48rem) {
|
|
50
|
+
grid-template-columns: 1fr;
|
|
51
|
+
gap: var(--spacing-xs);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.colors {
|
|
57
|
+
display: flex;
|
|
58
|
+
gap: var(--spacing);
|
|
59
|
+
flex-wrap: wrap;
|
|
60
|
+
|
|
61
|
+
> .color-shades {
|
|
62
|
+
display: grid;
|
|
63
|
+
> h4 {
|
|
64
|
+
margin-bottom: var(--spacing-sm);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
> div {
|
|
68
|
+
display: inline-grid;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-items: center;
|
|
71
|
+
width: 6rem;
|
|
72
|
+
height: 3rem;
|
|
73
|
+
box-sizing: border-box;
|
|
74
|
+
color: var(--color100);
|
|
75
|
+
border-bottom: 1px solid transparent;
|
|
76
|
+
|
|
77
|
+
&:last-of-type {
|
|
78
|
+
border-bottom: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.color950 {
|
|
82
|
+
background: var(--color950);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.color800 {
|
|
86
|
+
background: var(--color800);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&.color700 {
|
|
90
|
+
background: var(--color700);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&.color600 {
|
|
94
|
+
background: var(--color600);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&.color500 {
|
|
98
|
+
background: var(--color500);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.color100 {
|
|
102
|
+
background: var(--color100);
|
|
103
|
+
color: var(--color800);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.color-usages {
|
|
110
|
+
display: grid;
|
|
111
|
+
grid-template-columns: repeat(2, auto);
|
|
112
|
+
gap: var(--spacing);
|
|
113
|
+
justify-content: start;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.spacing {
|
|
117
|
+
display: grid;
|
|
118
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
119
|
+
gap: var(--spacing);
|
|
120
|
+
align-items: center;
|
|
121
|
+
|
|
122
|
+
> .spacing-box {
|
|
123
|
+
display: inline-block;
|
|
124
|
+
background: var(--color500);
|
|
125
|
+
width: var(--spacing);
|
|
126
|
+
height: var(--spacing);
|
|
127
|
+
|
|
128
|
+
&.xs {
|
|
129
|
+
width: var(--spacing-xs);
|
|
130
|
+
height: var(--spacing-xs);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&.sm {
|
|
134
|
+
width: var(--spacing-sm);
|
|
135
|
+
height: var(--spacing-sm);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&.lg {
|
|
139
|
+
width: var(--spacing-lg);
|
|
140
|
+
height: var(--spacing-lg);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
input {
|
|
146
|
+
max-width: 20rem;
|
|
147
|
+
}
|