@sk-web-gui/core 0.1.46 → 0.1.48
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/alert-banner.js +25 -0
- package/src/components/side-menu.js +10 -11
- package/src/index.js +8 -7
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.48",
|
|
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": "2687a7f93a723947dd0fa6fcbc2b1f57ecf79822"
|
|
35
35
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
module.exports = Modal = () => ({
|
|
2
|
+
'.alert-banner': {
|
|
3
|
+
'@apply p-md': {},
|
|
4
|
+
|
|
5
|
+
'&-content': {
|
|
6
|
+
'@apply w-full m-auto flex': {},
|
|
7
|
+
|
|
8
|
+
'&-wrapper': {
|
|
9
|
+
'@apply flex-grow flex': {},
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
|
|
13
|
+
'&-icon': {
|
|
14
|
+
'@apply mr-[10px]': {},
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
'&-message': {
|
|
18
|
+
'@apply underline inline-block max-w-[800px] text-body text-base': {},
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
'&-close': {
|
|
22
|
+
'@apply p-4 -m-4 inline-flex': {},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
});
|
|
@@ -84,80 +84,79 @@ module.exports = Menu = () => ({
|
|
|
84
84
|
minHeight: "56px",
|
|
85
85
|
},
|
|
86
86
|
|
|
87
|
+
"&.background-white": {
|
|
88
|
+
"@apply bg-white": {},
|
|
89
|
+
},
|
|
90
|
+
"&.background-lightGrey": {
|
|
91
|
+
"@apply bg-gray-lighter": {},
|
|
92
|
+
},
|
|
93
|
+
"&.background-darkerGrey": {
|
|
94
|
+
"@apply bg-gray-middle": {},
|
|
95
|
+
},
|
|
96
|
+
|
|
87
97
|
|
|
88
98
|
|
|
89
99
|
"&.lvl-0": {
|
|
90
|
-
backgroundColor: "#fff",
|
|
91
100
|
"> .wrapper > .MenuItem-link": {
|
|
92
101
|
marginLeft: "1rem"
|
|
93
102
|
}
|
|
94
103
|
},
|
|
95
104
|
|
|
96
105
|
"&.lvl-1": {
|
|
97
|
-
backgroundColor: "#F9F9F9",
|
|
98
106
|
"> .wrapper > .MenuItem-link": {
|
|
99
107
|
paddingLeft: "2rem"
|
|
100
108
|
}
|
|
101
109
|
},
|
|
102
110
|
|
|
103
111
|
"&.lvl-2": {
|
|
104
|
-
backgroundColor: "#ECECEC",
|
|
105
112
|
"> .wrapper > .MenuItem-link": {
|
|
106
113
|
paddingLeft: "3rem"
|
|
107
114
|
}
|
|
108
115
|
},
|
|
109
116
|
|
|
110
117
|
"&.lvl-3": {
|
|
111
|
-
backgroundColor: "#ECECEC",
|
|
112
118
|
"> .wrapper > .MenuItem-link": {
|
|
113
119
|
paddingLeft: "4rem"
|
|
114
120
|
}
|
|
115
121
|
},
|
|
116
122
|
|
|
117
123
|
"&.lvl-4": {
|
|
118
|
-
backgroundColor: "#ECECEC",
|
|
119
124
|
"> .wrapper > .MenuItem-link": {
|
|
120
125
|
paddingLeft: "5rem"
|
|
121
126
|
}
|
|
122
127
|
},
|
|
123
128
|
|
|
124
129
|
"&.lvl-5": {
|
|
125
|
-
backgroundColor: "#ECECEC",
|
|
126
130
|
"> .wrapper > .MenuItem-link": {
|
|
127
131
|
paddingLeft: "6rem"
|
|
128
132
|
}
|
|
129
133
|
},
|
|
130
134
|
|
|
131
135
|
"&.lvl-6": {
|
|
132
|
-
backgroundColor: "#ECECEC",
|
|
133
136
|
"> .wrapper > .MenuItem-link": {
|
|
134
137
|
paddingLeft: "7rem"
|
|
135
138
|
}
|
|
136
139
|
},
|
|
137
140
|
|
|
138
141
|
"&.lvl-7": {
|
|
139
|
-
backgroundColor: "#ECECEC",
|
|
140
142
|
"> .wrapper > .MenuItem-link": {
|
|
141
143
|
paddingLeft: "8rem"
|
|
142
144
|
}
|
|
143
145
|
},
|
|
144
146
|
|
|
145
147
|
"&.lvl-8": {
|
|
146
|
-
backgroundColor: "#ECECEC",
|
|
147
148
|
"> .wrapper > .MenuItem-link": {
|
|
148
149
|
paddingLeft: "9rem"
|
|
149
150
|
}
|
|
150
151
|
},
|
|
151
152
|
|
|
152
153
|
"&.lvl-9": {
|
|
153
|
-
backgroundColor: "#ECECEC",
|
|
154
154
|
"> .wrapper > .MenuItem-link": {
|
|
155
155
|
paddingLeft: "10rem"
|
|
156
156
|
}
|
|
157
157
|
},
|
|
158
158
|
|
|
159
159
|
"&.lvl-10": {
|
|
160
|
-
backgroundColor: "#ECECEC",
|
|
161
160
|
"> .wrapper > .MenuItem-link": {
|
|
162
161
|
paddingLeft: "11rem"
|
|
163
162
|
}
|
package/src/index.js
CHANGED
|
@@ -5,6 +5,7 @@ const { colors } = require('@sk-web-gui/theme');
|
|
|
5
5
|
const withOpacity = require('./with-opacity');
|
|
6
6
|
// components
|
|
7
7
|
const Alert = require('./components/alert');
|
|
8
|
+
const AlertBanner = require('./components/alert-banner');
|
|
8
9
|
const Breadcrumb = require('./components/breadcrumb');
|
|
9
10
|
const ButtonGroup = require('./components/button-group');
|
|
10
11
|
|
|
@@ -45,6 +46,7 @@ const SearchBar = require('./components/search-bar');
|
|
|
45
46
|
|
|
46
47
|
const components = [
|
|
47
48
|
Alert,
|
|
49
|
+
AlertBanner,
|
|
48
50
|
Breadcrumb,
|
|
49
51
|
ButtonGroup,
|
|
50
52
|
Button,
|
|
@@ -72,7 +74,7 @@ const components = [
|
|
|
72
74
|
SideMenu,
|
|
73
75
|
TabMenu,
|
|
74
76
|
UserMenu,
|
|
75
|
-
|
|
77
|
+
|
|
76
78
|
DropdownFilter,
|
|
77
79
|
|
|
78
80
|
SearchBar,
|
|
@@ -226,14 +228,13 @@ module.exports = plugin.withOptions(
|
|
|
226
228
|
keyframes: {
|
|
227
229
|
'reset-overflow': {
|
|
228
230
|
'from, to': {
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
|
|
231
|
+
overflow: 'hidden',
|
|
232
|
+
},
|
|
233
|
+
},
|
|
233
234
|
},
|
|
234
235
|
animation: {
|
|
235
|
-
'reset-overflow': 'reset-overflow 180ms backwards'
|
|
236
|
-
}
|
|
236
|
+
'reset-overflow': 'reset-overflow 180ms backwards',
|
|
237
|
+
},
|
|
237
238
|
},
|
|
238
239
|
},
|
|
239
240
|
variants: {
|