@cullsin/lnc-menu 6.1.0 → 6.2.0

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 (3) hide show
  1. package/dist/src/sidemenu.scss +72 -99
  2. package/package.json +2 -2
  3. package/dist/src/src/sidemenu.scss +0 -134
package/dist/src/sidemenu.scss CHANGED
@@ -1,142 +1,115 @@
1
1
  //overwritten the default MUI css
2
2
 
3
+ // Side menu container
4
+ .side-menu-container {
5
+ display: flex;
6
+ flex-shrink: 0;
7
+ }
8
+
3
9
  .MuiBox-root .MuiList-root {
4
10
  background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
5
11
  color: #fff;
6
- height: 100%;
7
- bottom: 0; // Ensure drawer stretches till bottom
12
+ height: 100vh;
13
+ bottom: 0;
8
14
  padding: 20px 0;
9
15
  }
10
16
 
11
17
  .MuiList-root {
12
18
  .MuiListItem-root {
13
19
  padding: 15px;
14
- &.selected {
15
- padding: 7px;
16
20
 
17
- .MuiListItemIcon-root {
18
- background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
19
- color: #1e2f97;
20
- padding: 10px;
21
- min-width: 25px;
22
- border-top-left-radius: 5px;
23
- border-bottom-left-radius: 5px;
24
-
25
- &:only-of-type {
26
- border-top-right-radius: 5px;
27
- border-bottom-right-radius: 5px;
28
- }
21
+ // Normalize all icons (MUI icons and custom SVGs)
22
+ .MuiListItemIcon-root {
23
+ color: #fff;
24
+ min-width: 30px;
25
+ cursor: pointer;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+
30
+ // Ensure consistent icon sizing for both MUI icons and custom SVGs
31
+ svg,
32
+ .MuiSvgIcon-root {
33
+ width: 24px;
34
+ height: 25px;
35
+ display: block;
29
36
  }
37
+ }
30
38
 
31
- .MuiListItemText-root {
32
- span {
33
- background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
34
- padding: 10px 0;
35
- min-width: 25px;
36
- border-top-right-radius: 5px;
37
- border-bottom-right-radius: 5px;
38
- }
39
+ .MuiListItemText-root {
40
+ margin-top: 0;
41
+ margin-bottom: 0;
42
+
43
+ .MuiTypography-root {
44
+ font: 14px/24px "OpenSans-SemiBold";
45
+ color: #fff;
46
+ cursor: pointer;
47
+ white-space: nowrap;
39
48
  }
40
49
  }
41
50
 
42
- &:hover:not(.selected) {
43
- padding: 5px 7px;
51
+ // Selected state - unified capsule background
52
+ &.selected {
53
+ padding: 10px 15px;
54
+ background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
55
+ border-radius: 20px;
56
+ margin: 0 7px;
57
+ display: flex;
58
+ align-items: center;
44
59
 
45
60
  .MuiListItemIcon-root {
46
- background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
47
61
  color: #1e2f97;
48
- padding: 10px;
49
- min-width: 25px;
50
- border-top-left-radius: 5px;
51
- border-bottom-left-radius: 5px;
52
-
53
- &:only-of-type {
54
- border-top-right-radius: 5px;
55
- border-bottom-right-radius: 5px;
62
+ min-width: auto;
63
+ margin-right: 8px;
64
+
65
+ svg,
66
+ .MuiSvgIcon-root {
67
+ fill: #1e2f97;
68
+ color: #1e2f97;
56
69
  }
57
70
  }
58
71
 
59
72
  .MuiListItemText-root {
60
- span {
61
- background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
62
- padding: 10px 0;
63
- min-width: 25px;
64
- border-top-right-radius: 5px;
65
- border-bottom-right-radius: 5px;
66
- }
73
+ margin: 0;
74
+
67
75
  .MuiTypography-root {
68
76
  color: #1e2f97;
69
77
  }
70
78
  }
71
79
  }
72
80
 
73
- .MuiListItemIcon-root {
74
- color: #fff;
75
- min-width: 30px;
76
- cursor: pointer;
77
- }
81
+ // Hover state - unified capsule background
82
+ &:hover:not(.selected) {
83
+ padding: 10px 15px;
84
+ background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
85
+ border-radius: 20px;
86
+ margin: 0 7px;
87
+ display: flex;
88
+ align-items: center;
78
89
 
79
- .MuiListItemText-root {
80
- margin-top: 0;
81
- margin-bottom: 0;
82
- .MuiTypography-root {
83
- font: 14px/24px "OpenSans-SemiBold";
84
- color: #fff;
85
- cursor: pointer;
86
- white-space: nowrap;
87
- }
88
- }
89
- }
90
- }
90
+ .MuiListItemIcon-root {
91
+ color: #1e2f97;
92
+ min-width: auto;
93
+ margin-right: 8px;
91
94
 
92
- .app-menu-item {
93
- .MuiList-root {
94
- &.MuiMenu-list {
95
- background: linear-gradient(to bottom, #586d81, #3e4f60) !important;
96
- color: #fff;
97
- width: 200px;
98
- padding: 10px;
99
- position: relative;
100
- overflow: visible;
101
- .submenu-title {
102
- text-transform: uppercase;
103
- font: 12px / 18px "OpenSans-Regular";
104
- color: #efffff;
105
- padding: 0 0 5px 10px;
106
- display: block;
107
- }
108
- .MuiMenuItem-root {
109
- &.Mui-focusVisible {
110
- background-color: transparent;
95
+ svg,
96
+ .MuiSvgIcon-root {
97
+ fill: #1e2f97;
98
+ color: #1e2f97;
111
99
  }
100
+ }
112
101
 
113
- &:hover {
114
- font: 16px/24px "OpenSans-SemiBold";
115
- background: #374451;
116
- border-radius: 6px;
102
+ .MuiListItemText-root {
103
+ margin: 0;
104
+
105
+ .MuiTypography-root {
106
+ color: #1e2f97;
117
107
  }
118
108
  }
119
109
  }
120
110
  }
121
111
  }
122
112
 
123
- ul.MuiList-root {
124
- &:has(.submenu-title) {
125
- &::before {
126
- content: "";
127
- position: absolute;
128
- top: 15px;
129
- left: -8px;
130
- width: 0;
131
- height: 0;
132
- border-top: 8px solid transparent;
133
- border-bottom: 8px solid transparent;
134
- border-right: 8px solid #516578;
135
- z-index: 2;
136
- }
137
- }
138
- }
139
-
140
113
  .MuiPopover-root {
141
114
  .MuiPaper-root {
142
115
  overflow: visible;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cullsin/lnc-menu",
3
- "version": "6.1.0",
3
+ "version": "6.2.0",
4
4
  "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
9
9
  ],
10
10
  "scripts": {
11
11
  "build": "tsc && npm run copy-scss",
12
- "copy-scss": "cpy src/sidemenu.scss dist/src"
12
+ "copy-scss": "cpy src/sidemenu.scss dist/src --flat"
13
13
  },
14
14
  "license": "MIT",
15
15
  "publishConfig": {
package/dist/src/src/sidemenu.scss DELETED
@@ -1,134 +0,0 @@
1
- //overwritten the default MUI css
2
-
3
- // Side menu container
4
- .side-menu-container {
5
- display: flex;
6
- flex-shrink: 0;
7
- }
8
-
9
- .MuiBox-root .MuiList-root {
10
- background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
11
- color: #fff;
12
- height: 100vh;
13
- bottom: 0;
14
- padding: 20px 0;
15
- }
16
-
17
- .MuiList-root {
18
- .MuiListItem-root {
19
- padding: 15px;
20
-
21
- // Normalize all icons (MUI icons and custom SVGs)
22
- .MuiListItemIcon-root {
23
- color: #fff;
24
- min-width: 30px;
25
- cursor: pointer;
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
-
30
- // Ensure consistent icon sizing for both MUI icons and custom SVGs
31
- svg,
32
- .MuiSvgIcon-root {
33
- width: 24px;
34
- height: 25px;
35
- display: block;
36
- }
37
- }
38
-
39
- .MuiListItemText-root {
40
- margin-top: 0;
41
- margin-bottom: 0;
42
-
43
- .MuiTypography-root {
44
- font: 14px/24px "OpenSans-SemiBold";
45
- color: #fff;
46
- cursor: pointer;
47
- white-space: nowrap;
48
- }
49
- }
50
-
51
- // Selected state - unified capsule background
52
- &.selected {
53
- padding: 10px 15px;
54
- background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
55
- border-radius: 20px;
56
- margin: 0 7px;
57
- display: flex;
58
- align-items: center;
59
-
60
- .MuiListItemIcon-root {
61
- color: #1e2f97;
62
- min-width: auto;
63
- margin-right: 8px;
64
-
65
- svg,
66
- .MuiSvgIcon-root {
67
- fill: #1e2f97;
68
- color: #1e2f97;
69
- }
70
- }
71
-
72
- .MuiListItemText-root {
73
- margin: 0;
74
-
75
- .MuiTypography-root {
76
- color: #1e2f97;
77
- }
78
- }
79
- }
80
-
81
- // Hover state - unified capsule background
82
- &:hover:not(.selected) {
83
- padding: 10px 15px;
84
- background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
85
- border-radius: 20px;
86
- margin: 0 7px;
87
- display: flex;
88
- align-items: center;
89
-
90
- .MuiListItemIcon-root {
91
- color: #1e2f97;
92
- min-width: auto;
93
- margin-right: 8px;
94
-
95
- svg,
96
- .MuiSvgIcon-root {
97
- fill: #1e2f97;
98
- color: #1e2f97;
99
- }
100
- }
101
-
102
- .MuiListItemText-root {
103
- margin: 0;
104
-
105
- .MuiTypography-root {
106
- color: #1e2f97;
107
- }
108
- }
109
- }
110
- }
111
- }
112
-
113
- .MuiPopover-root {
114
- .MuiPaper-root {
115
- overflow: visible;
116
- position: relative;
117
- width: max-content;
118
- }
119
- }
120
-
121
- .MuiList-root.MuiMenu-list {
122
- border-radius: 5px;
123
- }
124
-
125
- #more-menu {
126
- .MuiPaper-root {
127
- .MuiMenu-list {
128
- color: #1e2f97;
129
- .MuiMenuItem-root {
130
- font-size: 14px;
131
- }
132
- }
133
- }
134
- }