@sk-web-gui/core 0.1.35 → 0.1.37

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.
Files changed (6) hide show
  1. package/package.json +2 -2
  2. package/src/components/dropdown-filter.js +73 -0
  3. package/src/components/menu.js +171 -0
  4. package/src/components/search-bar.js +45 -0
  5. package/src/components/tab-menu.js +37 -0
  6. package/src/index.js +12 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.35",
3
+ "version": "0.1.37",
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": "aa805b28878fb4a93340d14695314a0307869fb4"
34
+ "gitHead": "25dae0aadccc1e52c3d90dcb8ddda283c6d134e7"
35
35
  }
package/src/components/dropdown-filter.js ADDED
@@ -0,0 +1,73 @@
1
+ module.exports = DropdownFilter = () => ({
2
+ ".DropdownFilter": {
3
+ position: "relative",
4
+ height: 44,
5
+ border: "1px solid #939393",
6
+ maxWidth: 291,
7
+ display: "flex",
8
+ background: "#fff",
9
+ borderRadius: 2,
10
+
11
+ ".dropdown-button": {
12
+ justifyContent: "space-between",
13
+ display: "flex",
14
+ flexGrow: 1,
15
+ alignItems: "center",
16
+ padding: "0 1rem",
17
+
18
+ ".arrow-icon": {
19
+ transform: "rotate(180deg)",
20
+
21
+ "&.open": {
22
+ transform: "rotate(0)"
23
+ }
24
+ }
25
+ },
26
+
27
+ ".fitler-container": {
28
+ position: "absolute",
29
+ top: "100%",
30
+ left: "-1px",
31
+ index: 10,
32
+ width: "calc(100% + 2px)",
33
+ background: "#fff",
34
+ border: "1px solid #939393",
35
+ padding: "1rem",
36
+ borderRadius: 2,
37
+
38
+ ".filter-controls": {
39
+ display: "flex",
40
+ justifyContent: "end",
41
+ padding: "0 1rem",
42
+ paddingBottom: 12,
43
+
44
+ "button": {
45
+ marginLeft: "1rem",
46
+ textDecoration: "underline"
47
+ }
48
+ },
49
+
50
+ ".FilterItem": {
51
+ height: 48,
52
+ display: "flex",
53
+ justifyContent: "space-between",
54
+ alignItems: "center",
55
+ borderBottom: "1px solid #939393",
56
+ padding: "0 1rem",
57
+
58
+ "&.disabled": {
59
+ color: "#939393"
60
+ },
61
+
62
+ "&:first-of-type": {
63
+ borderTop: "1px solid #939393",
64
+ },
65
+
66
+ "&:last-child": {
67
+ borderBottom: "none",
68
+ }
69
+ }
70
+ }
71
+ }
72
+ });
73
+
package/src/components/menu.js ADDED
@@ -0,0 +1,171 @@
1
+ module.exports = Menu = () => ({
2
+ ".Menu": {
3
+ width: "440px",
4
+ border: "1px solid #939393",
5
+ borderRadius: "2px",
6
+ overflow: "hidden",
7
+
8
+ ".menu-header": {
9
+ padding: "3rem 1rem 1.8rem",
10
+ backgroundColor: "#005595",
11
+ padding: "2rem 1rem",
12
+
13
+ "label": {
14
+ fontSize: "20px",
15
+ fontWeight: 700,
16
+ color: "#fff"
17
+ },
18
+
19
+ ".label-header": {
20
+ display: "flex",
21
+ alignItems: "center",
22
+
23
+
24
+ "span": {
25
+ marginLeft: "auto"
26
+ }
27
+ },
28
+
29
+ ".select-header": {
30
+ paddingBottom: "6rem",
31
+
32
+ "label": {
33
+ marginBottom: "10px",
34
+ display: "block"
35
+ }
36
+ }
37
+ },
38
+
39
+
40
+ ".MenuItem": {
41
+ borderTop: "1px solid #939393",
42
+ transition: "500ms ease",
43
+
44
+ ".wrapper": {
45
+ minHeight: "64px",
46
+ display: "flex",
47
+ alignItems: "center",
48
+
49
+ "a, button": {
50
+ all: "unset",
51
+ cursor: "pointer",
52
+ width: "100%",
53
+ height: "100%",
54
+ display: "flex",
55
+ verticalAlign: "middle",
56
+ alignItems: "center",
57
+ paddingRight: '15px'
58
+ },
59
+
60
+ "&.lvl-1, &.lvl-2, &.lvl-3, &.lvl-4, &.lvl-5, &.lvl-6, &.lvl-7, &.lvl-8, &.lvl-9, &.lvl-10": {
61
+ minHeight: "56px",
62
+ },
63
+
64
+ "&.open": {
65
+ boxShadow: "inset 6px 0 0 0 #005595",
66
+ },
67
+
68
+ "&.lvl-0": {
69
+ backgroundColor: "#fff",
70
+ "> a, > button": {
71
+ paddingLeft: "1rem"
72
+ }
73
+ },
74
+
75
+ "&.lvl-1": {
76
+ backgroundColor: "#F9F9F9",
77
+ "> a, > button": {
78
+ paddingLeft: "2rem"
79
+ }
80
+ },
81
+
82
+ "&.lvl-2": {
83
+ backgroundColor: "#ECECEC",
84
+ "> a, > button": {
85
+ paddingLeft: "3rem"
86
+ }
87
+ },
88
+
89
+ "&.lvl-3": {
90
+ backgroundColor: "#ECECEC",
91
+ "> a, > button": {
92
+ paddingLeft: "4rem"
93
+ }
94
+ },
95
+
96
+ "&.lvl-4": {
97
+ backgroundColor: "#ECECEC",
98
+ "> a, > button": {
99
+ paddingLeft: "5rem"
100
+ }
101
+ },
102
+
103
+ "&.lvl-5": {
104
+ backgroundColor: "#ECECEC",
105
+ "> a, > button": {
106
+ paddingLeft: "6rem"
107
+ }
108
+ },
109
+
110
+ "&.lvl-6": {
111
+ backgroundColor: "#ECECEC",
112
+ "> a, > button": {
113
+ paddingLeft: "7rem"
114
+ }
115
+ },
116
+
117
+ "&.lvl-7": {
118
+ backgroundColor: "#ECECEC",
119
+ "> a, > button": {
120
+ paddingLeft: "8rem"
121
+ }
122
+ },
123
+
124
+ "&.lvl-8": {
125
+ backgroundColor: "#ECECEC",
126
+ "> a, > button": {
127
+ paddingLeft: "9rem"
128
+ }
129
+ },
130
+
131
+ "&.lvl-9": {
132
+ backgroundColor: "#ECECEC",
133
+ "> a, > button": {
134
+ paddingLeft: "10rem"
135
+ }
136
+ },
137
+
138
+ "&.lvl-10": {
139
+ backgroundColor: "#ECECEC",
140
+ "> a, > button": {
141
+ paddingLeft: "11rem"
142
+ }
143
+ },
144
+
145
+ "label": {
146
+
147
+ },
148
+
149
+ ".expand": {
150
+ width: "50px",
151
+ height: "64px",
152
+ display: "flex",
153
+ justifyContent: "center",
154
+ alignItems: "center",
155
+ marginLeft: "auto",
156
+ padding: 0,
157
+
158
+ "span": {
159
+ display: "flex",
160
+ justifyContent: "center",
161
+ alignItems: "center",
162
+ borderLeft: "1px solid",
163
+ height: '24px',
164
+ width: '45px'
165
+ }
166
+ }
167
+ }
168
+ }
169
+ },
170
+ });
171
+
package/src/components/search-bar.js ADDED
@@ -0,0 +1,45 @@
1
+ module.exports = SearchBar = () => ({
2
+ ".SearchBar": {
3
+ position: "relative",
4
+ border: "1px solid #939393",
5
+ borderRadius: 200,
6
+ overflow: "hidden",
7
+ height: 44,
8
+
9
+ "input": {
10
+ border: "none",
11
+ position: "absolute",
12
+ top: 0,
13
+ left: 0,
14
+ flexGrow: 1,
15
+ width: "100%",
16
+ height: "inherit",
17
+ fontFamily: "Arial",
18
+ fontStyle: "normal",
19
+ fontWeight: 400,
20
+ fontSize: 14,
21
+ lineHeight: 20,
22
+ color: "#4B4B4B",
23
+ padding: "0px 44px 0px 16px"
24
+ },
25
+
26
+ ".search-icon": {
27
+ border: "none",
28
+ display: "flex",
29
+ height: 42,
30
+ width: 44,
31
+ justifyContent: "center",
32
+ alignItems: "center",
33
+ position: "absolute",
34
+ top: 0,
35
+ right: 0,
36
+
37
+ "svg.small": {
38
+ height: 13,
39
+ width: 13
40
+ }
41
+ }
42
+
43
+ }
44
+ })
45
+
package/src/components/tab-menu.js ADDED
@@ -0,0 +1,37 @@
1
+ module.exports = TabMenu = () => ({
2
+ ".TabMenu": {
3
+
4
+ ".tab-wrapper": {
5
+ display: "flex",
6
+ flexDirection: "row"
7
+ },
8
+
9
+ ".TabItem": {
10
+ all: 'unset',
11
+ height: 65,
12
+ display: "flex",
13
+ padding: "0 1rem",
14
+ marginRight: "5rem",
15
+ alignItems: "center",
16
+ position: "relative",
17
+
18
+ "&.active::after": {
19
+ content: '""',
20
+ display: "block",
21
+ position: "absolute",
22
+ width: "100%",
23
+ height: 6,
24
+ background: "#005595",
25
+ top: "100%",
26
+ left: 0,
27
+ }
28
+ },
29
+
30
+ ".underline": {
31
+ width: "100%",
32
+ height: 6,
33
+ background: "#F4F4F4"
34
+ }
35
+ },
36
+ });
37
+
package/src/index.js CHANGED
@@ -30,13 +30,19 @@ const Modal = require('./components/modal');
30
30
  const CookieConsent = require('./components/cookie-consent');
31
31
  const Divider = require('./components/divider');
32
32
 
33
+ const Menu = require('./components/menu');
34
+ const TabMenu = require('./components/tab-menu');
33
35
  const UserMenu = require('./components/user-menu');
34
36
 
37
+ const DropdownFilter = require('./components/dropdown-filter');
38
+
35
39
  const Tag = require('./components/tag');
36
40
  const Pagination = require('./components/pagination');
37
41
  const Footer = require('./components/footer');
38
42
  const Header = require('./components/header');
39
43
 
44
+ const SearchBar = require('./components/search-bar');
45
+
40
46
  const components = [
41
47
  Alert,
42
48
  Breadcrumb,
@@ -63,7 +69,13 @@ const components = [
63
69
  Card,
64
70
  Divider,
65
71
 
72
+ Menu,
73
+ TabMenu,
66
74
  UserMenu,
75
+
76
+ DropdownFilter,
77
+
78
+ SearchBar,
67
79
 
68
80
  Tag,
69
81
  Pagination,