@acorex/styles 5.0.10 → 5.0.14
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 +37 -0
- package/index.scss +5 -4
- package/package.json +1 -1
- package/src/base/index.scss +13 -7
- package/src/components/_alert.scss +19 -30
- package/src/components/_badge.scss +1 -1
- package/src/components/_button.scss +407 -288
- package/src/components/_calendar.scss +20 -24
- package/src/components/_checkbox.scss +2 -5
- package/src/components/_datapager.scss +1 -1
- package/src/components/_datepicker.scss +1 -1
- package/src/components/_dialog.scss +17 -19
- package/src/components/_dropdown.scss +47 -3
- package/src/components/_editor-container.scss +25 -13
- package/src/components/_label.scss +1 -1
- package/src/components/_list.scss +3 -3
- package/src/components/_popup.scss +3 -3
- package/src/components/_radio.scss +2 -5
- package/src/components/_range-slider.scss +4 -3
- package/src/components/_skeleton.scss +1 -3
- package/src/components/_switch.scss +2 -0
- package/src/components/_tabs.scss +29 -28
- package/src/components/_toast.scss +7 -9
- package/src/utility/_mixins.scss +38 -0
- package/src/utility/index.scss +0 -180
- package/src/variables/_colors.scss +121 -2
- package/src/base/_colors.scss +0 -20
- package/src/variables/_mixins.scss +0 -18
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
@apply ax-flex;
|
|
7
7
|
|
|
8
8
|
ax-tab-item {
|
|
9
|
-
@apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-
|
|
9
|
+
@apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center;
|
|
10
10
|
min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
11
11
|
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
|
|
12
12
|
|
|
@@ -46,19 +46,21 @@
|
|
|
46
46
|
@apply ax-flex-col;
|
|
47
47
|
|
|
48
48
|
ax-tab-item {
|
|
49
|
-
@apply ax-text-center ax-justify-start ax-py-2;
|
|
49
|
+
@apply ax-text-center ax-justify-start ax-py-2 ax-mb-1;
|
|
50
|
+
&:last-child{
|
|
51
|
+
@apply ax-mb-0
|
|
52
|
+
}
|
|
50
53
|
}
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
&.ax-look-default {
|
|
54
|
-
@apply ax-border ax-border-solid ax-border-
|
|
57
|
+
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-controll ;
|
|
55
58
|
|
|
56
59
|
ax-tab-item {
|
|
57
|
-
@apply ax-bg-white ax-border-
|
|
60
|
+
@apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0 dark:ax-text-light-200;
|
|
58
61
|
|
|
59
62
|
&:hover,
|
|
60
63
|
&.ax-state-active {
|
|
61
|
-
@apply ax-font-medium;
|
|
62
64
|
border-inline-start-color: rgb(var(--ax-color-primary)) !important;
|
|
63
65
|
}
|
|
64
66
|
}
|
|
@@ -66,7 +68,7 @@
|
|
|
66
68
|
|
|
67
69
|
&.ax-look-start-line {
|
|
68
70
|
ax-tab-item {
|
|
69
|
-
@apply ax-border-s-2 ax-border-solid ax-border-
|
|
71
|
+
@apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
|
|
70
72
|
|
|
71
73
|
&.ax-state-active {
|
|
72
74
|
@apply ax-border-primary ax-text-primary;
|
|
@@ -77,14 +79,14 @@
|
|
|
77
79
|
}
|
|
78
80
|
|
|
79
81
|
&:hover {
|
|
80
|
-
@apply ax-border-primary
|
|
82
|
+
@apply ax-border-primary ax-text-primary;
|
|
81
83
|
}
|
|
82
84
|
}
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
&.ax-look-end-line {
|
|
86
88
|
ax-tab-item {
|
|
87
|
-
@apply ax-border-e-2 ax-border-solid ax-border-
|
|
89
|
+
@apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
|
|
88
90
|
|
|
89
91
|
&.ax-state-active {
|
|
90
92
|
@apply ax-border-primary ax-text-primary;
|
|
@@ -95,35 +97,35 @@
|
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
&:hover {
|
|
98
|
-
@apply ax-border-primary
|
|
100
|
+
@apply ax-border-primary ax-text-primary;
|
|
99
101
|
}
|
|
100
102
|
}
|
|
101
103
|
}
|
|
102
104
|
|
|
103
105
|
&.ax-look-pills {
|
|
104
106
|
ax-tab-item {
|
|
105
|
-
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
107
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
|
|
106
108
|
|
|
107
109
|
&:hover {
|
|
108
|
-
@apply ax-bg-light-300 ax-text-light-fore;
|
|
110
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-100;
|
|
109
111
|
}
|
|
110
112
|
|
|
111
113
|
&.ax-state-active {
|
|
112
|
-
@apply ax-bg-light-300 ax-text-light-fore;
|
|
114
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50;
|
|
113
115
|
}
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
|
|
117
119
|
&.ax-look-pills-color {
|
|
118
120
|
ax-tab-item {
|
|
119
|
-
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
121
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
|
|
120
122
|
|
|
121
123
|
&:hover {
|
|
122
|
-
@apply ax-bg-primary-100 ax-text-primary;
|
|
124
|
+
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-light-100;
|
|
123
125
|
}
|
|
124
126
|
|
|
125
127
|
&.ax-state-active {
|
|
126
|
-
@apply ax-bg-primary-100 ax-text-primary;
|
|
128
|
+
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-light-50;
|
|
127
129
|
}
|
|
128
130
|
}
|
|
129
131
|
}
|
|
@@ -131,10 +133,10 @@
|
|
|
131
133
|
|
|
132
134
|
&.ax-horizontal {
|
|
133
135
|
&.ax-look-default {
|
|
134
|
-
@apply ax-border ax-border-solid ax-border-
|
|
136
|
+
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-controll;
|
|
135
137
|
|
|
136
138
|
ax-tab-item {
|
|
137
|
-
@apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid;
|
|
139
|
+
@apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 ax-controll dark:ax-text-light-200;
|
|
138
140
|
border-bottom-color: transparent !important;
|
|
139
141
|
|
|
140
142
|
&:first-child {
|
|
@@ -147,7 +149,6 @@
|
|
|
147
149
|
|
|
148
150
|
&:hover,
|
|
149
151
|
&.ax-state-active {
|
|
150
|
-
@apply ax-font-medium;
|
|
151
152
|
border-bottom-color: rgb(var(--ax-color-primary)) !important;
|
|
152
153
|
}
|
|
153
154
|
}
|
|
@@ -155,7 +156,7 @@
|
|
|
155
156
|
|
|
156
157
|
&.ax-look-start-line {
|
|
157
158
|
ax-tab-item {
|
|
158
|
-
@apply ax-border-t-2 ax-border-solid ax-border-
|
|
159
|
+
@apply ax-border-t-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
|
|
159
160
|
|
|
160
161
|
&.ax-state-active {
|
|
161
162
|
@apply ax-border-primary ax-text-primary;
|
|
@@ -166,14 +167,14 @@
|
|
|
166
167
|
}
|
|
167
168
|
|
|
168
169
|
&:hover {
|
|
169
|
-
@apply ax-border-primary
|
|
170
|
+
@apply ax-border-primary ax-text-primary;
|
|
170
171
|
}
|
|
171
172
|
}
|
|
172
173
|
}
|
|
173
174
|
|
|
174
175
|
&.ax-look-end-line {
|
|
175
176
|
ax-tab-item {
|
|
176
|
-
@apply ax-border-b-2 ax-border-solid ax-border-
|
|
177
|
+
@apply ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
|
|
177
178
|
|
|
178
179
|
&.ax-state-active {
|
|
179
180
|
@apply ax-border-primary ax-text-primary;
|
|
@@ -184,35 +185,35 @@
|
|
|
184
185
|
}
|
|
185
186
|
|
|
186
187
|
&:hover {
|
|
187
|
-
@apply ax-border-primary
|
|
188
|
+
@apply ax-border-primary ax-text-primary;
|
|
188
189
|
}
|
|
189
190
|
}
|
|
190
191
|
}
|
|
191
192
|
|
|
192
193
|
&.ax-look-pills {
|
|
193
194
|
ax-tab-item {
|
|
194
|
-
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
195
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
|
|
195
196
|
|
|
196
197
|
&:hover {
|
|
197
|
-
@apply ax-bg-light-300 ax-text-light-fore;
|
|
198
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
|
|
198
199
|
}
|
|
199
200
|
|
|
200
201
|
&.ax-state-active {
|
|
201
|
-
@apply ax-bg-light-300 ax-text-light-fore;
|
|
202
|
+
@apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
|
|
202
203
|
}
|
|
203
204
|
}
|
|
204
205
|
}
|
|
205
206
|
|
|
206
207
|
&.ax-look-pills-color {
|
|
207
208
|
ax-tab-item {
|
|
208
|
-
@apply ax-text-light-fore ax-mr-1 ax-rounded;
|
|
209
|
+
@apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
|
|
209
210
|
|
|
210
211
|
&:hover {
|
|
211
|
-
@apply ax-bg-primary-100 ax-text-primary;
|
|
212
|
+
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-primary-50 dark:ax-bg-primary;
|
|
212
213
|
}
|
|
213
214
|
|
|
214
215
|
&.ax-state-active {
|
|
215
|
-
@apply ax-bg-primary-100 ax-text-primary;
|
|
216
|
+
@apply ax-bg-primary-100 ax-text-primary dark:ax-text-primary-50 dark:ax-bg-primary;
|
|
216
217
|
}
|
|
217
218
|
}
|
|
218
219
|
}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
@import "../variables/mixins";
|
|
2
1
|
@layer components {
|
|
3
2
|
.ax-toast {
|
|
4
|
-
@apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-
|
|
5
|
-
|
|
6
|
-
@
|
|
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 ax-surface;
|
|
4
|
+
|
|
5
|
+
@screen sm {
|
|
7
6
|
width: 98vw;
|
|
8
7
|
}
|
|
9
|
-
@
|
|
10
|
-
width:
|
|
8
|
+
@screen md {
|
|
9
|
+
width: max(20vw, 350px);
|
|
11
10
|
}
|
|
12
11
|
.ax-toast-icon-side {
|
|
13
12
|
@apply ax-col-span-1 ax-h-full;
|
|
@@ -15,10 +14,10 @@
|
|
|
15
14
|
.ax-toast-content-side {
|
|
16
15
|
@apply ax-col-span-10;
|
|
17
16
|
.ax-toast-title {
|
|
18
|
-
@apply ax-text-sm ax-font-semibold ax-text-light-700;
|
|
17
|
+
@apply ax-text-sm ax-font-semibold ax-text-light-700 dark:ax-text-light-100;
|
|
19
18
|
}
|
|
20
19
|
.ax-toast-content {
|
|
21
|
-
@apply ax-py-2 ax-text-sm ax-text-light-400;
|
|
20
|
+
@apply ax-py-2 ax-text-sm ax-text-light-400 dark:ax-text-light-200;
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
.ax-toast-dismiss-icon {
|
|
@@ -48,7 +47,6 @@
|
|
|
48
47
|
}
|
|
49
48
|
}
|
|
50
49
|
&.ax-success {
|
|
51
|
-
@apply ax-bg-white ax-text-light-500;
|
|
52
50
|
.ax-toast-icon {
|
|
53
51
|
@apply ax-text-success;
|
|
54
52
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@mixin respond($breakpoint) {
|
|
2
|
+
// $breakpoint is simply a variable that can have several values
|
|
3
|
+
|
|
4
|
+
@if $breakpoint == tablet {
|
|
5
|
+
// here `laptop` is the value of $breakpoint
|
|
6
|
+
// when call laptop, we mean the following piece of code
|
|
7
|
+
|
|
8
|
+
@media only screen and (max-width: 600px) {
|
|
9
|
+
@content;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@if $breakpoint == mobile {
|
|
14
|
+
@media only screen and (max-width: 480px) {
|
|
15
|
+
@content;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@mixin colors($array) {
|
|
21
|
+
@each $name,
|
|
22
|
+
$color in $array {
|
|
23
|
+
@if (type-of($color)=="map") {
|
|
24
|
+
@each $subname,
|
|
25
|
+
$variant in $color {
|
|
26
|
+
@if ($subname !="") {
|
|
27
|
+
--ax-color-#{$name}-#{$subname}: #{$variant};
|
|
28
|
+
}
|
|
29
|
+
@else {
|
|
30
|
+
--ax-color-#{$name}: #{$variant};
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
@else {
|
|
35
|
+
--ax-color-#{$name}: #{$color};
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
package/src/utility/index.scss
CHANGED
|
@@ -1,180 +0,0 @@
|
|
|
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,2 +1,121 @@
|
|
|
1
|
-
$theme-colors: (
|
|
2
|
-
|
|
1
|
+
$theme-colors: (
|
|
2
|
+
"white": "255 255 255",
|
|
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
|
+
);
|
package/src/base/_colors.scss
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
@import "../variables/colors";
|
|
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 !="") {
|
|
9
|
-
--ax-color-#{$name}-#{$subname}: #{$variant};
|
|
10
|
-
}
|
|
11
|
-
@else {
|
|
12
|
-
--ax-color-#{$name}: #{$variant};
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
@else {
|
|
17
|
-
--ax-color-#{$name}: #{$color};
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
@mixin respond($breakpoint) {
|
|
2
|
-
// $breakpoint is simply a variable that can have several values
|
|
3
|
-
|
|
4
|
-
@if $breakpoint == tablet {
|
|
5
|
-
// here `laptop` is the value of $breakpoint
|
|
6
|
-
// when call laptop, we mean the following piece of code
|
|
7
|
-
|
|
8
|
-
@media only screen and (max-width: 600px) {
|
|
9
|
-
@content;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@if $breakpoint == mobile {
|
|
14
|
-
@media only screen and (max-width: 480px) {
|
|
15
|
-
@content;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|