@sk-web-gui/core 0.1.26 → 0.1.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.
- package/package.json +2 -2
- package/src/components/accordion.js +74 -35
- package/src/components/button.js +29 -16
- package/src/components/user-menu.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sk-web-gui/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.29",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"files": [
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"postcss-import": "^14.0.2",
|
|
32
32
|
"tailwindcss": "^2.2.4"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "a97edb3be993f7f92778775eb5a1e1bb46c160f6"
|
|
35
35
|
}
|
|
@@ -1,47 +1,86 @@
|
|
|
1
|
-
module.exports = Accordion = () => ({
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
module.exports = Accordion = (colors) => ({
|
|
2
|
+
".accordion": {
|
|
3
|
+
"&-header": {
|
|
4
|
+
"@apply flex flex-col text-left": {},
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
'[aria-expanded="true"] &': {
|
|
7
|
+
"@apply bg-hover": {},
|
|
8
|
+
},
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
"&-icon": {
|
|
11
|
+
"@apply ml-auto !text-2xl": {},
|
|
12
|
+
},
|
|
13
|
+
},
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
},
|
|
15
|
+
"&-is-open &-header": {
|
|
16
|
+
"@apply bg-hover": {},
|
|
17
|
+
},
|
|
16
18
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
"&-toggle": {
|
|
20
|
+
"@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-lg my-md": {},
|
|
21
|
+
fontWeight: "bold",
|
|
22
|
+
//"@apply focus-visible:shadow shadow-lg": {},
|
|
23
|
+
"&:focus-visible": {
|
|
24
|
+
boxShadow: "0 0 0 0.4rem #fff!important",
|
|
25
|
+
outline: "0",
|
|
26
|
+
//"@apply border-4": {},
|
|
27
|
+
},
|
|
28
|
+
".accordion-subtitle": {
|
|
29
|
+
"@apply m-0 text-sm font-normal": {},
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
"&-body": {
|
|
34
|
+
"@apply h-0 overflow-hidden m-lg": {},
|
|
35
|
+
transitionProperty: "visibility, height, padding, margin",
|
|
36
|
+
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
37
|
+
transitionDuration: "180ms",
|
|
38
|
+
|
|
39
|
+
'&[aria-hidden="true"], &[data-hidden="true"]': {
|
|
40
|
+
"@apply my-0 invisible": {},
|
|
41
|
+
},
|
|
20
42
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
43
|
+
'&[aria-hidden="false"], &[data-hidden="false"]': {
|
|
44
|
+
"@apply block h-auto visible": {},
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
"&-solid": {
|
|
49
|
+
"@apply border border-primary": {},
|
|
50
|
+
".accordion-header": {
|
|
51
|
+
"@apply bg-primary text-white": {},
|
|
52
|
+
|
|
53
|
+
'[aria-expanded="true"] &': {
|
|
54
|
+
"@apply bg-hover": {},
|
|
30
55
|
},
|
|
56
|
+
},
|
|
57
|
+
},
|
|
31
58
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
59
|
+
"&-is-open": {
|
|
60
|
+
"@apply border border-gray-stroke": {},
|
|
61
|
+
"& .accordion-header": {
|
|
62
|
+
"@apply bg-hover text-white": {},
|
|
63
|
+
},
|
|
64
|
+
},
|
|
37
65
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
66
|
+
"&-outline": {
|
|
67
|
+
"@apply border border-gray-stroke": {},
|
|
68
|
+
".accordion-body": {
|
|
69
|
+
"@apply mt-0": {},
|
|
70
|
+
},
|
|
71
|
+
".accordion-toggle": {
|
|
72
|
+
"&:focus-visible": {
|
|
73
|
+
boxShadow: "0 0 0 0.4rem #4b4b4b!important",
|
|
74
|
+
outline: "0",
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
".accordion-header": {
|
|
78
|
+
"@apply bg-transparent text-body": {},
|
|
41
79
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
},
|
|
80
|
+
'[aria-expanded="true"] &': {
|
|
81
|
+
"@apply bg-hover": {},
|
|
45
82
|
},
|
|
83
|
+
},
|
|
46
84
|
},
|
|
85
|
+
},
|
|
47
86
|
});
|
package/src/components/button.js
CHANGED
|
@@ -2,10 +2,10 @@ function buttonSolid(colors) {
|
|
|
2
2
|
return {
|
|
3
3
|
"&-solid": {
|
|
4
4
|
//"@apply text-": {},
|
|
5
|
-
"@apply border border-gray-stroke": {},
|
|
6
|
-
"@apply text-
|
|
5
|
+
"@apply font-semibold border border-gray-stroke": {},
|
|
6
|
+
"@apply text-body bg-white": {},
|
|
7
7
|
/* hover */
|
|
8
|
-
"@apply hover:text-white hover:bg-hover": {},
|
|
8
|
+
"@apply hover:text-white hover:bg-hover hover:border-primary-active": {},
|
|
9
9
|
/* focus */
|
|
10
10
|
"@apply focus-visible:z-base": {},
|
|
11
11
|
"@apply focus-visible:border-primary": {},
|
|
@@ -24,13 +24,6 @@ function buttonSolid(colors) {
|
|
|
24
24
|
/* dark active */
|
|
25
25
|
"@apply dark:active:bg-neutral-900 dark:active:border-neutral-600": {},
|
|
26
26
|
|
|
27
|
-
/* "&[data-color=\"primary\"]": {
|
|
28
|
-
"@apply text-white bg-primary": {},
|
|
29
|
-
"@apply hover:text-white hover:bg-hover": {},
|
|
30
|
-
"@apply active:text-white active:bg-hover": {},
|
|
31
|
-
"@apply focus-visible:ring-4 focus-visible:ring-black": {},
|
|
32
|
-
}, */
|
|
33
|
-
|
|
34
27
|
...colors.reduce(
|
|
35
28
|
(styles, color) => ({
|
|
36
29
|
...styles,
|
|
@@ -65,6 +58,16 @@ function buttonSolid(colors) {
|
|
|
65
58
|
{}
|
|
66
59
|
),
|
|
67
60
|
|
|
61
|
+
"&[data-color='primary']": {
|
|
62
|
+
"@apply border-primary hover:border-primary-active": {},
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
"&.btn": {
|
|
66
|
+
"&-disabled": {
|
|
67
|
+
"@apply disabled:border-gray-stroke hover:border-gray-stroke": {},
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
|
|
68
71
|
},
|
|
69
72
|
};
|
|
70
73
|
}
|
|
@@ -72,10 +75,10 @@ function buttonSolid(colors) {
|
|
|
72
75
|
function buttonOutline(colors) {
|
|
73
76
|
return {
|
|
74
77
|
"&-outline": {
|
|
75
|
-
"@apply border border-
|
|
78
|
+
"@apply font-semibold border border-gray-stroke": {},
|
|
76
79
|
"@apply text-body bg-transparent": {},
|
|
77
80
|
/* hover */
|
|
78
|
-
"@apply hover:bg-
|
|
81
|
+
"@apply hover:text-white hover:bg-primary-active hover:border-primary-active": {},
|
|
79
82
|
/* focus */
|
|
80
83
|
"@apply focus-visible:z-base": {},
|
|
81
84
|
"@apply focus-visible:border-primary-500": {},
|
|
@@ -99,7 +102,7 @@ function buttonOutline(colors) {
|
|
|
99
102
|
[`@apply border-current`]: {},
|
|
100
103
|
[`@apply text-${color}-600 bg-transparent`]: {},
|
|
101
104
|
/* hover */
|
|
102
|
-
[`@apply hover:bg-${color}-
|
|
105
|
+
[`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},
|
|
103
106
|
/* focus */
|
|
104
107
|
[`@apply focus-visible:border-${color}-500`]: {},
|
|
105
108
|
[`@apply focus-visible:ring-${color}-500`]: {},
|
|
@@ -122,6 +125,13 @@ function buttonOutline(colors) {
|
|
|
122
125
|
}),
|
|
123
126
|
{}
|
|
124
127
|
),
|
|
128
|
+
|
|
129
|
+
"&.btn": {
|
|
130
|
+
"&-disabled": {
|
|
131
|
+
"@apply disabled:border-gray-stroke hover:border-gray-stroke": {},
|
|
132
|
+
},
|
|
133
|
+
},
|
|
134
|
+
|
|
125
135
|
},
|
|
126
136
|
};
|
|
127
137
|
}
|
|
@@ -252,7 +262,7 @@ module.exports = Button = (colors) => ({
|
|
|
252
262
|
".btn": {
|
|
253
263
|
"@apply relative": {},
|
|
254
264
|
"@apply m-0": {},
|
|
255
|
-
"@apply inline-flex items-center justify-center flex-shrink-0 align-middle": {},
|
|
265
|
+
"@apply rounded-lg inline-flex items-center justify-center flex-shrink-0 align-middle": {},
|
|
256
266
|
"@apply font-medium leading-tight": {},
|
|
257
267
|
transitionProperty: "background-color, border-color, color, fill, stroke, box-shadow",
|
|
258
268
|
"@apply duration-75 ease-out": {},
|
|
@@ -260,7 +270,10 @@ module.exports = Button = (colors) => ({
|
|
|
260
270
|
"@apply focus-visible:outline-none": {},
|
|
261
271
|
|
|
262
272
|
padding: "1.2rem 3.2rem",
|
|
263
|
-
|
|
273
|
+
|
|
274
|
+
"&[data-rounded='true']": {
|
|
275
|
+
borderRadius: "3.2rem"
|
|
276
|
+
},
|
|
264
277
|
|
|
265
278
|
// sizing
|
|
266
279
|
"&-sm": {
|
|
@@ -282,7 +295,7 @@ module.exports = Button = (colors) => ({
|
|
|
282
295
|
|
|
283
296
|
"&-disabled": {
|
|
284
297
|
"@apply disabled:shadow-none disabled:cursor-not-allowed": {},
|
|
285
|
-
"@apply disabled:text-
|
|
298
|
+
"@apply disabled:text-gray disabled:bg-gray-light !important": {},
|
|
286
299
|
},
|
|
287
300
|
|
|
288
301
|
// variants
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
module.exports = UserMenu = (colors) => ({
|
|
2
2
|
".usermenu": {
|
|
3
3
|
// "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
|
|
4
|
-
"@apply text-body
|
|
4
|
+
"@apply text-body": {},
|
|
5
5
|
// "@apply ": {},
|
|
6
6
|
"&-is-open": {
|
|
7
7
|
// "@apply border-2 border-gray-300 border-solid rounded": {},
|