@acorex/styles 6.0.12 → 6.0.17

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 (23) hide show
  1. package/package.json +1 -1
  2. package/src/components/_avatar.scss +38 -50
  3. package/src/components/_badge.scss +10 -15
  4. package/src/components/_button.scss +6 -2
  5. package/src/components/_dropdown.scss +2 -2
  6. package/src/components/_editor-container.scss +24 -13
  7. package/src/components/_list.scss +1 -1
  8. package/src/components/_menu.scss +12 -3
  9. package/src/components/_popup.scss +6 -0
  10. package/src/components/_result.scss +2 -2
  11. package/src/components/_tabs copy.scss +235 -0
  12. package/src/components/_tabs.scss +4 -4
  13. package/src/components/_textarea.scss +2 -8
  14. package/src/components/_uploader.scss +13 -11
  15. package/src/icons/Read Me.txt +7 -7
  16. package/src/icons/demo-files/demo.css +152 -152
  17. package/src/icons/demo-files/demo.js +30 -30
  18. package/src/icons/demo.html +626 -626
  19. package/src/icons/fonts/acorex-icon.svg +51 -51
  20. package/src/icons/style.css +153 -153
  21. package/src/icons/style.scss +240 -240
  22. package/src/icons/variables.scss +46 -46
  23. package/src/utility/index.scss +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "6.0.12",
3
+ "version": "6.0.17",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/components/_avatar.scss CHANGED
@@ -5,12 +5,16 @@
5
5
  @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
6
6
  }
7
7
  }
