Skip to Content
0 Votes

Changes for page Menu Macro

Last modified by Сергей Коршунов on 2025/09/03 12:19
From version 14.1
edited by Сергей Коршунов
on 2025/07/17 22:34
Change comment: Migrated property [order] from class [XWiki.WikiMacroParameterClass]
To version 15.1
edited by Сергей Коршунов
on 2025/09/03 12:19
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/17.7.0]

Summary

Details

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;
... ... @@ -251,7 +251,7 @@
251 251   margin: 0 0 0 -25px; /* Remove padding added in normal view */
252 252   > li {
253 253   &:empty {
254 - .nav-divider(@navbar-default-border);
253 + .nav-divider(@menu-default-border);
255 255   }
256 256   }
257 257   ul {
... ... @@ -265,14 +265,14 @@
265 265   box-shadow: none;
266 266   li {
267 267   /* Text inside menu */
268 - color: @navbar-default-link-color;
267 + color: @menu-default-link-color;
269 269   /* Links inside menu */
270 270   a {
271 - color: @navbar-default-link-color;
270 + color: @menu-default-link-color;
272 272   }
273 273   /* Submenus inside menu */
274 274   &.xDropdown {
275 - color: @navbar-default-link-color;
274 + color: @menu-default-link-color;
276 276   &.open {
277 277   background-color: transparent;
278 278   color: inherit;
... ... @@ -279,11 +279,11 @@
279 279   }
280 280   /* When in dropdown we also have a link */
281 281   > span > a {
282 - color: @navbar-default-link-color;
281 + color: @menu-default-link-color;
283 283   }
284 284   }
285 285   &:empty {
286 - .nav-divider(@navbar-default-border);
285 + .nav-divider(@menu-default-border);
287 287   }
288 288   }
289 289   }
... ... @@ -313,15 +313,16 @@
313 313  
314 314  .menu-horizontal-toggle {
315 315   .clearfix;
316 - background-color: @navbar-default-bg;
317 - border-color: @navbar-default-border;
318 - .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
319 - min-height: @navbar-height;
315 + background-color: @menu-default-bg;
316 + border-color: @menu-default-border;
317 + min-height: @menu-height;
320 320   & .navbar-toggle {
321 321   float: left;
322 322   padding-left: 15px;
321 + padding-top: 0;
322 + padding-bottom: 0;
323 323   & .icon-bar {
324 - background-color: @navbar-default-link-color;
324 + background-color: @menu-default-link-color;
325 325   transition: .3s ease all;
326 326   &:nth-of-type(2) {
327 327   opacity: 0;