@sk-web-gui/core 0.1.53 → 0.1.54

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 (2) hide show
  1. package/package.json +2 -2
  2. package/src/components/side-menu.js +156 -164
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.53",
3
+ "version": "0.1.54",
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": "52eadc25b58d23c56796ffb4442f598550a16cf7"
34
+ "gitHead": "81c8f063f3d304469d2e9a3e225a751110658b19"
35
35
  }
package/src/components/side-menu.js CHANGED
@@ -1,167 +1,159 @@
1
1
  module.exports = Menu = () => ({
2
- ".SideMenu": {
3
- width: "440px",
4
- border: "1px solid #939393",
5
- borderRadius: "2px",
6
-
7
- ".menu-header": {
8
- padding: "3rem 1rem 1.8rem",
9
- backgroundColor: "#005595",
10
- padding: "2rem 1rem",
11
-
12
- "label": {
13
- fontSize: "20px",
14
- fontWeight: 700,
15
- color: "#fff"
16
- },
17
-
18
- ".label-header": {
19
- display: "flex",
20
- alignItems: "center",
21
-
22
-
23
- "span": {
24
- marginLeft: "auto"
25
- }
26
- },
27
- },
28
-
29
-
30
- ".MenuItem": {
31
- borderTop: "1px solid #939393",
32
- transition: "500ms ease",
33
- "@apply bg-white": {},
34
-
35
- "&.active": {
36
- "> .wrapper": {
37
- boxShadow: "inset 6px 0 0 0 #005595",
38
-
39
- "> .MenuItem-link": {
40
- fontWeight: 600,
41
- }
42
- }
43
- },
44
-
45
- ".wrapper": {
46
- minHeight: "64px",
47
- display: "flex",
48
- alignItems: "center",
49
-
50
- ".MenuItem-link": {
51
- "@apply flex-grow text-left justify-start pr-[15px] h-full":{}
52
- },
53
-
54
- ".expand": {
55
- width: "50px",
56
- height: "64px",
57
- display: "flex",
58
- justifyContent: "center",
59
- alignItems: "center",
60
- marginLeft: "auto",
61
- padding: 0,
62
-
63
- "span": {
64
- display: "flex",
65
- justifyContent: "center",
66
- alignItems: "center",
67
- borderLeft: "1px solid",
68
- height: '24px',
69
- width: '45px'
70
- }
71
- }
72
- },
73
-
74
- "&.open": {
75
- "> .wrapper": {
76
- boxShadow: "inset 6px 0 0 0 #005595"
77
- },
78
-
79
- "> .items": {
80
- height: "unset"
81
- }
82
- },
83
-
84
- "&.lvl-1, &.lvl-2, &.lvl-3, &.lvl-4, &.lvl-5, &.lvl-6, &.lvl-7, &.lvl-8, &.lvl-9, &.lvl-10": {
85
- minHeight: "56px",
86
- },
87
-
88
-
89
- "&.background-lightGrey": {
90
- "@apply bg-gray-lighter": {},
91
- },
92
-
93
- "&.background-darkerGrey": {
94
- "@apply bg-gray-middle": {},
95
- },
96
-
97
-
98
-
99
- "&.lvl-0": {
100
- "> .wrapper > .MenuItem-link": {
101
- marginLeft: "1rem"
102
- }
103
- },
104
-
105
- "&.lvl-1": {
106
- "> .wrapper > .MenuItem-link": {
107
- paddingLeft: "2rem"
108
- }
109
- },
110
-
111
- "&.lvl-2": {
112
- "> .wrapper > .MenuItem-link": {
113
- paddingLeft: "3rem"
114
- }
115
- },
116
-
117
- "&.lvl-3": {
118
- "> .wrapper > .MenuItem-link": {
119
- paddingLeft: "4rem"
120
- }
121
- },
122
-
123
- "&.lvl-4": {
124
- "> .wrapper > .MenuItem-link": {
125
- paddingLeft: "5rem"
126
- }
127
- },
128
-
129
- "&.lvl-5": {
130
- "> .wrapper > .MenuItem-link": {
131
- paddingLeft: "6rem"
132
- }
133
- },
134
-
135
- "&.lvl-6": {
136
- "> .wrapper > .MenuItem-link": {
137
- paddingLeft: "7rem"
138
- }
139
- },
140
-
141
- "&.lvl-7": {
142
- "> .wrapper > .MenuItem-link": {
143
- paddingLeft: "8rem"
144
- }
145
- },
146
-
147
- "&.lvl-8": {
148
- "> .wrapper > .MenuItem-link": {
149
- paddingLeft: "9rem"
150
- }
151
- },
152
-
153
- "&.lvl-9": {
154
- "> .wrapper > .MenuItem-link": {
155
- paddingLeft: "10rem"
156
- }
157
- },
158
-
159
- "&.lvl-10": {
160
- "> .wrapper > .MenuItem-link": {
161
- paddingLeft: "11rem"
162
- }
163
- }
164
- }
2
+ '.SideMenu': {
3
+ '@apply w-[440px]': {},
4
+
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
+ },
11
+
12
+ '.label-button': {
13
+ '@apply w-full justify-between p-0': {},
14
+
15
+ '&-icon': {
16
+ '@apply !text-xl': {},
17
+ },
18
+ },
19
+
20
+ '.label-header': {
21
+ '@apply flex items-center': {},
22
+
23
+ span: {
24
+ '@apply ml-auto': {},
25
+ },
26
+ },
27
+ },
28
+
29
+ '.menu-body': {
30
+ '@apply border border-gray-stroke': {},
31
+ '>.MenuItem:first-child': {
32
+ '@apply border-t-0': {},
33
+ },
34
+ },
35
+
36
+ '.MenuItem': {
37
+ '@apply bg-white h-full border-t border-gray-stroke': {},
38
+
39
+ '.items': {
40
+ '@apply block': {},
41
+ },
42
+
43
+ '&.active': {
44
+ '> .wrapper': {
45
+ boxShadow: 'inset 6px 0 0 0 #005595',
46
+
47
+ '> .MenuItem-link': {
48
+ '@apply underline': {},
49
+ },
50
+ },
51
+ },
52
+
53
+ '.wrapper': {
54
+ '@apply flex items-center': {},
55
+
56
+ '.MenuItem-link': {
57
+ '@apply flex-grow text-left justify-start py-sm pr-[15px] h-full': {},
58
+ },
59
+
60
+ '.expand': {
61
+ '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {},
62
+
63
+ span: {
64
+ '@apply flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},
65
+ },
66
+ },
67
+ },
68
+
69
+ '&.lvl-1, &.lvl-2, &.lvl-3, &.lvl-4, &.lvl-5, &.lvl-6, &.lvl-7, &.lvl-8, &.lvl-9, &.lvl-10': {
70
+ // '.MenuItem-link ': {
71
+ // '@apply py-sm': {},
72
+ // },
73
+ // '@apply py-sm': {},
74
+ '> .wrapper ': {
75
+ '@apply min-h-[48px]': {},
76
+ },
77
+ },
78
+
79
+ '&.isSubNode': {
80
+ '@apply bg-gray-lighter': {},
81
+ },
82
+
83
+ '&.isLeafNode': {
84
+ '@apply bg-gray-middle': {},
85
+ },
86
+
87
+ '&.lvl-0': {
88
+ '> .wrapper ': {
89
+ '@apply min-h-[64px]': {},
90
+
91
+ '> .MenuItem-link': {
92
+ '@apply py-md': {},
93
+ paddingLeft: '3.2rem',
94
+ },
95
+ },
96
+ },
97
+
98
+ '&.lvl-1': {
99
+ '> .wrapper > .MenuItem-link': {
100
+ paddingLeft: '4.8rem',
101
+ },
102
+ },
103
+
104
+ '&.lvl-2': {
105
+ '> .wrapper > .MenuItem-link': {
106
+ paddingLeft: '6.4rem',
107
+ },
108
+ },
109
+
110
+ '&.lvl-3': {
111
+ '> .wrapper > .MenuItem-link': {
112
+ paddingLeft: '8rem',
113
+ },
114
+ },
115
+
116
+ '&.lvl-4': {
117
+ '> .wrapper > .MenuItem-link': {
118
+ paddingLeft: '9.6rem',
119
+ },
120
+ },
121
+
122
+ '&.lvl-5': {
123
+ '> .wrapper > .MenuItem-link': {
124
+ paddingLeft: '11.2rem',
125
+ },
126
+ },
127
+
128
+ '&.lvl-6': {
129
+ '> .wrapper > .MenuItem-link': {
130
+ paddingLeft: '12.8rem',
131
+ },
132
+ },
133
+
134
+ '&.lvl-7': {
135
+ '> .wrapper > .MenuItem-link': {
136
+ paddingLeft: '14.4rem',
137
+ },
138
+ },
139
+
140
+ '&.lvl-8': {
141
+ '> .wrapper > .MenuItem-link': {
142
+ paddingLeft: '16rem',
143
+ },
144
+ },
145
+
146
+ '&.lvl-9': {
147
+ '> .wrapper > .MenuItem-link': {
148
+ paddingLeft: '17.6rem',
149
+ },
150
+ },
151
+
152
+ '&.lvl-10': {
153
+ '> .wrapper > .MenuItem-link': {
154
+ paddingLeft: '19.2rem',
155
+ },
156
+ },
165
157
  },
158
+ },
166
159
  });
167
-