@acorex/styles 6.1.12 → 7.0.1

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 (81) hide show
  1. package/index.scss +3 -1
  2. package/package.json +1 -1
  3. package/src/base/index.scss +44 -30
  4. package/src/components/_avatar.scss +122 -122
  5. package/src/components/_badge.scss +178 -178
  6. package/src/components/_breadcrumbs.scss +30 -29
  7. package/src/components/_button copy.scss +924 -0
  8. package/src/components/_button.scss +0 -924
  9. package/src/components/_calendar.scss +180 -180
  10. package/src/components/_carousel.scss +44 -44
  11. package/src/components/_checkbox.scss +58 -58
  12. package/src/components/_collapse.scss +48 -48
  13. package/src/components/_color-palette.scss +5 -5
  14. package/src/components/_color-picker.scss +23 -23
  15. package/src/components/_context-menu.scss +0 -16
  16. package/src/components/_data-table.scss +1 -1
  17. package/src/components/_datepicker.scss +5 -5
  18. package/src/components/_decoration.scss +0 -39
  19. package/src/components/_dialog.scss +80 -79
  20. package/src/components/_drawer.scss +112 -112
  21. package/src/components/_dropdown.scss +162 -216
  22. package/src/components/_editor-container.scss +0 -155
  23. package/src/components/_fieldset.scss +1 -6
  24. package/src/components/_image.scss +1 -1
  25. package/src/components/_label.scss +1 -1
  26. package/src/components/_list.scss +0 -83
  27. package/src/components/_loading.scss +1 -50
  28. package/src/components/_menu copy.scss +5 -5
  29. package/src/components/_menu.scss +114 -114
  30. package/src/components/_popup.scss +92 -91
  31. package/src/components/_progress.scss +59 -59
  32. package/src/components/_radio.scss +30 -30
  33. package/src/components/_range-slider.scss +147 -125
  34. package/src/components/_result.scss +2 -2
  35. package/src/components/_selectbox.scss +15 -17
  36. package/src/components/_selection-list.scss +2 -2
  37. package/src/components/_skeleton.scss +2 -2
  38. package/src/components/_switch.scss +0 -186
  39. package/src/components/_table.scss +0 -81
  40. package/src/components/_tabs copy.scss +18 -18
  41. package/src/components/_tabs.scss +235 -235
  42. package/src/components/_textarea.scss +27 -31
  43. package/src/components/_toast.scss +1 -1
  44. package/src/components/_treeview.scss +0 -54
  45. package/src/components/_uploader.scss +0 -18
  46. package/src/components/index.scss +1 -47
  47. package/src/icons/demo.html +892 -738
  48. package/src/icons/fonts/acorex-icons.eot +0 -0
  49. package/src/icons/fonts/acorex-icons.svg +71 -0
  50. package/src/icons/fonts/acorex-icons.ttf +0 -0
  51. package/src/icons/fonts/acorex-icons.woff +0 -0
  52. package/src/icons/selection.json +1 -1
  53. package/src/icons/style.css +210 -177
  54. package/src/icons/style.scss +335 -280
  55. package/src/icons/variables.scss +65 -54
  56. package/src/mixins/_media.scss +27 -0
  57. package/src/mixins/index.scss +1 -0
  58. package/src/shared/_check-box.scss +45 -0
  59. package/src/shared/_decoration.scss +56 -0
  60. package/src/shared/_drop-down.scss +163 -0
  61. package/src/shared/_editor-container.scss +130 -0
  62. package/src/shared/_general-button.scss +42 -0
  63. package/src/shared/_icon-control.scss +0 -0
  64. package/src/shared/_inputs.scss +12 -0
  65. package/src/shared/_list.scss +134 -0
  66. package/src/shared/_radio.scss +37 -0
  67. package/src/shared/_skeleton.scss +26 -0
  68. package/src/shared/_table.scss +116 -0
  69. package/src/shared/_utils.scss +46 -0
  70. package/src/shared/index.scss +12 -0
  71. package/src/utility/_mixins.scss +3 -3
  72. package/src/utility/index.scss +16 -22
  73. package/src/variables/_colors.scss +76 -107
  74. package/src/variables/_degrees.scss +1 -0
  75. package/src/variables/index.scss +2 -0
  76. package/{index.js → tailwind.config.js} +14 -63
  77. package/src/components/_alert.scss +0 -276
  78. package/src/icons/fonts/acorex-icon.eot +0 -0
  79. package/src/icons/fonts/acorex-icon.svg +0 -60
  80. package/src/icons/fonts/acorex-icon.ttf +0 -0
  81. package/src/icons/fonts/acorex-icon.woff +0 -0
