@acorex/styles 5.0.28 → 5.0.29

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/base/index.scss +1 -0
  3. package/src/components/_button.scss +8 -7
  4. package/src/components/_switch.scss +253 -108
  5. package/src/utility/index.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.28",
3
+ "version": "5.0.29",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/index.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  }
7
7
 
8
8
  :root {
9
+ --ax-base:8px;
9
10
  --ax-base-size: 8px;
10
11
  --ax-base-ratio: 6;
11
12
  --ax-color-default-background: 255, 255, 255;
package/src/components/_button.scss CHANGED
@@ -22,6 +22,7 @@
22
22
  @apply ax-rounded-full;
23
23
  }
24
24
  &.ax-button-icon {
25
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
25
26
  @apply ax-px-3;
26
27
 
27
28
  ax-prefix,
@@ -188,7 +189,7 @@
188
189
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
189
190
  }
190
191
  &:active {
191
- @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-200 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
192
+ @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
192
193
  }
193
194
  }
194
195
 
@@ -228,7 +229,7 @@
228
229
  }
229
230
 
230
231
  &.ax-state-selected {
231
- @apply ax-bg-primary-200 ax-text-primary-700;
232
+ @apply ax-bg-primary-300 ax-text-primary-700;
232
233
  }
233
234
  }
234
235
  &.ax-secondary-twotone {
@@ -244,7 +245,7 @@
244
245
  }
245
246
 
246
247
  &.ax-state-selected {
247
- @apply ax-bg-secondary-200 ax-text-secondary-700;
248
+ @apply ax-bg-secondary-300 ax-text-secondary-700;
248
249
  }
249
250
  }
250
251
  &.ax-warning-twotone {
@@ -260,7 +261,7 @@
260
261
  }
261
262
 
262
263
  &.ax-state-selected {
263
- @apply ax-bg-warning-200 ax-text-warning-700;
264
+ @apply ax-bg-warning-300 ax-text-warning-700;
264
265
  }
265
266
  }
266
267
  &.ax-danger-twotone {
@@ -276,7 +277,7 @@
276
277
  }
277
278
 
278
279
  &.ax-state-selected {
279
- @apply ax-bg-danger-200 ax-text-danger-700;
280
+ @apply ax-bg-danger-300 ax-text-danger-700;
280
281
  }
281
282
  }
282
283
  &.ax-success-twotone {
@@ -292,7 +293,7 @@
292
293
  }
293
294
 
294
295
  &.ax-state-selected {
295
- @apply ax-bg-success-200 ax-text-success-700;
296
+ @apply ax-bg-success-300 ax-text-success-700;
296
297
  }
297
298
  }
298
299
  &.ax-info-twotone {
@@ -308,7 +309,7 @@
308
309
  }
309
310
 
310
311
  &.ax-state-selected {
311
- @apply ax-bg-info-200 ax-text-primary-700;
312
+ @apply ax-bg-info-300 ax-text-primary-700;
312
313
  }
313
314
  }
