@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_horizontal.scss CHANGED
@@ -1,161 +1,170 @@
1
1
  @use './_sass_variables' as *;
2
2
 
3
3
  @media screen and (min-width: $breakpoint) {
4
- .layout-container {
5
- &.layout-horizontal {
6
- .layout-topbar {
7
- .topbar-menubutton {
8
- display: none;
9
- }
10
- .layout-topbar-menu-section {
11
- width: calc(100% - 320px);
12
- }
13
- .topbar-breadcrumb {
4
+ .layout-horizontal {
5
+ .layout-topbar {
6
+ .topbar-menubutton {
7
+ display: none;
8
+ }
9
+ .layout-topbar-menu-section {
10
+ width: calc(100% - 320px);
11
+ }
12
+ .topbar-breadcrumb {
13
+ display: none;
14
+ }
15
+ }
16
+
17
+ .layout-sidebar {
18
+ width: auto;
19
+ height: auto;
20
+ top: 0;
21
+ z-index: 999;
22
+ overflow: visible;
23
+ flex-direction: row;
24
+ position: static;
25
+
26
+ .layout-menu-container {
27
+ overflow: auto;
28
+ padding-bottom: 0;
29
+
30
+ &::-webkit-scrollbar {
14
31
  display: none;
15
32
  }
16
33
  }
17
34
 
18
- .layout-sidebar {
19
- width: auto;
20
- height: auto;
21
- top: 0;
22
- z-index: 999;
23
- overflow: visible;
24
- flex-direction: row;
25
- position: static;
35
+ .sidebar-header {
36
+ padding: 0;
26
37
 
27
- .layout-menu-container {
28
- overflow: auto;
29
- padding-bottom: 0;
30
- &::-webkit-scrollbar {
38
+ .app-logo {
39
+ .app-logo-normal {
31
40
  display: none;
32
41
  }
42
+
43
+ .app-logo-small {
44
+ display: inline;
45
+ }
33
46
  }
47
+ }
48
+ }
34
49
 
35
- .sidebar-header {
36
- padding: 0;
37
- .app-logo {
38
- .app-logo-normal {
39
- display: none;
40
- }
50
+ .layout-menu {
51
+ display: flex;
52
+ flex-wrap: nowrap;
53
+ flex-direction: row;
54
+ align-items: center;
55
+ height: 100%;
56
+ padding: 0 1rem;
41
57
 
42
- .app-logo-small {
43
- display: inline;
44
- }
45
- }
58
+ > li {
59
+ margin-bottom: 0rem;
60
+
61
+ &:first-child {
62
+ margin-top: 0rem;
46
63
  }
47
64
  }
48
65
 
49
- .layout-menu {
50
- display: flex;
51
- flex-wrap: nowrap;
52
- flex-direction: row;
53
- align-items: center;
54
- height: 100%;
55
- padding: 0 1rem;
56
- > li {
57
- margin-bottom: 0rem;
58
- &:first-child {
59
- margin-top: 0rem;
60
- }
66
+ ul {
67
+ display: none;
68
+ }
69
+
70
+ li.active-menuitem {
71
+ > ul {
72
+ display: block;
61
73
  }
62
- ul {
74
+ }
75
+
76
+ .layout-root-menuitem {
77
+ border-radius: var(--border-radius);
78
+
79
+ > .layout-menuitem-root-text {
63
80
  display: none;
64
81
  }
65
82
 
66
- .layout-root-menuitem {
67
- border-radius: var(--border-radius);
83
+ > a {
84
+ display: flex;
85
+ align-items: center;
86
+ padding: 0.75rem;
87
+ border-radius: 6px;
88
+ border: none;
89
+ cursor: pointer;
90
+ outline: none;
91
+ color: var(--text-color);
92
+ transition: background-color var(--transition-duration);
93
+
94
+ .layout-submenu-toggler {
95
+ display: block;
96
+ margin-left: auto;
97
+ transition: transform 0.2s;
98
+ }
68
99
 
69
- > .layout-menuitem-root-text {
70
- display: none;
100
+ .layout-menuitem-icon {
101
+ font-size: 1rem;
71
102
  }
72
103
 
73
- > a {
74
- display: flex;
75
- align-items: center;
76
- padding: 0.75rem;
77
- border-radius: 6px;
78
- border: none;
79
- cursor: pointer;
80
- outline: none;
81
- color: var(--text-color);
82
- transition: background-color var(--layout-section-transition-duration);
104
+ .layout-menuitem-text {
105
+ font-size: 0.875rem;
106
+ display: block;
107
+ margin-left: 0.75rem;
108
+ margin-right: 0.75rem;
109
+ white-space: nowrap;
110
+ }
83
111
 
84
- .layout-submenu-toggler {
85
- display: block;
86
- margin-left: auto;
87
- transition: transform 0.2s;
88
- }
112
+ &:hover {
113
+ background-color: var(--menuitem-hover-bg-color);
114
+ }
115
+ }
89
116
 
90
- .layout-menuitem-icon {
91
- font-size: 1rem;
92
- }
117
+ > ul {
118
+ position: fixed;
119
+ top: auto;
120
+ transform: translateX(var(--menu-scroll-x, 0px)) translateY(0.5rem);
121
+ min-width: 15rem;
122
+ background: var(--surface-overlay);
123
+ box-shadow: var(--sidebar-shadow);
124
+ padding: 0.8rem;
125
+ border-radius: var(--border-radius);
126
+ max-height: 20rem;
127
+ overflow: auto;
128
+ z-index: 999;
93
129
 
94
- .layout-menuitem-text {
95
- font-size: 0.875rem;
96
- display: block;
97
- margin-left: 0.75rem;
98
- margin-right: 0.75rem;
99
- white-space: nowrap;
100
- }
130
+ a {
131
+ padding-right: 0.5rem;
132
+ color: var(--text-color);
133
+ border-radius: var(--border-radius);
101
134
 
102
135
  &:hover {
103
- background-color: var(--menuitem-hover-bg-color);
136
+ background-color: var(--root-menu-item-hover-bg);
104
137
  }
105
138
  }
106
139
 
107
- > ul {
108
- position: absolute;
109
- left: auto;
110
- top: 5rem;
111
- min-width: 15rem;
112
- background: var(--surface-overlay);
113
- box-shadow: var(--sidebar-shadow);
114
- padding: 0.8rem;
115
- border-radius: var(--border-radius);
116
- max-height: 20rem;
117
- overflow: auto;
118
- z-index: 999;
119
-
140
+ li {
120
141
  a {
121
- padding-right: 0.5rem;
122
- color: var(--text-color);
123
- border-radius: var(--border-radius);
124
-
125
- &:hover {
126
- background-color: var(--root-menu-item-hover-bg);
127
- }
142
+ padding-left: 0.5rem;
128
143
  }
129
144
 
130
145
  li {
131
146
  a {
132
- padding-left: 0.5rem;
147
+ padding-left: 1rem;
133
148
  }
134
149
 
135
150
  li {
136
151
  a {
137
- padding-left: 1rem;
152
+ padding-left: 1.5rem;
138
153
  }
139
154
 
140
155
  li {
141
156
  a {
142
- padding-left: 1.5rem;
157
+ padding-left: 2rem;
143
158
  }
144
159
 
145
160
  li {
146
161
  a {
147
- padding-left: 2rem;
162
+ padding-left: 2.5rem;
148
163
  }
149
164
 
150
165
  li {
151
166
  a {
152
- padding-left: 2.5rem;
153
- }
154
-
155
- li {
156
- a {
157
- padding-left: 3rem;
158
- }
167
+ padding-left: 3rem;
159
168
  }
160
169
  }
161
170
  }
package/styles/atlantis/layout/_sidebar_reveal.scss CHANGED
@@ -1,183 +1,189 @@
1
1
  @use './_sass_variables' as *;
2
2
 
3
3
  @media screen and (min-width: $breakpoint) {
4
- .layout-container {
5
- &.layout-reveal {
6
- .layout-topbar {
7
- .topbar-menubutton {
8
- display: none;
9
- }
4
+ .layout-reveal {
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: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
16
- transform: translateX(-15.5rem);
17
- z-index: 999;
18
- background: var(--surface-ground);
19
- padding-bottom: 3rem;
20
- .sidebar-header {
21
- display: flex;
22
- justify-content: flex-end;
23
- align-items: center;
24
- gap: 1rem;
25
- padding: 1.5rem 1rem;
26
- height: 5.71rem;
27
- .app-logo {
28
- text-align: right;
29
- .app-logo-small {
30
- display: inline;
31
- order: 1;
32
- margin-right: 0.5rem;
33
- }
34
-
35
- .app-logo-normal {
36
- display: none;
37
- }
11
+ .layout-sidebar {
12
+ height: 100%;
13
+ top: 0;
14
+ transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
15
+ transform: translateX(-15.5rem);
16
+ z-index: 999;
17
+ background: var(--surface-ground);
18
+ padding-bottom: 3rem;
19
+
20
+ .sidebar-header {
21
+ display: flex;
22
+ justify-content: flex-end;
23
+ align-items: center;
24
+ gap: 1rem;
25
+ padding: 1.5rem 1rem;
26
+ height: 5.71rem;
27
+
28
+ .app-logo {
29
+ text-align: right;
30
+
31
+ .app-logo-small {
32
+ display: inline;
33
+ order: 1;
34
+ margin-right: 0.5rem;
38
35
  }
39
36
 
40
- .layout-sidebar-anchor {
37
+ .app-logo-normal {
41
38
  display: none;
42
- width: 1.25rem;
43
- height: 1.25rem;
44
- border-radius: 50%;
45
- border: 2px solid var(--primary-color);
46
- background-color: transparent;
47
- transition:
48
- background-color var(--layout-section-transition-duration),
49
- transform 0.3s;
50
39
  }
51
40
  }
52
- .layout-menu-container {
53
- overflow: hidden;
41
+
42
+ .layout-sidebar-anchor {
43
+ display: none;
44
+ padding: 0;
45
+ width: 1.388rem;
46
+ height: 1.25rem;
47
+ border-radius: 50%;
48
+ border: 2px solid var(--primary-color);
49
+ background-color: transparent;
50
+ transition:
51
+ background-color var(--transition-duration),
52
+ transform 0.3s;
54
53
  }
54
+ }
55
55
 
56
- .layout-menu {
57
- .layout-root-menuitem {
58
- > .layout-menuitem-root-text {
59
- > span {
60
- margin-right: auto;
61
- }
56
+ .layout-menu-container {
57
+ overflow: hidden;
58
+ }
62
59
 
63
- > .layout-menuitem-root-icon {
64
- display: block;
65
- margin-right: 0.125rem;
66
- }
60
+ .layout-menu {
61
+ .layout-root-menuitem {
62
+ > .layout-menuitem-root-text {
63
+ > span {
64
+ margin-right: auto;
65
+ }
66
+
67
+ > .layout-menuitem-root-icon {
68
+ display: block;
69
+ margin-right: 0.125rem;
67
70
  }
68
71
  }
72
+ }
69
73
 
70
- ul {
71
- margin: 0;
72
- padding: 0;
73
- list-style-type: none;
74
+ ul {
75
+ margin: 0;
76
+ padding: 0;
77
+ list-style-type: none;
74
78
 
75
- a {
76
- padding: 0.5rem 1rem;
77
- .layout-menuitem-text {
78
- order: 1;
79
- margin-right: auto;
80
- }
79
+ a {
80
+ padding: 0.5rem 1rem;
81
81
 
82
- .layout-submenu-toggler {
83
- order: 2;
84
- display: none;
85
- margin-right: 0.5rem;
86
- }
82
+ .layout-menuitem-text {
83
+ order: 1;
84
+ margin-right: auto;
85
+ }
87
86
 
88
- .layout-menuitem-icon {
89
- order: 3;
90
- margin-right: 0;
91
- font-size: 1rem;
92
- width: auto;
93
- }
87
+ .layout-submenu-toggler {
88
+ order: 2;
89
+ display: none;
90
+ margin-right: 0.5rem;
91
+ }
92
+
93
+ .layout-menuitem-icon {
94
+ order: 3;
95
+ margin-right: 0;
96
+ font-size: 1rem;
97
+ width: auto;
94
98
  }
95
99
  }
96
100
  }
97
101
  }
102
+ }
103
+
104
+ .layout-content-wrapper {
105
+ margin-left: 4.25rem;
106
+ transition: margin-left 0.3s cubic-bezier(0, 0, 0.2, 1);
107
+ }
98
108
 
99
- &.layout-reveal {
100
- .layout-content-wrapper {
101
- margin-left: 4.25rem;
102
- transition: margin-left 0.3s cubic-bezier(0, 0, 0.2, 1);
109
+ &.layout-sidebar-expanded {
110
+ .layout-sidebar {
111
+ padding-bottom: 0rem;
112
+ transform: translateX(0);
113
+
114
+ .layout-menu-container {
115
+ overflow: auto;
103
116
  }
104
- }
105
117
 
106
- &.layout-sidebar-active {
107
- .layout-sidebar {
108
- padding-bottom: 0rem;
109
- transform: translateX(0);
110
- .layout-menu-container {
111
- overflow: auto;
118
+ .sidebar-header {
119
+ padding: 1.5rem 2rem;
120
+ justify-content: space-between;
121
+
122
+ .app-logo {
123
+ text-align: left;
124
+
125
+ .app-logo-normal {
126
+ display: inline;
127
+ }
128
+
129
+ .app-logo-small {
130
+ display: none;
131
+ }
112
132
  }
113
- .sidebar-header {
114
- padding: 1.5rem 2rem;
115
- justify-content: space-between;
116
- .app-logo {
117
- text-align: left;
118
- .app-logo-normal {
119
- display: inline;
120
- }
121
133
 
122
- .app-logo-small {
134
+ .layout-sidebar-anchor {
135
+ display: block;
136
+ animation: px-fadein 0.15s linear;
137
+ }
138
+ }
139
+
140
+ .layout-menu {
141
+ .layout-root-menuitem {
142
+ > .layout-menuitem-root-text {
143
+ > .layout-menuitem-root-icon {
123
144
  display: none;
124
145
  }
125
146
  }
126
- .layout-sidebar-anchor {
127
- display: block;
128
- animation: px-fadein 0.15s linear;
129
- flex-shrink: 0;
130
- }
131
147
  }
132
148
 
133
- .layout-menu {
134
- .layout-root-menuitem {
135
- > .layout-menuitem-root-text {
136
- > .layout-menuitem-root-icon {
137
- display: none;
138
- }
149
+ ul {
150
+ a {
151
+ .layout-submenu-toggler {
152
+ display: block;
139
153
  }
140
154
  }
141
-
142
155
  ul {
143
- a {
144
- .layout-submenu-toggler {
145
- display: block;
156
+ overflow: hidden;
157
+ border-radius: var(--border-radius);
158
+
159
+ li {
160
+ a {
161
+ padding-left: 2.5rem;
146
162
  }
147
- }
148
- ul {
149
- overflow: hidden;
150
- border-radius: var(--border-radius);
151
163
 
152
164
  li {
153
165
  a {
154
- padding-left: 2.5rem;
166
+ padding-left: 3rem;
155
167
  }
156
168
 
157
169
  li {
158
170
  a {
159
- padding-left: 3rem;
171
+ padding-left: 3.5rem;
160
172
  }
161
173
 
162
174
  li {
163
175
  a {
164
- padding-left: 3.5rem;
176
+ padding-left: 4rem;
165
177
  }
166
178
 
167
179
  li {
168
180
  a {
169
- padding-left: 4rem;
181
+ padding-left: 5.5rem;
170
182
  }
171
183
 
172
184
  li {
173
185
  a {
174
- padding-left: 5.5rem;
175
- }
176
-
177
- li {
178
- a {
179
- padding-left: 5rem;
180
- }
186
+ padding-left: 5rem;
181
187
  }
182
188
  }
183
189
  }
@@ -189,17 +195,17 @@
189
195
  }
190
196
  }
191
197
  }
198
+ }
192
199
 
193
- &.layout-sidebar-anchored {
194
- .sidebar-header {
195
- .layout-sidebar-anchor {
196
- background-color: var(--primary-color);
197
- }
200
+ &.layout-sidebar-anchored {
201
+ .sidebar-header {
202
+ .layout-sidebar-anchor {
203
+ background-color: var(--primary-color);
198
204
  }
205
+ }
199
206
 
200
- .layout-content-wrapper {
201
- margin-left: 22rem;
202
- }
207
+ .layout-content-wrapper {
208
+ margin-left: 22rem;
203
209
  }
204
210
  }
205
211
  }