@acorex/styles 6.0.2 → 6.0.5

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 (19) hide show
  1. package/index.js +1 -7
  2. package/package.json +2 -2
  3. package/src/components/_alert.scss +79 -3
  4. package/src/components/_button.scss +2 -2
  5. package/src/components/_calendar.scss +1 -0
  6. package/src/components/_color-picker.scss +1 -1
  7. package/src/components/_context-menu.scss +19 -0
  8. package/src/components/_decoration.scss +4 -4
  9. package/src/components/_drawer.scss +4 -3
  10. package/src/components/_dropdown.scss +1 -0
  11. package/src/components/_editor-container.scss +3 -3
  12. package/src/components/_menu copy.scss +96 -0
  13. package/src/components/_menu.scss +82 -39
  14. package/src/components/_result.scss +1 -1
  15. package/src/components/_switch.scss +2 -2
  16. package/src/components/_tabs.scss +22 -29
  17. package/src/components/index.scss +1 -0
  18. package/src/utility/_mixins.scss +1 -1
  19. package/src/utility/index.scss +4 -4
package/index.js CHANGED
@@ -173,12 +173,6 @@ module.exports = withAnimations({
173
173
  backgroundColor:
174
174
  "rgb(var(--ax-color-default-color) / var(--tw-text-opacity))",
175
175
  },
176
- ".rtl": {
177
- direction: "rtl",
178
- },
179
- ".ltr": {
180
- direction: "ltr",
181
- },
182
176
  };
183
177
  addUtilities(acorexClasses, ["responsive", "hover", "focus"]);
184
178
  }),
@@ -186,6 +180,6 @@ module.exports = withAnimations({
186
180
  require("tailwindcss/nesting")(require("postcss-nesting")),
187
181
  require("tailwindcss"),
188
182
  require("autoprefixer"),
189
- require("tailwind-rtl-utilities"),
183
+ require("tailwind-auto-directions"),
190
184
  ],
191
185
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "6.0.2",
3
+ "version": "6.0.5",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
@@ -12,7 +12,7 @@
12
12
  "animated-tailwindcss": "^3.3.0",
13
13
  "autoprefixer": "^10.4.7",
14
14
  "postcss": "^8.4.14",
15
- "tailwind-rtl-utilities": "^3.0.5",
15
+ "tailwind-auto-directions": "^1.0.2",
16
16
  "tailwindcss": "^3.1.3"
17
17
  }
18
18
  }
package/src/components/_alert.scss CHANGED
@@ -18,12 +18,13 @@
18
18
  .ax-icon {
19
19
  @apply ax-text-2xl;
20
20
  }
21
+
21
22
  }
22
23
 
23
24
  .ax-alert-body {
24
25
  @apply ax-flex-1 ax-p-3.5;
25
26
  .ax-icon {
26
- @apply ax-me-3 ax-text-2xl;
27
+ @apply ax-text-2xl;
27
28
  }
28
29
  .ax-button {
29
30
  --ax-base-size: 6px;
@@ -114,6 +115,15 @@
114
115
  @apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
115
116
  }
116
117
  }
118
+ &.ax-primary-link {
119
+ @apply ax-bg-transparent ax-rounded-none ax-text-primary-500 ax-border-b ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
120
+ .ax-header {
121
+ @apply ax-bg-transparent;
122
+ }
123
+ .ax-alert-progress {
124
+ @apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
125
+ }
126
+ }
117
127
  &.ax-primary-blank {
118
128
  @apply ax-bg-transparent ax-text-primary-500 dark:ax-text-primary-300 ax-rounded-none;
119
129
  .ax-header {
@@ -152,6 +162,15 @@
152
162
  @apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
153
163
  }
154
164
  }
165
+ &.ax-secondary-link {
166
+ @apply ax-bg-transparent ax-rounded-none ax-text-secondary-500 ax-border-b ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
167
+ .ax-header {
168
+ @apply ax-bg-transparent;
169
+ }
170
+ .ax-alert-progress {
171
+ @apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
172
+ }
173
+ }
155
174
  &.ax-secondary-blank {
156
175
  @apply ax-bg-transparent ax-text-secondary-500 dark:ax-text-secondary-300 ax-rounded-none;
157
176
  .ax-header {
@@ -190,6 +209,17 @@
190
209
  @apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
191
210
  }
192
211
  }
