@acorex/styles 5.0.20 → 5.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dark.scss +3 -21
- package/package.json +1 -1
- package/src/base/index.scss +8 -7
- package/src/components/_alert.scss +27 -26
- package/src/components/_badge.scss +37 -4
- package/src/components/_button.scss +74 -74
- package/src/components/_calendar.scss +11 -11
- package/src/components/_checkbox.scss +5 -4
- package/src/components/_dialog.scss +12 -11
- package/src/components/_drawer.scss +1 -1
- package/src/components/_dropdown.scss +38 -38
- package/src/components/_editor-container.scss +8 -6
- package/src/components/_form.scss +1 -1
- package/src/components/_input.scss +1 -1
- package/src/components/_list.scss +3 -3
- package/src/components/_loading.scss +2 -2
- package/src/components/_popup.scss +2 -1
- package/src/components/_radio.scss +5 -3
- package/src/components/_selectbox.scss +3 -0
- package/src/components/_selection-list.scss +3 -3
- package/src/components/_side-menu.scss +1 -5
- package/src/components/_switch.scss +10 -11
- package/src/components/_tabs.scss +82 -66
- package/src/components/_toast.scss +7 -7
- package/src/utility/_mixins.scss +16 -1
- package/src/variables/_colors.scss +1 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
@apply ax-flex;
|
|
7
7
|
|
|
8
8
|
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;
|
|
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;
|
|
10
10
|
min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
11
11
|
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
|
|
12
12
|
|
|
@@ -36,68 +36,76 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
& > .ax-tab-controll {
|
|
40
40
|
@apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
|
|
41
|
-
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
|
41
|
+
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
|
42
|
+
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
|
42
43
|
}
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
|
|
46
|
+
&.ax-horizontal {
|
|
47
|
+
&.ax-look-default {
|
|
48
|
+
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
|
|
49
|
+
@include control-dark("editor");
|
|
47
50
|
|
|
48
51
|
ax-tab-item {
|
|
49
|
-
@apply ax-
|
|
50
|
-
|
|
51
|
-
@apply ax-mb-0
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
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");
|
|
55
54
|
|
|
56
|
-
|
|
57
|
-
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-controll ;
|
|
55
|
+
border-bottom-color: transparent !important;
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
&:first-child {
|
|
58
|
+
@apply ax-rounded-l;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:last-child {
|
|
62
|
+
@apply ax-rounded-r ax-border-r-0;
|
|
63
|
+
}
|
|
61
64
|
|
|
62
65
|
&:hover,
|
|
63
66
|
&.ax-state-active {
|
|
64
|
-
border-
|
|
67
|
+
border-bottom-color: rgb(var(--ax-color-primary)) !important;
|
|
65
68
|
}
|
|
66
69
|
}
|
|
67
70
|
}
|
|
68
71
|
|
|
69
72
|
&.ax-look-start-line {
|
|
73
|
+
@apply ax-border-t ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
|
|
70
74
|
ax-tab-item {
|
|
71
|
-
@apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
|
|
72
|
-
|
|
73
75
|
&.ax-state-active {
|
|
74
|
-
@apply ax-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
@apply ax-text-primary-500;
|
|
77
|
+
&::after {
|
|
78
|
+
@apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
79
|
+
content: "";
|
|
78
80
|
}
|
|
81
|
+
|
|
79
82
|
}
|
|
80
|
-
|
|
81
83
|
&:hover {
|
|
82
|
-
|
|
84
|
+
&::after {
|
|
85
|
+
@apply ax-absolute ax-top-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
86
|
+
content: "";
|
|
87
|
+
}
|
|
83
88
|
}
|
|
84
89
|
}
|
|
85
90
|
}
|
|
86
91
|
|
|
87
92
|
&.ax-look-end-line {
|
|
93
|
+
@apply ax-border-b ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
|
|
88
94
|
ax-tab-item {
|
|
89
|
-
@apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
|
|
90
95
|
|
|
91
96
|
&.ax-state-active {
|
|
92
|
-
@apply ax-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
97
|
+
@apply ax-text-primary-500;
|
|
98
|
+
&::after {
|
|
99
|
+
@apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
100
|
+
content: "";
|
|
96
101
|
}
|
|
102
|
+
|
|
97
103
|
}
|
|
98
|
-
|
|
99
104
|
&:hover {
|
|
100
|
-
|
|
105
|
+
&::after {
|
|
106
|
+
@apply ax-absolute ax-bottom-[-1px] ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
107
|
+
content: "";
|
|
108
|
+
}
|
|
101
109
|
}
|
|
102
110
|
}
|
|
103
111
|
}
|
|
@@ -107,116 +115,124 @@
|
|
|
107
115
|
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
|
|
108
116
|
|
|
109
117
|
&:hover {
|
|
110
|
-
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-
|
|
118
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
|
|
111
119
|
}
|
|
112
120
|
|
|
113
121
|
&.ax-state-active {
|
|
114
|
-
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
|
|
122
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
|
|
115
123
|
}
|
|
116
124
|
}
|
|
117
125
|
}
|
|
118
126
|
|
|
119
127
|
&.ax-look-pills-color {
|
|
120
128
|
ax-tab-item {
|
|
121
|
-
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-
|
|
129
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
|
|
122
130
|
|
|
123
131
|
&:hover {
|
|
124
|
-
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-
|
|
132
|
+
@apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
|
|
125
133
|
}
|
|
126
134
|
|
|
127
135
|
&.ax-state-active {
|
|
128
|
-
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-
|
|
136
|
+
@apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
|
|
129
137
|
}
|
|
130
138
|
}
|
|
131
139
|
}
|
|
132
140
|
}
|
|
133
141
|
|
|
134
|
-
&.ax-
|
|
135
|
-
|
|
136
|
-
@apply ax-
|
|
142
|
+
&.ax-vertical {
|
|
143
|
+
.ax-items-wrapper {
|
|
144
|
+
@apply ax-flex-col;
|
|
137
145
|
|
|
138
146
|
ax-tab-item {
|
|
139
|
-
@apply ax-
|
|
140
|
-
|
|
147
|
+
@apply ax-text-center ax-justify-start ax-py-2;
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
}
|
|
141
151
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
152
|
+
&.ax-look-default {
|
|
153
|
+
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
|
|
154
|
+
@include control-dark("editor");
|
|
145
155
|
|
|
156
|
+
ax-tab-item {
|
|
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;
|
|
146
158
|
&:last-child {
|
|
147
|
-
@apply ax-
|
|
159
|
+
@apply ax-mb-0;
|
|
148
160
|
}
|
|
149
|
-
|
|
150
161
|
&:hover,
|
|
151
162
|
&.ax-state-active {
|
|
152
|
-
border-
|
|
163
|
+
border-inline-start-color: rgb(var(--ax-color-primary)) !important;
|
|
153
164
|
}
|
|
154
165
|
}
|
|
155
166
|
}
|
|
156
167
|
|
|
157
168
|
&.ax-look-start-line {
|
|
158
169
|
ax-tab-item {
|
|
159
|
-
@apply ax-border-
|
|
170
|
+
@apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
|
|
160
171
|
|
|
161
172
|
&.ax-state-active {
|
|
162
|
-
@apply ax-border-primary ax-text-primary;
|
|
173
|
+
@apply ax-border-primary-500 ax-text-primary-500;
|
|
163
174
|
|
|
164
175
|
&:hover {
|
|
165
|
-
@apply ax-border-primary;
|
|
176
|
+
@apply ax-border-primary-500;
|
|
166
177
|
}
|
|
167
178
|
}
|
|
168
179
|
|
|
169
180
|
&:hover {
|
|
170
|
-
@apply ax-border-primary ax-text-primary;
|
|
181
|
+
@apply ax-border-primary-500 ax-text-primary-500;
|
|
171
182
|
}
|
|
172
183
|
}
|
|
173
184
|
}
|
|
174
185
|
|
|
175
186
|
&.ax-look-end-line {
|
|
176
187
|
ax-tab-item {
|
|
177
|
-
@apply ax-border-
|
|
188
|
+
@apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
|
|
178
189
|
|
|
179
190
|
&.ax-state-active {
|
|
180
|
-
|
|
181
|
-
|
|
191
|
+
@apply ax-border-primary-500 ax-text-primary-500;
|
|
192
|
+
|
|
182
193
|
&:hover {
|
|
183
|
-
@apply ax-border-primary;
|
|
194
|
+
@apply ax-border-primary-500;
|
|
184
195
|
}
|
|
185
196
|
}
|
|
186
197
|
|
|
187
198
|
&:hover {
|
|
188
|
-
@apply ax-border-primary ax-text-primary;
|
|
199
|
+
@apply ax-border-primary-500 ax-text-primary-500;
|
|
189
200
|
}
|
|
190
201
|
}
|
|
191
202
|
}
|
|
192
203
|
|
|
193
204
|
&.ax-look-pills {
|
|
194
205
|
ax-tab-item {
|
|
195
|
-
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
|
|
196
|
-
|
|
206
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
|
|
207
|
+
&:last-child {
|
|
208
|
+
@apply ax-mb-0;
|
|
209
|
+
}
|
|
197
210
|
&:hover {
|
|
198
|
-
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-
|
|
211
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-100;
|
|
199
212
|
}
|
|
200
213
|
|
|
201
214
|
&.ax-state-active {
|
|
202
|
-
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50
|
|
215
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
|
|
203
216
|
}
|
|
204
217
|
}
|
|
205
218
|
}
|
|
206
219
|
|
|
207
220
|
&.ax-look-pills-color {
|
|
208
221
|
ax-tab-item {
|
|
209
|
-
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-
|
|
210
|
-
|
|
222
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200 ax-mb-1;
|
|
223
|
+
&:last-child {
|
|
224
|
+
@apply ax-mb-0;
|
|
225
|
+
}
|
|
211
226
|
&:hover {
|
|
212
|
-
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-
|
|
227
|
+
@apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-100;
|
|
213
228
|
}
|
|
214
229
|
|
|
215
230
|
&.ax-state-active {
|
|
216
|
-
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-
|
|
231
|
+
@apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
|
|
217
232
|
}
|
|
218
233
|
}
|
|
219
234
|
}
|
|
220
235
|
}
|
|
236
|
+
|
|
221
237
|
}
|
|
222
|
-
}
|
|
238
|
+
}
|
|
@@ -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
|
-
|
|
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');
|
|
5
5
|
@screen sm {
|
|
6
6
|
width: 98vw;
|
|
7
7
|
}
|
|
@@ -48,15 +48,15 @@
|
|
|
48
48
|
}
|
|
49
49
|
&.ax-success {
|
|
50
50
|
.ax-toast-icon {
|
|
51
|
-
@apply ax-text-success;
|
|
51
|
+
@apply ax-text-success-500;
|
|
52
52
|
}
|
|
53
53
|
.ax-toast-progress {
|
|
54
|
-
@apply ax-bg-success;
|
|
54
|
+
@apply ax-bg-success-400;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
&.ax-danger {
|
|
58
58
|
.ax-toast-icon {
|
|
59
|
-
@apply ax-text-danger;
|
|
59
|
+
@apply ax-text-danger-500;
|
|
60
60
|
}
|
|
61
61
|
.ax-toast-progress {
|
|
62
62
|
@apply ax-bg-danger-400;
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
}
|
|
65
65
|
&.ax-warning {
|
|
66
66
|
.ax-toast-icon {
|
|
67
|
-
@apply ax-text-warning;
|
|
67
|
+
@apply ax-text-warning-500;
|
|
68
68
|
}
|
|
69
69
|
.ax-toast-progress {
|
|
70
70
|
@apply ax-bg-warning-400;
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
}
|
|
73
73
|
&.ax-info {
|
|
74
74
|
.ax-toast-icon {
|
|
75
|
-
@apply ax-text-info;
|
|
75
|
+
@apply ax-text-info-500;
|
|
76
76
|
}
|
|
77
77
|
.ax-toast-progress {
|
|
78
78
|
@apply ax-bg-info-400;
|
package/src/utility/_mixins.scss
CHANGED
|
@@ -35,4 +35,19 @@
|
|
|
35
35
|
--ax-color-#{$name}: #{$color};
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin control-dark($type) {
|
|
41
|
+
|
|
42
|
+
@if($type == "editor"){
|
|
43
|
+
@apply dark:ax-border-white/[0.16] dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
|
|
44
|
+
}
|
|
45
|
+
@if($type == "surface"){
|
|
46
|
+
@apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
|
|
47
|
+
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// @include control-dark('editor');
|
|
53
|
+
// @include control-dark('surface');
|