@cullsin/lnc-menu 6.1.0 → 6.3.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 +74 -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,117 @@
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;
15
+ overflow-x: hidden;
9
16
  }
10
17
 
11
18
  .MuiList-root {
12
19
  .MuiListItem-root {
13
20
  padding: 15px;
14
- &.selected {
15
- padding: 7px;
21
+ margin-bottom: 4px;
16
22
 
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
- }
23
+ // Normalize all icons (MUI icons and custom SVGs)
24
+ .MuiListItemIcon-root {
25
+ color: #fff;
26
+ min-width: 30px;
27
+ cursor: pointer;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+
32
+ // Ensure consistent icon sizing for both MUI icons and custom SVGs
33
+ svg,
34
+ .MuiSvgIcon-root {
35
+ width: 24px;
36
+ height: 25px;
37
+ display: block;
29
38
  }
39
+ }
30
40
 
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
- }
41
+ .MuiListItemText-root {
42
+ margin-top: 0;
43
+ margin-bottom: 0;
44
+
45
+ .MuiTypography-root {
46
+ font: 14px/24px "OpenSans-SemiBold";
47
+ color: #fff;
48
+ cursor: pointer;
49
+ white-space: nowrap;
39
50
  }
40
51
  }
41
52
 
42
- &:hover:not(.selected) {
43
- padding: 5px 7px;
53
+ // Selected state - unified capsule background
54
+ &.selected {
55
+ padding: 10px 15px;
56
+ background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
57
+ border-radius: 20px;
58
+ margin: 0 12px;
59
+ display: flex;
60
+ align-items: center;
44
61
 
45
62
  .MuiListItemIcon-root {
46
- background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
47
63
  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;
64
+ min-width: auto;
65
+ margin-right: 8px;
66
+
67
+ svg,
68
+ .MuiSvgIcon-root {
69
+ fill: #1e2f97;
70
+ color: #1e2f97;
56
71
  }
57
72
  }
58
73
 
59
74
  .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
- }
75
+ margin: 0;
76
+
67
77
  .MuiTypography-root {
68
78
  color: #1e2f97;
69
79
  }
70
80
  }
71
81
  }
72
82
 
73
- .MuiListItemIcon-root {
74
- color: #fff;
75
- min-width: 30px;
76
- cursor: pointer;
77
- }
83
+ // Hover state - unified capsule background
84
+ &:hover:not(.selected) {
85
+ padding: 10px 15px;
86
+ background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
87
+ border-radius: 20px;
88
+ margin: 0 12px;
89
+ display: flex;
90
+ align-items: center;
78
91
 
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
- }
92
+ .MuiListItemIcon-root {
93
+ color: #1e2f97;
94
+ min-width: auto;
95
+ margin-right: 8px;
91
96
 
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;
97
+ svg,
98
+ .MuiSvgIcon-root {
99
+ fill: #1e2f97;
100
+ color: #1e2f97;
111
101
  }
102
+ }
112
103
 
113
- &:hover {
114
- font: 16px/24px "OpenSans-SemiBold";
115
- background: #374451;
116
- border-radius: 6px;
104
+ .MuiListItemText-root {
105
+ margin: 0;
106
+
107
+ .MuiTypography-root {
108
+ color: #1e2f97;
117
109
  }
118
110
  }
119
111
  }
120
112
  }
121
113
  }
122
114
 
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
115
  .MuiPopover-root {
141
116
  .MuiPaper-root {
142
117
  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.3.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
- }