package/src/components/_range-slider.scss CHANGED
@@ -1,114 +1,136 @@
1
1
  @layer components {
2
- .ax-dark {
3
- .ax-range-slider {
4
- &.ax-primary-default {
5
- input {
6
- background: linear-gradient(
7
- to right,
8
- rgb(var(--ax-color-primary-800)) 0%,
9
- rgb(var(--ax-color-primary-800)) var(--ax-current-value),
10
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
11
- rgba(255, 255, 255, 0.1) 100%
12
- );
13
- }
14
- }
15
- &.ax-secondary-default {
16
- input {
17
- background: linear-gradient(
18
- to right,
19
- rgb(var(--ax-color-secondary-800)) 0%,
20
- rgb(var(--ax-color-secondary-800)) var(--ax-current-value),
21
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
22
- rgba(255, 255, 255, 0.1) 100%
23
- );
24
- }
25
- }
26
- &.ax-success-default {
27
- input {
28
- background: linear-gradient(
29
- to right,
30
- rgb(var(--ax-color-success-800)) 0%,
31
- rgb(var(--ax-color-success-800)) var(--ax-current-value),
32
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
33
- rgba(255, 255, 255, 0.1) 100%
34
- );
35
- }
36
- }
37
- &.ax-warning-default {
38
- input {
39
- background: linear-gradient(
40
- to right,
41
- rgb(var(--ax-color-warning-800)) 0%,
42
- rgb(var(--ax-color-warning-800)) var(--ax-current-value),
43
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
44
- rgba(255, 255, 255, 0.1) 100%
45
- );
46
- }
47
- }
48
- &.ax-danger-default {
49
- input {
50
- background: linear-gradient(
51
- to right,
52
- rgb(var(--ax-color-danger-800)) 0%,
53
- rgb(var(--ax-color-danger-800)) var(--ax-current-value),
54
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
55
- rgba(255, 255, 255, 0.1) 100%
56
- );
57
- }
58
- }
59
- &.ax-info-default {
60
- input {
61
- background: linear-gradient(
62
- to right,
63
- rgb(var(--ax-color-info-800)) 0%,
64
- rgb(var(--ax-color-info-800)) var(--ax-current-value),
65
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
66
- rgba(255, 255, 255, 0.1) 100%
67
- );
68
- }
69
- }
70
- &.ax-light-default {
71
- input {
72
- background: linear-gradient(
73
- to right,
74
- rgb(var(--ax-color-light-600)) 0%,
75
- rgb(var(--ax-color-light-600)) var(--ax-current-value),
76
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
77
- rgba(255, 255, 255, 0.1) 100%
78
- );
79
- }
80
- }
81
- &.ax-dark-default {
82
- input {
83
- background: linear-gradient(
84
- to right,
85
- rgb(var(--ax-color-dark-200)) 0%,
86
- rgb(var(--ax-color-dark-200)) var(--ax-current-value),
87
- rgba(255, 255, 255, 0.1) var(--ax-current-value),
88
- rgba(255, 255, 255, 0.1) 100%
89
- );
90
- }
91
- }
92
- }
93
- }
2
+ // .ax-dark {
3
+ // .ax-range-slider {
4
+ // &.ax-primary-default {
5
+ // input {
6
+ // background: linear-gradient(
7
+ // to right,
8
+ // rgb(var(--ax-color-primary-800)) 0%,
9
+ // rgb(var(--ax-color-primary-800)) var(--ax-current-value),
10
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
11
+ // rgba(255, 255, 255, 0.1) 100%
12
+ // );
13
+ // }
14
+ // }
15
+ // &.ax-secondary-default {
16
+ // input {
17
+ // background: linear-gradient(
18
+ // to right,
19
+ // rgb(var(--ax-color-secondary-800)) 0%,
20
+ // rgb(var(--ax-color-secondary-800)) var(--ax-current-value),
21
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
22
+ // rgba(255, 255, 255, 0.1) 100%
23
+ // );
24
+ // }
25
+ // }
26
+ // &.ax-success-default {
27
+ // input {
28
+ // background: linear-gradient(
29
+ // to right,
30
+ // rgb(var(--ax-color-success-800)) 0%,
31
+ // rgb(var(--ax-color-success-800)) var(--ax-current-value),
32
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
33
+ // rgba(255, 255, 255, 0.1) 100%
34
+ // );
35
+ // }
36
+ // }
37
+ // &.ax-warning-default {
38
+ // input {
39
+ // background: linear-gradient(
40
+ // to right,
41
+ // rgb(var(--ax-color-warning-800)) 0%,
42
+ // rgb(var(--ax-color-warning-800)) var(--ax-current-value),
43
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
44
+ // rgba(255, 255, 255, 0.1) 100%
45
+ // );
46
+ // }
47
+ // }
48
+ // &.ax-danger-default {
49
+ // input {
50
+ // background: linear-gradient(
51
+ // to right,
52
+ // rgb(var(--ax-color-danger-800)) 0%,
53
+ // rgb(var(--ax-color-danger-800)) var(--ax-current-value),
54
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
55
+ // rgba(255, 255, 255, 0.1) 100%
56
+ // );
57
+ // }
58
+ // }
59
+ // &.ax-primary-default {
60
+ // input {
61
+ // background: linear-gradient(
62
+ // to right,
63
+ // rgb(var(--ax-color-primary-800)) 0%,
64
+ // rgb(var(--ax-color-primary-800)) var(--ax-current-value),
65
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
66
+ // rgba(255, 255, 255, 0.1) 100%
67
+ // );
68
+ // }
69
+ // }
70
+ // &.ax-neutral-default {
71
+ // input {
72
+ // background: linear-gradient(
73
+ // to right,
74
+ // rgb(var(--ax-color-neutral-600)) 0%,
75
+ // rgb(var(--ax-color-neutral-600)) var(--ax-current-value),
76
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
77
+ // rgba(255, 255, 255, 0.1) 100%
78
+ // );
79
+ // }
80
+ // }
81
+ // &.ax-neutral-default {
82
+ // input {
83
+ // background: linear-gradient(
84
+ // to right,
85
+ // rgb(var(--ax-color-neutral-200)) 0%,
86
+ // rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
87
+ // rgba(255, 255, 255, 0.1) var(--ax-current-value),
88
+ // rgba(255, 255, 255, 0.1) 100%
89
+ // );
90
+ // }
91
+ // }
92
+ // }
93
+ // }
94
94
  .ax-range-slider {
95
- @apply ax-w-full;
95
+ width: 100%;
96
96
  --ax-current-value: 0%;
97
97
  input {
98
- @apply ax-appearance-none ax-w-full ax-h-2 ax-bg-light-200 ax-rounded-full ax-outline-none ax-transition-all dark:ax-bg-white/10;
99
- &::-webkit-slider-thumb {
100
- @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
98
+ appearance: none;
99
+ width: 100%;
100
+ height: 0.5rem;
101
+ background: rgba(var(--ax-color-ghost), 0.05);
102
+ transition-property: all;
103
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
104
+ transition-duration: 150ms;
105
+ border-radius: 999rem;
106
+ &::-webkit-slider-thumb{
107
+ width: 1.25rem;
108
+ height: 1.25rem;
109
+ background: rgb(var(--ax-color-background-default));
110
+ border: 1px solid;
111
+ border-color: rgb(var(--ax-color-border-default));
112
+ cursor: pointer;
113
+ border-radius: 999rem;
114
+ appearance: none;
115
+ -webkit-appearance: none;
101
116
  }
102
117
  &::-moz-range-thumb {
103
- @apply ax-appearance-none ax-w-5 ax-h-5 ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 dark:ax-border-white/[0.1] ax-rounded-full ax-cursor-pointer dark:ax-bg-light-400;
104
- }
118
+ width: 1.25rem;
119
+ height: 1.25rem;
120
+ background: rgb(var(--ax-color-background-default));
121
+ border: 1px solid;
122
+ border-color: rgb(var(--ax-color-border-default));
123
+ cursor: pointer;
124
+ border-radius: 999rem;
125
+ }
126
+
105
127
  }
106
128
 
107
- &.ax-vertical{
129
+ &.ax-vertical {
108
130
  @apply ax-rotate-90 ax-block;
109
131
  input[type="range"] {
110
132
  -webkit-appearance: slider-vertical;
111
- }
133
+ }
112
134
  }
113
135
 
114
136
  &.ax-primary-default {
@@ -117,8 +139,8 @@
117
139
  to right,
118
140
  rgb(var(--ax-color-primary-500)) 0%,
119
141
  rgb(var(--ax-color-primary-500)) var(--ax-current-value),
120
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
121
- rgb(var(--ax-color-light-200)) 100%
142
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
143
+ rgb(var(--ax-color-neutral-200)) 100%
122
144
  );
123
145
  }
124
146
  }
