@acorex/styles 5.0.42 → 5.0.45

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 (22) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +1 -1
  3. package/src/components/_badge.scss +15 -16
  4. package/src/components/_button.scss +28 -28
  5. package/src/components/_checkbox.scss +1 -1
  6. package/src/components/_dialog.scss +6 -6
  7. package/src/components/_dropdown.scss +12 -2
  8. package/src/components/_editor-container.scss +24 -14
  9. package/src/components/_input.scss +6 -4
  10. package/src/components/_list.scss +17 -10
  11. package/src/components/_menu.scss +43 -0
  12. package/src/components/_popup.scss +33 -8
  13. package/src/components/_radio.scss +1 -1
  14. package/src/components/_skeleton.scss +1 -2
  15. package/src/components/_switch copy.scss +1 -1
  16. package/src/components/_table.scss +50 -17
  17. package/src/components/_tabs.scss +3 -3
  18. package/src/components/_textarea.scss +41 -0
  19. package/src/components/_toast.scss +2 -2
  20. package/src/components/_treeview.scss +55 -0
  21. package/src/components/index.scss +4 -1
  22. package/src/utility/_mixins.scss +3 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.42",
3
+ "version": "5.0.45",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_alert.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  opacity: 1;
12
12
  }
13
13
  .ax-alert-icon {
14
- @apply ax-text-xl ax-self-baseline;
14
+ @apply ax-text-xl ax-self-baseline ax-me-2;
15
15
 
16
16
  }
17
17
  .ax-alert-body {
package/src/components/_badge.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  @apply ax-rounded ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm ax-px-2;
4
4
  min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
5
5
  height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
6
-
7
6
  ax-prefix {
8
7
  @apply ax-me-1.5;
9
8
  }
@@ -16,29 +15,29 @@
16
15
  @apply ax-m-0;
17
16
  }
18
17
  }
