@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_slim.scss CHANGED
@@ -1,149 +1,162 @@
1
1
  @use './_sass_variables' as *;
2
2
 
3
3
  @media screen and (min-width: $breakpoint) {
4
- .layout-container {
5
- &.layout-slim {
6
- .layout-topbar {
7
- .topbar-menubutton {
8
- display: none;
9
- }
4
+ .layout-slim {
5
+ .layout-topbar {
6
+ .topbar-menubutton {
7
+ display: none;
10
8
  }
9
+ }
11
10
 
12
- .sidebar-header {
13
- padding: 1.7rem 0;
14
- .app-logo {
15
- display: flex;
16
- align-items: center;
17
- justify-content: center;
11
+ .sidebar-header {
12
+ padding: 1.7rem 0;
18
13
 
19
- .app-logo-normal {
20
- display: none;
21
- img {
22
- height: 1.714rem;
23
- }
14
+ .app-logo {
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+
19
+ .app-logo-normal {
20
+ display: none;
21
+ img {
22
+ height: 1.714rem;
24
23
  }
24
+ }
25
25
 
26
- .app-logo-small {
27
- display: inline;
28
- img {
29
- height: 2.5rem;
30
- }
26
+ .app-logo-small {
27
+ display: inline;
28
+ img {
29
+ height: 2.5rem;
31
30
  }
32
31
  }
33
32
  }
33
+ }
34
34
 
35
- .layout-sidebar {
36
- width: 5.857rem;
37
- overflow: visible;
38
- z-index: 999;
39
- .layout-menu-container {
40
- overflow: auto;
35
+ .layout-sidebar {
36
+ width: 5.857rem;
37
+ overflow: visible;
38
+ z-index: 999;
41
39
 
42
- &::-webkit-scrollbar {
43
- display: none;
44
- }
40
+ .layout-menu-container {
41
+ overflow: auto;
42
+
43
+ &::-webkit-scrollbar {
44
+ display: none;
45
45
  }
46
46
  }
47
+ }
48
+
49
+ .layout-content-wrapper {
50
+ margin-left: 5.857rem;
51
+ }
52
+
53
+ .layout-menu {
54
+ padding: 0 1rem;
55
+
56
+ ul {
57
+ display: none;
58
+ }
59
+
60
+ li.active-menuitem {
61
+ background-color: unset;
47
62
 
48
- .layout-content-wrapper {
49
- margin-left: 5.857rem;
63
+ > ul {
64
+ display: block;
65
+ }
50
66
  }
51
67
 
52
- .layout-menu {
53
- padding: 0 1rem;
54
- .layout-root-menuitem {
55
- > .layout-menuitem-root-text {
68
+ .layout-root-menuitem {
69
+ > .layout-menuitem-root-text {
70
+ display: none;
71
+ }
72
+
73
+ > a {
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ border-radius: 12px;
78
+ border: none;
79
+ cursor: pointer;
80
+ outline: none;
81
+ margin: 0px;
82
+ padding: 8px;
83
+ width: 40px;
84
+ height: 40px;
85
+ margin: 0 auto 1rem auto;
86
+
87
+ .layout-submenu-toggler {
56
88
  display: none;
57
89
  }
58
90
 
59
- > a {
60
- display: flex;
61
- align-items: center;
62
- justify-content: center;
63
- border-radius: 12px;
64
- border: none;
65
- cursor: pointer;
66
- outline: none;
67
- transition: background-color var(--layout-section-transition-duration);
68
- padding: 8px;
69
- width: 40px;
70
- height: 40px;
71
- margin: 0 auto 1rem auto;
72
-
73
- .layout-submenu-toggler {
74
- display: none;
75
- }
76
-
77
- .layout-menuitem-icon {
78
- font-size: 1.5rem;
79
- }
91
+ .layout-menuitem-icon {
92
+ font-size: 1.5rem;
93
+ }
80
94
 
81
- .layout-menuitem-text {
82
- display: none;
83
- }
95
+ .layout-menuitem-text {
96
+ display: none;
97
+ }
84
98
 
85
- &:hover {
86
- color: (--primary-color-text);
87
- background-color: var(--primary-color);
88
- }
99
+ &:hover {
100
+ color: var(--primary-color-text);
101
+ background-color: var(--primary-color);
89
102
  }
103
+ }
104
+
105
+ > ul {
106
+ position: fixed;
107
+ left: 5.857rem;
108
+ top: auto;
109
+ min-width: 15rem;
110
+ background: var(--surface-ground);
111
+ border-radius: var(--border-radius);
112
+ box-shadow: var(--sidebar-shadow);
113
+ padding: 0.5rem;
114
+ max-height: 20rem;
115
+ overflow: auto;
116
+ z-index: 999;
90
117
 
91
- > ul {
92
- position: absolute;
93
- left: 5.857rem;
94
- top: 0;
95
- min-width: 15rem;
96
- background: var(--surface-ground);
118
+ a {
119
+ padding-right: 0.5rem;
120
+ color: var(--text-color);
97
121
  border-radius: var(--border-radius);
98
- box-shadow: var(--sidebar-shadow);
99
- padding: 0.5rem;
100
- max-height: 20rem;
101
- overflow: auto;
102
- z-index: 999;
103
122
 
104
- a {
105
- padding-right: 0.5rem;
123
+ .layout-menuitem-icon {
106
124
  color: var(--text-color);
107
- border-radius: var(--border-radius);
125
+ }
108
126
 
109
- .layout-menuitem-icon {
110
- color: var(--text-color);
111
- }
127
+ &:hover {
128
+ background-color: var(--root-menu-item-hover-bg);
129
+ }
130
+ }
112
131
 
113
- &:hover {
114
- background-color: var(--root-menu-item-hover-bg);
115
- }
132
+ li {
133
+ a {
134
+ padding-left: 0.5rem;
116
135
  }
117
136
 
118
137
  li {
119
138
  a {
120
- padding-left: 0.5rem;
139
+ padding-left: 1rem;
121
140
  }
122
141
 
123
142
  li {
124
143
  a {
125
- padding-left: 1rem;
144
+ padding-left: 1.5rem;
126
145
  }
127
146
 
128
147
  li {
129
148
  a {
130
- padding-left: 1.5rem;
149
+ padding-left: 2rem;
131
150
  }
132
151
 
133
152
  li {
134
153
  a {
135
- padding-left: 2rem;
154
+ padding-left: 2.5rem;
136
155
  }
137
156
 
138
157
  li {
139
158
  a {
140
- padding-left: 2.5rem;
141
- }
142
-
143
- li {
144
- a {
145
- padding-left: 3rem;
146
- }
159
+ padding-left: 3rem;
147
160
  }
148
161
  }
149
162
  }
package/styles/atlantis/layout/_sidebar_slim_plus.scss CHANGED
@@ -1,95 +1,123 @@
1
1
  @use './_sass_variables' as *;
2
2
 
3
3
  @media screen and (min-width: $breakpoint) {
4
- .layout-container {
5
- &.layout-slim-plus {
6
- .layout-topbar {
7
- .topbar-menubutton {
8
- display: none;
9
- }
4
+ .layout-slim-plus {
5
+ .layout-topbar {
6
+ .topbar-menubutton {
7
+ display: none;
10
8
  }
9
+ }
10
+
11
+ .sidebar-header {
12
+ justify-content: center;
13
+ padding: 1.7rem 0;
11
14
 
12
- .sidebar-header {
15
+ .app-logo {
16
+ display: flex;
13
17
  justify-content: center;
14
- padding: 1.7rem 0;
15
- .app-logo {
16
- display: flex;
17
- justify-content: center;
18
- align-items: center;
19
- .app-logo-normal {
20
- display: none;
21
- }
18
+ align-items: center;
22
19
 
23
- .app-logo-small {
24
- display: inline;
25
- align-items: center;
26
- }
20
+ .app-logo-normal {
21
+ display: none;
22
+ }
23
+
24
+ .app-logo-small {
25
+ display: inline;
26
+ align-items: center;
27
27
  }
28
28
  }
29
+ }
29
30
 
30
- .layout-sidebar {
31
- width: 8rem;
32
- overflow: visible;
33
- z-index: 999;
34
- .layout-menu-container {
35
- overflow: auto;
31
+ .layout-sidebar {
32
+ width: 8rem;
33
+ overflow: visible;
34
+ z-index: 999;
36
35
 
37
- &::-webkit-scrollbar {
38
- display: none;
39
- }
36
+ .layout-menu-container {
37
+ overflow: auto;
38
+
39
+ &::-webkit-scrollbar {
40
+ display: none;
40
41
  }
41
42
  }
43
+ }
42
44
 
43
- .layout-content-wrapper {
44
- margin-left: 8rem;
45
+ .layout-content-wrapper {
46
+ margin-left: 8rem;
47
+ }
48
+
49
+ .layout-menu {
50
+ padding: 0 1rem;
51
+ ul {
52
+ display: none;
53
+ }
54
+
55
+ li.active-menuitem {
56
+ > ul {
57
+ display: block;
58
+ }
45
59
  }
46
60
 
47
- .layout-menu {
48
- padding: 0 1rem;
49
- ul {
61
+ .layout-root-menuitem {
62
+ > .layout-menuitem-root-text {
50
63
  display: none;
51
64
  }
52
65
 
53
- li.active-menuitem {
54
- > ul {
66
+ > a {
67
+ display: flex;
68
+ flex-direction: column;
69
+ align-items: center;
70
+ justify-content: center;
71
+ border-radius: 12px;
72
+ text-align: center;
73
+ cursor: pointer;
74
+ border: none;
75
+ outline: none;
76
+ width: auto;
77
+ height: auto;
78
+ margin: 0 auto 1rem auto;
79
+ padding: 8px;
80
+
81
+ .layout-submenu-toggler {
82
+ display: none;
83
+ }
84
+
85
+ .layout-menuitem-icon {
86
+ font-size: 1.5rem;
87
+ color: var(--text-color);
88
+ }
89
+
90
+ .layout-menuitem-text {
91
+ font-size: 0.875rem;
55
92
  display: block;
93
+ margin-top: 0.25rem;
94
+ color: var(--text-color);
56
95
  }
57
- }
58
96
 
59
- .layout-root-menuitem {
60
- > .layout-menuitem-root-text {
61
- display: none;
97
+ &:hover {
98
+ background-color: var(--root-menu-item-hover-bg);
62
99
  }
100
+ }
63
101
 
64
- > a {
65
- display: flex;
66
- flex-direction: column;
67
- align-items: center;
68
- justify-content: center;
69
- border-radius: 12px;
70
- text-align: center;
71
- cursor: pointer;
72
- border: none;
73
- outline: none;
74
- transition: background-color var(--layout-section-transition-duration);
75
- width: auto;
76
- height: auto;
77
- margin: 0 auto 1rem auto;
78
- padding: 8px;
79
-
80
- .layout-submenu-toggler {
81
- display: none;
82
- }
102
+ > ul {
103
+ position: fixed;
104
+ left: 8rem;
105
+ top: auto;
106
+ min-width: 15rem;
107
+ background: var(--surface-ground);
108
+ border-radius: var(--border-radius);
109
+ box-shadow: var(--sidebar-shadow);
110
+ padding: 0.5rem;
111
+ max-height: 20rem;
112
+ overflow: auto;
113
+ z-index: 999;
83
114
 
84
- .layout-menuitem-icon {
85
- font-size: 1.5rem;
86
- color: var(--text-color);
87
- }
115
+ a {
116
+ padding-right: 0.5rem;
117
+ color: var(--text-color);
118
+ border-radius: var(--border-radius);
88
119
 
89
- .layout-menuitem-text {
90
- font-size: 0.875rem;
91
- display: block;
92
- margin-top: 0.25rem;
120
+ .layout-menuitem-icon {
93
121
  color: var(--text-color);
94
122
  }
95
123
 
@@ -98,62 +126,34 @@
98
126
  }
99
127
  }
100
128
 
101
- > ul {
102
- position: absolute;
103
- left: 8rem;
104
- top: 0;
105
- min-width: 15rem;
106
- background: var(--surface-ground);
107
- border-radius: var(--border-radius);
108
- box-shadow: var(--sidebar-shadow);
109
- padding: 0.5rem;
110
- max-height: 20rem;
111
- overflow: auto;
112
- z-index: 999;
113
-
129
+ li {
114
130
  a {
115
- padding-right: 0.5rem;
116
- color: var(--text-color);
117
- border-radius: var(--border-radius);
118
-
119
- .layout-menuitem-icon {
120
- color: var(--text-color);
121
- }
122
-
123
- &:hover {
124
- background-color: var(--root-menu-item-hover-bg);
125
- }
131
+ padding-left: 0.5rem;
126
132
  }
127
133
 
128
134
  li {
129
135
  a {
130
- padding-left: 0.5rem;
136
+ padding-left: 1rem;
131
137
  }
132
138
 
133
139
  li {
134
140
  a {
135
- padding-left: 1rem;
141
+ padding-left: 1.5rem;
136
142
  }
137
143
 
138
144
  li {
139
145
  a {
140
- padding-left: 1.5rem;
146
+ padding-left: 2rem;
141
147
  }
142
148
 
143
149
  li {
144
150
  a {
145
- padding-left: 2rem;
151
+ padding-left: 2.5rem;
146
152
  }
147
153
 
148
154
  li {
149
155
  a {
150
- padding-left: 2.5rem;
151
- }
152
-
153
- li {
154
- a {
155
- padding-left: 3rem;
156
- }
156
+ padding-left: 3rem;
157
157
  }
158
158
  }
159
159
  }
package/styles/atlantis/layout/_sidebar_vertical.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  .app-logo-normal {
23
23
  display: inline;
24
24
  img {
25
- height: 1.714rem;
25
+ height: 2rem;
26
26
  border: 0 none;
27
27
  }
28
28
  }
@@ -68,6 +68,7 @@
68
68
  .layout-root-menuitem {
69
69
  > div {
70
70
  padding-left: 1.5rem;
71
+ padding-top: 0.5rem;
71
72
  margin-bottom: 0.5rem;
72
73
  font-size: 12px;
73
74
 
@@ -80,6 +81,12 @@
80
81
  > a {
81
82
  display: none;
82
83
  }
84
+
85
+ > ul {
86
+ > li.active-menuitem {
87
+ background-color: var(--root-menu-item-hover-bg);
88
+ }
89
+ }
83
90
  }
84
91
 
85
92
  a {
@@ -101,6 +108,11 @@
101
108
  transform: rotate(-180deg);
102
109
  }
103
110
  }
111
+
112
+ > ul {
113
+ max-height: 1000px;
114
+ transition: max-height 1s ease-in-out;
115
+ }
104
116
  }
105
117
 
106
118
  ul {
@@ -117,9 +129,7 @@
117
129
  cursor: pointer;
118
130
  padding: 0.5rem 1rem;
119
131
  border-radius: 8px;
120
- transition:
121
- background-color var(--layout-section-transition-duration),
122
- box-shadow var(--layout-section-transition-duration);
132
+ transition: box-shadow var(--transition-duration);
123
133
 
124
134
  .layout-menuitem-icon {
125
135
  margin-right: 0.5rem;
@@ -128,7 +138,7 @@
128
138
  .layout-submenu-toggler {
129
139
  font-size: 75%;
130
140
  margin-left: auto;
131
- transition: transform var(--layout-section-transition-duration);
141
+ transition: transform var(--transition-duration);
132
142
  }
133
143
 
134
144
  &.active-route {
@@ -144,6 +154,8 @@
144
154
  ul {
145
155
  overflow: hidden;
146
156
  border-radius: var(--border-radius);
157
+ max-height: 0;
158
+ transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1);
147
159
 
148
160
  li {
149
161
  a {
package/styles/atlantis/layout/_topbar.scss CHANGED
@@ -56,10 +56,10 @@
56
56
  &.topbar-item {
57
57
  margin-left: 1.5rem;
58
58
  display: inline-flex;
59
- flex-shrink: 0;
60
59
  align-items: center;
61
60
  justify-content: center;
62
61
  position: relative;
62
+ flex-shrink: 0;
63
63
 
64
64
  img {
65
65
  width: 2rem;
@@ -70,7 +70,7 @@
70
70
  border-radius: 50%;
71
71
  width: 2rem;
72
72
  height: 2rem;
73
- transition: box-shadow var(--layout-section-transition-duration);
73
+ transition: box-shadow var(--transition-duration);
74
74
 
75
75
  &:focus {
76
76
  box-shadow: var(--focus-ring-shadow);
@@ -83,7 +83,7 @@
83
83
  right: 0;
84
84
  display: none;
85
85
  color: var(--text-color);
86
- background: var(--surface-ground);
86
+ background: var(--surface-card);
87
87
 
88
88
  &.active-topbar-menu {
89
89
  display: block;
@@ -99,6 +99,7 @@
99
99
  display: flex;
100
100
  align-items: center;
101
101
  flex-shrink: 0;
102
+ overflow: hidden;
102
103
 
103
104
  .topbar-searchbutton {
104
105
  display: flex;
@@ -111,15 +112,20 @@
111
112
  visibility: hidden;
112
113
  transition: 400ms cubic-bezier(0.86, 0, 0.07, 1);
113
114
 
114
- .p-inputtext {
115
+ > div {
115
116
  width: 100%;
116
- position: relative;
117
- border-radius: 40px;
118
- }
119
117
 
120
- span {
121
- font-size: 18px;
122
- margin-top: -9px;
118
+ .p-inputtext {
119
+ width: 100%;
120
+ position: relative;
121
+ border-radius: 40px;
122
+ padding: 9px;
123
+ }
124
+
125
+ span {
126
+ font-size: 18px;
127
+ margin-top: -9px;
128
+ }
123
129
  }
124
130
  }
125
131
 
@@ -201,3 +207,21 @@
201
207
  clip-path: inset(0 0 98% 0);
202
208
  }
203
209
  }
210
+
211
+ .layout-horizontal {
212
+ .layout-topbar .topbar-menu li .topbar-search {
213
+ position: relative;
214
+ width: 2rem;
215
+ overflow: visible;
216
+
217
+ .topbar-searchbutton {
218
+ position: absolute;
219
+ right: 0;
220
+ }
221
+
222
+ .search-input-wrapper {
223
+ position: absolute;
224
+ right: 0;
225
+ }
226
+ }
227
+ }