@policystudio/policy-studio-ui-vue 1.1.90-beta.65 → 1.1.90-ui-update.0
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/dist/css/psui_styles_output.css +620 -617
- package/doc/src/stories/Colors.mdx +224 -37
- package/package.json +2 -2
- package/src/assets/scss/components/PsChips.scss +40 -23
- package/src/components/chips/PsChips.vue +14 -1
- package/tailwind.config.js +18 -22
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Meta } from
|
|
1
|
+
import { Meta } from "@storybook/addon-docs";
|
|
2
2
|
|
|
3
3
|
<Meta title="Colors" />
|
|
4
4
|
|
|
@@ -7,64 +7,251 @@ import {Meta } from '@storybook/addon-docs';
|
|
|
7
7
|
`}</style>
|
|
8
8
|
|
|
9
9
|
# Colors
|
|
10
|
+
|
|
10
11
|
Out colors are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. The support colors are used as a visual support to communicate and provide better and more meaningful feedback.
|
|
11
12
|
|
|
12
13
|
## Blue
|
|
14
|
+
|
|
13
15
|
<div class="psui-flex">
|
|
14
|
-
<div
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<div
|
|
21
|
-
|
|
16
|
+
<div
|
|
17
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy"
|
|
18
|
+
data-to-copy="psui-bg-blue"
|
|
19
|
+
>
|
|
20
|
+
Blue <div>#5094D3</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div
|
|
23
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy"
|
|
24
|
+
data-to-copy="psui-bg-blue-80"
|
|
25
|
+
>
|
|
26
|
+
Blue 80 <div>#002A3A</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div
|
|
29
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy"
|
|
30
|
+
data-to-copy="psui-bg-blue-70"
|
|
31
|
+
>
|
|
32
|
+
Blue 70 <div>#00465F</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div
|
|
35
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy"
|
|
36
|
+
data-to-copy="psui-bg-blue-60"
|
|
37
|
+
>
|
|
38
|
+
Blue 60 <div>#127999</div>
|
|
39
|
+
</div>
|
|
40
|
+
<div
|
|
41
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy"
|
|
42
|
+
data-to-copy="psui-bg-blue-50"
|
|
43
|
+
>
|
|
44
|
+
Blue 50 <div>#64B5CE</div>
|
|
45
|
+
</div>
|
|
46
|
+
<div
|
|
47
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy"
|
|
48
|
+
data-to-copy="psui-bg-blue-20"
|
|
49
|
+
>
|
|
50
|
+
Blue 20 <div>#E0EFF6</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div
|
|
53
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy"
|
|
54
|
+
data-to-copy="psui-bg-blue-10"
|
|
55
|
+
>
|
|
56
|
+
Blue 10 <div>#ECF7FB</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div
|
|
59
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy"
|
|
60
|
+
data-to-copy="psui-bg-white"
|
|
61
|
+
>
|
|
62
|
+
White <div>#FFFFFF</div>
|
|
63
|
+
</div>
|
|
22
64
|
</div>
|
|
23
65
|
|
|
24
66
|
## Gray
|
|
67
|
+
|
|
25
68
|
<div class="psui-flex">
|
|
26
|
-
<div
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<div
|
|
33
|
-
|
|
69
|
+
<div
|
|
70
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy"
|
|
71
|
+
data-to-copy="psui-bg-gray-80"
|
|
72
|
+
>
|
|
73
|
+
Gray 80 <div>#28323B</div>
|
|
74
|
+
</div>
|
|
75
|
+
<div
|
|
76
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy"
|
|
77
|
+
data-to-copy="psui-bg-gray-70"
|
|
78
|
+
>
|
|
79
|
+
Gray 70 <div>#34404A</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div
|
|
82
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy"
|
|
83
|
+
data-to-copy="psui-bg-gray-60"
|
|
84
|
+
>
|
|
85
|
+
Gray 60 <div>#515E6A</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div
|
|
88
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy"
|
|
89
|
+
data-to-copy="psui-bg-gray-50"
|
|
90
|
+
>
|
|
91
|
+
Gray 50 <div>#798490</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div
|
|
94
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy"
|
|
95
|
+
data-to-copy="psui-bg-gray-40"
|
|
96
|
+
>
|
|
97
|
+
Gray 40 <div>#A2ACB7</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div
|
|
100
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy"
|
|
101
|
+
data-to-copy="psui-bg-gray-30"
|
|
102
|
+
>
|
|
103
|
+
Gray 30 <div>#D6DDE5</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div
|
|
106
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy"
|
|
107
|
+
data-to-copy="psui-bg-gray-20"
|
|
108
|
+
>
|
|
109
|
+
Gray 20 <div>#E6ECF2</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div
|
|
112
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy"
|
|
113
|
+
data-to-copy="psui-bg-gray-10"
|
|
114
|
+
>
|
|
115
|
+
Gray 10 <div>#F3F6F9</div>
|
|
116
|
+
</div>
|
|
34
117
|
</div>
|
|
35
118
|
|
|
36
119
|
## Yellow
|
|
120
|
+
|
|
37
121
|
<div class="psui-flex">
|
|
38
|
-
<div
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
122
|
+
<div
|
|
123
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy"
|
|
124
|
+
data-to-copy="psui-bg-yellow-80"
|
|
125
|
+
>
|
|
126
|
+
Yellow 80 <div>#834C0D</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div
|
|
129
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy"
|
|
130
|
+
data-to-copy="psui-bg-yellow-70"
|
|
131
|
+
>
|
|
132
|
+
Yellow 70 <div>#B87305</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div
|
|
135
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy"
|
|
136
|
+
data-to-copy="psui-bg-yellow-20"
|
|
137
|
+
>
|
|
138
|
+
Yellow 20 <div>#EDAB3E</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div
|
|
141
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy"
|
|
142
|
+
data-to-copy="psui-bg-yellow-10"
|
|
143
|
+
>
|
|
144
|
+
Yellow 10 <div>#FDF3E3</div>
|
|
145
|
+
</div>
|
|
42
146
|
</div>
|
|
43
147
|
|
|
44
148
|
## Green
|
|
149
|
+
|
|
45
150
|
<div class="psui-flex">
|
|
46
|
-
<div
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
151
|
+
<div
|
|
152
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy"
|
|
153
|
+
data-to-copy="psui-bg-green-80"
|
|
154
|
+
>
|
|
155
|
+
Green 80 <div>#286943</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div
|
|
158
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy"
|
|
159
|
+
data-to-copy="psui-bg-green-70"
|
|
160
|
+
>
|
|
161
|
+
Green 70 <div>#44A06A</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div
|
|
164
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy"
|
|
165
|
+
data-to-copy="psui-bg-green-20"
|
|
166
|
+
>
|
|
167
|
+
Green 20 <div>#5DB883</div>
|
|
168
|
+
</div>
|
|
169
|
+
<div
|
|
170
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy"
|
|
171
|
+
data-to-copy="psui-bg-green-10"
|
|
172
|
+
>
|
|
173
|
+
Green 10 <div>#DEF8E8</div>
|
|
174
|
+
</div>
|
|
50
175
|
</div>
|
|
51
176
|
|
|
52
177
|
## Red
|
|
178
|
+
|
|
53
179
|
<div class="psui-flex">
|
|
54
|
-
<div
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
180
|
+
<div
|
|
181
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy"
|
|
182
|
+
data-to-copy="psui-bg-red-80"
|
|
183
|
+
>
|
|
184
|
+
Red 80 <div>#832F2E</div>
|
|
185
|
+
</div>
|
|
186
|
+
<div
|
|
187
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy"
|
|
188
|
+
data-to-copy="psui-bg-red-70"
|
|
189
|
+
>
|
|
190
|
+
Red 70 <div>#AA3937</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div
|
|
193
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy"
|
|
194
|
+
data-to-copy="psui-bg-red-20"
|
|
195
|
+
>
|
|
196
|
+
Red 20 <div>#D65C5A</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div
|
|
199
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-15 click-to-copy"
|
|
200
|
+
data-to-copy="psui-bg-red-15"
|
|
201
|
+
>
|
|
202
|
+
Red 15 <div>#EAC5C5</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div
|
|
205
|
+
class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy"
|
|
206
|
+
data-to-copy="psui-bg-red-10"
|
|
207
|
+
>
|
|
208
|
+
Red 10 <div>#FCEBEB</div>
|
|
209
|
+
</div>
|
|
59
210
|
</div>
|
|
60
211
|
|
|
61
212
|
## Chart colors
|
|
213
|
+
|
|
62
214
|
<div class="psui-flex">
|
|
63
|
-
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<div
|
|
215
|
+
<div
|
|
216
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy"
|
|
217
|
+
data-to-copy="psui-bg-sky"
|
|
218
|
+
>
|
|
219
|
+
Sky <div>#518BE2</div>
|
|
220
|
+
</div>
|
|
221
|
+
<div
|
|
222
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy"
|
|
223
|
+
data-to-copy="psui-bg-teal"
|
|
224
|
+
>
|
|
225
|
+
Teal <div>#57C0BA</div>
|
|
226
|
+
</div>
|
|
227
|
+
<div
|
|
228
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy"
|
|
229
|
+
data-to-copy="psui-bg-emerald"
|
|
230
|
+
>
|
|
231
|
+
Emerald <div>#8CCA82</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div
|
|
234
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy"
|
|
235
|
+
data-to-copy="psui-bg-mustard"
|
|
236
|
+
>
|
|
237
|
+
Mustard <div>#E9CF74</div>
|
|
238
|
+
</div>
|
|
239
|
+
<div
|
|
240
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy"
|
|
241
|
+
data-to-copy="psui-bg-orange"
|
|
242
|
+
>
|
|
243
|
+
Orange <div>#FF906D</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div
|
|
246
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy"
|
|
247
|
+
data-to-copy="psui-bg-pink"
|
|
248
|
+
>
|
|
249
|
+
Pink <div>#FF77B8</div>
|
|
250
|
+
</div>
|
|
251
|
+
<div
|
|
252
|
+
class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy"
|
|
253
|
+
data-to-copy="psui-bg-purple"
|
|
254
|
+
>
|
|
255
|
+
Purple <div>#9278C9</div>
|
|
256
|
+
</div>
|
|
70
257
|
</div>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@policystudio/policy-studio-ui-vue",
|
|
3
|
-
"version": "1.1.90-
|
|
3
|
+
"version": "1.1.90-ui-update.0",
|
|
4
4
|
"description": "Policy Studio UI",
|
|
5
5
|
"author": "Policy Studio Team",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"lint": "vue-cli-service lint",
|
|
8
8
|
"build": "tsc -p tsconfig.json && npm run build:tailwind && npm run gulp",
|
|
9
|
-
"full-publish": "npm run lint && npm run build && npm publish --tag
|
|
9
|
+
"full-publish": "npm run lint && npm run build && npm publish --tag ui-update",
|
|
10
10
|
"kill-port": "sh ./scripts/kill-port.sh",
|
|
11
11
|
"build:tailwind": "tailwindcss build -i src/assets/scss/base.scss -o dist/css/psui_styles_output.css -c tailwind.config.js",
|
|
12
12
|
"watch:tailwind": "watch 'npm run build:tailwind' dist/css",
|
|
@@ -7,6 +7,42 @@
|
|
|
7
7
|
@apply psui-icon;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
label {
|
|
11
|
+
@apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small psui-border psui-border-gray-40;
|
|
12
|
+
padding: 5px 6px 5px 8px;
|
|
13
|
+
|
|
14
|
+
&:hover {
|
|
15
|
+
@apply psui-text-blue-60 psui-border-blue-60;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&:focus,
|
|
19
|
+
&:active {
|
|
20
|
+
@apply psui-text-blue-60 psui-bg-blue-20;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&.checked {
|
|
24
|
+
@apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.icon-position-right {
|
|
28
|
+
@apply psui-flex-row-reverse;
|
|
29
|
+
|
|
30
|
+
.psui-el-chips-icon {
|
|
31
|
+
@apply psui-ml-1;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.psui-el-chips-icon {
|
|
38
|
+
@apply psui-icon;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
|
|
41
|
+
&.is-rotated {
|
|
42
|
+
transform: rotate(180deg);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
10
46
|
&.type-checkbox,
|
|
11
47
|
&.type-radio {
|
|
12
48
|
font-size: 14px;
|
|
@@ -18,7 +54,7 @@
|
|
|
18
54
|
|
|
19
55
|
&:checked {
|
|
20
56
|
+ label {
|
|
21
|
-
@apply psui-text-blue-60 psui-bg-blue-20;
|
|
57
|
+
@apply psui-text-blue-60 psui-bg-blue-20 psui-border-blue-60;
|
|
22
58
|
|
|
23
59
|
&.layout-disabled {
|
|
24
60
|
@apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
|
|
@@ -36,8 +72,6 @@
|
|
|
36
72
|
}
|
|
37
73
|
|
|
38
74
|
label {
|
|
39
|
-
@apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
|
|
40
|
-
padding: 4px 8px 4px 6px;
|
|
41
75
|
|
|
42
76
|
&:before {
|
|
43
77
|
@apply psui-inline-block psui-text-gray-30 psui-cursor-pointer psui-transition-all;
|
|
@@ -90,23 +124,6 @@
|
|
|
90
124
|
}
|
|
91
125
|
|
|
92
126
|
&.type-button {
|
|
93
|
-
label {
|
|
94
|
-
@apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
|
|
95
|
-
background-color: #F6F7F8;
|
|
96
|
-
&:hover {
|
|
97
|
-
@apply psui-text-blue-60 psui-bg-white;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
&:focus,
|
|
101
|
-
&:active {
|
|
102
|
-
@apply psui-text-blue-60 psui-bg-blue-20;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&.checked {
|
|
106
|
-
@apply psui-text-blue-60 psui-bg-blue-20;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
}
|
|
110
127
|
|
|
111
128
|
&.layout-with-icon {
|
|
112
129
|
label {
|
|
@@ -156,15 +173,15 @@
|
|
|
156
173
|
}
|
|
157
174
|
|
|
158
175
|
.psui-el-chips-icon {
|
|
159
|
-
font-size:
|
|
176
|
+
font-size: 16px;
|
|
160
177
|
|
|
161
178
|
&-prepend {
|
|
162
|
-
@apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-
|
|
179
|
+
@apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
|
|
163
180
|
}
|
|
164
181
|
}
|
|
165
182
|
|
|
166
183
|
.psui-el-chips-close {
|
|
167
|
-
@apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center
|
|
184
|
+
@apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center;
|
|
168
185
|
}
|
|
169
186
|
}
|
|
170
187
|
}
|
|
@@ -23,11 +23,15 @@
|
|
|
23
23
|
<label
|
|
24
24
|
:disabled="disabled"
|
|
25
25
|
:for="getInputId"
|
|
26
|
-
:class="
|
|
26
|
+
:class="[
|
|
27
|
+
{'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'},
|
|
28
|
+
`icon-position-${iconPosition}`
|
|
29
|
+
]"
|
|
27
30
|
>
|
|
28
31
|
<i
|
|
29
32
|
v-if="icon"
|
|
30
33
|
class="psui-el-chips-icon psui-el-chips-icon-prepend"
|
|
34
|
+
:class="{ 'is-rotated': rotableIcon }"
|
|
31
35
|
>{{ icon }}</i>
|
|
32
36
|
{{ label }}
|
|
33
37
|
<button
|
|
@@ -82,6 +86,15 @@ const props = defineProps({
|
|
|
82
86
|
/**
|
|
83
87
|
* It sets if the button was checked or not checked.
|
|
84
88
|
*/
|
|
89
|
+
iconPosition: {
|
|
90
|
+
type: String,
|
|
91
|
+
default: 'left',
|
|
92
|
+
validator: (value) => ['left', 'right'].includes(value)
|
|
93
|
+
},
|
|
94
|
+
rotableIcon:{
|
|
95
|
+
type: Boolean,
|
|
96
|
+
defaul: false
|
|
97
|
+
},
|
|
85
98
|
checked: {
|
|
86
99
|
type: Boolean,
|
|
87
100
|
default: false,
|
package/tailwind.config.js
CHANGED
|
@@ -13,7 +13,7 @@ export default {
|
|
|
13
13
|
darkMode: 'media', // or 'media' or 'class'
|
|
14
14
|
theme: {
|
|
15
15
|
colors: {
|
|
16
|
-
|
|
16
|
+
white: '#ffffff ',
|
|
17
17
|
'gray-10': '#F3F6F9',
|
|
18
18
|
'gray-20': '#E6ECF2',
|
|
19
19
|
'gray-30': '#D6DDE5',
|
|
@@ -23,11 +23,11 @@ export default {
|
|
|
23
23
|
'gray-70': '#34404A',
|
|
24
24
|
'gray-80': '#28323B',
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
blue: '#5094D3',
|
|
27
27
|
'blue-10': '#ECF7FB',
|
|
28
28
|
'blue-20': '#E0EFF6',
|
|
29
29
|
'blue-50': '#64B5CE',
|
|
30
|
-
'blue-60': '#
|
|
30
|
+
'blue-60': '#127999',
|
|
31
31
|
'blue-70': '#00465F',
|
|
32
32
|
'blue-80': '#002A3A',
|
|
33
33
|
|
|
@@ -109,33 +109,33 @@ export default {
|
|
|
109
109
|
95: '0.95',
|
|
110
110
|
},
|
|
111
111
|
cursor: {
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
grab: 'grab',
|
|
113
|
+
grabbing: 'grabbing',
|
|
114
114
|
},
|
|
115
115
|
zIndex: {
|
|
116
|
-
|
|
116
|
+
15: '15',
|
|
117
117
|
},
|
|
118
118
|
space: {
|
|
119
|
-
|
|
119
|
+
0.5: '0.125rem',
|
|
120
120
|
},
|
|
121
121
|
margin: {
|
|
122
|
-
|
|
122
|
+
0.5: '0.125rem',
|
|
123
123
|
},
|
|
124
124
|
padding: {
|
|
125
|
-
|
|
125
|
+
0.5: '0.125rem',
|
|
126
126
|
},
|
|
127
|
-
inset:{
|
|
127
|
+
inset: {
|
|
128
128
|
'-1': '-1rem',
|
|
129
|
-
'-2': '-0.5rem'
|
|
130
|
-
}
|
|
129
|
+
'-2': '-0.5rem',
|
|
130
|
+
},
|
|
131
131
|
},
|
|
132
132
|
screens: {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
sm: '640px',
|
|
134
|
+
md: '768px',
|
|
135
|
+
lg: '1024px',
|
|
136
|
+
xl: '1280px',
|
|
137
137
|
'2xl': '1536px',
|
|
138
|
-
}
|
|
138
|
+
},
|
|
139
139
|
},
|
|
140
140
|
variants: {
|
|
141
141
|
boxShadow: ['active'],
|
|
@@ -161,11 +161,7 @@ export default {
|
|
|
161
161
|
'disabled',
|
|
162
162
|
'checked',
|
|
163
163
|
],
|
|
164
|
-
borderColor: [
|
|
165
|
-
'disabled',
|
|
166
|
-
'hover',
|
|
167
|
-
'checked'
|
|
168
|
-
],
|
|
164
|
+
borderColor: ['disabled', 'hover', 'checked'],
|
|
169
165
|
space: ['responsive', 'hover', 'focus', 'first'],
|
|
170
166
|
padding: ['responsive', 'hover', 'focus', 'first'],
|
|
171
167
|
extend: {},
|