@acorex/styles 5.0.43 → 5.0.44

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/_button.scss +28 -28
  3. package/src/components/_dialog.scss +5 -5
  4. package/src/components/_list.scss +14 -5
  5. package/src/components/_toast.scss +1 -1
  6. package/src/components/_treeview.scss +40 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.43",
3
+ "version": "5.0.44",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
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/_dialog.scss CHANGED
@@ -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/_list.scss CHANGED
@@ -18,6 +18,16 @@
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
33
  @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700;
@@ -26,13 +36,12 @@
26
36
  &:focus-visible {
27
37
  @apply ax-outline-none;
28
38
  }
29
-
39
+
30
40
  &.ax-state-selected {
31
41
  @apply ax-bg-light-200 ax-text-light-900 ax-font-medium dark:ax-text-primary-50;
32
42
  }
33
-
34
- &:not(.ax-check-box)
35
- {
43
+
44
+ &:not(.ax-check-box) {
36
45
  &.ax-state-selected {
37
46
  @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-white/[0.16];
38
47
  }
@@ -46,7 +55,7 @@
46
55
  &:hover,
47
56
  &.ax-state-focus {
48
57
  &:not(.ax-state-selected) {
49
- @apply ax-outline-none ax-bg-light-100 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;
50
59
  }
51
60
  }
52
61
  }
package/src/components/_toast.scss CHANGED
@@ -1,6 +1,6 @@
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;
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
4
  @include control-states('surface');
5
5
  @screen sm {
6
6
  width: 98vw;
package/src/components/_treeview.scss CHANGED
@@ -4,20 +4,52 @@
4
4
  > ul {
5
5
  li {
6
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
7
  span {
15
8
  @apply ax-flex ax-items-center ax-my-1;
16
9
  }
17
10
  ul {
18
- @apply ax-ps-8 ax-border-s ax-border-light-200 dark:ax-border-dark-400;
11
+ @apply ax-ps-8;
12
+ li {
13
+ }
19
14
  }
20
15
  }
21
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
+ }
22
54
  }
23
55
  }