ada-ui 4.7.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 +14 -0
- 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 +7 -6
- 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 -9
- package/scss/_button.scss +0 -52
- package/scss/_corner.scss +0 -47
- package/tailwind.config.js +0 -8
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
border-style: solid;
|
|
20
20
|
border-width: 0.05em;
|
|
21
21
|
border-radius: 50%;
|
|
22
|
-
border-color: var(--
|
|
22
|
+
border-color: var(--bg700) transparent;
|
|
23
23
|
animation: 6s 0.5s inset1-test ease-in-out infinite;
|
|
24
24
|
box-shadow: 0px 12px 10px -12px #000a, 0px -12px 10px -12px #000a;
|
|
25
25
|
}
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
border-style: solid;
|
|
35
35
|
border-width: 0.05em;
|
|
36
36
|
border-radius: 50%;
|
|
37
|
-
border-color: transparent var(--
|
|
37
|
+
border-color: transparent var(--bg600);
|
|
38
38
|
animation: 6s 0.5s inset2-test ease-in-out infinite;
|
|
39
39
|
box-shadow: 12px 0px 10px -12px #000a, -12px 0px 10px -12px #000a;
|
|
40
40
|
}
|
|
@@ -159,7 +159,7 @@ $amount: 0.2em;
|
|
|
159
159
|
width: 0.6em;
|
|
160
160
|
height: 0.6em;
|
|
161
161
|
border-radius: 50%;
|
|
162
|
-
background: var(--
|
|
162
|
+
background: var(--bg700);
|
|
163
163
|
animation: 1.5s 0.1s swing ease-in-out infinite;
|
|
164
164
|
box-sizing: border-box;
|
|
165
165
|
}
|
|
@@ -170,8 +170,8 @@ $amount: 0.2em;
|
|
|
170
170
|
width: 1em;
|
|
171
171
|
height: 1em;
|
|
172
172
|
border-radius: 50%;
|
|
173
|
-
box-shadow:
|
|
174
|
-
border: 0.1em solid var(--
|
|
173
|
+
box-shadow: var(--box-shadow);
|
|
174
|
+
border: 0.1em solid var(--bg600);
|
|
175
175
|
animation: 1.5s swing ease-in-out infinite;
|
|
176
176
|
box-sizing: border-box;
|
|
177
177
|
}
|
|
@@ -197,9 +197,9 @@ $amount: 0.2em;
|
|
|
197
197
|
border-style: solid;
|
|
198
198
|
border-width: 0.3em;
|
|
199
199
|
border-radius: 50%;
|
|
200
|
-
border-color: transparent var(--
|
|
200
|
+
border-color: transparent var(--bg800);
|
|
201
201
|
animation: 4s rotateOuter linear infinite;
|
|
202
|
-
box-shadow: inset
|
|
202
|
+
box-shadow: inset var(--box-shadow);
|
|
203
203
|
|
|
204
204
|
&:before {
|
|
205
205
|
content: "";
|
|
@@ -210,10 +210,10 @@ $amount: 0.2em;
|
|
|
210
210
|
bottom: 0.2em;
|
|
211
211
|
border-style: inherit;
|
|
212
212
|
border-width: inherit;
|
|
213
|
-
border-color: transparent var(--
|
|
213
|
+
border-color: transparent var(--bg600);
|
|
214
214
|
border-radius: inherit;
|
|
215
215
|
animation: 2s rotateInner linear infinite;
|
|
216
|
-
box-shadow: inset
|
|
216
|
+
box-shadow: inset var(--box-shadow);
|
|
217
217
|
}
|
|
218
218
|
&:after {
|
|
219
219
|
content: "";
|
|
@@ -224,7 +224,7 @@ $amount: 0.2em;
|
|
|
224
224
|
bottom: 0.7em;
|
|
225
225
|
border-style: inherit;
|
|
226
226
|
border-width: inherit;
|
|
227
|
-
border-color: transparent var(--
|
|
227
|
+
border-color: transparent var(--bg700);
|
|
228
228
|
border-radius: inherit;
|
|
229
229
|
animation: 4s rotateCenter linear infinite;
|
|
230
230
|
}
|
|
@@ -3,10 +3,13 @@
|
|
|
3
3
|
.tile {
|
|
4
4
|
@extend .panel;
|
|
5
5
|
background: var(--tile-background);
|
|
6
|
-
margin: 0.8rem;
|
|
7
6
|
|
|
8
7
|
> header {
|
|
9
|
-
|
|
8
|
+
//@extend %h4; --> TODO use font-size token
|
|
9
|
+
@extend %header;
|
|
10
|
+
font-weight: 400;
|
|
11
|
+
font-size: 1.2rem;
|
|
12
|
+
|
|
10
13
|
&:before {
|
|
11
14
|
@include corner("top-left", "light");
|
|
12
15
|
}
|
|
@@ -29,7 +32,7 @@
|
|
|
29
32
|
}
|
|
30
33
|
|
|
31
34
|
&.inset {
|
|
32
|
-
box-shadow: inset
|
|
35
|
+
box-shadow: inset var(--box-shadow);
|
|
33
36
|
|
|
34
37
|
> header {
|
|
35
38
|
text-shadow: none;
|
|
@@ -52,12 +55,10 @@
|
|
|
52
55
|
display: inline-grid;
|
|
53
56
|
grid-template-columns: 1fr auto;
|
|
54
57
|
align-items: stretch;
|
|
55
|
-
column-gap:
|
|
58
|
+
column-gap: var(--gap-sm);
|
|
56
59
|
position: relative;
|
|
57
|
-
margin: 0.8rem;
|
|
58
60
|
|
|
59
61
|
> .tile {
|
|
60
|
-
margin: 0;
|
|
61
62
|
border-radius: 0.3rem 0 0 0.3rem;
|
|
62
63
|
|
|
63
64
|
> header {
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
> aside {
|
|
80
81
|
display: grid;
|
|
81
82
|
grid-auto-flow: column;
|
|
82
|
-
gap:
|
|
83
|
+
gap: var(--gap-sm);
|
|
83
84
|
|
|
84
85
|
> button {
|
|
85
86
|
@include command;
|
|
@@ -88,11 +89,11 @@
|
|
|
88
89
|
min-width: 3rem;
|
|
89
90
|
|
|
90
91
|
&:focus {
|
|
91
|
-
border-color: var(--
|
|
92
|
+
border-color: var(--bg700);
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
&:active {
|
|
95
|
-
background-color: var(--
|
|
96
|
+
background-color: var(--bg700);
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
&:last-of-type {
|
package/scss/_button.scss
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
@mixin button {
|
|
2
|
-
overflow: hidden;
|
|
3
|
-
outline: none;
|
|
4
|
-
color: var(--fg);
|
|
5
|
-
font-family: inherit;
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
user-select: none;
|
|
8
|
-
vertical-align: middle;
|
|
9
|
-
transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
|
10
|
-
|
|
11
|
-
&:disabled {
|
|
12
|
-
opacity: 0.4;
|
|
13
|
-
filter: saturate(0.6);
|
|
14
|
-
cursor: default;
|
|
15
|
-
pointer-events: none;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.button {
|
|
20
|
-
@include button;
|
|
21
|
-
white-space: nowrap;
|
|
22
|
-
text-overflow: ellipsis;
|
|
23
|
-
border-radius: 0.3rem;
|
|
24
|
-
box-shadow: $box-shadow;
|
|
25
|
-
border: 1px solid var(--light-alpha40);
|
|
26
|
-
background-color: transparent;
|
|
27
|
-
min-height: min-content;
|
|
28
|
-
min-width: 8rem;
|
|
29
|
-
padding: 0.8rem 1.6rem;
|
|
30
|
-
margin: 0.8rem;
|
|
31
|
-
font-size: 1.1rem;
|
|
32
|
-
|
|
33
|
-
&.small {
|
|
34
|
-
min-width: 0;
|
|
35
|
-
padding: 0.8rem;
|
|
36
|
-
}
|
|
37
|
-
&.fill {
|
|
38
|
-
background-color: var(--default);
|
|
39
|
-
}
|
|
40
|
-
&:focus {
|
|
41
|
-
border: 1px solid var(--light-alpha70);
|
|
42
|
-
}
|
|
43
|
-
&:hover {
|
|
44
|
-
// stays after click on touch devices
|
|
45
|
-
// TODO: only for non-touch devices
|
|
46
|
-
// /*background-color: var(--light-alpha40);*/
|
|
47
|
-
}
|
|
48
|
-
&:active {
|
|
49
|
-
background-color: var(--light);
|
|
50
|
-
border: 1px solid var(--default-alpha40);
|
|
51
|
-
}
|
|
52
|
-
}
|
package/scss/_corner.scss
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
@mixin corner($location, $style: "default") {
|
|
2
|
-
--border-width: 2px;
|
|
3
|
-
|
|
4
|
-
content: "";
|
|
5
|
-
border-style: solid;
|
|
6
|
-
border-color: var(--default);
|
|
7
|
-
position: absolute;
|
|
8
|
-
height: 1rem;
|
|
9
|
-
width: 1rem;
|
|
10
|
-
z-index: 2;
|
|
11
|
-
|
|
12
|
-
@if $style == "light" {
|
|
13
|
-
--border-width: 1px;
|
|
14
|
-
|
|
15
|
-
border-color: var(--light-alpha40);
|
|
16
|
-
height: 0.75rem;
|
|
17
|
-
width: 0.75rem;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@if $location == "top-left" {
|
|
21
|
-
border-width: var(--border-width) 0 0 var(--border-width);
|
|
22
|
-
border-radius: 0.3rem 0 0 0;
|
|
23
|
-
left: 0;
|
|
24
|
-
top: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@if $location == "top-right" {
|
|
28
|
-
border-width: var(--border-width) var(--border-width) 0 0;
|
|
29
|
-
border-radius: 0 0.3rem 0 0;
|
|
30
|
-
right: 0;
|
|
31
|
-
top: 0;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@if $location == "bottom-left" {
|
|
35
|
-
border-width: 0 0 var(--border-width) var(--border-width);
|
|
36
|
-
border-radius: 0 0 0 0.3rem;
|
|
37
|
-
left: 0;
|
|
38
|
-
bottom: 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@if $location == "bottom-right" {
|
|
42
|
-
border-width: 0 var(--border-width) var(--border-width) 0;
|
|
43
|
-
border-radius: 0 0 0.3rem 0;
|
|
44
|
-
right: 0;
|
|
45
|
-
bottom: 0;
|
|
46
|
-
}
|
|
47
|
-
}
|