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