19
- &.ax-primary-default{
20
- @apply ax-bg-primary-100 ax-text-primary-600 dark:ax-bg-primary-300;
18
+ &.ax-primary-default {
19
+ @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-300;
21
20
  }
22
- &.ax-secondary-default{
23
- @apply ax-bg-secondary-100 ax-text-secondary-600 dark:ax-bg-secondary-300 ;
21
+ &.ax-secondary-default {
22
+ @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-300;
24
23
  }
25
- &.ax-success-default{
26
- @apply ax-bg-success-100 ax-text-success-600 dark:ax-bg-success-300 ;
24
+ &.ax-success-default {
25
+ @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-300;
27
26
  }
28
- &.ax-warning-default{
29
- @apply ax-bg-warning-100 ax-text-warning-700 dark:ax-bg-warning-300 ;
27
+ &.ax-warning-default {
28
+ @apply ax-bg-warning-50 ax-text-warning-700 dark:ax-bg-warning-300;
30
29
  }
31
- &.ax-danger-default{
32
- @apply ax-bg-danger-100 ax-text-danger-600 dark:ax-bg-danger-300 ;
30
+ &.ax-danger-default {
31
+ @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-300;
33
32
  }
34
- &.ax-info-default{
35
- @apply ax-bg-info-100 ax-text-info-600 dark:ax-bg-info-300 ;
33
+ &.ax-info-default {
34
+ @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-300;
36
35
  }
37
- &.ax-light-default{
36
+ &.ax-light-default {
38
37
  @apply ax-bg-light-200 ax-text-light-700;
39
38
  }
40
- &.ax-dark-default{
39
+ &.ax-dark-default {
41
40
  @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-300 dark:ax-text-dark-50;
42
41
  }
43
42
  }
44
- }
43
+ }
package/src/components/_button.scss CHANGED
@@ -217,114 +217,114 @@
217
217
  }
218
218
  // twotone
219
219
  &.ax-primary-twotone {
220
- @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
220
+ @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
221
221
  &:not(.ax-state-disabled) {
222
222
  &:hover,
223
223
  &:focus {
224
- @apply ax-bg-primary-200 ax-text-primary-700;
224
+ @apply ax-bg-primary-100 ax-text-primary-700;
225
225
  }
226
226
  &:active {
227
- @apply ax-bg-primary-300 ax-text-primary-700;
227
+ @apply ax-bg-primary-200 ax-text-primary-700;
228
228
  }
229
229
  }
230
230
 
231
231
  &.ax-state-selected {
232
- @apply ax-bg-primary-300 ax-text-primary-700;
232
+ @apply ax-bg-primary-200 ax-text-primary-700;
233
233
  }
234
234
  }
235
235
  &.ax-secondary-twotone {
236
- @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
236
+ @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
237
237
  &:not(.ax-state-disabled) {
238
238
  &:hover,
239
239
  &:focus {
240
- @apply ax-bg-secondary-200 ax-text-secondary-700;
240
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
241
241
  }
242
242
  &:active {
243
- @apply ax-bg-secondary-300 ax-text-secondary-700;
243
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
244
244
  }
245
245
  }
246
246
 
247
247
  &.ax-state-selected {
248
- @apply ax-bg-secondary-300 ax-text-secondary-700;
248
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
249
249
  }
250
250
  }
251
251
  &.ax-warning-twotone {
252
- @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
252
+ @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
253
253
  &:not(.ax-state-disabled) {
254
254
  &:hover,
255
255
  &:focus {
256
- @apply ax-bg-warning-200 ax-text-warning-700;
256
+ @apply ax-bg-warning-100 ax-text-warning-700;
257
257
  }
258
258
  &:active {
259
- @apply ax-bg-warning-300 ax-text-warning-700;
259
+ @apply ax-bg-warning-200 ax-text-warning-700;
260
260
  }
261
261
  }
262
262
 
263
263
  &.ax-state-selected {
264
- @apply ax-bg-warning-300 ax-text-warning-700;
264
+ @apply ax-bg-warning-200 ax-text-warning-700;
265
265
  }
266
266
  }
267
267
  &.ax-danger-twotone {
268
- @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
268
+ @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
269
269
  &:not(.ax-state-disabled) {
270
270
  &:hover,
271
271
  &:focus {
272
- @apply ax-bg-danger-200 ax-text-danger-700;
272
+ @apply ax-bg-danger-100 ax-text-danger-700;
273
273
  }
274
274
  &:active {
275
- @apply ax-bg-danger-300 ax-text-danger-700;
275
+ @apply ax-bg-danger-200 ax-text-danger-700;
276
276
  }
277
277
  }
278
278
 
279
279
  &.ax-state-selected {
280
- @apply ax-bg-danger-300 ax-text-danger-700;
280
+ @apply ax-bg-danger-200 ax-text-danger-700;
281
281
  }
282
282
  }
283
283
  &.ax-success-twotone {
284
- @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
284
+ @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
285
285
  &:not(.ax-state-disabled) {
286
286
  &:hover,
287
287
  &:focus {
288
- @apply ax-bg-success-200 ax-text-success-700;
288
+ @apply ax-bg-success-100 ax-text-success-700;
289
289
  }
290
290
  &:active {
291
- @apply ax-bg-success-300 ax-text-success-700;
291
+ @apply ax-bg-success-200 ax-text-success-700;
292
292
  }
293
293
  }
294
294
 
295
295
  &.ax-state-selected {
296
- @apply ax-bg-success-300 ax-text-success-700;
296
+ @apply ax-bg-success-200 ax-text-success-700;
297
297
  }
298
298
  }
299
299
  &.ax-info-twotone {
300
- @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
300
+ @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
301
301
  &:not(.ax-state-disabled) {
302
302
  &:hover,
303
303
  &:focus {
304
- @apply ax-bg-info-200 ax-text-info-700;
304
+ @apply ax-bg-info-100 ax-text-info-700;
305
305
  }
306
306
  &:active {
307
- @apply ax-bg-info-300 ax-text-info-700;
307
+ @apply ax-bg-info-200 ax-text-info-700;
308
308
  }
309
309
  }
310
310
 
311
311
  &.ax-state-selected {
312
- @apply ax-bg-info-300 ax-text-primary-700;
312
+ @apply ax-bg-info-200 ax-text-primary-700;
313
313
  }
314
314
  }
315
315
  &.ax-dark-twotone {
316
- @apply ax-bg-dark-100 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
316
+ @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
317
317
  &:not(.ax-state-disabled) {
318
318
  &:hover {
319
319
  }
320
320
  &:focus {
321
- @apply ax-bg-dark-200 ax-text-dark-700;
321
+ @apply ax-bg-dark-100 ax-text-dark-700;
322
322
  }
323
323
  &:active {
324
- @apply ax-bg-dark-300 ax-text-dark-700;
324
+ @apply ax-bg-dark-200 ax-text-dark-700;
325
325
  }
326
326
  &.ax-state-selected {
327
- @apply ax-bg-dark-300 ax-text-dark-fore;
327
+ @apply ax-bg-dark-200 ax-text-dark-fore;
328
328
  }
329
329
  }
330
330
  }
package/src/components/_checkbox.scss CHANGED
@@ -31,7 +31,7 @@
31
31
 
32
32
  input[type="checkbox"] {
33
33
  @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
34
- @include control-dark("editor");
34
+ @include control-states("editor");
35
35
 
36
36
  &:checked,
37
37
  &:indeterminate {
package/src/components/_dialog.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .ax-dialog {
3
3
  @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
4
- @include control-dark('surface');
4
+ @include control-states('surface');
5
5
  @screen sm {
6
6
  width: 98vw;
7
7
  }
@@ -33,27 +33,27 @@
33
33
  }
34
34
  &.ax-primary-default {
35
35
  .ax-dialog-icon {
36
- @apply ax-text-primary-500 ax-bg-primary-200;
36
+ @apply ax-text-primary-500 ax-bg-primary-50;
37
37
  }
38
38
  }
39
39
  &.ax-success-default {
40
40
  .ax-dialog-icon {
41
- @apply ax-text-success-500 ax-bg-success-200;
41
+ @apply ax-text-success-500 ax-bg-success-50;
42
42
  }
43
43
  }
44
44
  &.ax-danger-default {
45
45
  .ax-dialog-icon {
46
- @apply ax-text-danger-500 ax-bg-danger-200;
46
+ @apply ax-text-danger-500 ax-bg-danger-50;
47
47
  }
48
48
  }
49
49
  &.ax-warning-default {
50
50
  .ax-dialog-icon {
51
- @apply ax-text-warning-500 ax-bg-warning-200;
51
+ @apply ax-text-warning-500 ax-bg-warning-50;
52
52
  }
53
53
  }
54
54
  &.ax-info-default {
55
55
  .ax-dialog-icon {
56
- @apply ax-text-info-500 ax-bg-info-200;
56
+ @apply ax-text-info-500 ax-bg-info-50;
57
57
  }
58
58
  }
59
59
 
package/src/components/_dropdown.scss CHANGED
@@ -5,6 +5,9 @@
5
5
 
6
6
  .ax-dropdown-content {
7
7
  @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto;
8
+ &.ax-state-disabled {
9
+ @include control-states("editor-disabled");
10
+ }
8
11
  }
9
12
  }
10
13
 
@@ -17,8 +20,15 @@
17
20
  }
18
21
 
19
22
  .ax-overlay-pane {
20
- @apply ax-bg-white ax-border ax-rounded ax-border-light-200;
21
- @include control-dark("surface");
23
+ @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
24
+ @include control-states("surface");
25
+
26
+
27
+ // &:focus,
28
+ // &:focus-within
29
+ // {
30
+ // @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-50 ax-border-transparent;
31
+ // }
22
32
 
23
33
  &.ax-overlay-center {
24
34
  @apply ax-h-fit;
package/src/components/_editor-container.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
4
4
  line-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
5
5
  @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
6
- @include control-dark("editor");
6
+ @include control-states("editor");
7
7
 
8
8
  @screen md {
9
9
  @apply ax-text-sm;
@@ -17,6 +17,13 @@
17
17
  @apply ax-px-2;
18
18
  }
19
19
 
20
+ .ax-placeholder
21
+ {
22
+ @apply ax-flex ax-mx-2;
23
+ --tw-placeholder-opacity: 1;
24
+ color: rgb(var(--ax-color-placeholder) / var(--tw-placeholder-opacity));
25
+ }
26
+
20
27
  &:first-child {
21
28
  }
22
29
 
@@ -36,7 +43,16 @@
36
43
  box-shadow: none;
37
44
  }
38
45
  }
46
+ .ax-textarea{
47
+ width: 1%;
48
+ text-align: inherit;
49
+ font: inherit;
50
+ @apply ax-w-full ax-flex-1 ax-bg-transparent ax-border-none ax-p-2.5 ax-rounded;
39
51
 
52
+ &:focus {
53
+ box-shadow: none;
54
+ }
55
+ }
40
56
  ax-prefix {
41
57
  *,
42
58
  ax-button,
@@ -86,7 +102,7 @@
86
102
  }
87
103
 
88
104
  &.ax-state-disabled {
89
- @include control-dark("editor-disabled");
105
+ @include control-states("editor-disabled");
90
106
  }
91
107
 
92
108
  &.ax-state-error {
@@ -113,17 +129,11 @@
113
129
  }
114
130
  }
115
131
 
116
- // &.ax-sm {
117
- // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
118
- // .ax-input {
119
- // @apply ax-text-xs;
120
- // }
121
- // }
122
- // &.ax-lg {
123
- // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
124
- // .ax-input {
125
- // @apply ax-text-lg;
126
- // }
127
- // }
132
+ ax-button {
133
+ &.ax-state-disabled {
134
+ @apply ax-bg-light-100 ax-text-light-fore ax-opacity-100 #{!important};
135
+ }
136
+ }
128
137
  }
138
+
129
139
  }
package/src/components/_input.scss CHANGED
@@ -1,12 +1,14 @@
1
1
  @layer components {
2
- .ax-input {
2
+ .ax-input,
3
+ .ax-textarea {
3
4
  @apply ax-outline-none ax-p-0;
4
- font-size:inherit;
5
+ font-size: inherit;
5
6
  &:focus {
6
7
  @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-md;
7
8
  }
8
9
  &.ax-state-disabled {
9
- @include control-dark("editor-disabled");
10
+ @include control-states("editor-disabled");
10
11
  }
11
12
  }
12
- }
13
+
14
+ }
package/src/components/_list.scss CHANGED
@@ -18,26 +18,32 @@
18
18
  &.ax-default {
19
19
  @apply ax-cursor-pointer;
20
20
 
21
+ .ax-list-item-group {
22
+ &>span {
23
+ @apply ax-font-bold ax-flex ax-items-center ax-px-3 ax-text-sm ax-text-light-900;
24
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
25
+ }
26
+ &>ul {
27
+ @apply ax-px-3;
28
+ }
29
+ }
30
+
21
31
  .ax-list-item {
22
32
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
23
- @apply ax-text-sm ax-flex ax-items-center ax-px-3;
33
+ @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700;
24
34
 
25
35
  &:focus,
26
36
  &:focus-visible {
27
37
  @apply ax-outline-none;
28
38
  }
29
39
 
30
- &:hover {
31
- @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
32
- }
33
40
  &.ax-state-selected {
34
- @apply ax-text-primary-500 ax-font-medium dark:ax-text-primary-50;
41
+ @apply ax-bg-light-200 ax-text-light-900 ax-font-medium dark:ax-text-primary-50;
35
42
  }
36
-
37
- &:not(.ax-check-box)
38
- {
43
+
44
+ &:not(.ax-check-box) {
39
45
  &.ax-state-selected {
40
- @apply ax-bg-primary-50 dark:ax-bg-white/[0.16];
46
+ @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-white/[0.16];
41
47
  }
42
48
  }
43
49
 
@@ -46,9 +52,10 @@
46
52
  }
47
53
 
48
54
  &:focus,
55
+ &:hover,
49
56
  &.ax-state-focus {
50
57
  &:not(.ax-state-selected) {
51
- @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-white/[0.16] dark:ax-text-white;
58
+ @apply ax-outline-none ax-bg-light-100 dark:ax-bg-white/[0.16] dark:ax-text-white;
52
59
  }
53
60
  }
54
61
  }
package/src/components/_menu.scss ADDED
@@ -0,0 +1,43 @@
1
+ @layer components {
2
+
3
+ ax-menu,
4
+ .ax-menu {
5
+ >ul {
6
+ @apply ax-border ax-border-solid ax-border-light-200 ax-flex ax-flex-col ax-text-sm;
7
+
8
+ li {
9
+ @apply ax-cursor-pointer ax-p-1;
10
+
11
+ a {
12
+ @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-p-2 ax-animate-fadeIn ax-animate-faster;
13
+
14
+ &.active {
15
+ @apply ax-bg-primary-100 ax-text-primary-500;
16
+ }
17
+
18
+ .active-icon {
19
+ @apply ax--rotate-90
20
+ }
21
+
22
+ &:hover {
23
+ @apply ax-text-primary-500
24
+ }
25
+
26
+ ax-icon {
27
+ @apply ax--rotate-180
28
+ }
29
+ }
30
+
31
+ ul {
32
+ @apply ax-ps-3;
33
+
34
+ }
35
+ }
36
+ }
37
+
38
+ }
39
+
40
+
41
+
42
+
43
+ }
package/src/components/_popup.scss CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  .ax-popup {
24
24
  @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit;
25
- @include control-dark("surface");
25
+ @include control-states("surface");
26
26
 
27
27
  .ax-popup-header {
28
28
  @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center ax-cursor-move;
@@ -43,7 +43,7 @@
43
43
  @apply ax-overflow-auto ax-flex-1;
44
44
  }
45
45
  .ax-popup-footer-container{
46
-
46
+
47
47
  }
48
48
  &.ax-popup-full {
49
49
  @apply ax-w-screen ax-h-screen ax-max-h-screen;
@@ -70,7 +70,7 @@
70
70
  @media all and (min-width: 1024px) and (max-width: 1279px) {
71
71
  &.ax-popup-sm {
72
72
  width: 100vw;
73
- max-height: 100vh;
73
+ max-height: calc(100 * var(--ax-vh));
74
74
  .ax-popup-main {
75
75
  @apply ax-h-screen;
76
76
  }
@@ -88,7 +88,7 @@
88
88
  @media all and (min-width: 768px) and (max-width: 1023px) {
89
89
  &.ax-popup-sm {
90
90
  width: 100vw;
91
- max-height: 100vh;
91
+ max-height: calc(100 * var(--ax-vh));
92
92
  .ax-popup-main {
93
93
  @apply ax-h-screen;
94
94
  }
@@ -106,8 +106,8 @@
106
106
  @media all and (min-width: 425px) and (max-width: 767px) {
107
107
  &.ax-popup-sm {
108
108
  width: 100vw;
109
- height: 100vh;
110
- max-height: 100vh;
109
+ height: calc(100 * var(--ax-vh));
110
+ max-height: calc(100 * var(--ax-vh));
111
111
  .ax-popup-main {
112
112
  @apply ax-h-screen;
113
113
  }
@@ -124,8 +124,8 @@
124
124
  &.ax-popup-md,
125
125
  &.ax-popup-lg {
126
126
  width: 100vw;
127
- height: 100vh;
128
- max-height: 100vh;
127
+ height: calc(100 * var(--ax-vh));
128
+ max-height: calc(100 * var(--ax-vh));
129
129
  .ax-popup-main {
130
130
  @apply ax-h-screen;
131
131
  }
@@ -133,3 +133,28 @@
133
133
  }
134
134
  }
135
135
  }
136
+
137
+ // @layer components {
138
+ // ax-popup {
139
+ // @apply ax-bg-white ax-rounded-md;
140
+ // // ax-page-footer,
141
+ // // ax-page-header {
142
+ // // @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
143
+
144
+ // // ax-prefix {
145
+ // // @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
146
+ // // }
147
+
148
+ // // ax-suffix {
149
+ // // @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
150
+ // // }
151
+ // // }
152
+ // // ax-page-footer {
153
+ // // @apply ax-border-t;
154
+ // // }
155
+
156
+ // // ax-page-header {
157
+ // // @apply ax-border-b;
158
+ // // }
159
+ // }
160
+ // }
package/src/components/_radio.scss CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  .ax-radio {
6
6
  @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
7
- @include control-dark('editor');
7
+ @include control-states('editor');
8
8
 
9
9
  &:checked {
10
10
  @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
package/src/components/_skeleton.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @layer utilities {
2
- $shine-color: #eeeeee;
3
2
  .ax-skeleton {
4
3
  @apply ax-relative ax-overflow-hidden ax-bg-light-200 dark:ax-bg-light-700;
5
4
  &.ax-skeleton-animate {
@@ -7,7 +6,7 @@
7
6
  content: "";
8
7
  @apply ax-block ax-absolute ax-top-0 ax-h-full ax-w-52;
9
8
  left: -200px;
10
- background: linear-gradient(to right, transparent 0%, $shine-color 50%, transparent 100%);
9
+ background: linear-gradient(to right, transparent 0%, rgb(var(--ax-color-light-300)) 50%, transparent 100%);
11
10
  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
12
11
  }
13
12
  }
package/src/components/_switch copy.scss CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  .ax-switch-slider {
12
12
  @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;
13
- @include control-dark("editor");
13
+ @include control-states("editor");
14
14
  -webkit-transition: 0.4s;
15
15
  transition: 0.4s;
16
16
  &::before {
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
 
@@ -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
- @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');
3
+ @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-200 ax-border ax-border-solid ax-rounded-md ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
4
+ @include control-states('surface');
5
5
  @screen sm {
6
6
  width: 98vw;
7
7
  }
package/src/components/_treeview.scss ADDED
@@ -0,0 +1,55 @@
1
+ @layer components {
2
+ ax-tree-view,
3
+ .ax-tree-view {
4
+ > ul {
5
+ li {
6
+ @apply ax-text-sm ax-relative;
7
+ span {
8
+ @apply ax-flex ax-items-center ax-my-1;
9
+ }
10
+ ul {
11
+ @apply ax-ps-8;
12
+ li {
13
+ }
14
+ }
15
+ }
16
+ }
17
+ & > ul {
18
+ &.ax-list-all {
19
+ li {
20
+ ul {
21
+ @apply ax-relative;
22
+
23
+ &::before {
24
+ content: "";
25
+ width: 1px;
26
+ @apply ax-absolute ax-bottom-0 ax-bg-light-200 ax-h-full ax-start-2;
27
+ }
28
+ li {
29
+ &::before {
30
+ position: absolute;
31
+ top: 0;
32
+ right: 12px;
33
+ bottom: -4px;
34
+ margin-left: -1px;
35
+ border-right: 1px solid #d9d9d9;
36
+ content: " ";
37
+ }
38
+ &::after {
39
+ position: absolute;
40
+ width: 10px;
41
+ height: 14px;
42
+ border-bottom: 1px solid #d9d9d9;
43
+ content: " ";
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }
49
+ &.ax-list-node {
50
+ }
51
+ &.ax-list-none {
52
+ }
53
+ }
54
+ }
55
+ }
package/src/components/index.scss CHANGED
@@ -17,6 +17,7 @@
17
17
  @import "./list";
18
18
  @import "./numberbox";
19
19
  @import "./loading";
20
+ @import "./menu";
20
21
  @import "./popup";
21
22
  @import "./radio";
22
23
  @import "./range-slider";
@@ -27,5 +28,7 @@
27
28
  @import "./switch";
28
29
  @import "./table";
29
30
  @import "./tabs";
31
+ @import "./textarea";
30
32
  @import "./toast";
31
- @import "./tooltip";
33
+ @import "./tooltip";
34
+ @import "./treeview";
package/src/utility/_mixins.scss CHANGED
@@ -37,14 +37,14 @@
37
37
  }
38
38
  }
39
39
 
40
- @mixin control-dark($type) {
40
+ @mixin control-states($type) {
41
41
 
42
42
  @if($type == "editor"){
43
43
  @apply dark:ax-border-white/[0.06] dark:ax-bg-white/[0.06] dark:ax-backdrop-blur-3xl;
44
44
  }
45
-
46
45
  @if($type == "editor-disabled"){
47
46
  @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/[0.06] dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed;
47
+
48
48
  }
49
49
  @if($type == "surface"){
50
50
  @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
@@ -52,3 +52,4 @@
52
52
 
53
53
 
54
54
  }
55
+