@acorex/styles 19.10.0-next.0 → 19.10.0-next.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.
- package/icons/fontawesome/index.scss +11 -10
- package/icons/huge/huge-bulk/index.scss +4 -4
- package/icons/huge/huge-duotone/index.scss +4 -4
- package/icons/huge/huge-solid-sharp/index.scss +4 -4
- package/icons/huge/huge-solid-standard/index.scss +4 -4
- package/icons/huge/huge-stroke-rounded/index.scss +4 -4
- package/icons/huge/huge-stroke-sharp/index.scss +4 -4
- package/icons/huge/huge-stroke-standard/index.scss +4 -4
- package/icons/huge/huge-twotone/index.scss +4 -4
- package/icons/material/index.scss +5 -4
- package/index.css +1935 -80
- package/index.min.css +1 -1
- package/package.json +1 -1
- package/src/base/index.scss +4 -2
- package/src/mixins/_look.scss +35 -20
- package/src/shared/_action-item.scss +3 -3
- package/src/shared/_actionsheet.scss +6 -7
- package/src/shared/_check-box.scss +14 -8
- package/src/shared/_color-look.scss +822 -0
- package/src/shared/_drop-down.scss +16 -7
- package/src/shared/_editor-container.scss +75 -35
- package/src/shared/_general-button.scss +12 -11
- package/src/shared/_inputs.scss +16 -0
- package/src/shared/_list.scss +41 -15
- package/src/shared/_radio.scss +14 -8
- package/src/shared/_table.scss +30 -9
- package/src/shared/_utils.scss +16 -10
- package/src/shared/index.scss +2 -4
- package/src/utility/index.scss +22 -2
- package/src/variables/_colors.scss +1 -1
- package/tailwind-base.js +73 -123
- package/themes/default.css +1 -1
- package/themes/default.scss +139 -239
- package/src/shared/_ripple.scss +0 -13
- package/themes/test.scss +0 -237
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
@use '../variables/index.scss';
|
|
2
2
|
@use '../mixins/index.scss' as mixins;
|
|
3
3
|
.ax-drop-down {
|
|
4
|
+
// @apply ax-contents;
|
|
4
5
|
display: contents;
|
|
5
6
|
|
|
6
7
|
.ax-dropdown-content {
|
|
8
|
+
// @apply ax-flex ax-flex-1 ax-items-center ax-overflow-x-auto ax-overflow-y-hidden ax-text-sm ax-capitalize;
|
|
7
9
|
display: flex;
|
|
8
10
|
flex: 1 1 0%;
|
|
9
11
|
align-items: center;
|
|
@@ -14,6 +16,7 @@
|
|
|
14
16
|
text-transform: capitalize;
|
|
15
17
|
|
|
16
18
|
&.ax-state-disabled {
|
|
19
|
+
// @apply ax-cursor-not-allowed ax-opacity-50;
|
|
17
20
|
cursor: not-allowed;
|
|
18
21
|
opacity: 0.5;
|
|
19
22
|
}
|
|
@@ -21,41 +24,46 @@
|
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
.ax-overlay-pane {
|
|
27
|
+
// @apply ax-mt-1 ax-h-fit ax-overflow-hidden ax-rounded-none ax-border ax-border-default ax-bg-surface ax-shadow-md md:ax-rounded-default;
|
|
24
28
|
margin: 0.25rem 0;
|
|
25
29
|
min-width: 10rem;
|
|
26
30
|
height: fit-content;
|
|
27
31
|
overflow: hidden;
|
|
28
32
|
border-width: 1px;
|
|
29
|
-
border-color: rgba(var(--ax-
|
|
30
|
-
background-color: rgba(var(--ax-
|
|
33
|
+
border-color: rgba(var(--ax-color-border-default));
|
|
34
|
+
background-color: rgba(var(--ax-color-surface));
|
|
31
35
|
--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
32
36
|
--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
|
|
33
37
|
box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
|
|
34
|
-
border-radius: var(--ax-
|
|
38
|
+
border-radius: var(--ax-rounded-border-default);
|
|
35
39
|
|
|
36
40
|
@include mixins.media('xs') {
|
|
37
41
|
margin: 0;
|
|
38
42
|
}
|
|
39
43
|
ax-header,
|
|
40
44
|
ax-footer {
|
|
41
|
-
|
|
45
|
+
// @apply ax-bg-surface ax-p-3;
|
|
46
|
+
background-color: rgba(var(--ax-color-surface));
|
|
42
47
|
padding: 0.75rem /* 12px */;
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
&.ax-overlay-center {
|
|
51
|
+
// @apply ax-h-fit ax-w-[80vw] ax-max-w-[90vh];
|
|
46
52
|
height: fit-content;
|
|
47
53
|
width: 80vw;
|
|
48
54
|
max-width: 90vh;
|
|
49
55
|
}
|
|
50
56
|
|
|
51
57
|
&.ax-overlay-actionsheet {
|
|
58
|
+
// @apply ax-h-auto ax-max-h-[85vh] ax-w-full ax-bg-surface;
|
|
52
59
|
height: auto;
|
|
53
60
|
max-height: 85vh;
|
|
54
61
|
width: 100%;
|
|
55
|
-
background-color: rgba(var(--ax-
|
|
56
|
-
border-top-left-radius: var(--ax-
|
|
57
|
-
border-top-right-radius: var(--ax-
|
|
62
|
+
background-color: rgba(var(--ax-color-surface));
|
|
63
|
+
border-top-left-radius: var(--ax-rounded-border-default);
|
|
64
|
+
border-top-right-radius: var(--ax-rounded-border-default);
|
|
58
65
|
&.ax-full {
|
|
66
|
+
// @apply ax-h-[95vh] ax-max-h-[95vh];
|
|
59
67
|
height: 95vh;
|
|
60
68
|
max-height: 95vh;
|
|
61
69
|
}
|
|
@@ -64,5 +72,6 @@
|
|
|
64
72
|
&.ax-overlay-full {
|
|
65
73
|
width: 100vw;
|
|
66
74
|
height: 100vh;
|
|
75
|
+
// @apply ax-h-screen ax-w-screen;
|
|
67
76
|
}
|
|
68
77
|
}
|
|
@@ -10,32 +10,32 @@
|
|
|
10
10
|
.ax-editor-container {
|
|
11
11
|
&.ax-look-fill {
|
|
12
12
|
&:focus-within {
|
|
13
|
-
box-shadow: 0px 0px 0 2px rgba(var(--ax-
|
|
13
|
+
box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-200));
|
|
14
14
|
}
|
|
15
15
|
&.ax-state-error {
|
|
16
|
-
background-color: rgba(var(--ax-
|
|
17
|
-
color: rgba(var(--ax-
|
|
16
|
+
background-color: rgba(var(--ax-color-danger-200));
|
|
17
|
+
color: rgba(var(--ax-color-danger-fore));
|
|
18
18
|
|
|
19
19
|
&:focus-within {
|
|
20
|
-
box-shadow: 0px 0px 0 2px rgba(var(--ax-
|
|
20
|
+
box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-200));
|
|
21
21
|
}
|
|
22
22
|
.ax-input {
|
|
23
23
|
&::placeholder {
|
|
24
|
-
color: rgba(var(--ax-
|
|
24
|
+
color: rgba(var(--ax-color-danger-200));
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
&.ax-look-flat {
|
|
30
30
|
&:focus-within {
|
|
31
|
-
border-color: rgba(var(--ax-
|
|
31
|
+
border-color: rgba(var(--ax-color-primary-200));
|
|
32
32
|
}
|
|
33
33
|
&.ax-state-error {
|
|
34
|
-
border-color: rgba(var(--ax-
|
|
34
|
+
border-color: rgba(var(--ax-color-danger-200));
|
|
35
35
|
|
|
36
36
|
.ax-input {
|
|
37
37
|
&::placeholder {
|
|
38
|
-
color: rgba(var(--ax-
|
|
38
|
+
color: rgba(var(--ax-color-danger-200));
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -43,19 +43,19 @@
|
|
|
43
43
|
&.ax-look-solid,
|
|
44
44
|
&.ax-look-outline {
|
|
45
45
|
&:focus-within {
|
|
46
|
-
box-shadow: 0px 0px 0 1px rgba(var(--ax-
|
|
47
|
-
border-color: rgba(var(--ax-
|
|
46
|
+
box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-200));
|
|
47
|
+
border-color: rgba(var(--ax-color-primary-200));
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&.ax-state-error {
|
|
51
|
-
border-color: rgba(var(--ax-
|
|
51
|
+
border-color: rgba(var(--ax-color-danger-200));
|
|
52
52
|
&:focus-within {
|
|
53
|
-
box-shadow: 0px 0px 0 1px rgba(var(--ax-
|
|
54
|
-
border-color: rgba(var(--ax-
|
|
53
|
+
box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-200));
|
|
54
|
+
border-color: rgba(var(--ax-color-danger-200));
|
|
55
55
|
}
|
|
56
56
|
.ax-input {
|
|
57
57
|
&::placeholder {
|
|
58
|
-
color: rgba(var(--ax-
|
|
58
|
+
color: rgba(var(--ax-color-danger-200));
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -65,12 +65,13 @@
|
|
|
65
65
|
|
|
66
66
|
.ax-editor-container {
|
|
67
67
|
display: flex;
|
|
68
|
-
height: var(--ax-
|
|
68
|
+
height: var(--ax-size-default);
|
|
69
69
|
width: 100%;
|
|
70
70
|
align-items: center;
|
|
71
71
|
overflow: hidden;
|
|
72
72
|
font-size: 0.875rem;
|
|
73
|
-
|
|
73
|
+
line-height: 1;
|
|
74
|
+
color: rgba(var(--ax-color-input-surface-fore));
|
|
74
75
|
|
|
75
76
|
.ax-editor-container {
|
|
76
77
|
border-radius: 0 !important;
|
|
@@ -81,7 +82,7 @@
|
|
|
81
82
|
box-shadow: none !important;
|
|
82
83
|
}
|
|
83
84
|
&:focus {
|
|
84
|
-
box-shadow: 0px 0px 0 1px rgba(var(--ax-
|
|
85
|
+
box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
|
|
85
86
|
}
|
|
86
87
|
}
|
|
87
88
|
|
|
@@ -124,7 +125,7 @@
|
|
|
124
125
|
&::placeholder {
|
|
125
126
|
font-size: inherit;
|
|
126
127
|
font-weight: 400;
|
|
127
|
-
color: rgb(var(--ax-
|
|
128
|
+
color: rgb(var(--ax-color-input-surface-fore), 0.5);
|
|
128
129
|
}
|
|
129
130
|
&:focus,
|
|
130
131
|
&:focus-visible,
|
|
@@ -133,6 +134,46 @@
|
|
|
133
134
|
}
|
|
134
135
|
}
|
|
135
136
|
|
|
137
|
+
&.ax-xs {
|
|
138
|
+
.ax-input {
|
|
139
|
+
padding: 0 calc(var(--ax-editor-space-size) - 8px);
|
|
140
|
+
font-size: calc(var(--ax-editor-font-size) - 4px);
|
|
141
|
+
line-height: 1rem;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&.ax-sm {
|
|
146
|
+
.ax-input {
|
|
147
|
+
padding: 0 calc(var(--ax-editor-space-size) - 4px);
|
|
148
|
+
font-size: calc(var(--ax-editor-font-size) - 2px);
|
|
149
|
+
line-height: calc(var(--ax-editor-font-size) - 2px);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&.ax-md {
|
|
154
|
+
.ax-input {
|
|
155
|
+
padding: 0 calc(var(--ax-editor-space-size) - 4px);
|
|
156
|
+
font-size: var(--ax-editor-font-size);
|
|
157
|
+
line-height: var(--ax-editor-font-size);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&.ax-lg {
|
|
162
|
+
.ax-input {
|
|
163
|
+
padding: 0 var(--ax-editor-space-size);
|
|
164
|
+
font-size: calc(var(--ax-editor-font-size) + 2px);
|
|
165
|
+
line-height: calc(var(--ax-editor-font-size) + 2px);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&.ax-xl {
|
|
170
|
+
.ax-input {
|
|
171
|
+
padding: 0 var(--ax-editor-space-size);
|
|
172
|
+
font-size: calc(var(--ax-editor-font-size) + 4px);
|
|
173
|
+
line-height: calc(var(--ax-editor-font-size) + 4px);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
136
177
|
.ax-editor-control {
|
|
137
178
|
display: flex;
|
|
138
179
|
height: 100%;
|
|
@@ -141,7 +182,7 @@
|
|
|
141
182
|
padding-inline-start: 0.5rem;
|
|
142
183
|
font-size: 1.125rem;
|
|
143
184
|
line-height: 1.75rem;
|
|
144
|
-
color: rgba(var(--ax-
|
|
185
|
+
color: rgba(var(--ax-color-input-surface-fore));
|
|
145
186
|
}
|
|
146
187
|
|
|
147
188
|
&.ax-button-icon {
|
|
@@ -207,6 +248,7 @@
|
|
|
207
248
|
}
|
|
208
249
|
|
|
209
250
|
ax-title {
|
|
251
|
+
// @apply ax-px-4;
|
|
210
252
|
padding-left: 1rem;
|
|
211
253
|
padding-right: 1rem;
|
|
212
254
|
}
|
|
@@ -229,23 +271,21 @@
|
|
|
229
271
|
|
|
230
272
|
&.ax-button-icon {
|
|
231
273
|
height: 100%;
|
|
232
|
-
width: var(--ax-
|
|
274
|
+
width: var(--ax-size-default);
|
|
233
275
|
}
|
|
234
276
|
}
|
|
235
277
|
}
|
|
236
278
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
// }
|
|
251
|
-
// }
|
|
279
|
+
.ax-ripple {
|
|
280
|
+
transform: scale(0);
|
|
281
|
+
animation: ripple 500ms linear;
|
|
282
|
+
position: absolute;
|
|
283
|
+
border-radius: 9999rem !important;
|
|
284
|
+
|
|
285
|
+
@keyframes ripple {
|
|
286
|
+
to {
|
|
287
|
+
transform: scale(4);
|
|
288
|
+
opacity: 0;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
.ax-general-button {
|
|
2
2
|
display: inline-flex;
|
|
3
|
-
height: var(--ax-
|
|
3
|
+
height: var(--ax-size-default);
|
|
4
4
|
cursor: pointer;
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: center;
|
|
7
|
-
border-radius: var(--ax-
|
|
7
|
+
border-radius: var(--ax-rounded-border-default);
|
|
8
8
|
padding-left: 1rem;
|
|
9
9
|
padding-right: 1rem;
|
|
10
10
|
font-size: 0.875rem;
|
|
11
11
|
line-height: 1.25rem;
|
|
12
|
-
color: rgb(var(--ax-
|
|
12
|
+
color: rgb(var(--ax-color-input-surface-fore), 0.75);
|
|
13
13
|
|
|
14
14
|
&:hover {
|
|
15
15
|
&:not(&:disabled, .ax-state-disabled) {
|
|
16
|
-
color: rgba(var(--ax-
|
|
16
|
+
color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
&:focus,
|
|
21
21
|
&:focus-visible {
|
|
22
22
|
&:not(&:disabled, .ax-state-disabled) {
|
|
23
|
-
color: rgba(var(--ax-
|
|
23
|
+
color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
&:active {
|
|
28
28
|
&:not(&:disabled, .ax-state-disabled) {
|
|
29
|
-
color: rgba(var(--ax-
|
|
29
|
+
color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
&.ax-button-rounded {
|
|
42
|
-
border-radius: var(--ax-
|
|
42
|
+
border-radius: var(--ax-rounded-border-default);
|
|
43
43
|
}
|
|
44
44
|
&:disabled,
|
|
45
45
|
&.ax-state-disabled {
|
|
@@ -49,27 +49,28 @@
|
|
|
49
49
|
}
|
|
50
50
|
.ax-clear-button {
|
|
51
51
|
display: inline-flex;
|
|
52
|
-
height: var(--ax-
|
|
52
|
+
height: var(--ax-size-default);
|
|
53
53
|
align-items: center;
|
|
54
54
|
justify-content: center;
|
|
55
55
|
margin-left: 0.25rem;
|
|
56
56
|
margin-right: 0.25rem;
|
|
57
57
|
font-size: 1rem /* 16px */;
|
|
58
58
|
line-height: 1.5rem /* 24px */;
|
|
59
|
-
|
|
59
|
+
line-height: 1;
|
|
60
|
+
color: rgb(var(--ax-color-text-default), 0.75);
|
|
60
61
|
|
|
61
62
|
> button {
|
|
62
63
|
display: flex;
|
|
63
64
|
}
|
|
64
65
|
&:hover {
|
|
65
66
|
&:not(&:disabled, .ax-state-disabled) {
|
|
66
|
-
color: rgb(var(--ax-
|
|
67
|
+
color: rgb(var(--ax-color-text-default), 0.5);
|
|
67
68
|
}
|
|
68
69
|
}
|
|
69
70
|
&:focus,
|
|
70
71
|
&:focus-visible {
|
|
71
72
|
&:not(&:disabled, .ax-state-disabled) {
|
|
72
|
-
color: rgb(var(--ax-
|
|
73
|
+
color: rgb(var(--ax-color-text-default));
|
|
73
74
|
}
|
|
74
75
|
}
|
|
75
76
|
}
|
package/src/shared/_inputs.scss
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.ax-input {
|
|
2
|
+
// @apply ax-p-0 ax-outline-0;
|
|
3
|
+
font-size: inherit;
|
|
4
|
+
padding: 0px;
|
|
5
|
+
outline-width: 0px;
|
|
6
|
+
|
|
7
|
+
&:focus {
|
|
8
|
+
// @apply ax-outline-transparent;
|
|
9
|
+
outline-color: transparent;
|
|
10
|
+
}
|
|
11
|
+
// &.ax-state-disabled {
|
|
12
|
+
// // @apply ax-cursor-not-allowed ax-opacity-50;
|
|
13
|
+
// cursor: not-allowed;
|
|
14
|
+
// opacity: 0.5;
|
|
15
|
+
// }
|
|
16
|
+
}
|
package/src/shared/_list.scss
CHANGED
|
@@ -2,22 +2,24 @@
|
|
|
2
2
|
@include mixins.darkMode() {
|
|
3
3
|
.ax-list-item {
|
|
4
4
|
&.ax-state-selected {
|
|
5
|
-
|
|
6
|
-
color: rgba(var(--ax-
|
|
5
|
+
// @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
|
|
6
|
+
background-color: rgba(var(--ax-color-primary-800)) !important;
|
|
7
|
+
color: rgba(var(--ax-color-primary-fore)) !important;
|
|
7
8
|
|
|
8
9
|
// .ax-selected-icon {
|
|
9
|
-
//
|
|
10
|
-
// color: rgba(var(--ax-
|
|
10
|
+
// // @apply ax-text-primary-fore;
|
|
11
|
+
// color: rgba(var(--ax-color-primary-fore));
|
|
11
12
|
// }
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
15
|
}
|
|
15
16
|
.ax-list {
|
|
17
|
+
// @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
|
|
16
18
|
display: flex;
|
|
17
19
|
height: 100%;
|
|
18
20
|
flex-direction: column;
|
|
19
21
|
overflow: hidden;
|
|
20
|
-
background-color: rgba(var(--ax-
|
|
22
|
+
background-color: rgba(var(--ax-color-surface));
|
|
21
23
|
font-size: 0.875rem /* 14px */;
|
|
22
24
|
line-height: 1.25rem /* 20px */;
|
|
23
25
|
@include mixins.media('md') {
|
|
@@ -25,15 +27,17 @@
|
|
|
25
27
|
}
|
|
26
28
|
ax-header,
|
|
27
29
|
ax-footer {
|
|
30
|
+
// @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
|
|
28
31
|
display: flex;
|
|
29
32
|
align-items: center;
|
|
30
33
|
justify-content: space-between;
|
|
31
|
-
border-color: rgba(var(--ax-
|
|
34
|
+
border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
|
|
32
35
|
background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
|
|
33
36
|
}
|
|
34
37
|
ax-header {
|
|
38
|
+
// @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
|
|
35
39
|
border-bottom-width: 1px;
|
|
36
|
-
border-color: rgba(var(--ax-
|
|
40
|
+
border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
|
|
37
41
|
padding: 1rem /* 16px */;
|
|
38
42
|
font-size: 1rem /* 16px */;
|
|
39
43
|
line-height: 1.5rem /* 24px */;
|
|
@@ -44,48 +48,58 @@
|
|
|
44
48
|
}
|
|
45
49
|
ax-prefix,
|
|
46
50
|
ax-suffix {
|
|
51
|
+
// @apply ax-flex ax-flex-col ax-justify-items-start;
|
|
47
52
|
display: flex;
|
|
48
53
|
flex-direction: column;
|
|
49
54
|
justify-items: start;
|
|
50
55
|
}
|
|
51
56
|
ax-prefix {
|
|
57
|
+
// @apply ax-items-start;
|
|
52
58
|
align-items: flex-start;
|
|
53
59
|
}
|
|
54
60
|
ax-suffix {
|
|
61
|
+
// @apply ax-items-end;
|
|
55
62
|
align-items: flex-end;
|
|
56
63
|
}
|
|
57
64
|
}
|
|
58
65
|
|
|
59
66
|
ax-footer {
|
|
67
|
+
// @apply ax-border-t;
|
|
60
68
|
border-top-width: 1px;
|
|
61
69
|
}
|
|
62
70
|
|
|
63
71
|
.ax-content {
|
|
72
|
+
// @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
|
|
64
73
|
flex: 1 1 0%;
|
|
65
74
|
overflow-y: auto;
|
|
66
75
|
overflow-x: hidden;
|
|
67
76
|
|
|
68
77
|
&.ax-list-items-container {
|
|
78
|
+
// @apply ax-h-full ax-overflow-y-auto ax-py-2;
|
|
69
79
|
height: 100%;
|
|
70
80
|
overflow-y: auto;
|
|
71
81
|
padding-top: 0.5rem /* 8px */;
|
|
72
82
|
padding-bottom: 0.5rem /* 8px */;
|
|
73
83
|
|
|
74
84
|
&.ax-vertical {
|
|
85
|
+
// @apply ax-grid ax-grid-cols-1;
|
|
75
86
|
display: grid;
|
|
76
87
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
77
88
|
|
|
78
89
|
&.ax-divide {
|
|
90
|
+
// @apply ax-border-y;
|
|
79
91
|
border-top-width: 1px;
|
|
80
92
|
border-bottom-width: 1px;
|
|
81
93
|
}
|
|
82
94
|
}
|
|
83
95
|
|
|
84
96
|
&.ax-default {
|
|
97
|
+
// @apply ax-cursor-pointer;
|
|
85
98
|
cursor: pointer;
|
|
86
99
|
|
|
87
100
|
.ax-list-item-group {
|
|
88
101
|
& > span {
|
|
102
|
+
// @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
|
|
89
103
|
display: flex;
|
|
90
104
|
align-items: center;
|
|
91
105
|
padding: 0.75rem /* 12px */;
|
|
@@ -93,19 +107,22 @@
|
|
|
93
107
|
}
|
|
94
108
|
|
|
95
109
|
& > ul {
|
|
110
|
+
// @apply ax-px-3;
|
|
96
111
|
padding-left: 0.75rem /* 12px */;
|
|
97
112
|
padding-right: 0.75rem /* 12px */;
|
|
98
113
|
}
|
|
99
114
|
.ax-list-item {
|
|
115
|
+
// @apply ax-mb-1 ax-rounded-default;
|
|
100
116
|
margin-bottom: 0.25rem /* 4px */;
|
|
101
|
-
border-radius: var(--ax-
|
|
117
|
+
border-radius: var(--ax-rounded-border-default);
|
|
102
118
|
}
|
|
103
119
|
}
|
|
104
120
|
|
|
105
121
|
.ax-list-item {
|
|
122
|
+
// @apply ax-relative ax-flex ax-h-default ax-select-none ax-items-center ax-justify-between ax-pe-4 ax-ps-3 ax-text-base;
|
|
106
123
|
position: relative;
|
|
107
124
|
display: flex;
|
|
108
|
-
height: var(--ax-
|
|
125
|
+
height: var(--ax-size-default);
|
|
109
126
|
user-select: none;
|
|
110
127
|
align-items: center;
|
|
111
128
|
justify-content: space-between;
|
|
@@ -115,23 +132,26 @@
|
|
|
115
132
|
line-height: 1.5rem /* 24px */;
|
|
116
133
|
&:focus,
|
|
117
134
|
&:focus-visible {
|
|
135
|
+
// @apply ax-outline-2 ax-outline-offset-2;
|
|
118
136
|
outline-width: 2px;
|
|
119
137
|
outline-offset: 2px;
|
|
120
138
|
}
|
|
121
139
|
&.ax-state-checkbox {
|
|
122
140
|
.ax-checkbox-label {
|
|
141
|
+
// @apply ax-ms-2;
|
|
123
142
|
margin-inline-start: 0.5rem /* 8px */;
|
|
124
143
|
}
|
|
125
144
|
}
|
|
126
145
|
&.ax-state-selected {
|
|
127
|
-
|
|
128
|
-
color: rgba(var(--ax-
|
|
146
|
+
// @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
|
|
147
|
+
background-color: rgba(var(--ax-color-primary-500), var(--tw-bg-opacity)) !important;
|
|
148
|
+
color: rgba(var(--ax-color-primary-fore), var(--tw-text-opacity)) !important;
|
|
129
149
|
|
|
130
150
|
// .ax-selected-icon {
|
|
131
|
-
//
|
|
151
|
+
// // @apply ax-text-2xl ax-text-primary-500;
|
|
132
152
|
// font-size: 1.5rem /* 24px */;
|
|
133
153
|
// line-height: 2rem /* 32px */;
|
|
134
|
-
// color: rgba(var(--ax-
|
|
154
|
+
// color: rgba(var(--ax-color-primary-500));
|
|
135
155
|
// }
|
|
136
156
|
}
|
|
137
157
|
|
|
@@ -141,21 +161,25 @@
|
|
|
141
161
|
// }
|
|
142
162
|
|
|
143
163
|
&.ax-state-disabled {
|
|
164
|
+
// @apply ax-cursor-not-allowed ax-opacity-50;
|
|
144
165
|
cursor: not-allowed;
|
|
145
166
|
opacity: 0.5;
|
|
146
167
|
}
|
|
147
168
|
|
|
148
169
|
&:focus-visible,
|
|
149
170
|
&:hover {
|
|
150
|
-
|
|
171
|
+
// @apply ax-bg-on-surface;
|
|
172
|
+
background-color: rgba(var(--ax-color-on-surface));
|
|
151
173
|
}
|
|
152
174
|
&.ax-state-focus {
|
|
153
|
-
|
|
175
|
+
// @apply ax-bg-on-surface;
|
|
176
|
+
background-color: rgba(var(--ax-color-on-surface));
|
|
154
177
|
}
|
|
155
178
|
}
|
|
156
179
|
}
|
|
157
180
|
|
|
158
181
|
.ax-list-loading-container {
|
|
182
|
+
// @apply ax-flex ax-justify-center ax-p-2;
|
|
159
183
|
display: flex;
|
|
160
184
|
justify-content: center;
|
|
161
185
|
padding: 0.5rem /* 8px */;
|
|
@@ -164,9 +188,11 @@
|
|
|
164
188
|
}
|
|
165
189
|
|
|
166
190
|
.ax-search-box-container {
|
|
191
|
+
// @apply ax-p-2;
|
|
167
192
|
padding: 0.5rem /* 8px */;
|
|
168
193
|
|
|
169
194
|
&.ax-state-hidden {
|
|
195
|
+
// @apply ax-hidden;
|
|
170
196
|
display: none;
|
|
171
197
|
}
|
|
172
198
|
}
|
package/src/shared/_radio.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use '../mixins/index.scss';
|
|
2
2
|
|
|
3
3
|
.ax-radio {
|
|
4
|
+
// @apply ax-m-0 ax-h-4 ax-w-4 ax-cursor-pointer ax-appearance-none ax-rounded ax-border ax-border-default ax-bg-input-surface ax-align-middle ax-outline-none;
|
|
4
5
|
margin: 0px;
|
|
5
6
|
height: 1rem /* 16px */;
|
|
6
7
|
min-height: 1rem /* 16px */;
|
|
@@ -10,17 +11,20 @@
|
|
|
10
11
|
appearance: none;
|
|
11
12
|
border-radius: 9999px /* 4px */;
|
|
12
13
|
border-width: 1px;
|
|
13
|
-
border-color: rgba(var(--ax-
|
|
14
|
-
background-color: rgba(var(--ax-
|
|
14
|
+
border-color: rgba(var(--ax-color-input-border));
|
|
15
|
+
background-color: rgba(var(--ax-color-input-surface));
|
|
15
16
|
vertical-align: middle;
|
|
16
17
|
outline: 2px solid transparent;
|
|
17
18
|
outline-offset: 2px;
|
|
18
19
|
|
|
19
20
|
&:checked {
|
|
20
|
-
border-
|
|
21
|
-
|
|
21
|
+
// @apply ax-border-primary-500 ax-bg-primary-500 #{!important};
|
|
22
|
+
border-color: rgba(var(--ax-color-primary-500)) !important;
|
|
23
|
+
background-color: rgba(var(--ax-color-primary-500)) !important;
|
|
22
24
|
background-size: contain;
|
|
23
25
|
background-repeat: no-repeat;
|
|
26
|
+
|
|
27
|
+
// @apply ax-bg-contain ax-bg-no-repeat;
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
&:checked {
|
|
@@ -29,12 +33,14 @@
|
|
|
29
33
|
|
|
30
34
|
&:focus-visible,
|
|
31
35
|
&:focus {
|
|
36
|
+
// @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2 ax-ring-offset-surface;
|
|
32
37
|
box-shadow:
|
|
33
|
-
0px 0px 0px 2px rgba(var(--ax-
|
|
34
|
-
0px 0px 0px 4px rgba(var(--ax-
|
|
38
|
+
0px 0px 0px 2px rgba(var(--ax-color-surface)),
|
|
39
|
+
0px 0px 0px 4px rgba(var(--ax-color-primary-500));
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
&:disabled {
|
|
43
|
+
// @apply ax-cursor-not-allowed ax-opacity-50;
|
|
38
44
|
cursor: not-allowed;
|
|
39
45
|
opacity: 0.5;
|
|
40
46
|
}
|
|
@@ -43,8 +49,8 @@
|
|
|
43
49
|
// @include darkMode() {
|
|
44
50
|
// .ax-checkbox {
|
|
45
51
|
// &:checked {
|
|
46
|
-
// border-color: rgba(var(--ax-
|
|
47
|
-
// background-color: rgba(var(--ax-
|
|
52
|
+
// border-color: rgba(var(--ax-color-primary-200)) !important;
|
|
53
|
+
// background-color: rgba(var(--ax-color-primary-200)) !important;
|
|
48
54
|
// background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
49
55
|
// }
|
|
50
56
|
// }
|