Skip to Content

Changes for page Menu Macro

Last modified by superadmin on 2026/05/03 18:54
From version 9.1
edited by superadmin
on 2026/05/03 18:54
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/17.10.8]
To version 7.1
edited by RA22 PROJECT
on 2026/04/23 15:12
Change comment: Migrated property [contentOrder] from class [XWiki.WikiMacroClass]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.superadmin
1 +XWiki.RA22PROJECT
XWiki.StyleSheetExtension[1]
Code
... ... @@ -60,9 +60,11 @@
60 60   &.menu-horizontal {
61 61   /* Stylization: Navbars */
62 62   .clearfix;
63 - background-color: @menu-default-bg;
64 - border-color: @menu-default-border;
65 - min-height: @menu-height;
63 + background-color: @navbar-default-bg;
64 + border-color: @navbar-default-border;
65 + /* Custom styling */
66 + .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
67 + min-height: @navbar-height;
66 66   padding-left: 25px;
67 67   .xDropdown.open {
68 68   > .xDropdown-header > .xDropdown-header-toggle:before {
... ... @@ -76,7 +76,7 @@
76 76   padding-left: 0;
77 77   list-style-type: none;
78 78   margin: 0;
79 - min-height: @menu-height;
81 + min-height: 50px;
80 80   display: flex;
81 81   align-items: stretch;
82 82   & > li {
... ... @@ -90,21 +90,22 @@
90 90   @media (min-width: @grid-float-breakpoint) {
91 91   float: left;
92 92   }
93 - color: @menu-default-link-color;
95 + line-height: @line-height-computed;
96 + color: @navbar-default-link-color;
94 94   &:hover, &:focus-within {
95 - color: @menu-default-link-hover-color;
96 - background-color: @menu-default-link-hover-bg;
97 - background-color: @menu-default-link-active-bg;
98 - color: @menu-default-link-active-color;
98 + color: @navbar-default-link-hover-color;
99 + background-color: @navbar-default-link-hover-bg;
100 + background-color: @navbar-default-link-active-bg;
101 + color: @navbar-default-link-active-color;
99 99   /* When hovering, have the same color for text and link usage */
100 100   & > span > a {
101 - background-color: @menu-default-link-active-bg;
102 - color: @menu-default-link-active-color;
104 + background-color: @navbar-default-link-active-bg;
105 + color: @navbar-default-link-active-color;
103 103   }
104 104   }
105 105   /* Links inside menu */
106 106   a {
107 - color: @menu-default-link-color;
110 + color: @navbar-default-link-color;
108 108   &:hover, &:focus-within {
109 109   text-decoration: none;
110 110   }
... ... @@ -112,7 +112,7 @@
112 112   /* Containers, images inside menu */
113 113   div, img {
114 114   /* Limit the height to the nav height minus the padding and minus border */
115 - max-height: @menu-height - (2 * @navbar-padding-vertical) - 2px;
118 + max-height: @navbar-height - (2 * @navbar-padding-vertical) - 2px;
116 116   overflow: hidden;
117 117   &.xDropdown-header{
118 118   /* No border on the dropdown header */
... ... @@ -123,15 +123,15 @@
123 123   & > .xDropdown-header > .xDropdown-header-toggle {
124 124   &:hover, &:focus-within {
125 125   /* Change background color of the caret when hovering on the navbar. */
126 - background-color: @menu-default-bg;
129 + background-color: @navbar-default-bg;
127 127   }
128 128   }
129 129   /* Separator vertical inside menu */
130 130   &:empty {
131 - height: @menu-height;
134 + height: @navbar-height;
132 132   margin: 0 ((@line-height-computed / 2) - 1);
133 133   padding: 0;
134 - border-right: 1px solid @menu-default-border;
137 + border-right: 1px solid @navbar-default-border;
135 135   }
136 136   }
137 137   /* Stylization: Dropdowns */
... ... @@ -151,8 +151,6 @@
151 151   background-color: @dropdown-bg;
152 152   border: 1px solid @dropdown-border;
153 153   border-radius: @border-radius-base;
154 - /* On this element, the box-shadow is very useful since it appears in front of other elements.
155 - We don't want to remove it despite the Flamingo theme now using flat designs almost everywhere. */
156 156   .box-shadow(0 6px 12px rgba(0,0,0,.175));
157 157   background-clip: padding-box;
158 158   margin-top: 0;
... ... @@ -188,7 +188,7 @@
188 188   line-height: @line-height-base;
189 189   color: @dropdown-link-color;
190 190   /* Empty dropdowns should have height in order to display the arrow */
191 - min-height: 1lh;
192 + min-height: 2 * @font-size-base;
192 192   &:hover, &:focus-within {
193 193   text-decoration: none;
194 194   color: @dropdown-link-hover-color;
... ... @@ -243,7 +243,7 @@
243 243   margin: 0 0 0 -25px; /* Remove padding added in normal view */
244 244   > li {
245 245   &:empty {
246 - .nav-divider(@menu-default-border);
247 + .nav-divider(@navbar-default-border);
247 247   }
248 248   }
249 249   ul {
... ... @@ -257,14 +257,14 @@
257 257   box-shadow: none;
258 258   li {
259 259   /* Text inside menu */
260 - color: @menu-default-link-color;
261 + color: @navbar-default-link-color;
261 261   /* Links inside menu */
262 262   a {
263 - color: @menu-default-link-color;
264 + color: @navbar-default-link-color;
264 264   }
265 265   /* Submenus inside menu */
266 266   &.xDropdown {
267 - color: @menu-default-link-color;
268 + color: @navbar-default-link-color;
268 268   &.open {
269 269   background-color: transparent;
270 270   color: inherit;
... ... @@ -271,11 +271,11 @@
271 271   }
272 272   /* When in dropdown we also have a link */
273 273   > span > a {
274 - color: @menu-default-link-color;
275 + color: @navbar-default-link-color;
275 275   }
276 276   }
277 277   &:empty {
278 - .nav-divider(@menu-default-border);
279 + .nav-divider(@navbar-default-border);
279 279   }
280 280   }
281 281   }
... ... @@ -305,16 +305,15 @@
305 305  
306 306  .menu-horizontal-toggle {
307 307   .clearfix;
308 - background-color: @menu-default-bg;
309 - border-color: @menu-default-border;
310 - min-height: @menu-height;
309 + background-color: @navbar-default-bg;
310 + border-color: @navbar-default-border;
311 + .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
312 + min-height: @navbar-height;
311 311   & .navbar-toggle {
312 312   float: left;
313 313   padding-left: 15px;
314 - padding-top: 0;
315 - padding-bottom: 0;
316 316   & .icon-bar {
317 - background-color: @menu-default-link-color;
317 + background-color: @navbar-default-link-color;
318 318   transition: .3s ease all;
319 319   &:nth-of-type(2) {
320 320   opacity: 0;