@mediusinc/mng-commons-layout 7.4.0 → 8.0.0-rc.2

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 (37) hide show
  1. package/fesm2022/mediusinc-mng-commons-layout-components-pages-error.mjs +6 -6
  2. package/fesm2022/mediusinc-mng-commons-layout-components-pages-error.mjs.map +1 -1
  3. package/fesm2022/mediusinc-mng-commons-layout-components-pages-main-lazy.mjs.map +1 -1
  4. package/fesm2022/mediusinc-mng-commons-layout-components-pages-main.mjs +17 -11
  5. package/fesm2022/mediusinc-mng-commons-layout-components-pages-main.mjs.map +1 -1
  6. package/fesm2022/mediusinc-mng-commons-layout-components-pages-not-found.mjs +6 -6
  7. package/fesm2022/mediusinc-mng-commons-layout-components-pages-not-found.mjs.map +1 -1
  8. package/fesm2022/mediusinc-mng-commons-layout-components.mjs +134 -124
  9. package/fesm2022/mediusinc-mng-commons-layout-components.mjs.map +1 -1
  10. package/fesm2022/mediusinc-mng-commons-layout.mjs +50 -38
  11. package/fesm2022/mediusinc-mng-commons-layout.mjs.map +1 -1
  12. package/package.json +11 -14
  13. package/styles/atlantis/index.scss +1 -15
  14. package/styles/atlantis/layout/_breadcrumb.scss +2 -2
  15. package/styles/atlantis/layout/_layout.scss +18 -0
  16. package/styles/atlantis/layout/_main.scss +1 -1
  17. package/styles/atlantis/layout/_responsive.scss +64 -68
  18. package/styles/atlantis/layout/_sidebar_drawer.scss +209 -193
  19. package/styles/atlantis/layout/_sidebar_horizontal.scss +115 -106
  20. package/styles/atlantis/layout/_sidebar_reveal.scss +138 -132
  21. package/styles/atlantis/layout/_sidebar_slim.scss +109 -96
  22. package/styles/atlantis/layout/_sidebar_slim_plus.scss +101 -101
  23. package/styles/atlantis/layout/_sidebar_vertical.scss +17 -5
  24. package/styles/atlantis/layout/_topbar.scss +34 -10
  25. package/styles/tailwindcss-commons/atlantis/layout/breadcrumb.css +2 -2
  26. package/styles/tailwindcss-commons/atlantis/layout/main.css +2 -1
  27. package/styles/tailwindcss-commons/atlantis/layout/responsive.css +64 -68
  28. package/styles/tailwindcss-commons/atlantis/layout/sidebar-drawer.css +186 -189
  29. package/styles/tailwindcss-commons/atlantis/layout/sidebar-reveal.css +128 -132
  30. package/styles/tailwindcss-commons/atlantis/layout/sidebar-slim-plus.css +98 -101
  31. package/styles/tailwindcss-commons/atlantis/layout/sidebar-slim.css +107 -96
  32. package/styles/tailwindcss-commons/atlantis/layout/sidebar-vertical.css +38 -24
  33. package/styles/tailwindcss-commons/atlantis/layout/topbar.css +34 -10
  34. package/types/mediusinc-mng-commons-layout-components.d.ts +9 -6
  35. package/types/mediusinc-mng-commons-layout.d.ts +5 -5
  36. package/styles/atlantis/layout/atlantis.scss +0 -0
  37. package/styles/atlantis/layout/layout.scss +0 -32
package/styles/atlantis/layout/_sidebar_drawer.scss CHANGED
@@ -1,265 +1,281 @@
1
1
  @use './_sass_variables' as *;
2
2
 