@@ -129,8 +151,8 @@
129
151
  to right,
130
152
  rgb(var(--ax-color-secondary-500)) 0%,
131
153
  rgb(var(--ax-color-secondary-500)) var(--ax-current-value),
132
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
133
- rgb(var(--ax-color-light-200)) 100%
154
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
155
+ rgb(var(--ax-color-neutral-200)) 100%
134
156
  );
135
157
  }
136
158
  }
@@ -141,8 +163,8 @@
141
163
  to right,
142
164
  rgb(var(--ax-color-danger-500)) 0%,
143
165
  rgb(var(--ax-color-danger-500)) var(--ax-current-value),
144
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
145
- rgb(var(--ax-color-light-200)) 100%
166
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
167
+ rgb(var(--ax-color-neutral-200)) 100%
146
168
  );
147
169
  }
148
170
  }
@@ -153,8 +175,8 @@
153
175
  to right,
154
176
  rgb(var(--ax-color-success-500)) 0%,
155
177
  rgb(var(--ax-color-success-500)) var(--ax-current-value),
156
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
157
- rgb(var(--ax-color-light-200)) 100%
178
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
179
+ rgb(var(--ax-color-neutral-200)) 100%
158
180
  );
159
181
  }
160
182
  }
@@ -165,44 +187,44 @@
165
187
  to right,