212
+
213
+ &.ax-success-link {
214
+ @apply ax-bg-transparent ax-rounded-none ax-text-success-500 ax-border-b ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
215
+ .ax-header {
216
+ @apply ax-bg-transparent;
217
+ }
218
+ .ax-alert-progress {
219
+ @apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
220
+ }
221
+ }
222
+
193
223
  &.ax-success-blank {
194
224
  @apply ax-bg-transparent ax-text-success-500 dark:ax-text-success-300 ax-rounded-none;
195
225
  .ax-header {
@@ -228,6 +258,15 @@
228
258
  @apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
229
259
  }
230
260
  }
261
+ &.ax-warning-link {
262
+ @apply ax-bg-transparent ax-rounded-none ax-text-warning-900 ax-border-b ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
263
+ .ax-header {
264
+ @apply ax-bg-transparent;
265
+ }
266
+ .ax-alert-progress {
267
+ @apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
268
+ }
269
+ }
231
270
  &.ax-warning-blank {
232
271
  @apply ax-bg-transparent ax-text-warning-500 dark:ax-text-warning-300 ax-rounded-none;
233
272
  .ax-header {
@@ -266,6 +305,16 @@
266
305
  @apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
267
306
  }
268
307
  }
308
+ &.ax-danger-link {
309
+ @apply ax-bg-transparent ax-rounded-none ax-text-danger-500 ax-border-b ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
310
+ .ax-header {
311
+ @apply ax-bg-transparent;
312
+ }
313
+ .ax-alert-progress {
314
+ @apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
315
+ }
316
+ }
317
+
269
318
  &.ax-danger-blank {
270
319
  @apply ax-bg-transparent ax-text-danger-500 dark:ax-text-danger-300 ax-rounded-none;
271
320
  .ax-header {
@@ -295,6 +344,15 @@
295
344
  @apply ax-bg-info-300 dark:ax-bg-info-500;
296
345
  }
297
346
  }
347
+ &.ax-info-link {
348
+ @apply ax-bg-transparent ax-rounded-none ax-text-info-500 ax-border-b ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
349
+ .ax-header {
350
+ @apply ax-bg-transparent;
351
+ }
352
+ .ax-alert-progress {
353
+ @apply ax-bg-info-500 ax-h-1 dark:ax-bg-info-400;
354
+ }
355
+ }
298
356
  &.ax-info-outline {
299
357
  @apply ax-bg-transparent ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
300
358
  .ax-header {
@@ -342,6 +400,15 @@
342
400
  @apply ax-bg-light-300;
343
401
  }
344
402
  }
403
+ &.ax-light-link {
404
+ @apply ax-bg-transparent ax-rounded-none ax-text-light-500 ax-border-b ax-border-light-500 dark:ax-border-light-400 dark:ax-text-light-300;
405
+ .ax-header {
406
+ @apply ax-bg-transparent;
407
+ }
408
+ .ax-alert-progress {
409
+ @apply ax-bg-light-300;
410
+ }
411
+ }
345
412
  &.ax-light-blank {
346
413
  @apply ax-bg-transparent ax-text-light-500 dark:ax-text-light-300;
347
414
  .ax-header {
@@ -358,7 +425,7 @@
358
425
  @apply ax-bg-dark-600;
359
426
  }
360
427
  .ax-alert-progress {
361
- @apply ax-bg-dark-600;
428
+ @apply ax-bg-dark-50/30;
362
429
  }
363
430
  }
364
431
  &.ax-dark-twotone {
@@ -379,10 +446,19 @@
379
446
  @apply ax-bg-dark-100;
380
447
  }
381
448
  }