3
3
  @media screen and (min-width: $breakpoint) {
4
- .layout-container {
5
- &.layout-drawer {
6
- .layout-topbar {
7
- .topbar-menubutton {
8
- display: none;
9
- }
4
+ .layout-drawer {
5
+ .layout-topbar {
6
+ .topbar-menubutton {
7
+ display: none;
10
8
  }
9
+ }
11
10
 
12
- .layout-sidebar {
13
- height: 100%;
14
- top: 0;
15
- transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
16
- width: 6rem;
17
- z-index: 999;
18
- background: var(--surface-ground);
19
- padding-bottom: 3rem;
20
- .layout-menu-container {
21
- overflow: hidden;
22
- }
11
+ .layout-sidebar {
12
+ height: 100%;
13
+ top: 0;
14
+ transition: width 0.3s cubic-bezier(0, 0, 0.2, 1);
15
+ width: 6rem;
16
+ z-index: 999;
17
+ background: var(--surface-ground);
18
+ padding-bottom: 3rem;
23
19
 
24
- .sidebar-header {
25
- display: flex;
26
- justify-content: center;
27
- gap: 1rem;
28
- padding: 1.5rem 0rem;
29
- height: 5.71rem;
30
- .app-logo {
31
- text-align: center;
32
- .app-logo-small {
33
- display: inline;
34
- order: 1;
35
- }
20
+ .layout-menu-container {
21
+ overflow: hidden;
22
+ }
36
23
 
37
- .app-logo-normal {
38
- display: flex;
39
- align-items: center;
24
+ .sidebar-header {
25
+ display: flex;
26
+ justify-content: center;
27
+ gap: 1rem;
28
+ padding: 1.5rem 0rem;
29
+ height: 5.71rem;
30
+
31
+ .app-logo {
32
+ text-align: center;
33
+
34
+ .app-logo-small {
35
+ display: inline;
36
+ order: 1;
37
+ }
38
+
39
+ .app-logo-normal {
40
+ display: flex;
41
+ align-items: center;
42
+ width: 0;
43
+ transition: width 0.1s cubic-bezier(0, 0, 0.2, 1);
44
+ transition-delay: 50ms;
45
+ max-width: 0;
46
+ height: 0;
47
+
48
+ img {
40
49
  width: 0;
41
50
  transition: width 0.1s cubic-bezier(0, 0, 0.2, 1);
42
51
  transition-delay: 50ms;
43
52
  max-width: 0;
44
- height: 0;
45
- img {
46
- width: 0;
47
- transition: width 0.1s cubic-bezier(0, 0, 0.2, 1);
48
- transition-delay: 50ms;
49
- max-width: 0;
50
- }
51
53
  }
52
54
  }
53
-
54
- .layout-sidebar-anchor {
55
- display: none;
56
- flex-shrink: 0;
57
- width: 1.25rem;
58
- height: 1.25rem;
59
- border-radius: 50%;
60
- border: 2px solid var(--primary-color);
61
- background-color: transparent;
62
- transition:
63
- background-color var(--layout-section-transition-duration),
64
- transform 0.3s;
65
- }
66
55
  }
67
56
 
68
- .layout-menu-container {
69
- overflow: hidden;
57
+ .layout-sidebar-anchor {
58
+ display: none;
59
+ padding: 0;
60
+ width: 1.388rem;
61
+ height: 1.25rem;
62
+ border-radius: 50%;
63
+ border: 2px solid var(--primary-color);
64
+ background-color: transparent;
65
+ transition:
66
+ background-color var(--transition-duration),
67
+ transform 0.3s;
70
68
  }
69
+ }
71
70
 
72
- .layout-menu {
73
- transition: all 0.4s;
74
- padding: 0 1rem;
75
- .layout-root-menuitem {
76
- > .layout-menuitem-root-text {
77
- opacity: 0;
78
- white-space: nowrap;
79
- transition: all 0.1s;
71
+ .layout-menu-container {
72
+ overflow: hidden;
73
+ }
80
74
 
81
- > span {
82
- margin-right: auto;
83
- }
75
+ .layout-menu {
76
+ transition: all 0.4s;
77
+ padding: 0 1rem;
84
78
 
85
- .layout-menuitem-icon {
86
- font-size: 1rem;
87
- }
79
+ .layout-root-menuitem {
80
+ > .layout-menuitem-root-text {
81
+ opacity: 0;
82
+ white-space: nowrap;
83
+ transition: all 0.1s;
88
84
 
89
- > .layout-menuitem-root-icon {
90
- display: block;
91
- margin-right: 0.125rem;
92
- font-size: 1.25rem;
93
- }
85
+ > span {
86
+ margin-right: auto;
87
+ }
88
+
89
+ .layout-menuitem-icon {
90
+ font-size: 1rem;
91
+ }
92
+
93
+ > .layout-menuitem-root-icon {
94
+ display: block;
95
+ margin-right: 0.125rem;
96
+ font-size: 1.25rem;
94
97
  }
95
98
  }
99
+ }
96
100
 
97
- ul {
98
- margin: 0 auto;
99
- padding: 0;
100
- list-style-type: none;
101
+ ul {
102
+ margin: 0 auto;
103
+ padding: 0;
104
+ list-style-type: none;
105
+ width: 3rem;
106
+
107
+ a {
108
+ border: none;
101
109
  width: 3rem;
102
- a {
103
- border: none;
104
- width: 3rem;
105
- padding: 0.5rem 1rem;
106
- span {
107
- opacity: 0;
108
- white-space: nowrap;
109
- transition: all 0.1s;
110
- }
110
+ padding: 0.5rem 1rem;
111
111
 
112
- .layout-menuitem-icon {
113
- font-size: 1rem;
114
- }
112
+ span {
113
+ opacity: 0;
114
+ white-space: nowrap;
115
+ transition: all 0.1s;
116
+ }
117
+
118
+ .layout-menuitem-icon {
119
+ font-size: 1rem;
115
120
  }
116
121
  }
117
122
  }
118
123
  }
124
+ }
119
125
 
120
- &.layout-drawer {
121
- .layout-content-wrapper {
122
- margin-left: 5.25rem;
123
- transition: margin-left 0.3s cubic-bezier(0, 0, 0.2, 1);
124
- overflow-x: hidden;
126
+ .layout-content-wrapper {
127
+ margin-left: 5.25rem;
128
+ transition: margin-left 0.3s cubic-bezier(0, 0, 0.2, 1);
129
+ overflow-x: hidden;
130
+ }
131
+
132
+ &.layout-sidebar-expanded {
133
+ .layout-sidebar {
134
+ width: 22rem;
135
+ padding-bottom: 0rem;
136
+
137
+ .layout-menu-container {
138
+ overflow: auto;
125
139
  }
126
- }
127
140
 
128
- &.layout-sidebar-active {
129
- .layout-sidebar {
130
- width: 22rem;
131
- padding-bottom: 0rem;
132
- .layout-menu-container {
133
- overflow: auto;
134
- }
141
+ .sidebar-header {
142
+ padding: 1.5rem 2rem;
143
+ justify-content: space-between;
144
+ height: 5.71rem;
135
145
 
136
- .sidebar-header {
137
- padding: 1.5rem 2rem;
138
- justify-content: space-between;
139
- height: 5.71rem;
140
- .app-logo {
141
- text-align: left;
142
- .app-logo-normal {
143
- height: auto;
144
- width: 100%;
145
- max-width: none;
146
- img {
147
- &:first-child {
148
- width: 32px;
149
- max-width: none;
150
- }
151
- &:last-child {
152
- width: 142px;
153
- max-width: none;
154
- }
146
+ .app-logo {
147
+ text-align: left;
148
+
149
+ .app-logo-normal {
150
+ height: auto;
151
+ width: 100%;
152
+ max-width: none;
153
+
154
+ img {
155
+ &:first-child {
156
+ width: 32px;
157
+ max-width: none;
155
158
  }
156
- }
157
159
 
158
- .app-logo-small {
159
- display: none;
160
+ &:last-child {
161
+ width: 142px;
162
+ max-width: none;
163
+ }
160
164
  }
161
165
  }
162
166
 
163
- .layout-sidebar-anchor {
164
- display: block;
165
- animation: px-fadein 0.15s linear;
167
+ .app-logo-small {
168
+ display: none;
166
169
  }
167
170
  }
168
171
 
169
- .layout-menu {
170
- padding: 0 1rem;
172
+ .layout-sidebar-anchor {
173
+ display: block;
174
+ animation: px-fadein 0.15s linear;
175
+ }
176
+ }
171
177
 
172
- li {
173
- border-radius: 8px;
174
- a {
175
- border-left: 8px solid transparent;
176
- }
178
+ .layout-menu {
179
+ padding: 0 1rem;
180
+
181
+ li {
182
+ border-radius: 8px;
183
+
184
+ a {
185
+ border-left: 8px solid transparent;
177
186
  }
178
- li.active-menuitem {
187
+ }
188
+
189
+ li.active-menuitem {
190
+ background-color: var(--root-menu-item-hover-bg);
191
+
192
+ > a {
193
+ border-left-color: var(--primary-color);
179
194
  background-color: var(--root-menu-item-hover-bg);
180
- > a {
181
- border-left-color: var(--primary-color);
182
- background-color: var(--root-menu-item-hover-bg);
183
- .layout-submenu-toggler {
184
- transform: rotate(-180deg);
185
- }
195
+
196
+ .layout-submenu-toggler {
197
+ transform: rotate(-180deg);
186
198
  }
187
199
  }
188
- a {
189
- user-select: none;
200
+ }
201
+ a {
202
+ user-select: none;
190
203
 
191
- &.active-menuitem {
192
- > .layout-submenu-toggler {
193
- transform: rotate(-180deg);
194
- }
204
+ &.active-menuitem {
205
+ > .layout-submenu-toggler {
206
+ transform: rotate(-180deg);
195
207
  }
196
208
  }
197
- .layout-root-menuitem {
198
- > div {
199
- padding-left: 1.5rem;
200
- margin-bottom: 0.5rem;
201
- font-size: 12px;
209
+ }
210
+ .layout-root-menuitem {
211
+ > div {
212
+ padding-left: 1.5rem;
213
+ margin-bottom: 0.5rem;
214
+ font-size: 12px;
215
+ opacity: 1;
216
+
217
+ > .layout-menuitem-text {
218
+ font-size: 0.857rem;
202
219
  opacity: 1;
203
- > .layout-menuitem-text {
204
- font-size: 0.857rem;
205
- opacity: 1;
206
- font-weight: 600;
207
- text-transform: uppercase;
208
- }
220
+ font-weight: 600;
221
+ text-transform: uppercase;
209
222
  }
210
223
  }
224
+ }
211
225
 
212
- ul {
226
+ ul {
227
+ width: auto;
228
+
229
+ li {
213
230
  width: auto;
214
- li {
215
- width: auto;
231
+ }
232
+
233
+ a {
234
+ width: auto;
235
+
236
+ .layout-submenu-toggler {
237
+ display: block;
216
238
  }
217
- a {
218
- width: auto;
219
239
 
220
- .layout-submenu-toggler {
221
- display: block;
222
- }
240
+ span {
241
+ opacity: 1;
242
+ white-space: nowrap;
243
+ transition: all 0.3s;
244
+ }
245
+ }
223
246
 
224
- span {
225
- opacity: 1;
226
- white-space: nowrap;
227
- transition: all 0.3s;
247
+ ul {
248
+ overflow: hidden;
249
+ border-radius: var(--border-radius);
250
+
251
+ li {
252
+ a {
253
+ padding-left: 2.5rem;
228
254
  }
229
- }
230
- ul {
231
- overflow: hidden;
232
- border-radius: var(--border-radius);
233
255
 
234
256
  li {
235
257
  a {
236
- padding-left: 2.5rem;
258
+ padding-left: 3rem;
237
259
  }
238
260
 
239
261
  li {
240
262
  a {
241
- padding-left: 3rem;
263
+ padding-left: 3.5rem;
242
264
  }
243
265
 
244
266
  li {
245
267
  a {
246
- padding-left: 3.5rem;
268
+ padding-left: 4rem;
247
269
  }
248
270
 
249
271
  li {
250
272
  a {
251
- padding-left: 4rem;
273
+ padding-left: 5.5rem;
252
274
  }
253
275
 
254
276
  li {
255
277
  a {
256
- padding-left: 5.5rem;
257
- }
258
-
259
- li {
260
- a {
261
- padding-left: 5rem;
262
- }
278
+ padding-left: 5rem;
263
279
  }
264
280
  }
265
281
  }
@@ -271,17 +287,17 @@
271
287
  }
272
288
  }
273
289
  }
290
+ }
274
291
 
275
- &.layout-sidebar-anchored {
276
- .sidebar-header {
277
- .layout-sidebar-anchor {
278
- background-color: var(--primary-color);
279
- }
292
+ &.layout-sidebar-anchored {
293
+ .sidebar-header {
294
+ .layout-sidebar-anchor {
295
+ background-color: var(--primary-color);
280
296
  }
297
+ }
281
298
 
282
- .layout-content-wrapper {
283
- margin-left: 22rem;
284
- }
299
+ .layout-content-wrapper {
300
+ margin-left: 22rem;
285
301
  }
286
302
  }
287
303
  }