Skip to Content

Changes for page Menu Macro

Last modified by superadmin on 2026/05/03 18:54
From version 8.1
edited by RA22 PROJECT
on 2026/04/23 15:12
Change comment: Migrated property [order] from class [XWiki.WikiMacroParameterClass]
To 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]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.RA22PROJECT
1 +XWiki.superadmin
XWiki.StyleSheetExtension[1]
Code
... ... @@ -60,11 +60,9 @@
60 60   &.menu-horizontal {
61 61   /* Stylization: Navbars */
62 62   .clearfix;
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;
63 + background-color: @menu-default-bg;
64 + border-color: @menu-default-border;
65 + min-height: @menu-height;
68 68   padding-left: 25px;
69 69   .xDropdown.open {
70 70   > .xDropdown-header > .xDropdown-header-toggle:before {
... ... @@ -78,7 +78,7 @@
78 78   padding-left: 0;
79 79   list-style-type: none;
80 80   margin: 0;
81 - min-height: 50px;
79 + min-height: @menu-height;
82 82   display: flex;
83 83   align-items: stretch;
84 84   & > li {
... ... @@ -92,22 +92,21 @@
92 92   @media (min-width: @grid-float-breakpoint) {
93 93   float: left;
94 94   }
95 - line-height: @line-height-computed;
96 - color: @navbar-default-link-color;
93 + color: @menu-default-link-color;
97 97   &:hover, &:focus-within {
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;
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;
102 102   /* When hovering, have the same color for text and link usage */
103 103   & > span > a {
104 - background-color: @navbar-default-link-active-bg;
105 - color: @navbar-default-link-active-color;
101 + background-color: @menu-default-link-active-bg;
102 + color: @menu-default-link-active-color;
106 106   }
107 107   }
108 108   /* Links inside menu */
109 109   a {
110 - color: @navbar-default-link-color;
107 + color: @menu-default-link-color;
111 111   &:hover, &:focus-within {
112 112   text-decoration: none;
113 113   }
... ... @@ -115,7 +115,7 @@
115 115   /* Containers, images inside menu */
116 116   div, img {
117 117   /* Limit the height to the nav height minus the padding and minus border */
118 - max-height: @navbar-height - (2 * @navbar-padding-vertical) - 2px;
115 + max-height: @menu-height - (2 * @navbar-padding-vertical) - 2px;
119 119   overflow: hidden;
120 120   &.xDropdown-header{
121 121   /* No border on the dropdown header */
... ... @@ -126,15 +126,15 @@
126 126   & > .xDropdown-header > .xDropdown-header-toggle {
127 127   &:hover, &:focus-within {
128 128   /* Change background color of the caret when hovering on the navbar. */
129 - background-color: @navbar-default-bg;
126 + background-color: @menu-default-bg;
130 130   }
131 131   }
132 132   /* Separator vertical inside menu */
133 133   &:empty {
134 - height: @navbar-height;
131 + height: @menu-height;
135 135   margin: 0 ((@line-height-computed / 2) - 1);
136 136   padding: 0;
137 - border-right: 1px solid @navbar-default-border;
134 + border-right: 1px solid @menu-default-border;
138 138   }
139 139   }
140 140   /* Stylization: Dropdowns */
... ... @@ -154,6 +154,8 @@
154 154   background-color: @dropdown-bg;
155 155   border: 1px solid @dropdown-border;
156 156   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. */
157 157   .box-shadow(0 6px 12px rgba(0,0,0,.175));
158 158   background-clip: padding-box;
159 159   margin-top: 0;
... ... @@ -189,7 +189,7 @@
189 189   line-height: @line-height-base;
190 190   color: @dropdown-link-color;
191 191   /* Empty dropdowns should have height in order to display the arrow */
192 - min-height: 2 * @font-size-base;
191 + min-height: 1lh;
193 193   &:hover, &:focus-within {
194 194   text-decoration: none;
195 195   color: @dropdown-link-hover-color;
... ... @@ -244,7 +244,7 @@
244 244   margin: 0 0 0 -25px; /* Remove padding added in normal view */
245 245   > li {
246 246   &:empty {
247 - .nav-divider(@navbar-default-border);
246 + .nav-divider(@menu-default-border);
248 248   }
249 249   }
250 250   ul {
... ... @@ -258,14 +258,14 @@
258 258   box-shadow: none;
259 259   li {
260 260   /* Text inside menu */
261 - color: @navbar-default-link-color;
260 + color: @menu-default-link-color;
262 262   /* Links inside menu */
263 263   a {
264 - color: @navbar-default-link-color;
263 + color: @menu-default-link-color;
265 265   }
266 266   /* Submenus inside menu */
267 267   &.xDropdown {
268 - color: @navbar-default-link-color;
267 + color: @menu-default-link-color;
269 269   &.open {
270 270   background-color: transparent;
271 271   color: inherit;
... ... @@ -272,11 +272,11 @@
272 272   }
273 273   /* When in dropdown we also have a link */
274 274   > span > a {
275 - color: @navbar-default-link-color;
274 + color: @menu-default-link-color;
276 276   }
277 277   }
278 278   &:empty {
279 - .nav-divider(@navbar-default-border);
278 + .nav-divider(@menu-default-border);
280 280   }
281 281   }
282 282   }
... ... @@ -306,15 +306,16 @@
306 306  
307 307  .menu-horizontal-toggle {
308 308   .clearfix;
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;
308 + background-color: @menu-default-bg;
309 + border-color: @menu-default-border;
310 + min-height: @menu-height;
313 313   & .navbar-toggle {
314 314   float: left;
315 315   padding-left: 15px;
314 + padding-top: 0;
315 + padding-bottom: 0;
316 316   & .icon-bar {
317 - background-color: @navbar-default-link-color;
317 + background-color: @menu-default-link-color;
318 318   transition: .3s ease all;
319 319   &:nth-of-type(2) {
320 320   opacity: 0;