@acorex/styles 5.0.40 → 5.0.43

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.
Files changed (21) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +1 -1
  3. package/src/components/_checkbox.scss +1 -1
  4. package/src/components/_dialog.scss +1 -1
  5. package/src/components/_dropdown.scss +14 -4
  6. package/src/components/_editor-container.scss +37 -33
  7. package/src/components/_input.scss +7 -10
  8. package/src/components/_list.scss +6 -8
  9. package/src/components/_menu.scss +43 -0
  10. package/src/components/_popup.scss +33 -29
  11. package/src/components/_radio.scss +1 -1
  12. package/src/components/_skeleton.scss +1 -2
  13. package/src/components/_switch copy.scss +185 -0
  14. package/src/components/_switch.scss +145 -304
  15. package/src/components/_table.scss +50 -17
  16. package/src/components/_tabs.scss +4 -4
  17. package/src/components/_textarea.scss +41 -0
  18. package/src/components/_toast.scss +1 -1
  19. package/src/components/_treeview.scss +23 -0
  20. package/src/components/index.scss +4 -1
  21. package/src/utility/_mixins.scss +7 -5
package/src/components/_switch.scss CHANGED
@@ -1,346 +1,187 @@
1
1
  @layer components {
2
+ ax-switch,
2
3
  .ax-switch {
3
- width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
4
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
5
- @apply ax-relative ax-inline-block;
6
- input {
7
- @apply ax-w-0 ax-h-0 ax-opacity-0;
8
- }
9
-
10
- .ax-switch-slider {
11
- @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
12
- @include control-dark("editor");
13
- -webkit-transition: 0.4s;
14
- transition: 0.4s;
15
- &::before {
16
- @apply ax-absolute ax-bg-white ax-rounded-full;
17
- content: "";
18
- width: 35%;
19
- padding-bottom: 35%;
20
- left: 7%;
21
- top: 50%;
22
- transform: translate(0, -50%);
23
- -webkit-transition: 0.4s;
24
- transition: 0.4s;
4
+ button {
5
+ @apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 ax-text-light-fore ax-transition-all;
6
+ min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
7
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
8
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
9
+ &.ax-switch-checked {
10
+ @apply ax-bg-primary-500;
11
+ .ax-switch-handle {
12
+ @apply ax-right-0.5;
13
+ left: initial;
14
+ }
15
+ .ax-switch-inner {
16
+ @apply ax-text-primary-fore;
17
+ margin-inline-end: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
18
+ margin-inline-start: var(--ax-base-size);
19
+ }
25
20
  }
26
- }
27
-
28
- input:checked + .ax-switch-slider {
29
- @apply ax-bg-primary-500;
30
- }
31
-
32
- input:focus + .ax-switch-slider {
33
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
34
- }
35
-
36
- input:checked + .ax-switch-slider:before {
37
- -webkit-transform: translate(140%, -50%);
38
- -ms-transform: translate(140%, -50%);
39
- transform: translate(140%, -50%);
40
- }
41
-
42
- &.ax-state-disabled {
43
- .ax-switch-slider {
44
- background-color: rgb(var(--ax-color-disabled)) !important;
45
- @apply ax-cursor-not-allowed ax-border-transparent;
46
- &:after {
47
- @apply ax-border-transparent;
21
+ .ax-switch-handle {
22
+ width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
23
+ height: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
24
+ @apply ax-bg-white ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
25
+ ax-loading {
26
+ transform: translateY(-50%);
27
+ @apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
28
+ svg {
29
+ @apply ax-fill-primary-500 ax-stroke-primary-500;
30
+ }
48
31
  }
49
- &:hover {
50
- @apply ax-border-transparent;
32
+ &:before {
33
+ @apply ax-absolute ax-bg-white ax-transition-all ax-rounded-full;
34
+ content: "";
51
35
  }
52
36
  }
53
- }
54
- &.ax-state-readonly {
55
- .ax-switch-slider {
56
- opacity: 0.6;
57
- @apply ax-cursor-not-allowed;
37
+ .ax-switch-inner {
38
+ @apply ax-block;
39
+ margin-inline-start: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
40
+ margin-inline-end: var(--ax-base-size);
41
+ transition: margin 0.2s;
58
42
  }
59
43
  }
60
-
61
- &.ax-success {
62
- > input {
63
- &:checked {
64
- & + .ax-switch-slider {
65
- background-color: rgb(var(--ax-color-success));
44
+ &.ax-primary {
45
+ button {
46
+ &.ax-switch-checked {
47
+ @apply ax-bg-primary-500;
48
+ .ax-switch-inner {
49
+ @apply ax-text-primary-fore;
50
+ }
51
+ }
52
+ .ax-switch-handle {
53
+ ax-loading {
54
+ svg {
55
+ @apply ax-fill-primary-500 ax-stroke-primary-500;
56
+ }
66
57
  }
67
58
  }
68
- }
69
- input:focus ~ .ax-switch-slider {
70
- @apply ax-ring-success-500;
71
59
  }
72
60
  }
73
61
  &.ax-secondary {
74
- > input {
75
- &:checked {
76
- & + .ax-switch-slider {
77
- background-color: rgb(var(--ax-color-secondary));
62
+ button {
63
+ &.ax-switch-checked {
64
+ @apply ax-bg-secondary-500;
65
+ .ax-switch-inner {
66
+ @apply ax-text-secondary-fore;
67
+ }
68
+ }
69
+ .ax-switch-handle {
70
+ ax-loading {
71
+ svg {
72
+ @apply ax-fill-secondary-500 ax-stroke-secondary-500;
73
+ }
78
74
  }
79
75
  }
80
- }
81
- input:focus ~ .ax-switch-slider {
82
- @apply ax-ring-secondary-500;
83
76
  }
84
77
  }
85
- &.ax-danger {
86
- > input {
87
- &:checked {
88
- & + .ax-switch-slider {
89
- background-color: rgb(var(--ax-color-danger));
78
+ &.ax-success {
79
+ button {
80
+ &.ax-switch-checked {
81
+ @apply ax-bg-success-500;
82
+ .ax-switch-inner {
83
+ @apply ax-text-success-fore;
84
+ }
85
+ }
86
+ .ax-switch-handle {
87
+ ax-loading {
88
+ svg {
89
+ @apply ax-fill-success-500 ax-stroke-success-500;
90
+ }
90
91
  }
91
92
  }
92
- }
93
- input:focus ~ .ax-switch-slider {
94
- @apply ax-ring-danger-500;
95
93
  }
96
94
  }
97
95
  &.ax-warning {
98
- > input {
99
- &:checked {
100
- & + .ax-switch-slider {
101
- background-color: rgb(var(--ax-color-warning));
96
+ button {
97
+ &.ax-switch-checked {
98
+ @apply ax-bg-warning-500;
99
+ .ax-switch-inner {
100
+ @apply ax-text-warning-fore;
101
+ }
102
+ }
103
+ .ax-switch-handle {
104
+ ax-loading {
105
+ svg {
106
+ @apply ax-fill-warning-500 ax-stroke-warning-500;
107
+ }
102
108
  }
103
109
  }
104
- }
105
- input:focus ~ .ax-switch-slider {
106
- @apply ax-ring-warning-500;
107
110
  }
108
111
  }
109
- &.ax-info {
110
- > input {
111
- &:checked {
112
- & + .ax-switch-slider {
113
- background-color: rgb(var(--ax-color-info));
112
+ &.ax-danger {
113
+ button {
114
+ &.ax-switch-checked {
115
+ @apply ax-bg-danger-500;
116
+ .ax-switch-inner {
117
+ @apply ax-text-danger-fore;
118
+ }
119
+ }
120
+ .ax-switch-handle {
121
+ ax-loading {
122
+ svg {
123
+ @apply ax-fill-danger-500 ax-stroke-danger-500;
124
+ }
114
125
  }
115
126
  }
116
- }
117
- input:focus ~ .ax-switch-slider {
118
- @apply ax-ring-info-500;
119
127
  }
120
128
  }
121
- &.ax-light {
122
- > input {
123
- &:checked {
124
- & + .ax-switch-slider {
125
- background-color: rgb(var(--ax-color-light));
129
+ &.ax-info {
130
+ button {
131
+ &.ax-switch-checked {
132
+ @apply ax-bg-info-500;
133
+ .ax-switch-inner {
134
+ @apply ax-text-info-fore;
135
+ }
136
+ }
137
+ .ax-switch-handle {
138
+ ax-loading {
139
+ svg {
140
+ @apply ax-fill-info-500 ax-stroke-info-500;
141
+ }
126
142
  }
127
143
  }
128
- }
129
- input:focus ~ .ax-switch-slider {
130
- @apply ax-ring-light-500;
131
144
  }
132
145
  }
133
146
  &.ax-dark {
134
- > input {
135
- &:checked {
136
- & + .ax-switch-slider {
137
- background-color: rgb(var(--ax-color-dark));
147
+ button {
148
+ &.ax-switch-checked {
149
+ @apply ax-bg-dark-500;
150
+ .ax-switch-inner {
151
+ @apply ax-text-dark-fore;
152
+ }
153
+ }
154
+ .ax-switch-handle {
155
+ ax-loading {
156
+ svg {
157
+ @apply ax-fill-dark-500 ax-stroke-dark-500;
158
+ }
138
159
  }
139
160
  }
140
161
  }
141
- input:focus ~ .ax-switch-slider {
142
- @apply ax-ring-dark-500;
162
+ }
163
+ &.ax-light {
164
+ button {
165
+ &.ax-switch-checked {
166
+ @apply ax-bg-light-500;
167
+ .ax-switch-inner {
168
+ @apply ax-text-light-fore;
169
+ }
170
+ }
171
+ .ax-switch-handle {
172
+ ax-loading {
173
+ svg {
174
+ @apply ax-fill-light-500 ax-stroke-light-500;
175
+ }
176
+ }
177
+ }
143
178
  }
144
179
  }
180
+ .ax-state-disabled {
181
+ @apply ax-opacity-60 ax-cursor-not-allowed #{!important};
182
+ }
183
+ .ax-state-readonly {
184
+ @apply ax-opacity-75 #{!important};
185
+ }
145
186
  }
146
-
147
- // .ax-switch {
148
- // position: relative;
149
- // display: block;
150
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 7px);
151
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 15px);
152
- // margin: 5px;
153
- // >input {
154
- // opacity: 0;
155
- // width: 0;
156
- // height: 0;
157
- // &:checked {
158
- // &+.ax-switch-slider {
159
- // background-color: rgb(var(--ax-color-primary));
160
-
161
- // &::before {
162
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
163
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
164
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
165
- // }
166
- // }
167
- // }
168
- // }
169
- // .ax-switch-slider {
170
- // position: absolute;
171
- // cursor: pointer;
172
- // top: 0;
173
- // left: 0;
174
- // right: 0;
175
- // bottom: 0;
176
- // -webkit-transition: 0.2s;
177
- // transition: 0.2s;
178
- // border-radius: 25px;
179
- // @apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
180
- // &::before {
181
- // content: "";
182
- // position: absolute;
183
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
184
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
185
- // left: 3px;
186
- // bottom: 3px;
187
- // background-color: white;
188
- // -webkit-transition: 0.2s;
189
- // transition: 0.2s;
190
- // border-radius: 50%;
191
- // }
192
- // }
193
- // input:focus~.ax-switch-slider {
194
- // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
195
- // }
196
- // &.ax-sm {
197
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
198
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
199
- // >input {
200
- // &:checked {
201
- // &+.ax-switch-slider {
202
- // &::before {
203
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
204
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
205
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
206
- // }
207
- // }
208
- // }
209
- // }
210
- // .ax-switch-slider {
211
- // &::before {
212
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
213
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
214
- // }
215
- // }
216
- // }
217
- // &.ax-lg {
218
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 20px);
219
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px);
220
- // >input {
221
- // &:checked {
222
- // &+.ax-switch-slider {
223
- // &::before {
224
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
225
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
226
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
227
- // }
228
- // }
229
- // }
230
- // }
231
- // .ax-switch-slider {
232
- // &::before {
233
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
234
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
235
- // }
236
- // }
237
- // }
238
- // &.ax-state-error {
239
- // .ax-switch-slider {
240
- // @apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
241
- // }
242
- // }
243
- // &.ax-state-disabled {
244
- // .ax-switch-slider {
245
- // background-color: rgb(var(--ax-color-disabled)) !important;
246
- // @apply ax-cursor-not-allowed ax-border-transparent;
247
- // &:after {
248
- // @apply ax-border-transparent;
249
- // }
250
- // &:hover {
251
- // @apply ax-border-transparent;
252
- // }
253
- // }
254
- // }
255
- // &.ax-state-readonly {
256
- // .ax-switch-slider {
257
- // opacity: 0.6;
258
- // @apply ax-cursor-not-allowed;
259
- // }
260
- // }
261
- // &.ax-success {
262
- // >input {
263
- // &:checked {
264
- // &+.ax-switch-slider {
265
- // background-color: rgb(var(--ax-color-success));
266
- // }
267
- // }
268
- // }
269
- // input:focus~.ax-switch-slider {
270
- // @apply ax-ring-success-500;
271
- // }
272
- // }
273
- // &.ax-secondary {
274
- // >input {
275
- // &:checked {
276
- // &+.ax-switch-slider {
277
- // background-color: rgb(var(--ax-color-secondary));
278
- // }
279
- // }
280
- // }
281
- // input:focus~.ax-switch-slider {
282
- // @apply ax-ring-secondary-500;
283
- // }
284
- // }
285
- // &.ax-danger {
286
- // >input {
287
- // &:checked {
288
- // &+.ax-switch-slider {
289
- // background-color: rgb(var(--ax-color-danger));
290
- // }
291
- // }
292
- // }
293
- // input:focus~.ax-switch-slider {
294
- // @apply ax-ring-danger-500;
295
- // }
296
- // }
297
- // &.ax-warning {
298
- // >input {
299
- // &:checked {
300
- // &+.ax-switch-slider {
301
- // background-color: rgb(var(--ax-color-warning));
302
- // }
303
- // }
304
- // }
305
- // input:focus~.ax-switch-slider {
306
- // @apply ax-ring-warning-500;
307
- // }
308
- // }
309
- // &.ax-info {
310
- // >input {
311
- // &:checked {
312
- // &+.ax-switch-slider {
313
- // background-color: rgb(var(--ax-color-info));
314
- // }
315
- // }
316
- // }
317
- // input:focus~.ax-switch-slider {
318
- // @apply ax-ring-info-500;
319
- // }
320
- // }
321
- // &.ax-light {
322
- // >input {
323
- // &:checked {
324
- // &+.ax-switch-slider {
325
- // background-color: rgb(var(--ax-color-light));
326
- // }
327
- // }
328
- // }
329
- // input:focus~.ax-switch-slider {
330
- // @apply ax-ring-light-500;
331
- // }
332
- // }
333
- // &.ax-dark {
334
- // >input {
335
- // &:checked {
336
- // &+.ax-switch-slider {
337
- // background-color: rgb(var(--ax-color-dark));
338
- // }
339
- // }
340
- // }
341
- // input:focus~.ax-switch-slider {
342
- // @apply ax-ring-dark-500;
343
- // }
344
- // }
345
- // }
346
187
  }
package/src/components/_table.scss CHANGED
@@ -1,20 +1,53 @@
1
- .ax-table {
2
- @apply ax-w-full;
3
- table {
4
- border-collapse: collapse;
5
- @apply ax-w-full;
6
- }
7
- td,
8
- th {
9
- @apply ax-p-4 ax-border ax-border-solid ax-border;
10
- text-align: inherit;
11
- }
12
- &.ax-alternative {
13
- tr {
14
- @apply ax-bg-white;
15
- &:nth-child(even) {
16
- @apply ax-bg-light-50;
1
+ @layer components {
2
+ .ax-table {
3
+ @apply ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-dark-400;
4
+ th {
5
+ @apply ax-py-3 ax-px-6 ax-bg-light-200 dark:ax-bg-dark-400/50 ax-text-start ax-font-normal ax-text-sm;
6
+ }
7
+
8
+ tr,
9
+ th,
10
+ td {
11
+ @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400 ax-px-6 ax-py-4 ax-text-sm;
12
+ }
13
+ &.ax-table-alternate {
14
+ tr {
15
+ &:nth-child(even) {
16
+ @apply ax-bg-light-100 dark:ax-bg-dark-400/20;
17
+ }
18
+ }
19
+ }
20
+ &.ax-table-responsive {
21
+ @media screen and (max-width: 640px) {
22
+ @apply ax-border-none #{!important};
23
+ thead tr {
24
+ @apply ax-absolute ax-top-[-9999em] ax-left-[-9999em];
25
+ }
26
+
27
+ tr {
28
+ @apply ax-block ax-border ax-border-light-200 dark:ax-border-dark-400 ax-p-0;
29
+ }
30
+
31
+ tr + tr {
32
+ @apply ax-mt-6;
33
+ }
34
+ /* Get table cells to act like rows */
35
+
36
+ td {
37
+ padding-inline-start: 50%;
38
+ @apply ax-relative ax-flex ax-justify-start ax-items-center ax-border-b ax-border-light-200 dark:ax-border-dark-400 last:ax-border-0;
39
+ &:before {
40
+ @apply ax-font-normal ax-text-sm ax-inline-block ax-w-full ax-relative ax-z-10 ax-truncate;
41
+ content: attr(data-label);
42
+ margin-left: -100%;
43
+ }
44
+
45
+ &:after {
46
+ @apply ax-bg-light-200 ax-absolute ax-start-0 ax-top-0 ax-z-0 ax-w-[45%] ax-h-full ax-border-b ax-border-white;
47
+ content: "";
48
+ }
49
+ }
17
50
  }
18
51
  }
19
52
  }
20
- }
53
+ }
package/src/components/_tabs.scss CHANGED
@@ -46,11 +46,11 @@
46
46
  &.ax-horizontal {
47
47
  &.ax-look-default {
48
48
  @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
49
- @include control-dark("editor");
49
+ @include control-states("editor");
50
50
 
51
51
  ax-tab-item {
52
52
  @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
53
- @include control-dark("editor");
53
+ @include control-states("editor");
54
54
 
55
55
  border-bottom-color: transparent !important;
56
56
 
@@ -119,7 +119,7 @@
119
119
  }
120
120
 
121
121
  &.ax-state-active {
122
- @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
122
+ @apply ax-bg-light-200 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
123
123
  }
124
124
  }
125
125
  }
@@ -151,7 +151,7 @@
151
151
 
152
152
  &.ax-look-default {
153
153
  @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
154
- @include control-dark("editor");
154
+ @include control-states("editor");
155
155
 
156
156
  ax-tab-item {
157
157
  @apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0 dark:ax-text-light-200 ax-mb-1;
package/src/components/_textarea.scss ADDED
@@ -0,0 +1,41 @@
1
+ @layer components {
2
+ ax-textarea,
3
+ .ax-textarea {
4
+ min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
5
+ @apply ax-relative ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
6
+ &:focus-within {
7
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
8
+ }
9
+ textarea {
10
+ min-height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
11
+ height: fit-content;
12
+ @apply ax-w-full ax-text-sm ax-p-1.5;
13
+ @include control-states("editor");
14
+ &:has(ax-prefix) {
15
+ bacground-color: #f00 !important;
16
+ }
17
+ &:focus {
18
+ @apply ax-outline-transparent;
19
+ }
20
+ }
21
+ > ax-prefix,
22
+ > ax-suffix {
23
+ @apply ax-mb-2 ax-p-1.5 ax-absolute;
24
+ @include control-states("editor");
25
+ ax-button {
26
+ @apply ax-text-sm;
27
+ --ax-base-size: 5px;
28
+ }
29
+ }
30
+ > ax-prefix {
31
+ @apply ax-top-0 ax-end-0;
32
+ }
33
+ > ax-suffix {
34
+ @apply ax-bottom-0 ax-end-0;
35
+ }
36
+
37
+ &.ax-state-disabled {
38
+ @include control-states("editor-disabled");
39
+ }
40
+ }
41
+ }
package/src/components/_toast.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .ax-toast {
3
3
  @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-300 ax-border ax-border-solid ax-rounded-lg ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
4
- @include control-dark('surface');
4
+ @include control-states('surface');
5
5
  @screen sm {
6
6
  width: 98vw;
7
7
  }
package/src/components/_treeview.scss ADDED
@@ -0,0 +1,23 @@
1
+ @layer components {
2
+ ax-tree-view,
3
+ .ax-tree-view {
4
+ > ul {
5
+ li {
6
+ @apply ax-text-sm ax-relative;
7
+ // &::before {
8
+ // content: "";
9
+ // height: 1px;
10
+ // transform: translateY(-50%);
11
+ // @apply ax-absolute ax-start-8 ax-top-1/2 ax-bg-light-200 ax-w-8;
12
+ // }
13
+
14
+ span {
15
+ @apply ax-flex ax-items-center ax-my-1;
16
+ }
17
+ ul {
18
+ @apply ax-ps-8 ax-border-s ax-border-light-200 dark:ax-border-dark-400;
19
+ }
20
+ }
21
+ }
22
+ }
23
+ }