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