@acorex/styles 7.17.11 → 7.17.13
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/{src/icons → icons}/style.scss +1 -1
- package/index.css +2265 -1450
- package/index.min.css +1 -1
- package/index.scss +0 -1
- package/package.json +1 -1
- package/src/mixins/_look.scss +45 -15
- package/src/shared/_actionsheet.scss +18 -1
- package/src/shared/_check-box.scss +28 -7
- package/src/shared/_color-look.scss +267 -109
- package/src/shared/_drop-down.scss +45 -9
- package/src/shared/_editor-container.scss +114 -30
- package/src/shared/_general-button.scss +51 -13
- package/src/shared/_inputs.scss +9 -3
- package/src/shared/_list.scss +112 -32
- package/src/shared/_radio.scss +41 -5
- package/src/shared/_table.scss +79 -20
- package/src/shared/_utils.scss +52 -9
- package/src/shared/index.scss +0 -1
- package/src/utility/index.scss +1 -1
- package/{src/themes → themes}/default.css +1 -1
- package/src/shared/_decoration.scss +0 -45
- package/{src/icons → icons}/Read Me.txt +0 -0
- package/{src/icons → icons}/demo-files/demo.css +0 -0
- package/{src/icons → icons}/demo-files/demo.js +0 -0
- package/{src/icons → icons}/demo.html +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.eot +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.svg +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.ttf +0 -0
- package/{src/icons → icons}/fonts/acorex-icons.woff +0 -0
- package/{src/icons → icons}/selection.json +0 -0
- package/{src/icons → icons}/style.css +0 -0
- package/{src/icons → icons}/variables.scss +0 -0
- package/{src/themes → themes}/default.scss +14 -14
|
@@ -4,30 +4,38 @@
|
|
|
4
4
|
@each $look in $look_names {
|
|
5
5
|
@if ($look == 'solid') {
|
|
6
6
|
.ax-el-#{$color}-#{$look} {
|
|
7
|
-
@apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
|
|
8
|
-
|
|
7
|
+
// @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
|
|
8
|
+
background-color: rgba(var(--ax-color-#{$color}-500));
|
|
9
|
+
color: rgba(var(--ax-color-#{$color}-fore));
|
|
10
|
+
border-color: rgba(var(--ax-color-#{$color}-500));
|
|
9
11
|
&.ax-el-interactive {
|
|
10
12
|
&:hover {
|
|
11
13
|
&:not(.ax-state-disabled) {
|
|
12
|
-
@apply ax-bg-#{$color}-600;
|
|
14
|
+
// @apply ax-bg-#{$color}-600;
|
|
15
|
+
background-color: rgba(var(--ax-color-#{$color}-600));
|
|
13
16
|
}
|
|
14
17
|
}
|
|
15
18
|
}
|
|
16
19
|
|
|
17
20
|
&.ax-state-selected {
|
|
18
|
-
@apply ax-bg-#{$color}-700;
|
|
21
|
+
// @apply ax-bg-#{$color}-700;
|
|
22
|
+
background-color: rgba(var(--ax-color-#{$color}-700));
|
|
19
23
|
}
|
|
20
24
|
.ax-ripple {
|
|
21
|
-
@apply ax-bg-#{$color}-300/30 #{!important};
|
|
25
|
+
// @apply ax-bg-#{$color}-300/30 #{!important};
|
|
26
|
+
background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
|
|
22
27
|
}
|
|
23
28
|
ax-loading-spinner {
|
|
24
29
|
.ax-loader {
|
|
25
|
-
@apply ax-border-#{$color}-fore ax-border-b-transparent;
|
|
30
|
+
// @apply ax-border-#{$color}-fore ax-border-b-transparent;
|
|
31
|
+
border-color: rgba(var(--ax-color-#{$color}-fore));
|
|
32
|
+
border-bottom-color: transparent;
|
|
26
33
|
}
|
|
27
34
|
}
|
|
28
35
|
& > button {
|
|
29
36
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
30
|
-
@apply ax-outline-#{$color}-500;
|
|
37
|
+
// @apply ax-outline-#{$color}-500;
|
|
38
|
+
outline-color: rgba(var(--ax-color-#{$color}-500));
|
|
31
39
|
}
|
|
32
40
|
}
|
|
33
41
|
}
|
|
@@ -35,29 +43,43 @@
|
|
|
35
43
|
|
|
36
44
|
@if ($look == 'outline') {
|
|
37
45
|
.ax-el-#{$color}-#{$look} {
|
|
38
|
-
@apply ax-border-#{$color}-500 ax-text-#{$color}-500 ax-border ax-bg-transparent;
|
|
39
|
-
|
|
46
|
+
// @apply ax-border-#{$color}-500 ax-text-#{$color}-500 ax-border ax-bg-transparent;
|
|
47
|
+
background-color: transparent;
|
|
48
|
+
color: rgba(var(--ax-color-#{$color}-500));
|
|
49
|
+
border-color: rgba(var(--ax-color-#{$color}-500));
|
|
50
|
+
border-width: 1px;
|
|
40
51
|
&.ax-el-interactive {
|
|
41
52
|
&:hover {
|
|
42
53
|
&:not(.ax-state-disabled) {
|
|
43
|
-
@apply ax-border-#{$color}-700 ax-text-#{$color}-700;
|
|
54
|
+
// @apply ax-border-#{$color}-700 ax-text-#{$color}-700;
|
|
55
|
+
color: rgba(var(--ax-color-#{$color}-700));
|
|
56
|
+
border-color: rgba(var(--ax-color-#{$color}-700));
|
|
44
57
|
}
|
|
45
58
|
}
|
|
46
59
|
}
|
|
47
60
|
&.ax-state-selected {
|
|
48
|
-
@apply ax-border-#{$color}-500 ax-text-#{$color}-fore ax-bg-#{$color}-500;
|
|
61
|
+
// @apply ax-border-#{$color}-500 ax-text-#{$color}-fore ax-bg-#{$color}-500;
|
|
62
|
+
border-color: rgba(var(--ax-color-#{$color}-500));
|
|
63
|
+
color: rgba(var(--ax-color-#{$color}-fore));
|
|
64
|
+
background-color: rgba(var(--ax-color-#{$color}-500));
|
|
49
65
|
}
|
|
50
66
|
.ax-ripple {
|
|
51
|
-
@apply ax-bg-#{$color}-500/30 #{!important};
|
|
67
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
68
|
+
background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
|
|
52
69
|
}
|
|
53
70
|
ax-loading-spinner {
|
|
54
71
|
.ax-loader {
|
|
55
|
-
@apply ax-border-#{$color}-500 ax-border-b-transparent;
|
|
72
|
+
// @apply ax-border-#{$color}-500 ax-border-b-transparent;
|
|
73
|
+
border-color: rgba(var(--ax-color-#{$color}-500));
|
|
74
|
+
border-bottom-color: transparent;
|
|
56
75
|
}
|
|
57
76
|
}
|
|
58
77
|
& > button {
|
|
59
78
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
60
|
-
@apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
|
|
79
|
+
// @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
|
|
80
|
+
outline-offset: -2px;
|
|
81
|
+
outline-color: rgba(var(--ax-color-#{$color}-500));
|
|
82
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
61
83
|
}
|
|
62
84
|
}
|
|
63
85
|
}
|
|
@@ -65,30 +87,39 @@
|
|
|
65
87
|
|
|
66
88
|
@if ($look == 'blank') {
|
|
67
89
|
.ax-el-#{$color}-#{$look} {
|
|
68
|
-
@apply ax-text-#{$color}-500;
|
|
90
|
+
// @apply ax-text-#{$color}-500;
|
|
91
|
+
color: rgba(var(--ax-color-#{$color}-500));
|
|
69
92
|
|
|
70
93
|
&.ax-el-interactive {
|
|
71
94
|
&:hover {
|
|
72
95
|
&:not(.ax-state-disabled) {
|
|
73
|
-
@apply ax-text-#{$color}-fore-tint;
|
|
96
|
+
// @apply ax-text-#{$color}-fore-tint;
|
|
97
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
74
98
|
}
|
|
75
99
|
}
|
|
76
100
|
}
|
|
77
101
|
|
|
78
102
|
&.ax-state-selected {
|
|
79
|
-
@apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
|
|
103
|
+
// @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
|
|
104
|
+
background-color: rgba(var(--ax-color-#{$color}-700));
|
|
105
|
+
color: rgba(var(--ax-color-#{$color}-fore));
|
|
80
106
|
}
|
|
81
107
|
.ax-ripple {
|
|
82
|
-
@apply ax-bg-#{$color}-500/30 #{!important};
|
|
108
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
109
|
+
background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
|
|
83
110
|
}
|
|
84
111
|
ax-loading-spinner {
|
|
85
112
|
.ax-loader {
|
|
86
|
-
@apply ax-border-#{$color}-500 ax-border-b-transparent;
|
|
113
|
+
// @apply ax-border-#{$color}-500 ax-border-b-transparent;
|
|
114
|
+
border-color: rgba(var(--ax-color-#{$color}-500));
|
|
115
|
+
border-bottom-color: transparent;
|
|
87
116
|
}
|
|
88
117
|
}
|
|
89
118
|
& > button {
|
|
90
119
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
91
|
-
@apply ax-outline-#{$color}-300 ax-outline-offset-0;
|
|
120
|
+
// @apply ax-outline-#{$color}-300 ax-outline-offset-0;
|
|
121
|
+
outline-color: rgba(var(--ax-color-#{$color}-300));
|
|
122
|
+
outline-offset: 0;
|
|
92
123
|
}
|
|
93
124
|
}
|
|
94
125
|
}
|
|
@@ -96,142 +127,207 @@
|
|
|
96
127
|
|
|
97
128
|
@if ($look == 'twotone') {
|
|
98
129
|
.ax-el-#{$color}-#{$look} {
|
|
99
|
-
@apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
|
|
130
|
+
// @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
|
|
131
|
+
background-color: rgba(var(--ax-color-#{$color}-100));
|
|
132
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
133
|
+
border-color: rgba(var(--ax-color-#{$color}-100));
|
|
100
134
|
|
|
101
135
|
&.ax-el-interactive {
|
|
102
136
|
&:hover {
|
|
103
137
|
&:not(.ax-state-disabled) {
|
|
104
|
-
@apply ax-bg-#{$color}-200;
|
|
138
|
+
// @apply ax-bg-#{$color}-200;
|
|
139
|
+
background-color: rgba(var(--ax-color-#{$color}-200));
|
|
105
140
|
}
|
|
106
141
|
}
|
|
107
142
|
}
|
|
108
143
|
|
|
109
144
|
&.ax-state-selected {
|
|
110
|
-
@apply ax-bg-#{$color}-300;
|
|
145
|
+
// @apply ax-bg-#{$color}-300;
|
|
146
|
+
background-color: rgba(var(--ax-color-#{$color}-300));
|
|
111
147
|
}
|
|
112
148
|
|
|
113
149
|
.ax-ripple {
|
|
114
|
-
@apply ax-bg-#{$color}-500/30 #{!important};
|
|
150
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
151
|
+
background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
|
|
115
152
|
}
|
|
116
153
|
ax-loading-spinner {
|
|
117
154
|
.ax-loader {
|
|
118
|
-
@apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
155
|
+
// @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
156
|
+
border-color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
157
|
+
border-bottom-color: transparent;
|
|
119
158
|
}
|
|
120
159
|
}
|
|
121
160
|
|
|
122
161
|
& > button {
|
|
123
162
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
124
|
-
@apply ax-outline-#{$color}-500;
|
|
163
|
+
// @apply ax-outline-#{$color}-500;
|
|
164
|
+
outline-color: rgba(var(--ax-color-#{$color}-500));
|
|
125
165
|
}
|
|
126
166
|
}
|
|
127
167
|
}
|
|
128
168
|
}
|
|
129
169
|
.ax-el-ghost-solid {
|
|
130
|
-
@apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
|
|
131
|
-
|
|
170
|
+
// @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
|
|
171
|
+
border-width: 1px;
|
|
172
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
173
|
+
background-color: rgba(var(--ax-color-ghost));
|
|
174
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
175
|
+
--ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
176
|
+
--ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
|
|
177
|
+
box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
|
|
132
178
|
&.ax-el-interactive {
|
|
133
179
|
&:hover {
|
|
134
180
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
135
|
-
@apply ax-border-primary-500 ax-text-primary-500;
|
|
181
|
+
// @apply ax-border-primary-500 ax-text-primary-500;
|
|
182
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
183
|
+
color: rgba(var(--ax-color-primary-500));
|
|
136
184
|
}
|
|
137
185
|
}
|
|
138
186
|
&:active {
|
|
139
|
-
@apply ax-border-primary-700 ax-text-primary-700;
|
|
187
|
+
// @apply ax-border-primary-700 ax-text-primary-700;
|
|
188
|
+
border-color: rgba(var(--ax-color-primary-700));
|
|
189
|
+
color: rgba(var(--ax-color-primary-700));
|
|
140
190
|
}
|
|
141
191
|
}
|
|
142
192
|
|
|
143
193
|
&.ax-state-selected {
|
|
144
|
-
@apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
|
|
194
|
+
// @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
|
|
195
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
196
|
+
background-color: rgba(var(--ax-color-primary-500));
|
|
197
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
145
198
|
}
|
|
146
199
|
|
|
147
200
|
.ax-ripple {
|
|
148
|
-
@apply ax-bg-primary-500/30 #{!important};
|
|
201
|
+
// @apply ax-bg-primary-500/30 #{!important};
|
|
202
|
+
background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
|
|
149
203
|
}
|
|
150
204
|
ax-loading-spinner {
|
|
151
205
|
.ax-loader {
|
|
152
|
-
@apply ax-border-ghost-fore ax-border-b-transparent;
|
|
206
|
+
// @apply ax-border-ghost-fore ax-border-b-transparent;
|
|
207
|
+
border-color: rgba(var(--ax-color-ghost-fore));
|
|
208
|
+
border-bottom-color: transparent;
|
|
153
209
|
}
|
|
154
210
|
}
|
|
155
211
|
}
|
|
156
212
|
.ax-el-ghost-outline {
|
|
157
|
-
@apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
|
|
213
|
+
// @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
|
|
214
|
+
border-width: 1px;
|
|
215
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
216
|
+
background-color: transparent;
|
|
217
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
158
218
|
|
|
159
219
|
&.ax-el-interactive {
|
|
160
220
|
&:hover {
|
|
161
221
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
162
|
-
@apply ax-border-primary-500 ax-text-primary-500;
|
|
222
|
+
// @apply ax-border-primary-500 ax-text-primary-500;
|
|
223
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
224
|
+
color: rgba(var(--ax-color-primary-500));
|
|
163
225
|
}
|
|
164
226
|
}
|
|
165
227
|
}
|
|
166
228
|
|
|
167
229
|
&.ax-state-selected {
|
|
168
|
-
@apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
|
|
230
|
+
// @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
|
|
231
|
+
border-color: rgba(var(--ax-color-primary-500));
|
|
232
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
169
233
|
}
|
|
170
234
|
.ax-ripple {
|
|
171
|
-
@apply ax-bg-primary-500/30 #{!important};
|
|
235
|
+
// @apply ax-bg-primary-500/30 #{!important};
|
|
236
|
+
background-color: rgba(var(--ax-color-primary-500), 0.3);
|
|
172
237
|
}
|
|
173
238
|
ax-loading-spinner {
|
|
174
239
|
.ax-loader {
|
|
175
|
-
@apply ax-border-ghost-fore ax-border-b-transparent;
|
|
240
|
+
// @apply ax-border-ghost-fore ax-border-b-transparent;
|
|
241
|
+
border-color: rgba(var(--ax-color-ghost-fore));
|
|
242
|
+
border-bottom-color: transparent;
|
|
176
243
|
}
|
|
177
244
|
}
|
|
178
245
|
}
|
|
179
246
|
.ax-el-ghost-blank {
|
|
180
|
-
@apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
|
|
247
|
+
// @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
|
|
248
|
+
border-style: none;
|
|
249
|
+
background-color: transparent;
|
|
250
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
251
|
+
|
|
181
252
|
&.ax-state-selected {
|
|
182
|
-
@apply ax-bg-primary-500 ax-text-primary-fore;
|
|
253
|
+
// @apply ax-bg-primary-500 ax-text-primary-fore;
|
|
254
|
+
background-color: rgba(var(--ax-color-primary-500));
|
|
255
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
183
256
|
}
|
|
184
257
|
&.ax-el-interactive {
|
|
185
258
|
&:hover {
|
|
186
259
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
187
|
-
@apply ax-border-primary-700 ax-text-primary-700;
|
|
260
|
+
// @apply ax-border-primary-700 ax-text-primary-700;
|
|
261
|
+
border-color: rgba(var(--ax-color-primary-700));
|
|
262
|
+
color: rgba(var(--ax-color-primary-700));
|
|
188
263
|
}
|
|
189
264
|
}
|
|
190
265
|
&:active {
|
|
191
|
-
@apply ax-border-primary-800 ax-text-primary-800;
|
|
266
|
+
// @apply ax-border-primary-800 ax-text-primary-800;
|
|
267
|
+
border-color: rgba(var(--ax-color-primary-800));
|
|
268
|
+
color: rgba(var(--ax-color-primary-800));
|
|
192
269
|
}
|
|
193
270
|
}
|
|
194
271
|
|
|
195
272
|
.ax-ripple {
|
|
196
|
-
@apply ax-bg-primary-500/30 #{!important};
|
|
273
|
+
// @apply ax-bg-primary-500/30 #{!important};
|
|
274
|
+
background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
|
|
197
275
|
}
|
|
198
276
|
ax-loading-spinner {
|
|
199
277
|
.ax-loader {
|
|
200
|
-
@apply ax-border-ghost-fore ax-border-b-transparent;
|
|
278
|
+
// @apply ax-border-ghost-fore ax-border-b-transparent;
|
|
279
|
+
border-color: rgba(var(--ax-color-ghost-fore));
|
|
280
|
+
border-bottom-color: transparent;
|
|
201
281
|
}
|
|
202
282
|
}
|
|
203
283
|
& > button {
|
|
204
284
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
205
|
-
@apply ax-outline-primary-500;
|
|
285
|
+
// @apply ax-outline-primary-500;
|
|
286
|
+
outline-color: rgba(var(--ax-color-primary-500));
|
|
206
287
|
}
|
|
207
288
|
}
|
|
208
289
|
}
|
|
209
290
|
.ax-el-ghost-twotone {
|
|
210
|
-
@apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
|
|
291
|
+
// @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
|
|
292
|
+
border-color: transparent;
|
|
293
|
+
background-color: rgba(var(--ax-color-ghost-fore), 0.05);
|
|
294
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
295
|
+
|
|
211
296
|
&.ax-el-interactive {
|
|
212
297
|
&:hover {
|
|
213
298
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
214
|
-
@apply ax-bg-primary-200 ax-text-primary-fore-tint;
|
|
299
|
+
// @apply ax-bg-primary-200 ax-text-primary-fore-tint;
|
|
300
|
+
background-color: rgba(var(--ax-color-primary-200));
|
|
301
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
215
302
|
}
|
|
216
303
|
}
|
|
217
304
|
&:active {
|
|
218
|
-
@apply ax-bg-primary-300 ax-text-primary-fore-tint;
|
|
305
|
+
// @apply ax-bg-primary-300 ax-text-primary-fore-tint;
|
|
306
|
+
background-color: rgba(var(--ax-color-primary-300));
|
|
307
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
219
308
|
}
|
|
220
309
|
}
|
|
221
310
|
&.ax-state-selected {
|
|
222
|
-
@apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
|
|
311
|
+
// @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
|
|
312
|
+
border-color: rgba(var(--ax-color-primary-300));
|
|
313
|
+
background-color: rgba(var(--ax-color-primary-400));
|
|
314
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
223
315
|
}
|
|
224
316
|
.ax-ripple {
|
|
225
|
-
@apply ax-bg-primary-500/30 #{!important};
|
|
317
|
+
// @apply ax-bg-primary-500/30 #{!important};
|
|
318
|
+
background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
|
|
226
319
|
}
|
|
227
320
|
ax-loading-spinner {
|
|
228
321
|
.ax-loader {
|
|
229
|
-
@apply ax-border-ghost-fore ax-border-b-transparent;
|
|
322
|
+
// @apply ax-border-ghost-fore ax-border-b-transparent;
|
|
323
|
+
border-color: rgba(var(--ax-color-ghost-fore));
|
|
324
|
+
border-bottom-color: transparent;
|
|
230
325
|
}
|
|
231
326
|
}
|
|
232
327
|
& > button {
|
|
233
328
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
234
|
-
@apply ax-outline-primary-500;
|
|
329
|
+
// @apply ax-outline-primary-500;
|
|
330
|
+
outline-color: rgba(var(--ax-color-primary-500));
|
|
235
331
|
}
|
|
236
332
|
}
|
|
237
333
|
}
|
|
@@ -243,60 +339,81 @@
|
|
|
243
339
|
@each $look in $look_names {
|
|
244
340
|
@if ($look == 'solid') {
|
|
245
341
|
.ax-el-#{$color}-#{$look} {
|
|
246
|
-
@apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
|
|
247
|
-
|
|
342
|
+
// @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
|
|
343
|
+
background-color: rgba(var(--ax-color-#{$color}-200));
|
|
344
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
345
|
+
border-color: rgba(var(--ax-color-#{$color}-200));
|
|
248
346
|
&.ax-el-interactive {
|
|
249
347
|
&:hover {
|
|
250
348
|
&:not(.ax-state-disabled) {
|
|
251
|
-
@apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
|
|
349
|
+
// @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
|
|
350
|
+
background-color: rgba(var(--ax-color-#{$color}-300));
|
|
351
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
252
352
|
}
|
|
253
353
|
}
|
|
254
354
|
}
|
|
255
355
|
|
|
256
356
|
&.ax-state-selected {
|
|
257
|
-
@apply ax-bg-#{$color}-400;
|
|
357
|
+
// @apply ax-bg-#{$color}-400;
|
|
358
|
+
background-color: rgba(var(--ax-color-#{$color}-400));
|
|
258
359
|
}
|
|
259
360
|
.ax-ripple {
|
|
260
|
-
@apply ax-bg-#{$color}-200/30 #{!important};
|
|
361
|
+
// @apply ax-bg-#{$color}-200/30 #{!important};
|
|
362
|
+
background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
|
|
261
363
|
}
|
|
262
364
|
ax-loading-spinner {
|
|
263
365
|
.ax-loader {
|
|
264
|
-
@apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
366
|
+
// @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
367
|
+
border-color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
368
|
+
border-bottom-color: transparent;
|
|
265
369
|
}
|
|
266
370
|
}
|
|
267
371
|
& > button {
|
|
268
372
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
269
|
-
|
|
373
|
+
outline-color: rgba(var(--ax-color-primary-200));
|
|
270
374
|
}
|
|
271
375
|
}
|
|
272
376
|
}
|
|
273
377
|
}
|
|
274
378
|
@if ($look == 'outline') {
|
|
275
379
|
.ax-el-#{$color}-#{$look} {
|
|
276
|
-
@apply ax-border-#{$color}-200 ax-text-#{$color}-200;
|
|
380
|
+
// @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
|
|
381
|
+
|
|
382
|
+
border-color: rgba(var(--ax-color-#{$color}-200));
|
|
383
|
+
color: rgba(var(--ax-color-#{$color}-200));
|
|
277
384
|
|
|
278
385
|
&.ax-el-interactive {
|
|
279
386
|
&:hover {
|
|
280
387
|
&:not(.ax-state-disabled) {
|
|
281
|
-
@apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
|
|
388
|
+
// @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
|
|
389
|
+
border-color: rgba(var(--ax-color-#{$color}-300));
|
|
390
|
+
color: rgba(var(--ax-color-#{$color}-300));
|
|
391
|
+
background-color: transparent;
|
|
282
392
|
}
|
|
283
393
|
}
|
|
284
394
|
}
|
|
285
395
|
|
|
286
396
|
&.ax-state-selected {
|
|
287
|
-
@apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
|
|
397
|
+
// @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
|
|
398
|
+
border-color: rgba(var(--ax-color-#{$color}-300));
|
|
399
|
+
color: rgba(var(--ax-color-#{$color}-300));
|
|
288
400
|
}
|
|
289
401
|
.ax-ripple {
|
|
290
|
-
@apply ax-bg-#{$color}-500/30 #{!important};
|
|
402
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
403
|
+
border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
|
|
291
404
|
}
|
|
292
405
|
ax-loading-spinner {
|
|
293
406
|
.ax-loader {
|
|
294
|
-
@apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
407
|
+
// @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
408
|
+
border-color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
409
|
+
border-bottom-color: transparent;
|
|
295
410
|
}
|
|
296
411
|
}
|
|
297
412
|
& > button {
|
|
298
413
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
299
|
-
@apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
|
|
414
|
+
// @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
|
|
415
|
+
border-color: rgba(var(--ax-color-#{$color}-300));
|
|
416
|
+
color: rgba(var(--ax-color-#{$color}-300));
|
|
300
417
|
}
|
|
301
418
|
}
|
|
302
419
|
}
|
|
@@ -304,61 +421,77 @@
|
|
|
304
421
|
|
|
305
422
|
@if ($look == 'blank') {
|
|
306
423
|
.ax-el-#{$color}-#{$look} {
|
|
307
|
-
@apply ax-text-#{$color}-300 ax-bg-transparent;
|
|
424
|
+
// @apply ax-text-#{$color}-300 ax-bg-transparent;
|
|
308
425
|
|
|
426
|
+
color: rgba(var(--ax-color-#{$color}-300));
|
|
427
|
+
background-color: transparent;
|
|
309
428
|
&.ax-el-interactive {
|
|
310
429
|
&:hover {
|
|
311
430
|
&:not(.ax-state-disabled) {
|
|
312
|
-
@apply ax-text-#{$color}-500;
|
|
431
|
+
// @apply ax-text-#{$color}-500;
|
|
432
|
+
color: rgba(var(--ax-color-#{$color}-400));
|
|
313
433
|
}
|
|
314
434
|
}
|
|
315
435
|
}
|
|
316
436
|
|
|
317
437
|
&.ax-state-selected {
|
|
318
|
-
@apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
|
|
438
|
+
// @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
|
|
439
|
+
background-color: rgba(var(--ax-color-#{$color}-500));
|
|
440
|
+
color: rgba(var(--ax-color-#{$color}-fore));
|
|
319
441
|
}
|
|
320
442
|
.ax-ripple {
|
|
321
|
-
@apply ax-bg-#{$color}-500/30 #{!important};
|
|
443
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
444
|
+
background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
|
|
322
445
|
}
|
|
323
446
|
ax-loading-spinner {
|
|
324
447
|
.ax-loader {
|
|
325
|
-
@apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
448
|
+
// @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
449
|
+
border-color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
450
|
+
border-bottom-color: transparent;
|
|
326
451
|
}
|
|
327
452
|
}
|
|
328
453
|
& > button {
|
|
329
454
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
330
|
-
@apply ax-outline-#{$color}-300 ax-outline-offset-0;
|
|
455
|
+
// @apply ax-outline-#{$color}-300 ax-outline-offset-0;
|
|
331
456
|
}
|
|
332
457
|
}
|
|
333
458
|
}
|
|
334
459
|
}
|
|
335
460
|
@if ($look == 'twotone') {
|
|
336
461
|
.ax-el-#{$color}-#{$look} {
|
|
337
|
-
@apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
|
|
462
|
+
// @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
|
|
463
|
+
|
|
464
|
+
background-color: rgba(var(--ax-color-#{$color}-200));
|
|
465
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
466
|
+
border-color: rgba(var(--ax-color-#{$color}-200));
|
|
338
467
|
|
|
339
468
|
&.ax-state-interactive {
|
|
340
469
|
&:hover {
|
|
341
470
|
&:not(.ax-state-disabled) {
|
|
342
471
|
background-color: rgba(var(--ax-color-#{$color}-300));
|
|
343
|
-
@apply ax-bg-#{$color}-300;
|
|
472
|
+
// @apply ax-bg-#{$color}-300;
|
|
344
473
|
}
|
|
345
474
|
}
|
|
346
475
|
}
|
|
347
476
|
|
|
348
477
|
&.ax-state-selected {
|
|
349
|
-
@apply ax-bg-#{$color}-400;
|
|
478
|
+
// @apply ax-bg-#{$color}-400;
|
|
479
|
+
background-color: rgba(var(--ax-color-#{$color}-400));
|
|
350
480
|
}
|
|
351
481
|
.ax-ripple {
|
|
352
|
-
@apply ax-bg-#{$color}-500/30 #{!important};
|
|
482
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
483
|
+
background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
|
|
353
484
|
}
|
|
354
485
|
ax-loading-spinner {
|
|
355
486
|
.ax-loader {
|
|
356
|
-
@apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
487
|
+
// @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
488
|
+
border-color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
489
|
+
border-bottom-color: transparent;
|
|
357
490
|
}
|
|
358
491
|
}
|
|
359
492
|
& > button {
|
|
360
493
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
361
|
-
@apply ax-outline-#{$color}-500;
|
|
494
|
+
// @apply ax-outline-#{$color}-500;
|
|
362
495
|
}
|
|
363
496
|
}
|
|
364
497
|
}
|
|
@@ -366,90 +499,115 @@
|
|
|
366
499
|
}
|
|
367
500
|
}
|
|
368
501
|
.ax-el-ghost-solid {
|
|
369
|
-
|
|
370
|
-
&.ax-state-interactive {
|
|
502
|
+
&.ax-el-interactive {
|
|
371
503
|
&:hover {
|
|
372
504
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
373
|
-
|
|
505
|
+
border-color: rgba(var(--ax-color-primary-200));
|
|
506
|
+
color: rgba(var(--ax-color-primary-200));
|
|
374
507
|
}
|
|
375
508
|
}
|
|
509
|
+
&:active {
|
|
510
|
+
border-color: rgba(var(--ax-color-primary-300));
|
|
511
|
+
color: rgba(var(--ax-color-primary-300));
|
|
512
|
+
}
|
|
376
513
|
}
|
|
377
514
|
|
|
378
|
-
&:active {
|
|
379
|
-
@apply ax-border-primary-300 ax-text-primary-300;
|
|
380
|
-
}
|
|
381
515
|
&.ax-state-selected {
|
|
382
|
-
|
|
516
|
+
border-color: rgba(var(--ax-color-primary-200));
|
|
517
|
+
background-color: rgba(var(--ax-color-primary-200));
|
|
518
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
383
519
|
}
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
}
|
|
520
|
+
|
|
521
|
+
.ax-ripple {
|
|
522
|
+
background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
|
|
388
523
|
}
|
|
389
524
|
}
|
|
390
525
|
.ax-el-ghost-outline {
|
|
391
|
-
@apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
|
|
392
|
-
|
|
393
526
|
&.ax-el-interactive {
|
|
394
527
|
&:hover {
|
|
395
528
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
396
|
-
|
|
529
|
+
border-color: rgba(var(--ax-color-primary-200));
|
|
530
|
+
color: rgba(var(--ax-color-primary-200));
|
|
397
531
|
}
|
|
398
532
|
}
|
|
399
|
-
&:active {
|
|
400
|
-
@apply ax-border-primary-400 ax-text-primary-400;
|
|
401
|
-
}
|
|
402
533
|
}
|
|
534
|
+
|
|
403
535
|
&.ax-state-selected {
|
|
404
|
-
|
|
536
|
+
border-color: rgba(var(--ax-color-primary-200));
|
|
537
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
405
538
|
}
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
539
|
+
.ax-ripple {
|
|
540
|
+
background-color: rgba(var(--ax-color-primary-200), 0.3);
|
|
541
|
+
}
|
|
542
|
+
ax-loading-spinner {
|
|
543
|
+
.ax-loader {
|
|
544
|
+
border-color: rgba(var(--ax-color-ghost-fore));
|
|
545
|
+
border-bottom-color: transparent;
|
|
409
546
|
}
|
|
410
547
|
}
|
|
411
548
|
}
|
|
412
|
-
|
|
413
549
|
.ax-el-ghost-blank {
|
|
414
|
-
@apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
|
|
550
|
+
// @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
|
|
551
|
+
border-style: none;
|
|
552
|
+
background-color: transparent;
|
|
553
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
554
|
+
|
|
415
555
|
&.ax-state-selected {
|
|
416
|
-
@apply ax-bg-primary-500 ax-text-primary-fore;
|
|
556
|
+
// @apply ax-bg-primary-500 ax-text-primary-fore;
|
|
557
|
+
background-color: rgba(var(--ax-color-primary-500));
|
|
558
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
417
559
|
}
|
|
418
560
|
&.ax-el-interactive {
|
|
419
561
|
&:hover {
|
|
420
562
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
421
|
-
|
|
563
|
+
border-color: rgba(var(--ax-color-primary-300));
|
|
564
|
+
color: rgba(var(--ax-color-primary-300));
|
|
422
565
|
}
|
|
423
566
|
}
|
|
424
567
|
&:active {
|
|
425
|
-
|
|
568
|
+
border-color: rgba(var(--ax-color-primary-400));
|
|
569
|
+
color: rgba(var(--ax-color-primary-400));
|
|
426
570
|
}
|
|
427
571
|
}
|
|
428
572
|
|
|
573
|
+
.ax-ripple {
|
|
574
|
+
background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
|
|
575
|
+
}
|
|
576
|
+
|
|
429
577
|
& > button {
|
|
430
578
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
431
|
-
|
|
579
|
+
outline-color: rgba(var(--ax-color-primary-200));
|
|
432
580
|
}
|
|
433
581
|
}
|
|
434
582
|
}
|
|
435
583
|
.ax-el-ghost-twotone {
|
|
436
|
-
|
|
584
|
+
border-color: transparent;
|
|
585
|
+
background-color: rgba(var(--ax-color-ghost-fore), 0.05);
|
|
586
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
587
|
+
|
|
437
588
|
&.ax-el-interactive {
|
|
438
589
|
&:hover {
|
|
439
590
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
440
|
-
|
|
591
|
+
background-color: rgba(var(--ax-color-primary-200));
|
|
592
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
441
593
|
}
|
|
442
594
|
}
|
|
443
595
|
&:active {
|
|
444
|
-
|
|
596
|
+
background-color: rgba(var(--ax-color-primary-300));
|
|
597
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
445
598
|
}
|
|
446
599
|
}
|
|
447
600
|
&.ax-state-selected {
|
|
448
|
-
|
|
601
|
+
border-color: rgba(var(--ax-color-primary-300));
|
|
602
|
+
background-color: rgba(var(--ax-color-primary-300));
|
|
603
|
+
}
|
|
604
|
+
.ax-ripple {
|
|
605
|
+
background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
|
|
449
606
|
}
|
|
607
|
+
|
|
450
608
|
& > button {
|
|
451
609
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
452
|
-
|
|
610
|
+
outline-color: rgba(var(--ax-color-primary-200));
|
|
453
611
|
}
|
|
454
612
|
}
|
|
455
613
|
}
|