314
315
  &.ax-dark-twotone {
package/src/components/_switch.scss CHANGED
@@ -1,100 +1,44 @@
1
1
  @layer components {
2
2
  .ax-switch {
3
- position: relative;
4
- display: block;
5
- width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 7px);
6
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 15px);
7
- margin: 5px;
8
- >input {
9
- opacity: 0;
10
- width: 0;
11
- height: 0;
12
- &:checked {
13
- &+.ax-switch-slider {
14
- background-color: rgb(var(--ax-color-primary));
15
-
16
- &::before {
17
- -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
18
- -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
19
- transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
20
- }
21
- }
22
- }
3
+ width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
4
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
5
+ @apply ax-relative ax-inline-block;
6
+ input {
7
+ @apply ax-w-0 ax-h-0 ax-opacity-0;
23
8
  }
9
+
24
10
  .ax-switch-slider {
25
- position: absolute;
26
- cursor: pointer;
27
- top: 0;
28
- left: 0;
29
- right: 0;
30
- bottom: 0;
31
- -webkit-transition: 0.2s;
32
- transition: 0.2s;
33
- border-radius: 25px;
34
- @apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
11
+ @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
12
+ @include control-dark("editor");
13
+ -webkit-transition: 0.4s;
14
+ transition: 0.4s;
35
15
  &::before {
16
+ @apply ax-absolute ax-bg-white ax-rounded-full;
36
17
  content: "";
37
- position: absolute;
38
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
39
- width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
40
- left: 3px;
41
- bottom: 3px;
42
- background-color: white;
43
- -webkit-transition: 0.2s;
44
- transition: 0.2s;
45
- border-radius: 50%;
18
+ width: 35%;
19
+ padding-bottom: 35%;
20
+ left: 7%;
21
+ top: 50%;
22
+ transform: translate(0, -50%);
23
+ -webkit-transition: 0.4s;
24
+ transition: 0.4s;
46
25
  }
47
26
  }
48
- input:focus~.ax-switch-slider {
49
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
50
- }
51
- &.ax-sm {
52
- width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
53
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
54
- >input {
55
- &:checked {
56
- &+.ax-switch-slider {
57
- &::before {
58
- -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
59
- -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
60
- transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
61
- }
62
- }
63
- }
64
- }
65
- .ax-switch-slider {
66
- &::before {
67
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
68
- width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
69
- }
70
- }
27
+
28
+ input:checked + .ax-switch-slider {
29
+ @apply ax-bg-primary-500;
71
30
  }
72
- &.ax-lg {
73
- width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 20px);
74
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px);
75
- >input {
76
- &:checked {
77
- &+.ax-switch-slider {
78
- &::before {
79
- -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
80
- -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
81
- transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
82
- }
83
- }
84
- }
85
- }
86
- .ax-switch-slider {
87
- &::before {
88
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
89
- width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
90
- }
91
- }
31
+
32
+ input:focus + .ax-switch-slider {
33
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
92
34
  }
93
- &.ax-state-error {
94
- .ax-switch-slider {
95
- @apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
96
- }
35
+
36
+ input:checked + .ax-switch-slider:before {
37
+ -webkit-transform: translate(140%, -50%);
38
+ -ms-transform: translate(140%, -50%);
39
+ transform: translate(140%, -50%);
97
40
  }
41
+
98
42
  &.ax-state-disabled {
99
43
  .ax-switch-slider {
100
44
  background-color: rgb(var(--ax-color-disabled)) !important;
@@ -113,89 +57,290 @@
113
57
  @apply ax-cursor-not-allowed;
114
58
  }
115
59
  }
60
+
116
61
  &.ax-success {
117
- >input {
62
+ > input {
118
63
  &:checked {
119
- &+.ax-switch-slider {
64
+ & + .ax-switch-slider {
120
65
  background-color: rgb(var(--ax-color-success));
121
66
  }
122
67
  }
123
68
  }
124
- input:focus~.ax-switch-slider {
69
+ input:focus ~ .ax-switch-slider {
125
70
  @apply ax-ring-success-500;
126
71
  }
127
72
  }
128
73
  &.ax-secondary {
129
- >input {
74
+ > input {
130
75
  &:checked {
131
- &+.ax-switch-slider {
76
+ & + .ax-switch-slider {
132
77
  background-color: rgb(var(--ax-color-secondary));
133
78
  }
134
79
  }
135
80
  }
136
- input:focus~.ax-switch-slider {
81
+ input:focus ~ .ax-switch-slider {
137
82
  @apply ax-ring-secondary-500;
138
83
  }
139
84
  }
140
85
  &.ax-danger {
141
- >input {
86
+ > input {
142
87
  &:checked {
143
- &+.ax-switch-slider {
88
+ & + .ax-switch-slider {
144
89
  background-color: rgb(var(--ax-color-danger));
145
90
  }
146
91
  }
147
92
  }
148
- input:focus~.ax-switch-slider {
93
+ input:focus ~ .ax-switch-slider {
149
94
  @apply ax-ring-danger-500;
150
95
  }
151
96
  }
152
97
  &.ax-warning {
153
- >input {
98
+ > input {
154
99
  &:checked {
155
- &+.ax-switch-slider {
100
+ & + .ax-switch-slider {
156
101
  background-color: rgb(var(--ax-color-warning));
157
102
  }
158
103
  }
159
104
  }
160
- input:focus~.ax-switch-slider {
105
+ input:focus ~ .ax-switch-slider {
161
106
  @apply ax-ring-warning-500;
162
107
  }
163
108
  }
164
109
  &.ax-info {
165
- >input {
110
+ > input {
166
111
  &:checked {
167
- &+.ax-switch-slider {
112
+ & + .ax-switch-slider {
168
113
  background-color: rgb(var(--ax-color-info));
169
114
  }
170
115
  }
171
116
  }
172
- input:focus~.ax-switch-slider {
117
+ input:focus ~ .ax-switch-slider {
173
118
  @apply ax-ring-info-500;
174
119
  }
175
120
  }
176
121
  &.ax-light {
177
- >input {
122
+ > input {
178
123
  &:checked {
179
- &+.ax-switch-slider {
124
+ & + .ax-switch-slider {
180
125
  background-color: rgb(var(--ax-color-light));
181
126
  }
182
127
  }
183
128
  }
184
- input:focus~.ax-switch-slider {
129
+ input:focus ~ .ax-switch-slider {
185
130
  @apply ax-ring-light-500;
186
131
  }
187
132
  }
188
133
  &.ax-dark {
189
- >input {
134
+ > input {
190
135
  &:checked {
191
- &+.ax-switch-slider {
136
+ & + .ax-switch-slider {
192
137
  background-color: rgb(var(--ax-color-dark));
193
138
  }
194
139
  }
195
140
  }
196
- input:focus~.ax-switch-slider {
141
+ input:focus ~ .ax-switch-slider {
197
142
  @apply ax-ring-dark-500;
198
143
  }
199
144
  }
200
145
  }
201
- }
146
+
147
+ // .ax-switch {
148
+ // position: relative;
149
+ // display: block;
150
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 7px);
151
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 15px);
152
+ // margin: 5px;
153
+ // >input {
154
+ // opacity: 0;
155
+ // width: 0;
156
+ // height: 0;
157
+ // &:checked {
158
+ // &+.ax-switch-slider {
159
+ // background-color: rgb(var(--ax-color-primary));
160
+
161
+ // &::before {
162
+ // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
163
+ // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
164
+ // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
165
+ // }
166
+ // }
167
+ // }
168
+ // }
169
+ // .ax-switch-slider {
170
+ // position: absolute;
171
+ // cursor: pointer;
172
+ // top: 0;
173
+ // left: 0;
174
+ // right: 0;
175
+ // bottom: 0;
176
+ // -webkit-transition: 0.2s;
177
+ // transition: 0.2s;
178
+ // border-radius: 25px;
179
+ // @apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
180
+ // &::before {
181
+ // content: "";
182
+ // position: absolute;
183
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
184
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
185
+ // left: 3px;
186
+ // bottom: 3px;
187
+ // background-color: white;
188
+ // -webkit-transition: 0.2s;
189
+ // transition: 0.2s;
190
+ // border-radius: 50%;
191
+ // }
192
+ // }
193
+ // input:focus~.ax-switch-slider {
194
+ // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
195
+ // }
196
+ // &.ax-sm {
197
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
198
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
199
+ // >input {
200
+ // &:checked {
201
+ // &+.ax-switch-slider {
202
+ // &::before {
203
+ // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
204
+ // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
205
+ // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
206
+ // }
207
+ // }
208
+ // }
209
+ // }
210
+ // .ax-switch-slider {
211
+ // &::before {
212
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
213
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
214
+ // }
215
+ // }
216
+ // }
217
+ // &.ax-lg {
218
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 20px);
219
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px);
220
+ // >input {
221
+ // &:checked {
222
+ // &+.ax-switch-slider {
223
+ // &::before {
224
+ // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
225
+ // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
226
+ // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
227
+ // }
228
+ // }
229
+ // }
230
+ // }
231
+ // .ax-switch-slider {
232
+ // &::before {
233
+ // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
234
+ // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
235
+ // }
236
+ // }
237
+ // }
238
+ // &.ax-state-error {
239
+ // .ax-switch-slider {
240
+ // @apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
241
+ // }
242
+ // }
243
+ // &.ax-state-disabled {
244
+ // .ax-switch-slider {
245
+ // background-color: rgb(var(--ax-color-disabled)) !important;
246
+ // @apply ax-cursor-not-allowed ax-border-transparent;
247
+ // &:after {
248
+ // @apply ax-border-transparent;
249
+ // }
250
+ // &:hover {
251
+ // @apply ax-border-transparent;
252
+ // }
253
+ // }
254
+ // }
255
+ // &.ax-state-readonly {
256
+ // .ax-switch-slider {
257
+ // opacity: 0.6;
258
+ // @apply ax-cursor-not-allowed;
259
+ // }
260
+ // }
261
+ // &.ax-success {
262
+ // >input {
263
+ // &:checked {
264
+ // &+.ax-switch-slider {
265
+ // background-color: rgb(var(--ax-color-success));
266
+ // }
267
+ // }
268
+ // }
269
+ // input:focus~.ax-switch-slider {
270
+ // @apply ax-ring-success-500;
271
+ // }
272
+ // }
273
+ // &.ax-secondary {
274
+ // >input {
275
+ // &:checked {
276
+ // &+.ax-switch-slider {
277
+ // background-color: rgb(var(--ax-color-secondary));
278
+ // }
279
+ // }
280
+ // }
281
+ // input:focus~.ax-switch-slider {
282
+ // @apply ax-ring-secondary-500;
283
+ // }
284
+ // }
285
+ // &.ax-danger {
286
+ // >input {
287
+ // &:checked {
288
+ // &+.ax-switch-slider {
289
+ // background-color: rgb(var(--ax-color-danger));
290
+ // }
291
+ // }
292
+ // }
293
+ // input:focus~.ax-switch-slider {
294
+ // @apply ax-ring-danger-500;
295
+ // }
296
+ // }
297
+ // &.ax-warning {
298
+ // >input {
299
+ // &:checked {
300
+ // &+.ax-switch-slider {
301
+ // background-color: rgb(var(--ax-color-warning));
302
+ // }
303
+ // }
304
+ // }
305
+ // input:focus~.ax-switch-slider {
306
+ // @apply ax-ring-warning-500;
307
+ // }
308
+ // }
309
+ // &.ax-info {
310
+ // >input {
311
+ // &:checked {
312
+ // &+.ax-switch-slider {
313
+ // background-color: rgb(var(--ax-color-info));
314
+ // }
315
+ // }
316
+ // }
317
+ // input:focus~.ax-switch-slider {
318
+ // @apply ax-ring-info-500;
319
+ // }
320
+ // }
321
+ // &.ax-light {
322
+ // >input {
323
+ // &:checked {
324
+ // &+.ax-switch-slider {
325
+ // background-color: rgb(var(--ax-color-light));
326
+ // }
327
+ // }
328
+ // }
329
+ // input:focus~.ax-switch-slider {
330
+ // @apply ax-ring-light-500;
331
+ // }
332
+ // }
333
+ // &.ax-dark {
334
+ // >input {
335
+ // &:checked {
336
+ // &+.ax-switch-slider {
337
+ // background-color: rgb(var(--ax-color-dark));
338
+ // }
339
+ // }
340
+ // }
341
+ // input:focus~.ax-switch-slider {
342
+ // @apply ax-ring-dark-500;
343
+ // }
344
+ // }
345
+ // }
346
+ }
package/src/utility/index.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .ax-sm {
3
3
  --ax-base-size: 6px;
4
4
  font-size: 0.75rem;
5
- *{
5
+ * {
6
6
  font-size: 0.75rem;
7
7
  }
8
8
  }