@acorex/styles 5.0.8 → 5.0.12
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 +0 -0
- package/index.scss +8 -1
- package/package.json +1 -1
- package/src/base/_colors.scss +12 -8
- package/src/base/index.scss +15 -2
- package/src/components/_alert.scss +1 -1
- package/src/components/_button.scss +4 -4
- package/src/components/_calendar.scss +1 -1
- package/src/components/_checkbox.scss +17 -3
- package/src/components/_editor-container.scss +3 -3
- package/src/components/_label.scss +4 -2
- package/src/components/_popup.scss +36 -2
- package/src/components/_radio.scss +6 -1
- package/src/components/_tabs.scss +28 -16
- package/src/utility/index.scss +180 -0
- package/src/variables/_colors.scss +2 -135
package/dark.scss
ADDED
|
File without changes
|
package/index.scss
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
|
|
1
2
|
@import "./src/base/index.scss";
|
|
3
|
+
@import "./src/icons/style.scss";
|
|
4
|
+
|
|
5
|
+
@import "tailwindcss/base";
|
|
6
|
+
@import "tailwindcss/components";
|
|
2
7
|
@import "./src/components/index.scss";
|
|
3
|
-
|
|
8
|
+
|
|
9
|
+
@import "tailwindcss/utilities";
|
|
10
|
+
@import "./src/utility/index.scss";
|
package/package.json
CHANGED
package/src/base/_colors.scss
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
@import "../variables/colors";
|
|
2
|
-
@mixin colors() {
|
|
3
|
-
@each $name,
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
@mixin colors($array) {
|
|
3
|
+
@each $name,
|
|
4
|
+
$color in $array {
|
|
5
|
+
@if (type-of($color)=="map") {
|
|
6
|
+
@each $subname,
|
|
7
|
+
$variant in $color {
|
|
8
|
+
@if ($subname !="") {
|
|
7
9
|
--ax-color-#{$name}-#{$subname}: #{$variant};
|
|
8
|
-
}
|
|
10
|
+
}
|
|
11
|
+
@else {
|
|
9
12
|
--ax-color-#{$name}: #{$variant};
|
|
10
13
|
}
|
|
11
14
|
}
|
|
12
|
-
}
|
|
15
|
+
}
|
|
16
|
+
@else {
|
|
13
17
|
--ax-color-#{$name}: #{$color};
|
|
14
18
|
}
|
|
15
19
|
}
|
|
16
|
-
}
|
|
20
|
+
}
|
package/src/base/index.scss
CHANGED
|
@@ -7,5 +7,18 @@
|
|
|
7
7
|
:root {
|
|
8
8
|
--ax-base-size: 8px;
|
|
9
9
|
--ax-base-ratio: 5;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
// --ax-default-background: 240, 240, 240;
|
|
11
|
+
// --ax-default-color: 107, 114, 128;
|
|
12
|
+
@include colors($theme-colors);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
html,
|
|
16
|
+
body {
|
|
17
|
+
background-color: rgb(var(--ax-color-default-background));
|
|
18
|
+
color: rgba(var(--ax-color-default-color));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// .ax-dark-mode,
|
|
22
|
+
// .ax-dark-mode * {
|
|
23
|
+
// @include colors($theme-dark-colors);
|
|
24
|
+
// }
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
}
|
|
73
73
|
// normal
|
|
74
74
|
&.ax-primary {
|
|
75
|
-
@apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
|
|
75
|
+
@apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent hover:ax-bg-danger;
|
|
76
76
|
&:hover {
|
|
77
77
|
@apply ax-bg-primary-600;
|
|
78
78
|
}
|
|
@@ -271,13 +271,13 @@
|
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
&.ax-dark-twotone {
|
|
274
|
-
@apply ax-bg-dark-
|
|
274
|
+
@apply ax-bg-dark-300 ax-text-dark-fore ax-border-transparent;
|
|
275
275
|
&:hover {}
|
|
276
276
|
&:focus {
|
|
277
|
-
@apply ax-bg-dark-100
|
|
277
|
+
@apply ax-bg-dark-100;
|
|
278
278
|
}
|
|
279
279
|
&:active {
|
|
280
|
-
@apply ax-bg-dark-200
|
|
280
|
+
@apply ax-bg-dark-200;
|
|
281
281
|
}
|
|
282
282
|
&.ax-state-selected {
|
|
283
283
|
@apply ax-bg-dark-300 ax-text-dark-fore;
|
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
@import "../variables/mixins";
|
|
2
2
|
@layer components {
|
|
3
|
-
|
|
4
|
-
@apply ax-
|
|
3
|
+
ax-check-box {
|
|
4
|
+
@apply ax-justify-start ax-w-max ax-flex;
|
|
5
5
|
@include respond(mobile) {
|
|
6
6
|
@apply ax-text-base;
|
|
7
7
|
}
|
|
8
|
-
.ax-
|
|
8
|
+
.ax-wrapper {
|
|
9
|
+
&.ax-state-disabled {
|
|
10
|
+
@apply ax-cursor-not-allowed ax-opacity-60;
|
|
11
|
+
input[type=checkbox] {
|
|
12
|
+
@apply ax-cursor-not-allowed;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
input[type=checkbox] {
|
|
9
17
|
@apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-default ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
|
|
10
18
|
&:checked,
|
|
11
19
|
&:indeterminate {
|
|
@@ -21,5 +29,11 @@
|
|
|
21
29
|
@apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
|
|
22
30
|
}
|
|
23
31
|
}
|
|
32
|
+
ax-label {
|
|
33
|
+
@apply ax-items-center ax-mb-0 ax-font-semibold ax-text-sm ax-text-light-700;
|
|
34
|
+
label {
|
|
35
|
+
@apply ax-mb-0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
24
38
|
}
|
|
25
39
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@layer components {
|
|
3
3
|
.ax-editor-container {
|
|
4
4
|
height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
5
|
-
@apply ax-flex ax-rounded ax-bg-white ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
|
|
5
|
+
@apply ax-flex ax-rounded ax-bg-white ax-bg-opacity-50 ax-overflow-hidden ax-shadow-sm ax-border ax-border-solid ax-border-default;
|
|
6
6
|
&:focus-within {
|
|
7
7
|
@apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
|
|
8
8
|
}
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
ax-suffix,
|
|
42
|
+
ax-prefix {
|
|
43
43
|
* {
|
|
44
44
|
@apply ax-h-full ax-flex ax-justify-center ax-items-center ax-rounded-none;
|
|
45
45
|
}
|
|
@@ -1,81 +1,115 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
+
|
|
3
|
+
ax-page-footer {
|
|
4
|
+
@apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-default;
|
|
5
|
+
|
|
6
|
+
ax-prefix {
|
|
7
|
+
@apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
ax-suffix {
|
|
11
|
+
@apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
2
15
|
.ax-popup {
|
|
3
16
|
max-height: 98vh;
|
|
4
17
|
min-height: fit-content;
|
|
5
18
|
@apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-default ax-rounded ax-outline-none ax-p-0;
|
|
19
|
+
|
|
6
20
|
header {
|
|
7
21
|
@apply ax-flex ax-justify-between ax-px-3 ax-py-2;
|
|
8
22
|
}
|
|
23
|
+
|
|
9
24
|
main {
|
|
10
25
|
@apply ax-flex-1 ax-overflow-auto;
|
|
11
26
|
}
|
|
27
|
+
|
|
12
28
|
footer {
|
|
13
29
|
@apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-t ax-border-solid ax-border-default;
|
|
14
|
-
|
|
30
|
+
|
|
31
|
+
ax-prefix {
|
|
15
32
|
@apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
|
|
16
33
|
}
|
|
17
|
-
|
|
34
|
+
|
|
35
|
+
ax-suffix {
|
|
18
36
|
@apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
|
|
19
37
|
}
|
|
20
38
|
}
|
|
39
|
+
|
|
21
40
|
header,
|
|
22
41
|
footer {
|
|
23
42
|
>div {
|
|
24
43
|
@apply ax-flex ax-items-center;
|
|
25
44
|
}
|
|
26
45
|
}
|
|
46
|
+
|
|
27
47
|
&.ax-full {
|
|
28
48
|
@apply ax-w-screen ax-h-screen;
|
|
29
49
|
}
|
|
50
|
+
|
|
30
51
|
&.ax-fit {
|
|
31
52
|
width: fit-content;
|
|
32
53
|
}
|
|
54
|
+
|
|
33
55
|
@media all and (min-width: 1280px) {
|
|
34
56
|
&.ax-sm {
|
|
35
57
|
width: 420px !important;
|
|
36
58
|
}
|
|
59
|
+
|
|
37
60
|
&.ax-md {
|
|
38
61
|
width: 680px !important;
|
|
39
62
|
}
|
|
63
|
+
|
|
40
64
|
&.ax-lg {
|
|
41
65
|
width: 1024px !important;
|
|
42
66
|
}
|
|
43
67
|
}
|
|
68
|
+
|
|
44
69
|
@media all and (min-width: 1024px) and (max-width: 1279px) {
|
|
45
70
|
&.ax-sm {
|
|
46
71
|
width: 100vw;
|
|
47
72
|
max-height: 100vh;
|
|
48
73
|
}
|
|
74
|
+
|
|
49
75
|
&.ax-md {
|
|
50
76
|
width: 500px !important;
|
|
51
77
|
}
|
|
78
|
+
|
|
52
79
|
&.ax-lg {
|
|
53
80
|
width: 900px !important;
|
|
54
81
|
}
|
|
55
82
|
}
|
|
83
|
+
|
|
56
84
|
@media all and (min-width: 768px) and (max-width: 1023px) {
|
|
57
85
|
&.ax-sm {
|
|
58
86
|
width: 100vw;
|
|
59
87
|
max-height: 100vh;
|
|
60
88
|
}
|
|
89
|
+
|
|
61
90
|
&.ax-md {
|
|
62
91
|
width: 500px !important;
|
|
63
92
|
}
|
|
93
|
+
|
|
64
94
|
&.ax-lg {
|
|
65
95
|
width: 700px !important;
|
|
66
96
|
}
|
|
67
97
|
}
|
|
98
|
+
|
|
68
99
|
@media all and (min-width: 425px) and (max-width: 767px) {
|
|
69
100
|
&.ax-sm {
|
|
70
101
|
width: 100vw;
|
|
71
102
|
max-height: 100vh;
|
|
72
103
|
}
|
|
104
|
+
|
|
73
105
|
&.ax-md,
|
|
74
106
|
&.ax-lg {
|
|
75
107
|
width: 460px !important;
|
|
76
108
|
}
|
|
77
109
|
}
|
|
110
|
+
|
|
78
111
|
@media all and (min-width: 0px) and (max-width: 424px) {
|
|
112
|
+
|
|
79
113
|
&.ax-sm,
|
|
80
114
|
&.ax-md,
|
|
81
115
|
&.ax-lg {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@import "../variables/mixins";
|
|
2
2
|
@layer components {
|
|
3
|
-
|
|
3
|
+
ax-radio {
|
|
4
4
|
@apply ax-text-sm ax-font-medium ax-text-light-700;
|
|
5
5
|
@include respond(mobile) {
|
|
6
6
|
@apply ax-text-base;
|
|
@@ -15,5 +15,10 @@
|
|
|
15
15
|
@apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
+
ax-label {
|
|
19
|
+
label {
|
|
20
|
+
@apply ax-mb-0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
18
23
|
}
|
|
19
24
|
}
|
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
.ax-items-wrapper {
|
|
6
6
|
@apply ax-flex;
|
|
7
|
+
|
|
7
8
|
ax-tab-item {
|
|
8
9
|
@apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-font-medium ax-flex ax-items-center ax-justify-center;
|
|
9
|
-
height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
10
|
+
min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
10
11
|
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
|
|
11
12
|
|
|
12
13
|
&.ax-state-disabled {
|
|
@@ -18,12 +19,19 @@
|
|
|
18
19
|
&.ax-state-active {
|
|
19
20
|
@apply ax-text-black;
|
|
20
21
|
}
|
|
22
|
+
|
|
23
|
+
ax-prefix {
|
|
24
|
+
@apply ax-flex ax-flex-row ax-pe-2;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
ax-suffix {
|
|
28
|
+
@apply ax-flex ax-flex-row ax-ps-2;
|
|
29
|
+
}
|
|
21
30
|
}
|
|
22
31
|
}
|
|
23
32
|
|
|
24
33
|
&.ax-tabs-fit {
|
|
25
|
-
.ax-items-wrapper
|
|
26
|
-
ax-tab-item {
|
|
34
|
+
.ax-items-wrapper ax-tab-item {
|
|
27
35
|
@apply ax-flex-1;
|
|
28
36
|
}
|
|
29
37
|
}
|
|
@@ -33,12 +41,16 @@
|
|
|
33
41
|
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
|
34
42
|
}
|
|
35
43
|
|
|
36
|
-
&.ax-
|
|
44
|
+
&.ax-vertical {
|
|
37
45
|
.ax-items-wrapper {
|
|
38
|
-
@apply ax-flex-col
|
|
46
|
+
@apply ax-flex-col;
|
|
47
|
+
|
|
48
|
+
ax-tab-item {
|
|
49
|
+
@apply ax-text-center ax-justify-start ax-py-2;
|
|
50
|
+
}
|
|
39
51
|
}
|
|
40
52
|
|
|
41
|
-
&.ax-
|
|
53
|
+
&.ax-look-default {
|
|
42
54
|
@apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
|
|
43
55
|
|
|
44
56
|
ax-tab-item {
|
|
@@ -52,7 +64,7 @@
|
|
|
52
64
|
}
|
|
53
65
|
}
|
|
54
66
|
|
|
55
|
-
&.ax-
|
|
67
|
+
&.ax-look-start-line {
|
|
56
68
|
ax-tab-item {
|
|
57
69
|
@apply ax-border-s-2 ax-border-solid ax-border-default;
|
|
58
70
|
|
|
@@ -70,7 +82,7 @@
|
|
|
70
82
|
}
|
|
71
83
|
}
|
|
72
84
|
|
|
73
|
-
&.ax-
|
|
85
|
+
&.ax-look-end-line {
|
|
74
86
|
ax-tab-item {
|
|
75
87
|
@apply ax-border-e-2 ax-border-solid ax-border-default;
|
|
76
88
|
|
|
@@ -88,7 +100,7 @@
|
|
|
88
100
|
}
|
|
89
101
|
}
|
|
90
102
|
|
|
91
|
-
&.ax-
|
|
103
|
+
&.ax-look-pills {
|
|
92
104
|
ax-tab-item {
|
|
93
105
|
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
94
106
|
|
|
@@ -102,7 +114,7 @@
|
|
|
102
114
|
}
|
|
103
115
|
}
|
|
104
116
|
|
|
105
|
-
&.ax-
|
|
117
|
+
&.ax-look-pills-color {
|
|
106
118
|
ax-tab-item {
|
|
107
119
|
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
108
120
|
|
|
@@ -117,8 +129,8 @@
|
|
|
117
129
|
}
|
|
118
130
|
}
|
|
119
131
|
|
|
120
|
-
&.ax-
|
|
121
|
-
&.ax-
|
|
132
|
+
&.ax-horizontal {
|
|
133
|
+
&.ax-look-default {
|
|
122
134
|
@apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
|
|
123
135
|
|
|
124
136
|
ax-tab-item {
|
|
@@ -141,7 +153,7 @@
|
|
|
141
153
|
}
|
|
142
154
|
}
|
|
143
155
|
|
|
144
|
-
&.ax-
|
|
156
|
+
&.ax-look-start-line {
|
|
145
157
|
ax-tab-item {
|
|
146
158
|
@apply ax-border-t-2 ax-border-solid ax-border-default;
|
|
147
159
|
|
|
@@ -159,7 +171,7 @@
|
|
|
159
171
|
}
|
|
160
172
|
}
|
|
161
173
|
|
|
162
|
-
&.ax-
|
|
174
|
+
&.ax-look-end-line {
|
|
163
175
|
ax-tab-item {
|
|
164
176
|
@apply ax-border-b-2 ax-border-solid ax-border-default;
|
|
165
177
|
|
|
@@ -177,7 +189,7 @@
|
|
|
177
189
|
}
|
|
178
190
|
}
|
|
179
191
|
|
|
180
|
-
&.ax-
|
|
192
|
+
&.ax-look-pills {
|
|
181
193
|
ax-tab-item {
|
|
182
194
|
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
183
195
|
|
|
@@ -191,7 +203,7 @@
|
|
|
191
203
|
}
|
|
192
204
|
}
|
|
193
205
|
|
|
194
|
-
&.ax-
|
|
206
|
+
&.ax-look-pills-color {
|
|
195
207
|
ax-tab-item {
|
|
196
208
|
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
197
209
|
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
@layer utilities {
|
|
2
|
+
@variants responsive {
|
|
3
|
+
.ax-vertical {
|
|
4
|
+
.ax-items-wrapper {
|
|
5
|
+
@apply ax-flex-col;
|
|
6
|
+
|
|
7
|
+
ax-tab-item {
|
|
8
|
+
@apply ax-text-center ax-justify-start ax-py-2;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&.ax-look-default {
|
|
13
|
+
@apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
|
|
14
|
+
|
|
15
|
+
ax-tab-item {
|
|
16
|
+
@apply ax-bg-white ax-border-r ax-border-s-2 ax-border-solid ax-border-transparent;
|
|
17
|
+
|
|
18
|
+
&:hover,
|
|
19
|
+
&.ax-state-active {
|
|
20
|
+
@apply ax-font-medium;
|
|
21
|
+
border-inline-start-color: rgb(var(--ax-color-primary)) !important;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.ax-look-start-line {
|
|
27
|
+
ax-tab-item {
|
|
28
|
+
@apply ax-border-s-2 ax-border-solid ax-border-default;
|
|
29
|
+
|
|
30
|
+
&.ax-state-active {
|
|
31
|
+
@apply ax-border-primary ax-text-primary;
|
|
32
|
+
|
|
33
|
+
&:hover {
|
|
34
|
+
@apply ax-border-primary;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:hover {
|
|
39
|
+
@apply ax-border-primary-300 ax-text-primary;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&.ax-look-end-line {
|
|
45
|
+
ax-tab-item {
|
|
46
|
+
@apply ax-border-e-2 ax-border-solid ax-border-default;
|
|
47
|
+
|
|
48
|
+
&.ax-state-active {
|
|
49
|
+
@apply ax-border-primary ax-text-primary;
|
|
50
|
+
|
|
51
|
+
&:hover {
|
|
52
|
+
@apply ax-border-primary;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&:hover {
|
|
57
|
+
@apply ax-border-primary-300 ax-text-primary;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&.ax-look-pills {
|
|
63
|
+
ax-tab-item {
|
|
64
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
65
|
+
|
|
66
|
+
&:hover {
|
|
67
|
+
@apply ax-bg-light-300 ax-text-light-fore;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&.ax-state-active {
|
|
71
|
+
@apply ax-bg-light-300 ax-text-light-fore;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&.ax-look-pills-color {
|
|
77
|
+
ax-tab-item {
|
|
78
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
79
|
+
|
|
80
|
+
&:hover {
|
|
81
|
+
@apply ax-bg-primary-100 ax-text-primary;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&.ax-state-active {
|
|
85
|
+
@apply ax-bg-primary-100 ax-text-primary;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ax-horizontal {
|
|
92
|
+
&.ax-look-default {
|
|
93
|
+
@apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
|
|
94
|
+
|
|
95
|
+
ax-tab-item {
|
|
96
|
+
@apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid;
|
|
97
|
+
border-bottom-color: transparent !important;
|
|
98
|
+
|
|
99
|
+
&:first-child {
|
|
100
|
+
@apply ax-rounded-l;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&:last-child {
|
|
104
|
+
@apply ax-rounded-r ax-border-r-0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&:hover,
|
|
108
|
+
&.ax-state-active {
|
|
109
|
+
@apply ax-font-medium;
|
|
110
|
+
border-bottom-color: rgb(var(--ax-color-primary)) !important;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&.ax-look-start-line {
|
|
116
|
+
ax-tab-item {
|
|
117
|
+
@apply ax-border-t-2 ax-border-solid ax-border-default;
|
|
118
|
+
|
|
119
|
+
&.ax-state-active {
|
|
120
|
+
@apply ax-border-primary ax-text-primary;
|
|
121
|
+
|
|
122
|
+
&:hover {
|
|
123
|
+
@apply ax-border-primary;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&:hover {
|
|
128
|
+
@apply ax-border-primary-300 ax-text-primary;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&.ax-look-end-line {
|
|
134
|
+
ax-tab-item {
|
|
135
|
+
@apply ax-border-b-2 ax-border-solid ax-border-default;
|
|
136
|
+
|
|
137
|
+
&.ax-state-active {
|
|
138
|
+
@apply ax-border-primary ax-text-primary;
|
|
139
|
+
|
|
140
|
+
&:hover {
|
|
141
|
+
@apply ax-border-primary;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&:hover {
|
|
146
|
+
@apply ax-border-primary-300 ax-text-primary;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&.ax-look-pills {
|
|
152
|
+
ax-tab-item {
|
|
153
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
154
|
+
|
|
155
|
+
&:hover {
|
|
156
|
+
@apply ax-bg-light-300 ax-text-light-fore;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&.ax-state-active {
|
|
160
|
+
@apply ax-bg-light-300 ax-text-light-fore;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&.ax-look-pills-color {
|
|
166
|
+
ax-tab-item {
|
|
167
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
168
|
+
|
|
169
|
+
&:hover {
|
|
170
|
+
@apply ax-bg-primary-100 ax-text-primary;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&.ax-state-active {
|
|
174
|
+
@apply ax-bg-primary-100 ax-text-primary;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
@@ -1,135 +1,2 @@
|
|
|
1
|
-
$theme-colors: (
|
|
2
|
-
|
|
3
|
-
"black": "0, 0, 0",
|
|
4
|
-
"placeholder": "156, 163, 175",
|
|
5
|
-
"border": "209, 213, 219",
|
|
6
|
-
"disabled": "224, 224, 224",
|
|
7
|
-
"disabled-fore": "117, 117, 117",
|
|
8
|
-
"disabled-border": "191, 191, 191",
|
|
9
|
-
"primary": (
|
|
10
|
-
"": "59, 130, 246",
|
|
11
|
-
"fore": "255, 255, 255",
|
|
12
|
-
"50": "239, 246, 255",
|
|
13
|
-
"100": "219, 234, 254",
|
|
14
|
-
"200": "191, 219, 254",
|
|
15
|
-
"300": "147, 197, 253",
|
|
16
|
-
"400": "96, 165, 250",
|
|
17
|
-
"500": "59, 130, 246",
|
|
18
|
-
"600": "37, 99, 235",
|
|
19
|
-
"700": "29 ,78, 216",
|
|
20
|
-
"800": "30, 64 ,175",
|
|
21
|
-
"900": "30, 58, 138",
|
|
22
|
-
),
|
|
23
|
-
"secondary": (
|
|
24
|
-
"": "236, 72, 153",
|
|
25
|
-
"fore": "255, 255, 255",
|
|
26
|
-
"50": "253, 242, 248",
|
|
27
|
-
"100": "252, 231, 243",
|
|
28
|
-
"200": "251, 207, 232",
|
|
29
|
-
"300": "249, 168, 212",
|
|
30
|
-
"400": "244, 114, 182",
|
|
31
|
-
"500": "236, 72, 153",
|
|
32
|
-
"600": "219, 39, 119",
|
|
33
|
-
"700": "190, 24, 93",
|
|
34
|
-
"800": "157,23,77",
|
|
35
|
-
"900": "131, 24, 67",
|
|
36
|
-
),
|
|
37
|
-
"success": (
|
|
38
|
-
"": "76, 175, 80",
|
|
39
|
-
"fore": "255, 255, 255",
|
|
40
|
-
"50": "236, 253, 245",
|
|
41
|
-
"100": "209, 250, 229",
|
|
42
|
-
"200": "167, 243, 208",
|
|
43
|
-
"300": "110, 231, 183",
|
|
44
|
-
"400": "52, 211, 153",
|
|
45
|
-
"500": "16, 185, 129",
|
|
46
|
-
"600": "5, 150, 105",
|
|
47
|
-
"700": "4, 120, 87",
|
|
48
|
-
"800": "6, 95, 70",
|
|
49
|
-
"900": "6, 78, 59",
|
|
50
|
-
),
|
|
51
|
-
"danger": (
|
|
52
|
-
"": "239, 68, 68",
|
|
53
|
-
"fore": "255, 255, 255",
|
|
54
|
-
"50": "254, 242, 242",
|
|
55
|
-
"100": "254, 226, 226",
|
|
56
|
-
"200": "254, 202, 202",
|
|
57
|
-
"300": "252, 165, 165",
|
|
58
|
-
"400": "248, 113, 113",
|
|
59
|
-
"500": "239, 68, 68",
|
|
60
|
-
"600": "220, 38, 38",
|
|
61
|
-
"700": "185, 28, 28",
|
|
62
|
-
"800": "153, 27, 27",
|
|
63
|
-
"900": "127, 29, 29",
|
|
64
|
-
),
|
|
65
|
-
"warning": (
|
|
66
|
-
"": "251, 191, 36",
|
|
67
|
-
"fore": "120, 53, 15",
|
|
68
|
-
"50": "255, 251, 235",
|
|
69
|
-
"100": "254, 243, 199",
|
|
70
|
-
"200": "253, 230, 138",
|
|
71
|
-
"300": "252, 211, 77",
|
|
72
|
-
"400": "251, 191, 36",
|
|
73
|
-
"500": "245, 158, 11",
|
|
74
|
-
"600": "217, 119, 6",
|
|
75
|
-
"700": "180, 83, 9",
|
|
76
|
-
"800": "146, 64, 14",
|
|
77
|
-
"900": "120, 53, 15",
|
|
78
|
-
),
|
|
79
|
-
"info": (
|
|
80
|
-
"": "139, 92, 246",
|
|
81
|
-
"fore": "255, 255, 255",
|
|
82
|
-
"50": "245, 243, 255",
|
|
83
|
-
"100": "237, 233, 254",
|
|
84
|
-
"200": "221, 214,254",
|
|
85
|
-
"300": "196, 181, 253",
|
|
86
|
-
"400": "167, 139, 250",
|
|
87
|
-
"500": "139, 92, 246",
|
|
88
|
-
"600": "124, 58, 237",
|
|
89
|
-
"700": "109, 40, 217",
|
|
90
|
-
"800": "91, 33, 182",
|
|
91
|
-
"900": "76, 29, 149",
|
|
92
|
-
),
|
|
93
|
-
"dark": (
|
|
94
|
-
"": "21, 21, 21",
|
|
95
|
-
"fore": "255, 255, 255",
|
|
96
|
-
"50": "227, 227, 227",
|
|
97
|
-
"100": "185, 185, 185",
|
|
98
|
-
"200": "138, 138, 138",
|
|
99
|
-
"300": "91, 91, 91",
|
|
100
|
-
"400": "56, 56, 56",
|
|
101
|
-
"500": "21, 21, 21",
|
|
102
|
-
"600": "18, 18, 18",
|
|
103
|
-
"700": "15, 15, 15",
|
|
104
|
-
"800": "12, 12, 12",
|
|
105
|
-
"900": "6, 6, 6",
|
|
106
|
-
),
|
|
107
|
-
"light": (
|
|
108
|
-
"": "107, 114, 128",
|
|
109
|
-
"fore": "17, 24, 39",
|
|
110
|
-
"50": "249, 250, 251",
|
|
111
|
-
"100": "243, 244, 246",
|
|
112
|
-
"200": "229, 231, 235",
|
|
113
|
-
"300": "209, 213, 219",
|
|
114
|
-
"400": "156, 163, 175",
|
|
115
|
-
"500": "107, 114, 128",
|
|
116
|
-
"600": "75, 85, 99",
|
|
117
|
-
"700": "55, 65, 81",
|
|
118
|
-
"800": "31, 41, 55",
|
|
119
|
-
"900": "17, 24, 39",
|
|
120
|
-
),
|
|
121
|
-
"gray": (
|
|
122
|
-
"": "107, 114, 128",
|
|
123
|
-
"fore": "17, 24, 39",
|
|
124
|
-
"50": "249, 250, 251",
|
|
125
|
-
"100": "243, 244, 246",
|
|
126
|
-
"200": "229, 231, 235",
|
|
127
|
-
"300": "209, 213, 219",
|
|
128
|
-
"400": "156, 163, 175",
|
|
129
|
-
"500": "107, 114, 128",
|
|
130
|
-
"600": "75, 85, 99",
|
|
131
|
-
"700": "55, 65, 81",
|
|
132
|
-
"800": "31, 41, 55",
|
|
133
|
-
"900": "17, 24, 39",
|
|
134
|
-
),
|
|
135
|
-
);
|
|
1
|
+
$theme-colors: ( "default-background":"255, 255, 255", "default-color":"79 87 94", "white": "255, 255, 255", "black": "0, 0, 0", "placeholder": "156, 163, 175", "border": "209, 213, 219", "disabled": "224, 224, 224", "disabled-fore": "117, 117, 117", "disabled-border": "191, 191, 191", "primary": ( "": "59, 130, 246", "fore": "255, 255, 255", "50": "239, 246, 255", "100": "219, 234, 254", "200": "191, 219, 254", "300": "147, 197, 253", "400": "96, 165, 250", "500": "59, 130, 246", "600": "37, 99, 235", "700": "29 ,78, 216", "800": "30, 64 ,175", "900": "30, 58, 138", ), "secondary": ( "": "236, 72, 153", "fore": "255, 255, 255", "50": "253, 242, 248", "100": "252, 231, 243", "200": "251, 207, 232", "300": "249, 168, 212", "400": "244, 114, 182", "500": "236, 72, 153", "600": "219, 39, 119", "700": "190, 24, 93", "800": "157,23,77", "900": "131, 24, 67", ), "success": ( "": "76, 175, 80", "fore": "255, 255, 255", "50": "236, 253, 245", "100": "209, 250, 229", "200": "167, 243, 208", "300": "110, 231, 183", "400": "52, 211, 153", "500": "16, 185, 129", "600": "5, 150, 105", "700": "4, 120, 87", "800": "6, 95, 70", "900": "6, 78, 59", ), "danger": ( "": "239, 68, 68", "fore": "255, 255, 255", "50": "254, 242, 242", "100": "254, 226, 226", "200": "254, 202, 202", "300": "252, 165, 165", "400": "248, 113, 113", "500": "239, 68, 68", "600": "220, 38, 38", "700": "185, 28, 28", "800": "153, 27, 27", "900": "127, 29, 29", ), "warning": ( "": "251, 191, 36", "fore": "120, 53, 15", "50": "255, 251, 235", "100": "254, 243, 199", "200": "253, 230, 138", "300": "252, 211, 77", "400": "251, 191, 36", "500": "245, 158, 11", "600": "217, 119, 6", "700": "180, 83, 9", "800": "146, 64, 14", "900": "120, 53, 15", ), "info": ( "": "139, 92, 246", "fore": "255, 255, 255", "50": "245, 243, 255", "100": "237, 233, 254", "200": "221, 214,254", "300": "196, 181, 253", "400": "167, 139, 250", "500": "139, 92, 246", "600": "124, 58, 237", "700": "109, 40, 217", "800": "91, 33, 182", "900": "76, 29, 149", ), "dark": ( "": "21, 21, 21", "fore": "255, 255, 255", "50": "227, 227, 227", "100": "185, 185, 185", "200": "138, 138, 138", "300": "91, 91, 91", "400": "56, 56, 56", "500": "21, 21, 21", "600": "18, 18, 18", "700": "15, 15, 15", "800": "12, 12, 12", "900": "6, 6, 6", ), "light": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "249, 250, 251", "100": "243, 244, 246", "200": "229, 231, 235", "300": "209, 213, 219", "400": "156, 163, 175", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), "gray": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "249, 250, 251", "100": "243, 244, 246", "200": "229, 231, 235", "300": "209, 213, 219", "400": "156, 163, 175", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), );
|
|
2
|
+
$theme-dark-colors: ( "default-background":"32, 32, 32", "default-color":"255, 255, 255, 0.87", "white": "32, 32, 32", "black": "255, 255, 255", "placeholder": "156, 163, 175", "border": "209, 213, 219", "disabled": "224, 224, 224", "disabled-fore": "117, 117, 117", "disabled-border": "191, 191, 191", "primary": ( "": "59, 130, 246", "fore": "255, 255, 255", "50": "59, 130, 246", "100": "30, 58, 138", "200": "30, 64 ,175", "300": "29 ,78, 216", "400": "37, 99, 235", "500": "59, 130, 246", "600": "37, 99, 235", "700": "29 ,78, 216", "800": "30, 64 ,175", "900": "30, 58, 138", ), "secondary": ( "": "236, 72, 153", "fore": "255, 255, 255", "50": "236, 72, 153", "100": "131, 24, 67", "200": "157,23,77", "300": "190, 24, 93", "400": "219, 39, 119", "500": "236, 72, 153", "600": "219, 39, 119", "700": "190, 24, 93", "800": "157,23,77", "900": "131, 24, 67", ), "success": ( "": "76, 175, 80", "fore": "255, 255, 255", "50": "16, 185, 129", "100": "6, 78, 59", "200": "6, 95, 70", "300": "4, 120, 87", "400": "5, 150, 105", "500": "16, 185, 129", "600": "5, 150, 105", "700": "4, 120, 87", "800": "6, 95, 70", "900": "6, 78, 59", ), "danger": ( "": "239, 68, 68", "fore": "255, 255, 255", "50": "239, 68, 68", "100": "127, 29, 29", "200": "153, 27, 27", "300": "185, 28, 28", "400": "220, 38, 38", "500": "239, 68, 68", "600": "220, 38, 38", "700": "185, 28, 28", "800": "153, 27, 27", "900": "127, 29, 29", ), "warning": ( "": "251, 191, 36", "fore": "120, 53, 15", "50": "245, 158, 11", "100": "120, 53, 15", "200": "146, 64, 14", "300": "180, 83, 9", "400": "217, 119, 6", "500": "245, 158, 11", "600": "217, 119, 6", "700": "180, 83, 9", "800": "146, 64, 14", "900": "120, 53, 15", ), "info": ( "": "139, 92, 246", "fore": "255, 255, 255", "50": "139, 92, 246", "100": "76, 29, 149", "200": "91, 33, 182", "300": "109, 40, 217", "400": "124, 58, 237", "500": "139, 92, 246", "600": "124, 58, 237", "700": "109, 40, 217", "800": "91, 33, 182", "900": "76, 29, 149", ), "dark": ( "": "21, 21, 21", "fore": "255, 255, 255", "50": "21, 21, 21", "100": "6, 6, 6", "200": "12, 12, 12", "300": "15, 15, 15", "400": "18, 18, 18", "500": "21, 21, 21", "600": "18, 18, 18", "700": "15, 15, 15", "800": "12, 12, 12", "900": "6, 6, 6", ), "light": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "107, 114, 128", "100": "75, 85, 99", "200": "55, 65, 81", "300": "31, 41, 55", "400": "17, 24, 39", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), "gray": ( "": "107, 114, 128", "fore": "17, 24, 39", "50": "107, 114, 128", "100": "17, 24, 39", "200": "31, 41, 55", "300": "55, 65, 81", "400": "75, 85, 99", "500": "107, 114, 128", "600": "75, 85, 99", "700": "55, 65, 81", "800": "31, 41, 55", "900": "17, 24, 39", ), );
|