@sk-web-gui/core 0.1.70 → 0.1.72
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/badge.js +189 -30
- package/src/components/forms.js +13 -2
- package/src/components/pagination.js +5 -4
- package/src/components/profile-picture.js +14 -0
- package/src/components/profile.js +33 -0
- package/src/components/side-menu.js +13 -141
- package/src/index.js +8 -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.72",
|
|
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": "117ee0f6d06650b88bbece69606efdcd4d8be836"
|
|
35
35
|
}
|
package/src/components/badge.js
CHANGED
|
@@ -1,60 +1,219 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
'
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
'@apply text-body bg-neutral-200 border border-transparent': {},
|
|
7
|
-
'@apply dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
1
|
+
function badgeSolid(colors) {
|
|
2
|
+
return {
|
|
3
|
+
'&-solid': {
|
|
4
|
+
'@apply border-2 border-white box-border': {},
|
|
5
|
+
'@apply text-white': {},
|
|
8
6
|
|
|
9
7
|
...colors.reduce(
|
|
10
8
|
(styles, color) => ({
|
|
11
9
|
...styles,
|
|
12
10
|
[`&[data-color="${color}"]`]: {
|
|
13
|
-
[`@apply
|
|
14
|
-
[`@apply
|
|
15
|
-
'@apply dark:bg-opacity-15': {},
|
|
11
|
+
//[`@apply border-${color}`]: {},
|
|
12
|
+
[`@apply text-white bg-${color}`]: {},
|
|
16
13
|
},
|
|
17
14
|
}),
|
|
18
15
|
{}
|
|
19
16
|
),
|
|
17
|
+
|
|
18
|
+
"&[data-color='primary']": {
|
|
19
|
+
'@apply bg-primary': {},
|
|
20
|
+
},
|
|
21
|
+
"&[data-color='warning']": {
|
|
22
|
+
'@apply bg-warning': {},
|
|
23
|
+
},
|
|
24
|
+
"&[data-color='error']": {
|
|
25
|
+
'@apply bg-error': {},
|
|
26
|
+
},
|
|
27
|
+
"&[data-color='neutral']": {
|
|
28
|
+
'@apply bg-neutral-400': {},
|
|
29
|
+
},
|
|
30
|
+
|
|
20
31
|
},
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function badgeOutline(colors) {
|
|
36
|
+
return {
|
|
37
|
+
'&-outline': {
|
|
38
|
+
'@apply border border-gray-stroke': {},
|
|
39
|
+
'@apply text-body bg-transparent': {},
|
|
21
40
|
|
|
22
|
-
'&-solid': {
|
|
23
|
-
'@apply text-white bg-neutral-500 border border-transparent': {},
|
|
24
|
-
'@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
25
41
|
...colors.reduce(
|
|
26
42
|
(styles, color) => ({
|
|
27
43
|
...styles,
|
|
28
44
|
[`&[data-color="${color}"]`]: {
|
|
29
|
-
[`@apply
|
|
30
|
-
[`@apply
|
|
31
|
-
|
|
32
|
-
'@apply dark:border-opacity-40': {},
|
|
45
|
+
[`@apply border-current`]: {},
|
|
46
|
+
[`@apply text-${color}`]: {},
|
|
47
|
+
|
|
33
48
|
},
|
|
34
49
|
}),
|
|
35
50
|
{}
|
|
36
51
|
),
|
|
52
|
+
|
|
53
|
+
'&.badge': {
|
|
54
|
+
'&-disabled': {
|
|
55
|
+
'@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
|
|
56
|
+
'&.active': {
|
|
57
|
+
'@apply border-gray-stroke': {},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
"&[data-color='primary']": {
|
|
64
|
+
'@apply border-primary': {},
|
|
65
|
+
'@apply text-primary': {},
|
|
66
|
+
},
|
|
67
|
+
"&[data-color='warning']": {
|
|
68
|
+
'@apply border-warning': {},
|
|
69
|
+
'@apply text-warning': {},
|
|
70
|
+
},
|
|
71
|
+
"&[data-color='error']": {
|
|
72
|
+
'@apply border-error': {},
|
|
73
|
+
'@apply text-error': {},
|
|
74
|
+
},
|
|
75
|
+
"&[data-color='neutral']": {
|
|
76
|
+
'@apply border-neutral-300': {},
|
|
77
|
+
'@apply border-neutral-300': {},
|
|
78
|
+
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
module.exports = badge = (colors) => ({
|
|
86
|
+
'.badge': {
|
|
87
|
+
'@apply relative': {},
|
|
88
|
+
'@apply m-0': {},
|
|
89
|
+
'@apply inline-flex items-center justify-center content-center align-middle': {},
|
|
90
|
+
'@apply font-sans leading-none': {},
|
|
91
|
+
|
|
92
|
+
'&-fullrounded': {
|
|
93
|
+
'@apply rounded-full': {},
|
|
37
94
|
},
|
|
38
95
|
|
|
96
|
+
//rounding
|
|
97
|
+
'&-roundedcorners-md': {
|
|
98
|
+
'@apply rounded-3xl px-sm': {},
|
|
99
|
+
},
|
|
100
|
+
|
|
101
|
+
'&-roundedcorners-lg': {
|
|
102
|
+
'@apply rounded-3xl px-sm': {},
|
|
103
|
+
},
|
|
104
|
+
|
|
105
|
+
// sizing
|
|
39
106
|
'&-sm': {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
107
|
+
'@apply text-opacity-0 text-[0rem] overflow-hidden rounded-full': {},
|
|
108
|
+
minHeight: '10px',
|
|
109
|
+
maxHeight: '10px',
|
|
110
|
+
minWidth: '10px',
|
|
111
|
+
|
|
112
|
+
'&.noborder': {
|
|
113
|
+
'@apply border-none': {},
|
|
114
|
+
minHeight: '6px',
|
|
115
|
+
maxHeight: '6px',
|
|
116
|
+
minWidth: '6px',
|
|
117
|
+
}
|
|
45
118
|
},
|
|
46
119
|
|
|
47
120
|
'&-md': {
|
|
48
|
-
'@apply
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
121
|
+
'@apply text-xs font-bold': {},
|
|
122
|
+
minHeight: '24px',
|
|
123
|
+
maxHeight: '24px',
|
|
124
|
+
minWidth: '24px',
|
|
125
|
+
|
|
126
|
+
'&.noborder': {
|
|
127
|
+
'@apply border-none': {},
|
|
128
|
+
minHeight: '20px',
|
|
129
|
+
maxHeight: '20px',
|
|
130
|
+
minWidth: '20px',
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
'&-lg': {
|
|
136
|
+
'@apply text-sm font-bold': {},
|
|
137
|
+
minHeight: '28px',
|
|
138
|
+
maxHeight: '28px',
|
|
139
|
+
minWidth: '28px',
|
|
140
|
+
|
|
141
|
+
'&.noborder': {
|
|
142
|
+
'@apply border-none': {},
|
|
143
|
+
minHeight: '24px',
|
|
144
|
+
maxHeight: '24px',
|
|
145
|
+
minWidth: '24px',
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
},
|
|
149
|
+
|
|
150
|
+
'&-standard-sm': {
|
|
151
|
+
'@apply right-[-4px] self-center' : {},
|
|
152
|
+
'&.noborder': {
|
|
153
|
+
'@apply right-[-5px]': {},
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
'&-standard-md': {
|
|
157
|
+
'@apply right-[-4px] self-center': {},
|
|
158
|
+
'&.noborder': {
|
|
159
|
+
'@apply right-[-5px]': {},
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
'&-standard-lg': {
|
|
163
|
+
'@apply right-[-4px] self-center': {},
|
|
164
|
+
'&.noborder': {
|
|
165
|
+
'@apply right-[-5px]': {},
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
|
|
169
|
+
'&-super-sm': {
|
|
170
|
+
'@apply right-[-2px] top-[-5px]': {},
|
|
171
|
+
'&.noborder': {
|
|
172
|
+
'@apply right-[-3px]': {},
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
'&-super-md': {
|
|
176
|
+
'@apply right-[-3px] top-[-8px]': {},
|
|
177
|
+
'&.noborder': {
|
|
178
|
+
'@apply right-[-4px]': {},
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
'&-super-lg': {
|
|
182
|
+
'@apply right-[-4px] top-[-8px]': {},
|
|
183
|
+
'&.noborder': {
|
|
184
|
+
'@apply right-[-5px]': {},
|
|
185
|
+
}
|
|
53
186
|
},
|
|
54
187
|
|
|
55
|
-
'&-
|
|
56
|
-
'@apply
|
|
57
|
-
'
|
|
188
|
+
'&-superoverlap-sm': {
|
|
189
|
+
'@apply right-[3px] top-[-5px]': {},
|
|
190
|
+
'&.noborder': {
|
|
191
|
+
'@apply right-[2px]': {},
|
|
192
|
+
}
|
|
58
193
|
},
|
|
194
|
+
'&-superoverlap-md': {
|
|
195
|
+
'@apply right-[8px] top-[-6px]': {},
|
|
196
|
+
'&.noborder': {
|
|
197
|
+
'@apply right-[7px]': {},
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
'&-superoverlap-lg': {
|
|
201
|
+
'@apply right-[8px] top-[-8px]': {},
|
|
202
|
+
'&.noborder': {
|
|
203
|
+
'@apply right-[7px]': {},
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
'&-fit-content': {
|
|
209
|
+
'@apply p-0': {},
|
|
210
|
+
fontSize: 'inherit',
|
|
211
|
+
},
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
// variants
|
|
215
|
+
...badgeSolid(colors),
|
|
216
|
+
...badgeOutline(colors),
|
|
217
|
+
|
|
59
218
|
},
|
|
60
219
|
});
|
package/src/components/forms.js
CHANGED
|
@@ -260,9 +260,20 @@ module.exports = Forms = (colors) => ({
|
|
|
260
260
|
},
|
|
261
261
|
|
|
262
262
|
'.form-textarea': {
|
|
263
|
-
|
|
264
|
-
|
|
263
|
+
maxHeight: 'none',
|
|
264
|
+
'&.form-field': {
|
|
265
|
+
'&-sm': {
|
|
266
|
+
'@apply py-[0.85rem] min-h-[4rem]': {},
|
|
267
|
+
},
|
|
268
|
+
|
|
269
|
+
'&-md': {
|
|
270
|
+
'@apply py-[0.9rem] min-h-[4.4rem]': {},
|
|
271
|
+
},
|
|
265
272
|
|
|
273
|
+
'&-lg': {
|
|
274
|
+
'@apply py-[1.1rem] min-h-[4.8rem]': {},
|
|
275
|
+
},
|
|
276
|
+
},
|
|
266
277
|
'&-counter': {
|
|
267
278
|
'@apply mt-xs text-right': {},
|
|
268
279
|
},
|
|
@@ -15,11 +15,11 @@ module.exports = Pagination = () => ({
|
|
|
15
15
|
},
|
|
16
16
|
|
|
17
17
|
'&-list': {
|
|
18
|
-
'@apply flex items-
|
|
18
|
+
'@apply flex items-center': {},
|
|
19
19
|
},
|
|
20
20
|
|
|
21
21
|
'&-pageLabel': {
|
|
22
|
-
'@apply cursor-pointer m-sm': {},
|
|
22
|
+
'@apply cursor-pointer m-sm box-content': {},
|
|
23
23
|
width: '1.5em',
|
|
24
24
|
height: '1.75em',
|
|
25
25
|
|
|
@@ -29,7 +29,8 @@ module.exports = Pagination = () => ({
|
|
|
29
29
|
},
|
|
30
30
|
|
|
31
31
|
'&-prevNextButton': {
|
|
32
|
-
'@apply text-body ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
|
|
32
|
+
'@apply text-body ml-4 my-sm inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
|
|
33
|
+
height: '1.75em',
|
|
33
34
|
|
|
34
35
|
'&[data-reverse=true]': {
|
|
35
36
|
'@apply mr-4 ml-0 flex-row-reverse': {},
|
|
@@ -54,7 +55,7 @@ module.exports = Pagination = () => ({
|
|
|
54
55
|
},
|
|
55
56
|
|
|
56
57
|
'&-icon': {
|
|
57
|
-
'@apply m-1
|
|
58
|
+
'@apply m-1 leading-none flex items-center': {},
|
|
58
59
|
|
|
59
60
|
'.MuiSvgIcon-root': {
|
|
60
61
|
fontSize: '1em',
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
module.exports = ProfilePicture = () => ({
|
|
2
|
+
'.profile-picture': {
|
|
3
|
+
'@apply relative overflow-hidden flex-shrink-0 text-xs leading-none flex items-center justify-center text-center w-[48px] h-[48px] mr-sm rounded-full border-2 border-primary':
|
|
4
|
+
{},
|
|
5
|
+
|
|
6
|
+
'.profile-picture-img': {
|
|
7
|
+
'@apply bg-cover absolute inset-0 bg-center text-xs leading-none': {},
|
|
8
|
+
},
|
|
9
|
+
'.icon': {
|
|
10
|
+
width: '3.8rem!important',
|
|
11
|
+
height: '3.8rem!important',
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
module.exports = Profile = () => ({
|
|
2
|
+
'.profile-container': {
|
|
3
|
+
'@apply flex items-center': {},
|
|
4
|
+
|
|
5
|
+
'.profile-title': {
|
|
6
|
+
'@apply font-bold text-base m-0': {},
|
|
7
|
+
},
|
|
8
|
+
'.profile-subtitle': {
|
|
9
|
+
'@apply text-sm leading-[20px] m-0': {},
|
|
10
|
+
},
|
|
11
|
+
|
|
12
|
+
'&.minimal': {
|
|
13
|
+
'.profile-title': {
|
|
14
|
+
overflow: 'hidden',
|
|
15
|
+
'text-overflow': 'ellipsis',
|
|
16
|
+
display: '-webkit-box',
|
|
17
|
+
'-webkit-line-clamp': '1' /* number of lines to show */,
|
|
18
|
+
'line-clamp': '1',
|
|
19
|
+
'-webkit-box-orient': 'vertical',
|
|
20
|
+
},
|
|
21
|
+
'.profile-subtitle': {
|
|
22
|
+
overflow: 'hidden',
|
|
23
|
+
'text-overflow': 'ellipsis',
|
|
24
|
+
display: '-webkit-box',
|
|
25
|
+
'-webkit-line-clamp': '1' /* number of lines to show */,
|
|
26
|
+
'line-clamp': '1',
|
|
27
|
+
'-webkit-box-orient': 'vertical',
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
// '&.truncate': { '@apply truncate pr-md': {} },
|
|
32
|
+
},
|
|
33
|
+
});
|
|
@@ -3,11 +3,7 @@ module.exports = Menu = () => ({
|
|
|
3
3
|
'@apply w-[440px]': {},
|
|
4
4
|
|
|
5
5
|
'.menu-header': {
|
|
6
|
-
'@apply py-[2rem] px-[1.6rem] bg-primary text-white
|
|
7
|
-
|
|
8
|
-
'label, .label': {
|
|
9
|
-
'@apply text-xl font-bold text-white': {},
|
|
10
|
-
},
|
|
6
|
+
'@apply py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {},
|
|
11
7
|
|
|
12
8
|
'.label-small': {
|
|
13
9
|
'@apply text-[1.6rem]': {},
|
|
@@ -24,6 +20,10 @@ module.exports = Menu = () => ({
|
|
|
24
20
|
'.label-header': {
|
|
25
21
|
'@apply flex items-center': {},
|
|
26
22
|
|
|
23
|
+
'label, .label': {
|
|
24
|
+
'@apply text-xl font-bold': {},
|
|
25
|
+
},
|
|
26
|
+
|
|
27
27
|
span: {
|
|
28
28
|
'@apply ml-auto': {},
|
|
29
29
|
},
|
|
@@ -38,7 +38,7 @@ module.exports = Menu = () => ({
|
|
|
38
38
|
},
|
|
39
39
|
|
|
40
40
|
'&-label': {
|
|
41
|
-
'@apply flex-grow select-none': {},
|
|
41
|
+
'@apply flex-grow select-none flex items-center': {},
|
|
42
42
|
},
|
|
43
43
|
|
|
44
44
|
'&.active': {
|
|
@@ -58,20 +58,20 @@ module.exports = Menu = () => ({
|
|
|
58
58
|
'@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},
|
|
59
59
|
|
|
60
60
|
'.menu-item-link': {
|
|
61
|
-
'@apply flex-grow flex items-center text-base text-left justify-start py-sm pr-sm h-full': {},
|
|
61
|
+
'@apply flex-grow relative flex items-center text-base text-left justify-start py-sm pr-sm h-full': {},
|
|
62
62
|
},
|
|
63
63
|
|
|
64
64
|
'.expand': {
|
|
65
65
|
'@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {},
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
'&-button': {
|
|
68
68
|
'@apply flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},
|
|
69
69
|
},
|
|
70
70
|
},
|
|
71
71
|
},
|
|
72
72
|
|
|
73
73
|
'&.open': {
|
|
74
|
-
'
|
|
74
|
+
'& + .menu-item > .wrapper': {
|
|
75
75
|
'@apply border-t': {},
|
|
76
76
|
},
|
|
77
77
|
},
|
|
@@ -96,7 +96,7 @@ module.exports = Menu = () => ({
|
|
|
96
96
|
},
|
|
97
97
|
|
|
98
98
|
'& .menu-item-move-button': {
|
|
99
|
-
'@apply -translate-x-full text-gray-stroke absolute py-sm inset-y-0 my-auto': {},
|
|
99
|
+
'@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {},
|
|
100
100
|
|
|
101
101
|
svg: {
|
|
102
102
|
'@apply h-full': {},
|
|
@@ -106,43 +106,7 @@ module.exports = Menu = () => ({
|
|
|
106
106
|
},
|
|
107
107
|
},
|
|
108
108
|
|
|
109
|
-
'
|
|
110
|
-
'@apply text-error -ml-[5px] absolute -translate-x-full': {},
|
|
111
|
-
},
|
|
112
|
-
|
|
113
|
-
'&.moved-away': {
|
|
114
|
-
'@apply text-gray pointer-events-none': {},
|
|
115
|
-
|
|
116
|
-
'.menu-item-link': {
|
|
117
|
-
'@apply opacity-[78%] relative': {},
|
|
118
|
-
|
|
119
|
-
'&::before': {
|
|
120
|
-
'@apply absolute -translate-x-full -ml-sm block w-[10px] h-[10px] rounded-full bg-warning': {},
|
|
121
|
-
content: '""',
|
|
122
|
-
},
|
|
123
|
-
},
|
|
124
|
-
|
|
125
|
-
'.menu-item-error, .menu-item-changes, .items': {
|
|
126
|
-
'@apply hidden': {},
|
|
127
|
-
},
|
|
128
|
-
|
|
129
|
-
'.menu-item-changes': {
|
|
130
|
-
'@apply bg-gray': {},
|
|
131
|
-
},
|
|
132
|
-
|
|
133
|
-
'.menu-item-move-button': {
|
|
134
|
-
'@apply hidden': {},
|
|
135
|
-
},
|
|
136
|
-
|
|
137
|
-
'.expand': {
|
|
138
|
-
'@apply opacity-[78%]': {},
|
|
139
|
-
path: {
|
|
140
|
-
'@apply fill-gray-stroke': {},
|
|
141
|
-
},
|
|
142
|
-
},
|
|
143
|
-
},
|
|
144
|
-
|
|
145
|
-
'&.movedHere': {
|
|
109
|
+
'&.moved-here': {
|
|
146
110
|
"[draggable='true']": {
|
|
147
111
|
'@apply text-warning': {},
|
|
148
112
|
},
|
|
@@ -155,21 +119,6 @@ module.exports = Menu = () => ({
|
|
|
155
119
|
'@apply h-[44px]': {},
|
|
156
120
|
},
|
|
157
121
|
},
|
|
158
|
-
|
|
159
|
-
'&.new-item': {
|
|
160
|
-
'.wrapper': {
|
|
161
|
-
'@apply border-[3px] border-dashed border-[rgba(0,0,0,0.3)]': {},
|
|
162
|
-
boxSizing: 'border-box',
|
|
163
|
-
|
|
164
|
-
'.menu-item-move-button': {
|
|
165
|
-
'@apply -ml-[3px]': {},
|
|
166
|
-
},
|
|
167
|
-
},
|
|
168
|
-
},
|
|
169
|
-
|
|
170
|
-
'& .menu-item-changes': {
|
|
171
|
-
'@apply bg-warning rounded-full w-[24px] h-[24px] text-center text-sm font-bold text-white': {},
|
|
172
|
-
},
|
|
173
122
|
},
|
|
174
123
|
|
|
175
124
|
'&-separator': {
|
|
@@ -207,7 +156,7 @@ module.exports = Menu = () => ({
|
|
|
207
156
|
'@apply border-l border-r border-svartvik-200': {},
|
|
208
157
|
},
|
|
209
158
|
|
|
210
|
-
'
|
|
159
|
+
'&.open > .items': {
|
|
211
160
|
'@apply border-b border-svartvik-200': {},
|
|
212
161
|
},
|
|
213
162
|
|
|
@@ -223,13 +172,7 @@ module.exports = Menu = () => ({
|
|
|
223
172
|
'@apply h-[56px] max-h-[56px]': {},
|
|
224
173
|
},
|
|
225
174
|
|
|
226
|
-
'&.
|
|
227
|
-
'> .wrapper .menu-item-link': {
|
|
228
|
-
'@apply h-[50px] max-h-[50px]': {},
|
|
229
|
-
},
|
|
230
|
-
},
|
|
231
|
-
|
|
232
|
-
'&.open:not(.new-item) > .wrapper': {
|
|
175
|
+
'&.open > .wrapper': {
|
|
233
176
|
'@apply border-b border-svartvik-200': {},
|
|
234
177
|
},
|
|
235
178
|
|
|
@@ -247,12 +190,6 @@ module.exports = Menu = () => ({
|
|
|
247
190
|
},
|
|
248
191
|
},
|
|
249
192
|
|
|
250
|
-
'&.new-item, .new-item': {
|
|
251
|
-
'> .wrapper .menu-item-link': {
|
|
252
|
-
'@apply h-[42px] max-h-[42px]': {},
|
|
253
|
-
},
|
|
254
|
-
},
|
|
255
|
-
|
|
256
193
|
'> .wrapper > .menu-item-link': {
|
|
257
194
|
paddingLeft: '6.4rem',
|
|
258
195
|
},
|
|
@@ -310,69 +247,4 @@ module.exports = Menu = () => ({
|
|
|
310
247
|
},
|
|
311
248
|
},
|
|
312
249
|
},
|
|
313
|
-
|
|
314
|
-
// Sparkle icon scss
|
|
315
|
-
'.sparkle-icon': {
|
|
316
|
-
'@apply inline-flex w-[25px] h-[18px] ml-md gap-[6px]': {},
|
|
317
|
-
},
|
|
318
|
-
'.sparkle-vert-lg': {
|
|
319
|
-
'@apply relative w-0 h-0 border-b-[10px] border-b-primary border-x-[4px] border-x-transparent border-t-[4px] border-t-transparent top-[-4px]':
|
|
320
|
-
{},
|
|
321
|
-
'&::after': {
|
|
322
|
-
'@apply content-[""] absolute left-[-4px] top-[12px] w-0 h-0 border-x-[4px] border-b-[4px] border-x-transparent border-b-transparent border-t-[10px] border-t-primary':
|
|
323
|
-
{},
|
|
324
|
-
},
|
|
325
|
-
},
|
|
326
|
-
'.sparkle-horizontal-lg': {
|
|
327
|
-
'@apply relative w-0 h-0 border-b-[10px] border-b-primary border-x-[4px] border-x-transparent border-t-[4px] border-t-transparent right-[-7px] top-[-10px] rotate-[90deg]':
|
|
328
|
-
{},
|
|
329
|
-
'&::after': {
|
|
330
|
-
'@apply content-[""] absolute left-[-4px] top-[10px] w-0 h-0 border-x-[4px] border-b-[4px] border-x-transparent border-b-transparent border-t-[10px] border-t-primary':
|
|
331
|
-
{},
|
|
332
|
-
},
|
|
333
|
-
},
|
|
334
|
-
'.sparkle-vert-sm': {
|
|
335
|
-
'@apply relative w-0 h-0 border-b-[6px] border-b-primary border-x-[2px] border-x-transparent border-t-[2px] border-t-transparent top-[-2px]':
|
|
336
|
-
{},
|
|
337
|
-
'&::after': {
|
|
338
|
-
'@apply content-[""] absolute left-[-1.8px] top-[6px] w-0 h-0 border-x-[2px] border-b-[2px] border-x-transparent border-b-transparent border-t-[6px] border-t-primary':
|
|
339
|
-
{},
|
|
340
|
-
},
|
|
341
|
-
},
|
|
342
|
-
'.sparkle-horizontal-sm': {
|
|
343
|
-
'@apply relative w-0 h-0 border-b-[6px] border-b-primary border-x-[2px] border-x-transparent border-t-[6px] border-t-transparent right-[-5.5px] top-[-8px] rotate-[90deg]':
|
|
344
|
-
{},
|
|
345
|
-
'&::after': {
|
|
346
|
-
'@apply content-[""] absolute left-[-2.2px] top-[5px] w-0 h-0 border-x-[2px] border-b-[6px] border-x-transparent border-b-transparent border-t-[6px] border-t-primary':
|
|
347
|
-
{},
|
|
348
|
-
},
|
|
349
|
-
},
|
|
350
|
-
'.twinkling-1': {
|
|
351
|
-
'@apply animate-pulse delay-75': {},
|
|
352
|
-
},
|
|
353
|
-
'.twinkling-2': {
|
|
354
|
-
'@apply animate-fast-pulse delay-75': {},
|
|
355
|
-
},
|
|
356
|
-
'.twinkling-3': {
|
|
357
|
-
'@apply animate-slow-pulse delay-1000': {},
|
|
358
|
-
},
|
|
359
|
-
|
|
360
|
-
'@keyframes slow-pulse': {
|
|
361
|
-
'75%': {
|
|
362
|
-
opacity: 0,
|
|
363
|
-
},
|
|
364
|
-
},
|
|
365
|
-
'@keyframes fast-pulse': {
|
|
366
|
-
'65%': {
|
|
367
|
-
opacity: 0,
|
|
368
|
-
},
|
|
369
|
-
},
|
|
370
|
-
|
|
371
|
-
'.animate-slow-pulse': {
|
|
372
|
-
animation: 'slow-pulse 2s cubic-bezier(0.1, 0.8, 0.2, 0.8) infinite',
|
|
373
|
-
},
|
|
374
|
-
|
|
375
|
-
'.animate-fast-pulse': {
|
|
376
|
-
animation: 'fast-pulse 1.5s cubic-bezier(0.4, 0.8, 0.8, 1) infinite',
|
|
377
|
-
},
|
|
378
250
|
});
|
package/src/index.js
CHANGED
|
@@ -6,6 +6,7 @@ const withOpacity = require('./with-opacity');
|
|
|
6
6
|
// components
|
|
7
7
|
const Alert = require('./components/alert');
|
|
8
8
|
const AlertBanner = require('./components/alert-banner');
|
|
9
|
+
const Badge = require('./components/badge');
|
|
9
10
|
const Breadcrumb = require('./components/breadcrumb');
|
|
10
11
|
const ButtonGroup = require('./components/button-group');
|
|
11
12
|
|
|
@@ -46,9 +47,13 @@ const Header = require('./components/header');
|
|
|
46
47
|
|
|
47
48
|
const SearchBar = require('./components/search-bar');
|
|
48
49
|
|
|
50
|
+
const ProfilePicture = require('./components/profile-picture');
|
|
51
|
+
const Profile = require('./components/profile');
|
|
52
|
+
|
|
49
53
|
const components = [
|
|
50
54
|
Alert,
|
|
51
55
|
AlertBanner,
|
|
56
|
+
Badge,
|
|
52
57
|
Breadcrumb,
|
|
53
58
|
ButtonGroup,
|
|
54
59
|
Button,
|
|
@@ -87,6 +92,9 @@ const components = [
|
|
|
87
92
|
Pagination,
|
|
88
93
|
Footer,
|
|
89
94
|
Header,
|
|
95
|
+
|
|
96
|
+
ProfilePicture,
|
|
97
|
+
Profile,
|
|
90
98
|
];
|
|
91
99
|
|
|
92
100
|
const defaultColors = ['primary', 'secondary'];
|