449
+ &.ax-dark-link {
450
+ @apply ax-bg-transparent ax-rounded-none ax-text-dark-500 ax-border-b ax-border-dark-500 dark:ax-border-dark-400 dark:ax-text-dark-300;
451
+ .ax-header {
452
+ @apply ax-bg-transparent;
453
+ }
454
+ .ax-alert-progress {
455
+ @apply ax-bg-dark-100;
456
+ }
457
+ }
382
458
  &.ax-dark-blank {
383
459
  @apply ax-bg-transparent ax-text-dark-500 dark:ax-text-dark-100;
384
460
  .ax-header {
385
- @apply ax-border-b ax-border-solid ax-border-dark-200 dark:ax-border-dark-200;
461
+ @apply ax-bg-transparent;
386
462
  }
387
463
  .ax-alert-progress {
388
464
  @apply ax-bg-dark-200 dark:ax-bg-dark-200;
package/src/components/_button.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ax-button {
3
- @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-transition-all;
3
+ @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
4
4
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
5
5
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
6
6
 
@@ -42,7 +42,7 @@
42
42
 
43
43
  .ax-icon,
44
44
  i {
45
- @apply ax-text-base;
45
+ @apply ax-text-2xl;
46
46
  }
47
47
  }
48
48
 
package/src/components/_calendar.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  @include screen(mobile) {
5
5
  @apply ax-w-full;
6
6
  }
7
+
7
8
  &.ax-rtl {
8
9
  .ax-calendar-header {
9
10
  .ax-calendar-header-buttons {
package/src/components/_color-picker.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- .ax-color-picker {
2
+ ax-color-picker {
3
3
  .ax-dropdown-content {
4
4
  @apply ax-mx-2 ax-flex ax-items-center;
5
5
 
package/src/components/_context-menu.scss ADDED
@@ -0,0 +1,19 @@
1
+ @layer components {
2
+ .ax-context-menu {
3
+ @apply ax-min-w-[12rem] ax-max-w-xs ax-bg-white ax-border ax-border-light-200 dark:ax-border-dark-500 ax-sm ax-rounded-default ax-py-2 ax-px-1;
4
+ @include control-states("surface");
5
+ > ul {
6
+ @apply ax-space-y-2 #{!important};
7
+
8
+ > li {
9
+ &:not(.ax-state-disabled, .ax-divider) {
10
+ @apply ax-p-1;
11
+ &:hover {
12
+ @apply ax-bg-light-200 dark:ax-bg-white/10 dark:ax-text-light-50;
13
+ }
14
+ }
15
+
16
+ }
17
+ }
18
+ }
19
+ }
package/src/components/_decoration.scss CHANGED
@@ -4,8 +4,8 @@
4
4
  .ax-header,
5
5
  .ax-footer
6
6
  {
7
- @apply ax-flex ax-justify-between ax-items-center ax-gap-2;
8
-
7
+ @apply ax-flex ax-justify-between ax-items-center ax-gap-2 ax-bg-white;
8
+ @include control-states("surface");
9
9
  &>.ax-prefix,
10
10
  &>.ax-suffix {
11
11
  @apply ax-flex ax-flex-auto ax-flex-row ax-gap-2 ax-items-center ;
@@ -29,9 +29,9 @@
29
29
 
30
30
  .ax-close-button {
31
31
  .ax-icon {
32
- @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
32
+ @apply ax-text-light-500 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
33
33
  &:hover {
34
- @apply ax-text-light-400 dark:ax-text-light-100;
34
+ @apply ax-text-light-700 dark:ax-text-light-100;
35
35
  }
36
36
  }
37
37
  }
package/src/components/_drawer.scss CHANGED
@@ -18,8 +18,7 @@
18
18
  @apply ax-flex ax-flex-col ax-max-w-[95%] ax-h-full ax-animate-duration-300 ax-transition-all #{!important};
19
19
  .ax-header,
20
20
  .ax-footer {
21
- @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ;
22
- @include control-states("editor");
21
+ @apply ax-p-3 ax-border-light-300 dark:ax-border-light-700 ;
23
22
  }
24
23
  .ax-footer
25
24
  {
@@ -36,7 +35,9 @@
36
35
 
37
36
  &>.ax-content
38
37
  {
39
- @apply ax-overflow-auto ax-bg-white ax-flex-1 ax-h-full;
38
+ @apply ax-overflow-auto ax-bg-white ax-flex-1 ax-h-full ax-text-light-500;
39
+ @include control-states("surface");
40
+
40
41
  }
41
42
 
42
43
  &.ax-drawer-overlay {
package/src/components/_dropdown.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @layer components {
2
+ ax-drop-down,
2
3
  .ax-drop-down {
3
4
  @apply ax-contents;
4
5
  .ax-dropdown-content {
package/src/components/_editor-container.scss CHANGED
@@ -56,7 +56,7 @@
56
56
  &>.ax-prefix {
57
57
  *,
58
58
  .ax-button,
59
- .ax-addon {
59
+ .ax-title {
60
60
  @apply ax-rounded-s;
61
61
  }
62
62
  }
@@ -64,7 +64,7 @@
64
64
  &>.ax-suffix {
65
65
  *,
66
66
  .ax-button,
67
- .ax-addon {
67
+ .ax-title {
68
68
  @apply ax-rounded-e;
69
69
  }
70
70
  }
@@ -79,7 +79,7 @@
79
79
  @apply ax-px-2;
80
80
  }
81
81
 
82
- .ax-addon {
82
+ .ax-title {
83
83
  @apply ax-bg-light-100 ax-text-light-fore ax-px-4;
84
84
  }
85
85
  }
package/src/components/_menu copy.scss ADDED
@@ -0,0 +1,96 @@
1
+ ax-menu {
2
+ @apply ax-text-sm ax-transition-all ax-select-none;
3
+ & > ul {
4
+ @apply ax-flex ax-gap-2;
5
+ .ax-menu-item {
6
+ @apply ax-flex ax-items-center ax-text-sm ax-justify-between ax-cursor-pointer ax-flex-1;
7
+ }
8
+ li {
9
+ @apply ax-relative ax-flex ax-items-center;
10
+
11
+ .ax-menu-item-prefix,
12
+ .ax-menu-item-suffix {
13
+ @apply ax-flex ax-items-center ax-gap-2;
14
+ ax-icon {
15
+ @apply ax-transition-all ax-text-xl;
16
+ }
17
+ }
18
+ .ax-menu-item-prefix {
19
+ }
20
+ .ax-menu-item-suffix {
21
+ ax-icon {
22
+ @apply ax-block ax--rotate-180;
23
+ &.ax-menu-active-icon {
24
+ @apply ax--rotate-90;
25
+ }
26
+ }
27
+ }
28
+ &.ax-state-disabled {
29
+ @apply ax-cursor-not-allowed;
30
+ .ax-menu-item-prefix,
31
+ .ax-menu-item-suffix {
32
+ @apply ax-opacity-40;
33
+ }
34
+ }
35
+ }
36
+ &.ax-horizontal {
37
+ > li {
38
+ padding-inline-end: 0.5rem;
39
+ &:hover {
40
+ @apply ax-text-light-600;
41
+ }
42
+ }
43
+ }
44
+ &.ax-vertical {
45
+ @apply ax-flex-col ax-p-2;
46
+ li {
47
+ &.ax-divider {
48
+ &::before {
49
+ content: "";
50
+ @apply -ax-bottom-1 ax-start-0 ax-absolute ax-w-full ax-h-[1px] ax-bg-light-200 dark:ax-bg-white/20;
51
+ }
52
+ }
53
+ }
54
+ & > li {
55
+ @apply ax-flex ax-px-4 ax-py-1 ax-items-center ax-rounded-default ax-text-sm ax-justify-between ax-cursor-pointer;
56
+ }
57
+ }
58
+ &.ax-side-menu {
59
+ @apply ax-flex-col;
60
+
61
+ li {
62
+ @apply ax-flex-col ax-mb-1 ax-rounded-default;
63
+ .ax-menu-item {
64
+ @apply ax-p-2;
65
+ }
66
+ &:not(.ax-state-disabled) {
67
+ > .ax-menu-item {
68
+ &:hover {
69
+ @apply ax-bg-light-100 dark:ax-bg-white/20 ax-rounded-default;
70
+ }
71
+ }
72
+ }
73
+
74
+ ul {
75
+ @apply ax-mt-1 ax-mx-4;
76
+ }
77
+ }
78
+ }
79
+ }
80
+
81
+ .ax-submenu-ul {
82
+ @apply ax-bg-white ax-border ax-border-light-200 dark:ax-border-dark-500 ax-sm ax-rounded-default ax-py-2;
83
+ @include control-states("surface");
84
+ li {
85
+ @apply ax-py-3 ax-px-4 ax-cursor-pointer ax-flex ax-items-center ax-justify-between;
86
+ .ax-menu-item-suffix {
87
+ @apply ax-ms-3;
88
+ }
89
+ &:not(.ax-state-disabled) {
90
+ &:hover {
91
+ @apply ax-bg-light-200 dark:ax-bg-white/[0.16];
92
+ }
93
+ }
94
+ }
95
+ }
96
+ }
package/src/components/_menu.scss CHANGED
@@ -1,55 +1,98 @@
1
- @layer components {
2
- .ax-menu {
3
- > ul {
4
- @apply ax-flex ax-text-sm;
5
- &.vertical-mode {
6
- @apply ax-flex-col
1
+ ax-menu {
2
+ ul {
3
+ li {
4
+ @apply ax-cursor-pointer ax-text-light-500 dark:ax-text-light-50 ax-rounded-default;
5
+ &:not(.ax-state-disabled) {
6
+ &:hover {
7
+ @apply ax-text-light-800 dark:ax-text-light-200;
8
+ }
9
+ }
10
+
11
+ .ax-menu-item {
12
+ @apply ax-flex ax-justify-between ax-items-center ax-w-full ax-gap-1;
13
+ }
14
+ .ax-menu-item-prefix,
15
+ .ax-menu-item-suffix {
16
+ @apply ax-flex ax-items-center ax-gap-2 ax-h-6;
17
+ ax-icon {
18
+ @apply ax-transition-all ax-text-xl;
19
+ }
7
20
  }
8
- &.horizontal-mode{
9
- @apply ax-flex-row ax-whitespace-nowrap
21
+ .ax-menu-item-prefix {
10
22
  }
11
-
23
+ .ax-menu-item-suffix {
24
+ ax-icon {
25
+ @apply ax-block ax--rotate-180;
26
+ &.ax-menu-active-icon {
27
+ @apply ax--rotate-90;
28
+ }
29
+ }
30
+ }
31
+ &.ax-state-disabled {
32
+ @apply ax-cursor-not-allowed;
33
+ .ax-menu-item-prefix,
34
+ .ax-menu-item-suffix {
35
+ @apply ax-opacity-40;
36
+ }
37
+ }
38
+ }
39
+ }
40
+ > ul {
41
+ &.ax-horizontal {
42
+ @apply ax-flex ax-items-center ax-gap-4;
12
43
  li {
44
+ &.ax-divider {
45
+ @apply ax-w-[1px] ax-h-4;
46
+ }
47
+ }
48
+ > li {
13
49
  @apply ax-cursor-pointer;
14
-
15
- &.ax-state-disabled {
16
- @apply ax-cursor-not-allowed ax-opacity-60;
50
+ .ax-menu-item {
51
+ @apply ax-flex ax-items-start ax-justify-between;
17
52
  }
53
+ }
54
+ }
55
+ &.ax-vertical {
56
+ @apply ax-w-full;
57
+ &:not(&.ax-submenu-ul) {
58
+ @apply ax-space-y-4;
59
+ }
60
+ li {
61
+ &.ax-divider {
62
+ @apply ax-h-[1px] ax-my-2;
63
+ }
64
+ }
65
+ &.ax-submenu-ul {
66
+ @apply ax-p-2 ax-bg-white ax-border ax-border-light-200 ax-rounded-default ax-shadow;
67
+ @include control-states("surface");
18
68
 
19
- a {
20
- @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-mb-2 ax-px-2.5 ax-py-3 ax-rounded-default;
21
-
22
- &.active {
23
- @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
24
- }
25
-
26
- &:hover {
27
- @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
28
-
29
- }
30
- .ax-icon {
31
- @apply ax-text-xl;
32
- }
33
- .ax-menu-start-side {
34
- @apply ax-flex ax-items-center;
35
- .ax-icon {
36
- @apply ax-me-1.5;
69
+ li {
70
+ &:not(.ax-state-disabled, .ax-divider) {
71
+ @apply ax-py-1 ax-ps-4 ax-pe-2;
72
+ &:hover {
73
+ @apply ax-bg-light-200 dark:ax-bg-white/10 dark:ax-text-light-50;
37
74
  }
38
75
  }
39
- .ax-menu-end-side {
40
- .ax-icon {
41
- @apply ax-block ax--rotate-180 ax-transition-all ;
42
- &.active-icon {
43
- @apply ax--rotate-90;
44
- }
45
- }
76
+ &.ax-divider {
77
+ @apply ax-h-[1px] ax-my-2;
46
78
  }
47
79
  }
48
-
80
+ }
81
+ }
82
+ &.ax-side-menu {
83
+ @apply ax-space-y-4;
84
+ li {
85
+ &.ax-divider {
86
+ @apply ax-h-[1px] ax-my-2;
87
+ }
49
88
  ul {
50
- @apply ax-ps-3;
89
+ @apply ax-ps-4 ax-space-y-4 ax-mt-4;
51
90
  }
52
91
  }
53
92
  }
54
93
  }
94
+
95
+ .ax-divider {
96
+ @apply ax-bg-light-200 ax-p-0 ax-cursor-auto dark:ax-bg-white/20;
97
+ }
55
98
  }
package/src/components/_result.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- .ax-result {
2
+ ax-result,.ax-result {
3
3
  @apply ax-flex ax-flex-col;
4
4
  .ax-result-icon {
5
5
  @apply ax-text-6xl ax-text-center;
package/src/components/_switch.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .ax-switch {
3
3
  button {
4
- @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;
4
+ @apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 dark:ax-bg-white/20 ax-text-light-fore ax-transition-all;
5
5
  min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
6
6
  height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
7
7
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
@@ -20,7 +20,7 @@
20
20
  .ax-switch-handle {
21
21
  width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
22
22
  height: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
23
- @apply ax-bg-white ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
23
+ @apply ax-bg-white ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
24
24
  ax-loading {
25
25
  transform: translateY(-50%);
26
26
  @apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
package/src/components/_tabs.scss CHANGED
@@ -4,16 +4,18 @@
4
4
 
5
5
  .ax-items-wrapper {
6
6
  @apply ax-flex;
7
+ }
7
8
 
9
+ &:not(.ax-look-custom) {
8
10
  ax-tab-item {
9
- @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm;
11
+ @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm ax-font-medium;
10
12
  min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
11
13
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
12
14
 
13
15
  &.ax-state-disabled {
14
16
  // background-color: rgb(var(--ax-color-disabled)) !important;
15
17
  // color: rgb(var(--ax-color-disabled-fore)) !important;
16
- @apply ax-opacity-50 ax-cursor-not-allowed #{!important}
18
+ @apply ax-opacity-50 ax-cursor-not-allowed #{!important};
17
19
  }
18
20
 
19
21
  &.ax-state-active {
@@ -42,32 +44,28 @@
42
44
  0 1px 10px 0 rgba(0, 0, 0, 0.12);
43
45
  }
44
46
 
45
-
46
47
  &.ax-horizontal {
47
48
  &.ax-look-default {
48
- @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
49
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-overflow-hidden ax-rounded-default;
49
50
  @include control-states("editor");
50
51
 
51
52
  ax-tab-item {
52
- @apply ax-bg-white ax-border-e ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
53
+ @apply ax-bg-white ax-border-e ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
53
54
  @include control-states("editor");
54
55
 
55
56
  border-bottom-color: transparent !important;
56
57
 
57
58
  &:first-child {
58
- @apply ax-rounded-s;
59
59
  }
60
60
 
61
61
  &:last-child {
62
- @apply ax-rounded-e ax-border-e-0;
62
+ @apply ax-border-e-0;
63
63
  }
64
64
 
65
65
  &:hover,
66
- &.ax-state-active,
67
- {
68
- &:not(.ax-state-disabled){
66
+ &.ax-state-active {
67
+ &:not(.ax-state-disabled) {
69
68
  border-bottom-color: rgb(var(--ax-color-primary)) !important;
70
-
71
69
  }
72
70
  }
73
71
  }
@@ -79,16 +77,15 @@
79
77
  &.ax-state-active {
80
78
  @apply ax-text-primary-500;
81
79
  &::after {
82
- @apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
80
+ @apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
83
81
  content: "";
84
82
  }
85
-
86
83
  }
87
84
  &:hover {
88
- &::after {
89
- @apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
90
- content: "";
91
- }
85
+ &::after {
86
+ @apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
87
+ content: "";
88
+ }
92
89
  }
93
90
  }
94
91
  }
@@ -96,20 +93,18 @@
96
93
  &.ax-look-end-line {
97
94
  @apply ax-border-b ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
98
95
  ax-tab-item {
99
-
100
96
  &.ax-state-active {
101
97
  @apply ax-text-primary-500;
102
98
  &::after {
103
- @apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
99
+ @apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
104
100
  content: "";
105
101
  }
106
-
107
102
  }
108
103
  &:hover {
109
- &::after {
110
- @apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
111
- content: "";
112
- }
104
+ &::after {
105
+ @apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
106
+ content: "";
107
+ }
113
108
  }
114
109
  }
115
110
  }
@@ -149,12 +144,11 @@
149
144
 
150
145
  ax-tab-item {
151
146
  @apply ax-text-center ax-justify-start ax-py-2;
152
-
153
147
  }
154
148
  }
155
149
 
156
150
  &.ax-look-default {
157
- @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
151
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-overflow-hidden;
158
152
  @include control-states("editor");
159
153
 
160
154
  ax-tab-item {
@@ -192,8 +186,8 @@
192
186
  @apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
193
187
 
194
188
  &.ax-state-active {
195
- @apply ax-border-primary-500 ax-text-primary-500;
196
-
189
+ @apply ax-border-primary-500 ax-text-primary-500;
190
+
197
191
  &:hover {
198
192
  @apply ax-border-primary-500;
199
193
  }
@@ -237,6 +231,5 @@
237
231
  }
238
232
  }
239
233
  }
240
-
241
234
  }
242
235
  }
package/src/components/index.scss CHANGED
@@ -10,6 +10,7 @@
10
10
  @import "./collapse";
11
11
  @import "./color-palette";
12
12
  @import "./color-picker";
13
+ @import "./context-menu";
13
14
  @import "./datapager";
14
15
  @import "./datepicker";
15
16
  @import "./dialog";
package/src/utility/_mixins.scss CHANGED
@@ -47,7 +47,7 @@
47
47
  @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/10 dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed #{!important};
48
48
  }
49
49
  @if ($type == "surface") {
50
- @apply dark:ax-bg-default-background dark:ax-border-white/10 dark:ax-shadow-md;
50
+ @apply dark:ax-bg-default-background dark:ax-border-white/10 ;
51
51
  }
52
52
  }
53
53
 
package/src/utility/index.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @layer utilities {
2
2
  .ax-sm {
3
3
  --ax-base-size: calc(var(--ax-size) - 2px);
4
- font-size: 0.75rem;
5
- * {
6
- font-size: 0.75rem;
7
- }
4
+ // font-size: 0.75rem;
5
+ // * {
6
+ // font-size: 0.75rem;
7
+ // }
8
8
  }
9
9
  .ax-md {
10
10
  --ax-base-size: var(--ax-size);