166
188
  rgb(var(--ax-color-warning-500)) 0%,
167
189
  rgb(var(--ax-color-warning-500)) var(--ax-current-value),
168
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
169
- rgb(var(--ax-color-light-200)) 100%
190
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
191
+ rgb(var(--ax-color-neutral-200)) 100%
170
192
  );
171
193
  }
172
194
  }
173
195
 
174
- &.ax-info-default {
196
+ &.ax-primary-default {
175
197
  input {
176
198
  background: linear-gradient(
177
199
  to right,
178
- rgb(var(--ax-color-info-500)) 0%,
179
- rgb(var(--ax-color-info-500)) var(--ax-current-value),
180
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
181
- rgb(var(--ax-color-light-200)) 100%
200
+ rgb(var(--ax-color-primary-500)) 0%,
201
+ rgb(var(--ax-color-primary-500)) var(--ax-current-value),
202
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
203
+ rgb(var(--ax-color-neutral-200)) 100%
182
204
  );
183
205
  }
184
206
  }
185
207
 
186
- &.ax-light-default {
208
+ &.ax-neutral-default {
187
209
  input {
188
210
  background: linear-gradient(
189
211
  to right,
190
- rgb(var(--ax-color-light-500)) 0%,
191
- rgb(var(--ax-color-light-500)) var(--ax-current-value),
192
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
193
- rgb(var(--ax-color-light-200)) 100%
212
+ rgb(var(--ax-color-neutral-500)) 0%,
213
+ rgb(var(--ax-color-neutral-500)) var(--ax-current-value),
214
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
215
+ rgb(var(--ax-color-neutral-200)) 100%
194
216
  );
195
217
  }
196
218
  }
197
219
 
198
- &.ax-dark-default {
220
+ &.ax-neutral-default {
199
221
  input {
200
222
  background: linear-gradient(
201
223
  to right,
202
- rgb(var(--ax-color-dark-500)) 0%,
203
- rgb(var(--ax-color-dark-500)) var(--ax-current-value),
204
- rgb(var(--ax-color-light-200)) var(--ax-current-value),
205
- rgb(var(--ax-color-light-200)) 100%
224
+ rgb(var(--ax-color-neutral-500)) 0%,
225
+ rgb(var(--ax-color-neutral-500)) var(--ax-current-value),
226
+ rgb(var(--ax-color-neutral-200)) var(--ax-current-value),
227
+ rgb(var(--ax-color-neutral-200)) 100%
206
228
  );
207
229
  }
208
230
  }
package/src/components/_result.scss CHANGED
@@ -9,10 +9,10 @@
9
9
  @apply ax-mt-2 ax-text-center;
10
10
  }
11
11
  .ax-result-title {
12
- @apply ax-text-base ax-font-semibold ax-text-light-700 dark:ax-text-light-50;
12
+ @apply ax-text-base ax-font-semibold ax-text-neutral-700 dark:ax-text-neutral-50;
13
13
  }
14
14
  .ax-result-description {
15
- @apply ax-text-sm ax-text-light-500 dark:ax-text-light-100;
15
+ @apply ax-text-sm ax-text-neutral-500 dark:ax-text-neutral-100;
16
16
  }
17
17
  .ax-custom-icon,.ax-custom-image{
18
18
  @apply ax-flex ax-items-center ax-justify-center;
package/src/components/_selectbox.scss CHANGED
@@ -1,18 +1,16 @@
1
- @layer components {
2
- .ax-select-box {
3
- .ax-select-box-selection {
4
- @apply ax-flex ax-justify-center ax-items-center ax-outline-none;
1
+ // @layer components {
2
+ // .ax-select-box {
3
+ // .ax-select-box-selection {
4
+ // display: flex;
5
+ // justify-content: center;
6
+ // align-items: center;
7
+ // outline-color: transparent;
8
+ // padding: 0 0.5rem;
5
9
 
6
- .ax-badge {
7
- @apply dark:ax-bg-white/[0.16] dark:ax-text-light-100;
8
- }
9
- .ax-dropdown-chips {
10
- @apply ax-flex ax-overflow-x-auto;
11
- }
12
-
13
- .ax-selectbox-input {
14
- @apply ax-opacity-0 ax-w-0;
15
- }
16
- }
17
- }
18
- }
10
+ // .ax-selectbox-input {
11
+ // opacity: 0;
12
+ // width: 0;
13
+ // }
14
+ // }
15
+ // }
16
+ // }
package/src/components/_selection-list.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  .ax-selection-list {
35
35
  &.ax-vertical {
36
36
  & > div {
37
- @apply ax-pb-3.5 ax-border-b ax-border-light-300 dark:ax-border-white/[0.09] last:ax-border-0;
37
+ @apply ax-pb-3.5 ax-border-b ax-border-neutral-300 dark:ax-border-white/[0.09] last:ax-border-0;
38
38
  }
39
39
  }
40
40
  }
@@ -43,7 +43,7 @@
43
43
  .ax-selection-list {
44
44
  &.ax-vertical,&.ax-horizontal {
45
45
  & > div {
46
- @apply ax-p-4 ax-border ax-border-light-300 dark:ax-border-white/[0.09] ax-rounded-default ax-shadow-sm;
46
+ @apply ax-p-4 ax-border ax-border-neutral-300 dark:ax-border-white/[0.09] ax-rounded-default ax-shadow-sm;
47
47
  &.ax-state-selected {
48
48
  @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-primary-500;
49
49
  }
package/src/components/_skeleton.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  @layer utilities {
2
2
  .ax-skeleton {
3
- @apply ax-relative ax-overflow-hidden ax-bg-light-200 dark:ax-bg-light-700;
3
+ @apply ax-relative ax-overflow-hidden ax-bg-neutral-200 dark:ax-bg-neutral-700;
4
4
  &.ax-skeleton-animate {
5
5
  &::before {
6
6
  content: "";
7
7
  @apply ax-block ax-absolute ax-top-0 ax-h-full ax-w-52;
8
8
  left: -200px;
9
- background: linear-gradient(to right, transparent 0%, rgb(var(--ax-color-light-300)) 50%, transparent 100%);
9
+ background: linear-gradient(to right, transparent 0%, rgb(var(--ax-color-neutral-300)) 50%, transparent 100%);
10
10
  animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
11
11
  }
12
12
  }
package/src/components/_switch.scss CHANGED
@@ -1,186 +0,0 @@
1
- @layer components {
2
- .ax-switch {
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 dark:ax-bg-white/20 ax-text-light-fore ax-transition-all;
5
- min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
6
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
7
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
8
- &.ax-switch-checked {
9
- @apply ax-bg-primary-500;
10
- .ax-switch-handle {
11
- @apply ax-right-0.5;
12
- left: initial;
13
- }
14
- .ax-switch-inner {
15
- @apply ax-text-primary-fore;
16
- margin-inline-end: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
17
- margin-inline-start: var(--ax-base-size);
18
- }
19
- }
20
- .ax-switch-handle {
21
- width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
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;
24
- ax-loading {
25
- transform: translateY(-50%);
26
- @apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
27
- svg {
28
- @apply ax-fill-primary-500 ax-stroke-primary-500;
29
- }
30
- }
31
- &:before {
32
- @apply ax-absolute ax-bg-white ax-transition-all ax-rounded-full;
33
- content: "";
34
- }
35
- }
36
- .ax-switch-inner {
37
- @apply ax-block;
38
- margin-inline-start: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
39
- margin-inline-end: var(--ax-base-size);
40
- transition: margin 0.2s;
41
- }
42
- }
43
- &.ax-primary {
44
- button {
45
- &.ax-switch-checked {
46
- @apply ax-bg-primary-500;
47
- .ax-switch-inner {
48
- @apply ax-text-primary-fore;
49
- }
50
- }
51
- .ax-switch-handle {
52
- ax-loading {
53
- svg {
54
- @apply ax-fill-primary-500 ax-stroke-primary-500;
55
- }
56
- }
57
- }
58
- }
59
- }
60
- &.ax-secondary {
61
- button {
62
- &.ax-switch-checked {
63
- @apply ax-bg-secondary-500;
64
- .ax-switch-inner {
65
- @apply ax-text-secondary-fore;
66
- }
67
- }
68
- .ax-switch-handle {
69
- ax-loading {
70
- svg {
71
- @apply ax-fill-secondary-500 ax-stroke-secondary-500;
72
- }
73
- }
74
- }
75
- }
76
- }
77
- &.ax-success {
78
- button {
79
- &.ax-switch-checked {
80
- @apply ax-bg-success-500;
81
- .ax-switch-inner {
82
- @apply ax-text-success-fore;
83
- }
84
- }
85
- .ax-switch-handle {
86
- ax-loading {
87
- svg {
88
- @apply ax-fill-success-500 ax-stroke-success-500;
89
- }
90
- }
91
- }
92
- }
93
- }
94
- &.ax-warning {
95
- button {
96
- &.ax-switch-checked {
97
- @apply ax-bg-warning-500;
98
- .ax-switch-inner {
99
- @apply ax-text-warning-fore;
100
- }
101
- }
102
- .ax-switch-handle {
103
- ax-loading {
104
- svg {
105
- @apply ax-fill-warning-500 ax-stroke-warning-500;
106
- }
107
- }
108
- }
109
- }
110
- }
111
- &.ax-danger {
112
- button {
113
- &.ax-switch-checked {
114
- @apply ax-bg-danger-500;
115
- .ax-switch-inner {
116
- @apply ax-text-danger-fore;
117
- }
118
- }
119
- .ax-switch-handle {
120
- ax-loading {
121
- svg {
122
- @apply ax-fill-danger-500 ax-stroke-danger-500;
123
- }
124
- }
125
- }
126
- }
127
- }
128
- &.ax-info {
129
- button {
130
- &.ax-switch-checked {
131
- @apply ax-bg-info-500;
132
- .ax-switch-inner {
133
- @apply ax-text-info-fore;
134
- }
135
- }
136
- .ax-switch-handle {
137
- ax-loading {
138
- svg {
139
- @apply ax-fill-info-500 ax-stroke-info-500;
140
- }
141
- }
142
- }
143
- }
144
- }
145
- &.ax-dark {
146
- button {
147
- &.ax-switch-checked {
148
- @apply ax-bg-dark-500;
149
- .ax-switch-inner {
150
- @apply ax-text-dark-fore;
151
- }
152
- }
153
- .ax-switch-handle {
154
- ax-loading {
155
- svg {
156
- @apply ax-fill-dark-500 ax-stroke-dark-500;
157
- }
158
- }
159
- }
160
- }
161
- }
162
- &.ax-light {
163
- button {
164
- &.ax-switch-checked {
165
- @apply ax-bg-light-500;
166
- .ax-switch-inner {
167
- @apply ax-text-light-fore;
168
- }
169
- }
170
- .ax-switch-handle {
171
- ax-loading {
172
- svg {
173
- @apply ax-fill-light-500 ax-stroke-light-500;
174
- }
175
- }
176
- }
177
- }
178
- }
179
- .ax-state-disabled {
180
- @apply ax-opacity-60 ax-cursor-not-allowed #{!important};
181
- }
182
- .ax-state-readonly {
183
- @apply ax-opacity-75 #{!important};
184
- }
185
- }
186
- }