Changes for page Menu Macro
Last modified by Сергей Коршунов on 2025/09/03 12:19
From version 13.1
edited by Сергей Коршунов
on 2025/07/17 22:33
on 2025/07/17 22:33
Change comment:
Migrated property [contentOrder] from class [XWiki.WikiMacroClass]
To version 15.1
edited by Сергей Коршунов
on 2025/09/03 12:19
on 2025/09/03 12:19
Change comment:
Install extension [org.xwiki.platform:xwiki-platform-menu-ui/17.7.0]
Summary
-
Objects (1 modified, 0 added, 0 removed)
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: @n avbar-default-link-hover-color;99 - background-color: @n avbar-default-link-hover-bg;100 - background-color: @n avbar-default-link-active-bg;101 - color: @n avbar-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: @n avbar-default-link-active-bg;105 - color: @n avbar-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: @n avbar-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: @n avbar-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: @n avbar-default-bg;126 + background-color: @menu-default-bg; 130 130 } 131 131 } 132 132 /* Separator vertical inside menu */ 133 133 &:empty { 134 - height: @n avbar-height;131 + height: @menu-height; 135 135 margin: 0 ((@line-height-computed / 2) - 1); 136 136 padding: 0; 137 - border-right: 1px solid @n avbar-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(@n avbar-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: @n avbar-default-link-color;267 + color: @menu-default-link-color; 269 269 /* Links inside menu */ 270 270 a { 271 - color: @n avbar-default-link-color;270 + color: @menu-default-link-color; 272 272 } 273 273 /* Submenus inside menu */ 274 274 &.xDropdown { 275 - color: @n avbar-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: @n avbar-default-link-color;281 + color: @menu-default-link-color; 283 283 } 284 284 } 285 285 &:empty { 286 - .nav-divider(@n avbar-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: @n avbar-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;