@sk-web-gui/core 0.1.28 → 0.1.31
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/footer.js +42 -0
- package/src/components/forms.js +6 -1
- package/src/components/header.js +41 -0
- package/src/index.js +22 -0
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.31",
|
|
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": "e74c15103a7c25eca48f5c20e71594057cd73558"
|
|
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
|
});
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
module.exports = Footer = (colors) => ({
|
|
2
|
+
".footer": {
|
|
3
|
+
|
|
4
|
+
"&-innerwrapper": {
|
|
5
|
+
"@apply bg-gray text-white py-12 px-2 sm:p-12": {},
|
|
6
|
+
|
|
7
|
+
...colors.reduce(
|
|
8
|
+
(styles, color) => ({
|
|
9
|
+
...styles,
|
|
10
|
+
[`&[data-color="${color}"]`]: {
|
|
11
|
+
[`@apply bg-${color}`]: {},
|
|
12
|
+
},
|
|
13
|
+
}),
|
|
14
|
+
{}
|
|
15
|
+
),
|
|
16
|
+
},
|
|
17
|
+
|
|
18
|
+
"&-content": {
|
|
19
|
+
"@apply container md:flex items-center justify-center m-auto": {},
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
"&-bottomlinks": {
|
|
23
|
+
"@apply bg-gray-middle text-black py-12 px-2 sm:p-12": {},
|
|
24
|
+
|
|
25
|
+
...colors.reduce(
|
|
26
|
+
(styles, color) => ({
|
|
27
|
+
...styles,
|
|
28
|
+
[`&[data-color="${color}"]`]: {
|
|
29
|
+
[`@apply bg-${color}`]: {},
|
|
30
|
+
},
|
|
31
|
+
}),
|
|
32
|
+
{}
|
|
33
|
+
),
|
|
34
|
+
|
|
35
|
+
"&-container": {
|
|
36
|
+
"@apply container flex items-start md:items-center justify-center m-auto md:space-x-10 flex-col md:flex-row": {},
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
});
|
package/src/components/forms.js
CHANGED
|
@@ -242,7 +242,12 @@ module.exports = Forms = (colors) => ({
|
|
|
242
242
|
},
|
|
243
243
|
|
|
244
244
|
".form-select": {
|
|
245
|
-
|
|
245
|
+
"@apply min-h-[50px] text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke":{},
|
|
246
|
+
"background-image": "none",
|
|
247
|
+
|
|
248
|
+
"&-list": {
|
|
249
|
+
"@apply z-10 absolute w-full bg-white mt-0 border border-gray-stroke border-t-0": {},
|
|
250
|
+
},
|
|
246
251
|
|
|
247
252
|
"&-option": {
|
|
248
253
|
"@apply rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary": {},
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
module.exports = Header = (colors) => ({
|
|
2
|
+
".header": {
|
|
3
|
+
"@apply lg:border-t-8 lg:border-primary lg:static lg:w-auto lg:h-auto lg:min-h-0": {},
|
|
4
|
+
|
|
5
|
+
...colors.reduce(
|
|
6
|
+
(styles, color) => ({
|
|
7
|
+
...styles,
|
|
8
|
+
[`&[data-color="${color}"]`]: {
|
|
9
|
+
[`@apply border-${color}`]: {},
|
|
10
|
+
},
|
|
11
|
+
}),
|
|
12
|
+
{}
|
|
13
|
+
),
|
|
14
|
+
|
|
15
|
+
[`&[data-color="none"]`]: {
|
|
16
|
+
[`@apply border-none`]: {},
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
"&-innerwrapper": {
|
|
20
|
+
"@apply flex lg:h-[112px] shadow-lg relative mx-auto px-7 pt-[22px] pb-[8px] z-10": {},
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
"&-container": {
|
|
24
|
+
"@apply w-full m-auto flex items-center justify-between flex-wrap md:px-lg max-w-[140rem]": {},
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
"&-content": {
|
|
28
|
+
"@apply flex items-center flex-shrink-0 text-black mr-6": {},
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
"&-usermenu": {
|
|
32
|
+
"@apply block flex-shrink lg:flex lg:items-center lg:w-auto": {},
|
|
33
|
+
|
|
34
|
+
"&-content": {
|
|
35
|
+
"@apply flex flex-grow lg:flex justify-end items-center lg:w-auto": {},
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
});
|
package/src/index.js
CHANGED
|
@@ -34,6 +34,8 @@ const UserMenu = require("./components/user-menu");
|
|
|
34
34
|
|
|
35
35
|
const Tag = require("./components/tag");
|
|
36
36
|
const Pagination = require("./components/pagination");
|
|
37
|
+
const Footer = require("./components/footer");
|
|
38
|
+
const Header = require("./components/header");
|
|
37
39
|
|
|
38
40
|
const components = [
|
|
39
41
|
Alert,
|
|
@@ -65,6 +67,8 @@ const components = [
|
|
|
65
67
|
|
|
66
68
|
Tag,
|
|
67
69
|
Pagination,
|
|
70
|
+
Footer,
|
|
71
|
+
Header,
|
|
68
72
|
];
|
|
69
73
|
|
|
70
74
|
const defaultColors = ["primary", "secondary"];
|
|
@@ -122,6 +126,24 @@ module.exports = plugin.withOptions(
|
|
|
122
126
|
h5: { "@apply text-base leading-base": {} },
|
|
123
127
|
h6: { "@apply text-sm leading-sm": {} },
|
|
124
128
|
p: { "@apply my-4": {} },
|
|
129
|
+
|
|
130
|
+
'.text-content': {
|
|
131
|
+
"@apply max-w-[80rem]":{},
|
|
132
|
+
|
|
133
|
+
h1: {
|
|
134
|
+
"@apply mb-md": {},
|
|
135
|
+
|
|
136
|
+
"+ p": {
|
|
137
|
+
"@apply mb-[40px]": {},
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
h2: { "@apply mt-lg": {} },
|
|
141
|
+
h3: { "@apply mt-lg": {} },
|
|
142
|
+
h4: { "@apply mt-lg": {} },
|
|
143
|
+
h5: { "@apply mt-lg": {} },
|
|
144
|
+
h6: { "@apply mt-lg": {} },
|
|
145
|
+
p: { "@apply mt-sm": {} },
|
|
146
|
+
}
|
|
125
147
|
});
|
|
126
148
|
}
|
|
127
149
|
};
|