8
- .ax-avatar {
9
- @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16;
8
+ ax-avatar {
9
+ @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16 ax-overflow-hidden;
10
10
  ax-badge {
11
11
  @apply ax-absolute -ax-top-1.5;
12
12
  right: -6px;
13
13
  }
14
+ ax-icon,
15
+ ax-text {
16
+ @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center;
17
+ }
14
18
  .ax-avatar-container {
15
19
  @apply ax-w-full ax-h-full ax-rounded-default;
16
20
  .ax-default-avatar {
@@ -26,106 +30,90 @@
26
30
  }
27
31
  }
28
32
  &.ax-primary-default {
29
- .ax-default-avatar {
30
- svg {
31
- @apply ax-fill-primary-500;
32
- }
33
+ .ax-default {
34
+ @apply ax-fill-primary-500;
33
35
  }
34
- .ax-text-avatar {
36
+ ax-text {
35
37
  @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
36
38
  }
37
- .ax-icon-avatar {
39
+ ax-icon {
38
40
  @apply ax-bg-primary-500;
39
41
  }
40
42
  }
41
43
  &.ax-secondary-default {
42
- .ax-default-avatar {
43
- svg {
44
- @apply ax-fill-secondary-500;
45
- }
44
+ .ax-default {
45
+ @apply ax-fill-secondary-500;
46
46
  }
47
- .ax-text-avatar {
47
+ ax-text {
48
48
  @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
49
49
  }
50
- .ax-icon-avatar {
50
+ ax-icon {
51
51
  @apply ax-bg-secondary-500;
52
52
  }
53
53
  }
54
54
  &.ax-success-default {
55
- .ax-default-avatar {
56
- svg {
57
- @apply ax-fill-success-500;
58
- }
55
+ .ax-default {
56
+ @apply ax-fill-success-500;
59
57
  }
60
- .ax-text-avatar {
58
+ .ax-text {
61
59
  @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
62
60
  }
63
- .ax-icon-avatar {
61
+ .ax-icon {
64
62
  @apply ax-bg-success-500;
65
63
  }
66
64
  }
67
65
  &.ax-warning-default {
68
- .ax-default-avatar {
69
- svg {
70
- @apply ax-fill-warning-500;
71
- }
66
+ .ax-default {
67
+ @apply ax-fill-warning-500;
72
68
  }
73
- .ax-text-avatar {
69
+ ax-text {
74
70
  @apply ax-bg-warning-100 ax-text-warning-500 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
75
71
  }
76
- .ax-icon-avatar {
72
+ ax-icon {
77
73
  @apply ax-bg-warning-500;
78
74
  }
79
75
  }
80
76
  &.ax-danger-default {
81
- .ax-default-avatar {
82
- svg {
83
- @apply ax-fill-danger-500;
84
- }
77
+ .ax-default {
78
+ @apply ax-fill-danger-500;
85
79
  }
86
- .ax-text-avatar {
80
+ ax-text {
87
81
  @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
88
82
  }
89
- .ax-icon-avatar {
83
+ ax-icon {
90
84
  @apply ax-bg-danger-500;
91
85
  }
92
86
  }
93
87
  &.ax-info-default {
94
- .ax-default-avatar {
95
- svg {
96
- @apply ax-fill-info-500;
97
- }
88
+ .ax-default {
89
+ @apply ax-fill-info-500;
98
90
  }
99
- .ax-text-avatar {
91
+ ax-text {
100
92
  @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
101
93
  }
102
- .ax-icon-avatar {
94
+ ax-icon {
103
95
  @apply ax-bg-info-500;
104
96
  }
105
97
  }
106
98
  &.ax-light-default {
107
- .ax-default-avatar {
108
- svg {
109
- @apply ax-fill-light-400;
110
- }
99
+ .ax-default {
100
+ @apply ax-fill-light-400;
111
101
  }
112
- .ax-text-avatar {
102
+ ax-text {
113
103
  @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-500 dark:ax-text-light-fore;
114
104
  }
115
- .ax-icon-avatar {
105
+ ax-icon {
116
106
  @apply ax-bg-light-500;
117
107
  }
118
108
  }
119
109
  &.ax-dark-default {
120
- .ax-default-avatar {
121
- svg {
122
- @apply ax-fill-dark-500;
123
- }
110
+ .ax-default {
111
+ @apply ax-fill-dark-500;
124
112
  }
125
- .ax-text-avatar {
113
+ ax-text {
126
114
  @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-500 dark:ax-text-dark-fore;
127
115
  }
128
- .ax-icon-avatar {
116
+ ax-icon {
129
117
  @apply ax-bg-dark-500;
130
118
  }
131
119
  }
package/src/components/_badge.scss CHANGED
@@ -1,8 +1,11 @@
1
1
  @layer components {
2
2
  .ax-badge {
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
- min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
5
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
3
+ @apply ax-rounded ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm ax-font-normal ax-px-2.5 ax-py-0.5;
4
+ min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
5
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
6
+ &.ax-lg {
7
+ @apply ax-px-3 ax-py-0.5;
8
+ }
6
9
  .ax-prefix {
7
10
  @apply ax-me-1.5;
8
11
  }
@@ -15,9 +18,10 @@
15
18
  @apply ax-m-0;
16
19
  }
17
20
  }
18
- &.ax-badge-icon{
19
- width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
20
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
21
+ &.ax-badge-icon {
22
+
23
+ width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
24
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 18px);
21
25
  }
22
26
  &.ax-primary-default {
23
27
  @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
@@ -120,41 +124,32 @@
120
124
  // dark
121
125
  &.ax-dark-default {
122
126
  @apply ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-600;
123
-
124
127
  }
125
128
  &.ax-dark-twotone {
126
129
  @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
127
-
128
130
  }
129
131
  &.ax-dark-outline {
130
132
  @apply ax-text-dark-500 ax-border-dark-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
131
-
132
133
  }
133
134
  &.ax-dark-blank {
134
135
  @apply ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
135
-
136
136
  }
137
137
  &.ax-dark-link {
138
138
  @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
139
-
140
139
  }
141
140
 
142
141
  // light
143
142
  &.ax-light-default {
144
143
  @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-light-800 dark:ax-border-light-800 dark:ax-text-light-100;
145
-
146
144
  }
147
145
  &.ax-light-twotone {
148
146
  @apply ax-bg-light-200 ax-text-light-fore dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
149
-
150
147
  }
151
148
  &.ax-light-outline {
152
149
  @apply ax-text-light-fore ax-border ax-border-light-300 dark:ax-border-light-500 dark:ax-text-light-100;
153
-
154
150
  }
155
151
  &.ax-light-link {
156
152
  @apply ax-text-light-fore ax-border-b ax-rounded-none ax-border-light-300 dark:ax-text-light-100 dark:ax-border-light-500;
157
-
158
153
  }
159
154
  &.ax-light-blank {
160
155
  @apply ax-text-light-fore dark:ax-border-light-600 dark:ax-text-light-100;
package/src/components/_button.scss CHANGED
@@ -1,11 +1,11 @@
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;
3
+ @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-normal 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
 
7
7
  & > button {
8
- @apply ax-inline-flex ax-items-center ax-justify-center ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
8
+ @apply ax-inline-flex ax-items-center ax-justify-center ax-font-normal ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
9
9
  &:focus,
10
10
  &:focus-visible {
11
11
  @apply ax-outline-none;
@@ -29,6 +29,10 @@
29
29
  @apply ax-text-xs;
30
30
  }
31
31
 
32
+ &.ax-lg{
33
+ @apply ax-text-base #{!important};
34
+ }
35
+
32
36
  &.ax-button-icon {
33
37
  width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
34
38
  & > button {
package/src/components/_dropdown.scss CHANGED
@@ -57,7 +57,7 @@
57
57
  .ax-button-item {
58
58
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
59
59
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
60
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-2 ax-text-sm ax-text-light-600 ax-cursor-pointer ax-select-none;
60
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-py-2 ax-text-sm ax-text-light-600 ax-cursor-pointer ax-select-none;
61
61
 
62
62
  &.ax-divide {
63
63
  @apply ax-border-t ax-border ax-border-solid;
@@ -195,7 +195,7 @@
195
195
  }
196
196
 
197
197
  &.ax-light-default {
198
- @apply ax-bg-transparent ax-text-light-500 ax-border-transparent dark:ax-text-light-200;
198
+ @apply ax-bg-transparent ax-text-light-700 ax-border-transparent dark:ax-text-light-200;
199
199
 
200
200
  &:hover,
201
201
  &:focus {
package/src/components/_editor-container.scss CHANGED
@@ -17,9 +17,8 @@
17
17
  @apply ax-px-2;
18
18
  }
19
19
 
20
- .ax-placeholder
21
- {
22
- @apply ax-flex ax-mx-2;
20
+ .ax-placeholder {
21
+ @apply ax-flex ax-mx-2 ax-text-sm;
23
22
  --tw-placeholder-opacity: 1;
24
23
  color: rgb(var(--ax-color-placeholder) / var(--tw-placeholder-opacity));
25
24
  }
@@ -32,7 +31,20 @@
32
31
  font-size: 1.2rem !important;
33
32
  line-height: 1 !important;
34
33
  }
34
+ .ax-input,
35
+ .ax-textare {
36
+ &::-webkit-input-placeholder {
37
+ @apply ax-text-sm;
38
+ }
39
+
40
+ &:-ms-input-placeholder {
41
+ @apply ax-text-sm;
42
+ }
35
43
 
44
+ &::placeholder {
45
+ @apply ax-text-sm;
46
+ }
47
+ }
36
48
  .ax-input {
37
49
  width: 1%;
38
50
  text-align: inherit;
@@ -43,7 +55,7 @@
43
55
  box-shadow: none;
44
56
  }
45
57
  }
46
- .ax-textarea{
58
+ .ax-textarea {
47
59
  width: 1%;
48
60
  text-align: inherit;
49
61
  font: inherit;
@@ -53,15 +65,15 @@
53
65
  box-shadow: none;
54
66
  }
55
67
  }
56
- &>.ax-prefix {
68
+ & > .ax-prefix {
57
69
  *,
58
70
  .ax-button,
59
71
  .ax-title {
60
- @apply ax-rounded-s;
72
+ @apply ax-rounded-s;
61
73
  }
62
74
  }
63
75
 
64
- &>.ax-suffix {
76
+ & > .ax-suffix {
65
77
  *,
66
78
  .ax-button,
67
79
  .ax-title {
@@ -69,8 +81,8 @@
69
81
  }
70
82
  }
71
83
 
72
- &>.ax-prefix,
73
- &>.ax-suffix {
84
+ & > .ax-prefix,
85
+ & > .ax-suffix {
74
86
  * {
75
87
  @apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
76
88
  }
@@ -99,11 +111,11 @@
99
111
  @apply ax-text-base;
100
112
  }
101
113
  }
102
- &.ax-light-blank{
103
- &:hover{
114
+ &.ax-light-blank {
115
+ &:hover {
104
116
  @apply ax-bg-transparent #{!important};
105
117
  }
106
- }
118
+ }
107
119
  }
108
120
 
109
121
  &.ax-state-disabled {
@@ -140,5 +152,4 @@
140
152
  }
141
153
  }
142
154
  }
143
-
144
155
  }
package/src/components/_list.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .ax-list-item {
41
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
41
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px) !important;
42
42
  @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700 dark:ax-text-light-100;
43
43
 
44
44
  &:focus,
package/src/components/_menu.scss CHANGED
@@ -1,5 +1,14 @@
1
1
  ax-menu {
2
2
  ul {
3
+ &.ax-rtl {
4
+ li {
5
+ ax-icon {
6
+ &.ax-ic-chevron {
7
+ @apply ax-block ax-rotate-0;
8
+ }
9
+ }
10
+ }
11
+ }
3
12
  li {
4
13
  @apply ax-cursor-pointer ax-text-light-500 dark:ax-text-light-50 ax-rounded-default;
5
14
  &:not(.ax-state-disabled) {
@@ -22,9 +31,9 @@ ax-menu {
22
31
  }
23
32
  .ax-menu-item-suffix {
24
33
  ax-icon {
25
- @apply ax-block ax--rotate-180;
34
+ @apply ax-block ax-rotate-180;
26
35
  &.ax-menu-active-icon {
27
- @apply ax--rotate-90;
36
+ @apply -ax-rotate-90;
28
37
  }
29
38
  }
30
39
  }
@@ -38,7 +47,7 @@ ax-menu {
38
47
  }
39
48
  }
40
49
  > ul {
41
- &.ax-rtl{
50
+ &.ax-rtl {
42
51
  .ax-menu-item-suffix {
43
52
  ax-icon {
44
53
  @apply ax-block ax-rotate-180;
package/src/components/_popup.scss CHANGED
@@ -8,6 +8,12 @@
8
8
  @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
9
9
  @include control-states("editor");
10
10
  }
11
+
12
+ &:focus
13
+ {
14
+ @apply ax-ring-1 ax-ring-primary-500 ax-outline-none;
15
+ }
16
+
11
17
  ax-footer
12
18
  {
13
19
  @apply ax-border-t;
package/src/components/_result.scss CHANGED
@@ -2,14 +2,14 @@
2
2
  ax-result,.ax-result {
3
3
  @apply ax-flex ax-flex-col;
4
4
  .ax-result-icon {
5
- @apply ax-text-6xl ax-text-center;
5
+ @apply ax-text-5xl ax-text-center;
6
6
  }
7
7
  .ax-result-title,
8
8
  .ax-result-description {
9
9
  @apply ax-mt-2 ax-text-center;
10
10
  }
11
11
  .ax-result-title {
12
- @apply ax-text-lg ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
12
+ @apply ax-text-base ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
13
13
  }
14
14
  .ax-result-description {
15
15
  @apply ax-text-sm ax-text-light-500 dark:ax-text-light-100;
package/src/components/_tabs copy.scss ADDED
@@ -0,0 +1,235 @@
1
+ @layer components {
2
+ .ax-tabs {
3
+ @apply ax-p-0 ax-overflow-y-hidden ax-overflow-x-auto ax-w-max ax-block;
4
+
5
+ .ax-items-wrapper {
6
+ @apply ax-flex;
7
+ }
8
+
9
+ &:not(.ax-look-custom) {
10
+ ax-tab-item {
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;
12
+ min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
13
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
14
+
15
+ &.ax-state-disabled {
16
+ // background-color: rgb(var(--ax-color-disabled)) !important;
17
+ // color: rgb(var(--ax-color-disabled-fore)) !important;
18
+ @apply ax-opacity-50 ax-cursor-not-allowed #{!important};
19
+ }
20
+
21
+ &.ax-state-active {
22
+ @apply ax-text-black;
23
+ }
24
+
25
+ .ax-prefix {
26
+ @apply ax-flex ax-flex-row ax-pe-2;
27
+ }
28
+
29
+ .ax-suffix {
30
+ @apply ax-flex ax-flex-row ax-ps-2;
31
+ }
32
+ }
33
+ }
34
+
35
+ &.ax-tabs-fit {
36
+ .ax-items-wrapper ax-tab-item {
37
+ @apply ax-flex-1;
38
+ }
39
+ }
40
+
41
+ & > .ax-tab-controll {
42
+ @apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
43
+ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
44
+ 0 1px 10px 0 rgba(0, 0, 0, 0.12);
45
+ }
46
+
47
+ &.ax-horizontal {
48
+ &.ax-look-default {
49
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-overflow-hidden ax-rounded-default;
50
+ @include control-states("editor");
51
+
52
+ ax-tab-item {
53
+ @apply ax-bg-white ax-border-e ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
54
+ @include control-states("editor");
55
+
56
+ border-bottom-color: transparent !important;
57
+
58
+ &:first-child {
59
+ }
60
+
61
+ &:last-child {
62
+ @apply ax-border-e-0;
63
+ }
64
+
65
+ &:hover,
66
+ &.ax-state-active {
67
+ &:not(.ax-state-disabled) {
68
+ border-bottom-color: rgb(var(--ax-color-primary-500)) !important;
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ &.ax-look-start-line {
75
+ @apply ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
76
+ ax-tab-item {
77
+ &.ax-state-active {
78
+ @apply ax-text-primary-500;
79
+ &::after {
80
+ @apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
81
+ content: "";
82
+ }
83
+ }
84
+ &:hover {
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
+ }
89
+ }
90
+ }
91
+ }
92
+
93
+ &.ax-look-end-line {
94
+ @apply ax-border-b ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
95
+ ax-tab-item {
96
+ &.ax-state-active {
97
+ @apply ax-text-primary-500;
98
+ &::after {
99
+ @apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
100
+ content: "";
101
+ }
102
+ }
103
+ &:hover {
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
+ }
108
+ }
109
+ }
110
+ }
111
+
112
+ &.ax-look-pills {
113
+ ax-tab-item {
114
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
115
+
116
+ &:hover {
117
+ @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
118
+ }
119
+
120
+ &.ax-state-active {
121
+ @apply ax-bg-light-200 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
122
+ }
123
+ }
124
+ }
125
+
126
+ &.ax-look-pills-color {
127
+ ax-tab-item {
128
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
129
+
130
+ &:hover {
131
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
132
+ }
133
+
134
+ &.ax-state-active {
135
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
136
+ }
137
+ }
138
+ }
139
+ }
140
+
141
+ &.ax-vertical {
142
+ .ax-items-wrapper {
143
+ @apply ax-flex-col ax-h-full;
144
+
145
+ ax-tab-item {
146
+ @apply ax-text-center ax-justify-start ax-py-2;
147
+ }
148
+ }
149
+
150
+ &.ax-look-default {
151
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-overflow-hidden;
152
+ @include control-states("editor");
153
+
154
+ ax-tab-item {
155
+ @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;
156
+ &:last-child {
157
+ @apply ax-mb-0;
158
+ }
159
+ &:hover,
160
+ &.ax-state-active {
161
+ border-inline-start-color: rgb(var(--ax-color-primary-500)) !important;
162
+ }
163
+ }
164
+ }
165
+
166
+ &.ax-look-start-line {
167
+ ax-tab-item {
168
+ @apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
169
+
170
+ &.ax-state-active {
171
+ @apply ax-border-primary-500 ax-text-primary-500;
172
+
173
+ &:hover {
174
+ @apply ax-border-primary-500;
175
+ }
176
+ }
177
+
178
+ &:hover {
179
+ @apply ax-border-primary-500 ax-text-primary-500;
180
+ }
181
+ }
182
+ }
183
+
184
+ &.ax-look-end-line {
185
+ ax-tab-item {
186
+ @apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
187
+
188
+ &.ax-state-active {
189
+ @apply ax-border-primary-500 ax-text-primary-500;
190
+
191
+ &:hover {
192
+ @apply ax-border-primary-500;
193
+ }
194
+ }
195
+
196
+ &:hover {
197
+ @apply ax-border-primary-500 ax-text-primary-500;
198
+ }
199
+ }
200
+ }
201
+
202
+ &.ax-look-pills {
203
+ ax-tab-item {
204
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
205
+ &:last-child {
206
+ @apply ax-mb-0;
207
+ }
208
+ &:hover {
209
+ @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-100;
210
+ }
211
+
212
+ &.ax-state-active {
213
+ @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
214
+ }
215
+ }
216
+ }
217
+
218
+ &.ax-look-pills-color {
219
+ ax-tab-item {
220
+ @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
221
+ &:last-child {
222
+ @apply ax-mb-0;
223
+ }
224
+ &:hover {
225
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-100;
226
+ }
227
+
228
+ &.ax-state-active {
229
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
230
+ }
231
+ }
232
+ }
233
+ }
234
+ }
235
+ }