ada-ui 2.8.4 → 2.9.3
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/.tool-versions +1 -0
- package/README.md +6 -0
- package/css/ada.min.css +1 -1
- package/index.html +86 -88
- package/package.json +2 -2
- package/scss/ada.scss +89 -7
package/.tool-versions
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
nodejs 14.17.1
|
package/README.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://badge.fury.io/js/ada-ui)
|
|
4
4
|
|
|
5
|
+
## CDN
|
|
6
|
+
|
|
7
|
+
~~~
|
|
8
|
+
https://cdn.jsdelivr.net/gh/tklepzig/Ada@version/css/ada.min.css
|
|
9
|
+
~~~
|
|
10
|
+
Replace `version` with the version of your desired release, see https://github.com/tklepzig/Ada/releases (e.g. `2.9.0`)
|
|
5
11
|
## Install
|
|
6
12
|
|
|
7
13
|
~~~
|
package/css/ada.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--h: 205;--s: 80%;--l: 23%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
|
1
|
+
:root{--h: 205;--s: 80%;--l: 23%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.spinner,.panel,.tile,.input,.button,.button.icon,h1,h2,.panel>header,.tile>header,h3,h4,:root,.accent,.warn{--l-dark: calc(var(--l) - 16%);--l-light: calc(var(--l) + 38%);--bg: hsl(var(--h), var(--s), var(--l-dark));--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}h1{font-size:3rem;margin:1rem 0 2rem 0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}.panel>header,.tile>header,h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h4{font-weight:400;font-size:1.2rem;margin:.5rem 0 .5rem 0}h1,h2,.panel>header,.tile>header,h3,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1.m-0,h2.m-0,.panel>header,.tile>header,h3.m-0,h4.m-0{margin:0}body{font-size:1rem;-webkit-tap-highlight-color:transparent;box-sizing:border-box;padding:.5rem}.panel>footer:after,.tile>footer:after,.panel>footer:before,.tile>footer:before,.panel>header:after,.tile>header:after,.panel>header:before,.tile>header:before{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:after,.tile>footer:before,.tile>header:after,.tile>header:before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.button-group{margin:.8rem}.button,.button.icon{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;cursor:pointer;user-select:none;background-color:transparent;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button.small,.button.icon{display:grid;justify-items:center;align-items:center;min-width:0;padding:.8rem}.button.icon{border:1px solid transparent;box-shadow:none;background:none}.button.icon>i.material-icons{font-size:20px}.button-group>.button.icon{margin:1px}.button.fill{background-color:var(--default)}.button:focus:not(:disabled){border:1px solid var(--light-alpha70)}.button:active:not(:disabled){background-color:var(--light-alpha70);border:1px solid var(--default-alpha40)}.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80)}.input{border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.input:focus:not(:disabled){border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80)}.panel,.tile{background:var(--default-alpha10);box-shadow:0 0 20px 1px rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative;text-align:left;padding:.4rem .6rem}.panel>header:before,.tile>header:before{border-width:2px 0 0 2px;border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after,.tile>header:after{border-width:2px 2px 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:padding-box}.panel>footer,.tile>footer{position:relative;text-align:right;padding:.4rem .6rem;font-size:.75rem;color:var(--fg-alpha60)}.panel>footer:before,.tile>footer:before{border-width:0 0 2px 2px;border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after,.tile>footer:after{border-width:0 2px 2px 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.tile{margin:.8rem}.tile>header:before{border-width:1px 0 0 1px}.tile>header:after{border-width:1px 1px 0 0}.tile>article{color:var(--fg);text-shadow:0 0 4px var(--light-alpha40)}.tile>footer:before{border-width:0 0 1px 1px}.tile>footer:after{border-width:0 1px 1px 0}.spinner{width:100%;height:100%;box-sizing:border-box;position:relative;border-style:solid;border-width:.3em;border-radius:50%;border-color:transparent var(--default);animation:4s rotateOuter linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.4) inset}.spinner:before{content:"";position:absolute;top:.2em;left:.2em;right:.2em;bottom:.2em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha70);border-radius:inherit;animation:2s rotateInner linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.6) inset}.spinner:after{content:"";position:absolute;top:.7em;left:.7em;right:.7em;bottom:.7em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha40);border-radius:inherit;animation:4s rotateCenter linear infinite}@keyframes rotateOuter{0%{transform:rotate(45deg)}100%{transform:rotate(225deg)}}@keyframes rotateInner{0%{transform:rotate(-90deg)}100%{transform:rotate(-270deg)}}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}
|
package/index.html
CHANGED
|
@@ -22,111 +22,109 @@
|
|
|
22
22
|
<link rel="manifest" href="manifest.json" />
|
|
23
23
|
</head>
|
|
24
24
|
|
|
25
|
-
<body
|
|
25
|
+
<body
|
|
26
|
+
style="
|
|
27
|
+
display: grid;
|
|
28
|
+
grid-auto-flow: row;
|
|
29
|
+
grid-template-columns: repeat(2, 1fr);
|
|
30
|
+
"
|
|
31
|
+
>
|
|
26
32
|
<div class="panel">
|
|
27
|
-
<header
|
|
28
|
-
<article>
|
|
29
|
-
<div style="display: grid; flex: 1; align-content: start">
|
|
30
|
-
<input class="input" type="text" />
|
|
31
|
-
<div class="tile">
|
|
32
|
-
<header></header>
|
|
33
|
-
<article>
|
|
34
|
-
<div style="font-size: 1.1rem; padding: 0.4rem">ToDo Text</div>
|
|
35
|
-
</article>
|
|
36
|
-
<footer></footer>
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
</article>
|
|
40
|
-
<footer></footer>
|
|
41
|
-
</div>
|
|
42
|
-
<div class="panel">
|
|
43
|
-
<header>Tiles</header>
|
|
33
|
+
<header>Buttons</header>
|
|
44
34
|
<article>
|
|
45
35
|
<div
|
|
46
36
|
style="
|
|
47
37
|
display: grid;
|
|
48
|
-
grid-template-columns: repeat(
|
|
49
|
-
|
|
50
|
-
|
|
38
|
+
grid-template-columns: 1fr repeat(3, auto);
|
|
39
|
+
justify-items: center;
|
|
40
|
+
align-items: start;
|
|
41
|
+
justify-content: start;
|
|
42
|
+
align-items: center;
|
|
51
43
|
"
|
|
52
44
|
>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
45
|
+
Default
|
|
46
|
+
<button class="button">Button</button>
|
|
47
|
+
<button class="button accent">Button</button>
|
|
48
|
+
<button class="button warn">Button</button>
|
|
49
|
+
Small
|
|
50
|
+
<button class="button small">Button</button>
|
|
51
|
+
<button class="button small accent">Button</button>
|
|
52
|
+
<button class="button small warn">Button</button>
|
|
53
|
+
Fill
|
|
54
|
+
<button class="button fill">Button</button>
|
|
55
|
+
<button class="button fill accent">Button</button>
|
|
56
|
+
<button class="button fill warn">Button</button>
|
|
57
|
+
Icon
|
|
58
|
+
<button class="button icon">
|
|
59
|
+
<i class="material-icons">check</i>
|
|
60
|
+
</button>
|
|
61
|
+
<button class="button icon accent">
|
|
62
|
+
<i class="material-icons">check</i>
|
|
63
|
+
</button>
|
|
64
|
+
<button class="button icon warn">
|
|
65
|
+
<i class="material-icons">check</i>
|
|
66
|
+
</button>
|
|
67
|
+
Icon Fill
|
|
68
|
+
<button class="button icon fill">
|
|
69
|
+
<i class="material-icons">check</i>
|
|
70
|
+
</button>
|
|
71
|
+
<button class="button icon fill accent">
|
|
72
|
+
<i class="material-icons">check</i>
|
|
73
|
+
</button>
|
|
74
|
+
<button class="button icon fill warn">
|
|
75
|
+
<i class="material-icons">check</i>
|
|
76
|
+
</button>
|
|
77
|
+
Disabled
|
|
78
|
+
<button disabled class="button">Button</button>
|
|
79
|
+
<button disabled class="button fill">Button</button>
|
|
80
|
+
<button disabled class="button icon">
|
|
81
|
+
<i class="material-icons">check</i>
|
|
82
|
+
</button>
|
|
83
|
+
Spinner
|
|
84
|
+
<div style="width: 48px; height: 48px; font-size: 12px">
|
|
85
|
+
<div class="spinner"></div>
|
|
57
86
|
</div>
|
|
58
|
-
<div
|
|
59
|
-
<
|
|
60
|
-
<article>Tile</article>
|
|
61
|
-
<footer></footer>
|
|
87
|
+
<div style="width: 32px; height: 32px; font-size: 8px">
|
|
88
|
+
<div class="spinner"></div>
|
|
62
89
|
</div>
|
|
63
|
-
<div
|
|
64
|
-
<
|
|
65
|
-
<article>Tile</article>
|
|
66
|
-
<footer></footer>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="tile">
|
|
69
|
-
<header></header>
|
|
70
|
-
<article>Tile</article>
|
|
71
|
-
<footer></footer>
|
|
90
|
+
<div style="width: 16px; height: 16px; font-size: 4px">
|
|
91
|
+
<div class="spinner"></div>
|
|
72
92
|
</div>
|
|
73
93
|
</div>
|
|
74
94
|
</article>
|
|
75
95
|
<footer></footer>
|
|
76
96
|
</div>
|
|
77
97
|
<div class="panel">
|
|
78
|
-
<header>
|
|
79
|
-
<article
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
<
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<
|
|
98
|
-
<
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
<
|
|
103
|
-
<
|
|
104
|
-
<
|
|
105
|
-
<button class="outline button">Button</button>
|
|
106
|
-
<button class="outline button">Button</button>
|
|
107
|
-
<button class="outline button">Button</button>
|
|
108
|
-
<button class="outline button">Button</button>
|
|
109
|
-
<button class="outline button">Button</button>
|
|
110
|
-
<button class="outline button">Button</button>
|
|
111
|
-
<button class="outline button">Button</button>
|
|
112
|
-
<button class="outline button">Button</button>
|
|
113
|
-
<button class="outline button">Button</button>
|
|
114
|
-
<button class="outline button">Button</button>
|
|
115
|
-
<button class="outline button">Button</button>
|
|
116
|
-
<button class="outline button">Button</button>
|
|
117
|
-
<button class="outline button">Button</button>
|
|
118
|
-
<button class="outline button">Button</button>
|
|
119
|
-
<button class="outline button">Button</button>
|
|
120
|
-
<button class="outline button">Button</button>
|
|
121
|
-
<button class="outline button">Button</button>
|
|
122
|
-
<button class="outline button">Button</button>
|
|
123
|
-
<button class="outline button">Button</button>
|
|
124
|
-
<button class="outline button">Button</button>
|
|
125
|
-
<button class="outline button">Button</button>
|
|
126
|
-
<button class="outline button">Button</button>
|
|
98
|
+
<header>Tiles</header>
|
|
99
|
+
<article
|
|
100
|
+
style="
|
|
101
|
+
display: grid;
|
|
102
|
+
grid-template-columns: repeat(2, 1fr);
|
|
103
|
+
grid-template-rows: repeat(2, 1fr);
|
|
104
|
+
"
|
|
105
|
+
>
|
|
106
|
+
<div class="tile">
|
|
107
|
+
<header>Header</header>
|
|
108
|
+
<article>Tile</article>
|
|
109
|
+
<footer>Footer</footer>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="tile">
|
|
112
|
+
<header></header>
|
|
113
|
+
<article>Tile</article>
|
|
114
|
+
<footer></footer>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="tile">
|
|
117
|
+
<header></header>
|
|
118
|
+
<article>Tile</article>
|
|
119
|
+
<footer></footer>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="tile">
|
|
122
|
+
<header></header>
|
|
123
|
+
<article>Tile</article>
|
|
124
|
+
<footer></footer>
|
|
127
125
|
</div>
|
|
128
126
|
</article>
|
|
129
|
-
<footer
|
|
127
|
+
<footer></footer>
|
|
130
128
|
</div>
|
|
131
129
|
</body>
|
|
132
130
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.3",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "sass scss/ada.scss:css/ada.css --watch",
|
|
6
6
|
"build": "rm -rf css && sass scss/ada.scss:css/ada.min.css -s compressed --no-source-map"
|
|
@@ -14,6 +14,6 @@
|
|
|
14
14
|
"url": "https://github.com/tklepzig/Ada/issues"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
|
-
"sass": "^1.
|
|
17
|
+
"sass": "^1.42.1"
|
|
18
18
|
}
|
|
19
19
|
}
|
package/scss/ada.scss
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
:root {
|
|
2
|
+
@extend %colourShades;
|
|
3
|
+
|
|
2
4
|
--h: 205;
|
|
3
5
|
--s: 80%;
|
|
4
6
|
--l: 23%;
|
|
@@ -9,6 +11,8 @@
|
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
.accent {
|
|
14
|
+
@extend %colourShades;
|
|
15
|
+
|
|
12
16
|
--h: 146;
|
|
13
17
|
--s: 58%;
|
|
14
18
|
--l: 20%;
|
|
@@ -19,6 +23,8 @@
|
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
.warn {
|
|
26
|
+
@extend %colourShades;
|
|
27
|
+
|
|
22
28
|
--h: 0;
|
|
23
29
|
--s: 75%;
|
|
24
30
|
--l: 29%;
|
|
@@ -28,9 +34,7 @@
|
|
|
28
34
|
--l-fg: 89%;
|
|
29
35
|
}
|
|
30
36
|
|
|
31
|
-
|
|
32
|
-
.accent,
|
|
33
|
-
.warn {
|
|
37
|
+
%colourShades {
|
|
34
38
|
--l-dark: calc(var(--l) - 16%);
|
|
35
39
|
--l-light: calc(var(--l) + 38%);
|
|
36
40
|
|
|
@@ -108,6 +112,8 @@ body {
|
|
|
108
112
|
}
|
|
109
113
|
|
|
110
114
|
%header {
|
|
115
|
+
@extend %colourShades;
|
|
116
|
+
|
|
111
117
|
font-weight: 300;
|
|
112
118
|
text-shadow: 0 0 4px var(--light-alpha40);
|
|
113
119
|
color: var(--fg);
|
|
@@ -161,6 +167,8 @@ body {
|
|
|
161
167
|
}
|
|
162
168
|
|
|
163
169
|
.button {
|
|
170
|
+
@extend %colourShades;
|
|
171
|
+
|
|
164
172
|
white-space: nowrap;
|
|
165
173
|
text-overflow: ellipsis;
|
|
166
174
|
overflow: hidden;
|
|
@@ -203,15 +211,15 @@ body {
|
|
|
203
211
|
&.fill {
|
|
204
212
|
background-color: var(--default);
|
|
205
213
|
}
|
|
206
|
-
&:focus {
|
|
214
|
+
&:focus:not(:disabled) {
|
|
207
215
|
border: 1px solid var(--light-alpha70);
|
|
208
216
|
}
|
|
209
|
-
&:hover {
|
|
217
|
+
&:hover:not(:disabled) {
|
|
210
218
|
// stays after click on touch devices
|
|
211
219
|
// TODO: only for non-touch devices
|
|
212
220
|
// /*background-color: var(--light-alpha40);*/
|
|
213
221
|
}
|
|
214
|
-
&:active {
|
|
222
|
+
&:active:not(:disabled) {
|
|
215
223
|
background-color: var(--light-alpha70);
|
|
216
224
|
border: 1px solid var(--default-alpha40);
|
|
217
225
|
}
|
|
@@ -224,6 +232,8 @@ body {
|
|
|
224
232
|
}
|
|
225
233
|
|
|
226
234
|
.input {
|
|
235
|
+
@extend %colourShades;
|
|
236
|
+
|
|
227
237
|
border-radius: 0.3rem;
|
|
228
238
|
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
|
|
229
239
|
outline: none;
|
|
@@ -237,7 +247,7 @@ body {
|
|
|
237
247
|
margin: 0.8rem;
|
|
238
248
|
font-size: 1.1rem;
|
|
239
249
|
|
|
240
|
-
&:focus {
|
|
250
|
+
&:focus:not(:disabled) {
|
|
241
251
|
border: 1px solid var(--light-alpha70);
|
|
242
252
|
}
|
|
243
253
|
&:disabled {
|
|
@@ -249,6 +259,8 @@ body {
|
|
|
249
259
|
}
|
|
250
260
|
|
|
251
261
|
.panel {
|
|
262
|
+
@extend %colourShades;
|
|
263
|
+
|
|
252
264
|
background: var(--default-alpha10);
|
|
253
265
|
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.4);
|
|
254
266
|
border-radius: 0.3rem;
|
|
@@ -356,3 +368,73 @@ body {
|
|
|
356
368
|
}
|
|
357
369
|
}
|
|
358
370
|
}
|
|
371
|
+
|
|
372
|
+
.spinner {
|
|
373
|
+
@extend %colourShades;
|
|
374
|
+
|
|
375
|
+
width: 100%;
|
|
376
|
+
height: 100%;
|
|
377
|
+
box-sizing: border-box;
|
|
378
|
+
position: relative;
|
|
379
|
+
border-style: solid;
|
|
380
|
+
border-width: 0.3em;
|
|
381
|
+
border-radius: 50%;
|
|
382
|
+
border-color: transparent var(--default);
|
|
383
|
+
animation: 4s rotateOuter linear infinite;
|
|
384
|
+
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4) inset;
|
|
385
|
+
|
|
386
|
+
&:before {
|
|
387
|
+
content: "";
|
|
388
|
+
position: absolute;
|
|
389
|
+
top: 0.2em;
|
|
390
|
+
left: 0.2em;
|
|
391
|
+
right: 0.2em;
|
|
392
|
+
bottom: 0.2em;
|
|
393
|
+
border-style: inherit;
|
|
394
|
+
border-width: inherit;
|
|
395
|
+
border-color: transparent var(--light-alpha70);
|
|
396
|
+
border-radius: inherit;
|
|
397
|
+
animation: 2s rotateInner linear infinite;
|
|
398
|
+
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.6) inset;
|
|
399
|
+
}
|
|
400
|
+
&:after {
|
|
401
|
+
content: "";
|
|
402
|
+
position: absolute;
|
|
403
|
+
top: 0.7em;
|
|
404
|
+
left: 0.7em;
|
|
405
|
+
right: 0.7em;
|
|
406
|
+
bottom: 0.7em;
|
|
407
|
+
border-style: inherit;
|
|
408
|
+
border-width: inherit;
|
|
409
|
+
border-color: transparent var(--light-alpha40);
|
|
410
|
+
border-radius: inherit;
|
|
411
|
+
animation: 4s rotateCenter linear infinite;
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
@keyframes rotateOuter {
|
|
416
|
+
0% {
|
|
417
|
+
transform: rotate(45deg);
|
|
418
|
+
}
|
|
419
|
+
100% {
|
|
420
|
+
transform: rotate(225deg);
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
@keyframes rotateInner {
|
|
425
|
+
0% {
|
|
426
|
+
transform: rotate(-90deg);
|
|
427
|
+
}
|
|
428
|
+
100% {
|
|
429
|
+
transform: rotate(-270deg);
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
@keyframes rotateCenter {
|
|
434
|
+
0% {
|
|
435
|
+
transform: rotate(0);
|
|
436
|
+
}
|
|
437
|
+
100% {
|
|
438
|
+
transform: rotate(180deg);
|
|
439
|
+
}
|
|
440
|
+
}
|