Changes for page Menu Macro
Last modified by Сергей Коршунов on 2025/09/03 12:19
From 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]
To version 10.1
edited by Сергей Коршунов
on 2024/10/09 12:58
on 2024/10/09 12:58
Change comment:
Install extension [org.xwiki.platform:xwiki-platform-menu-ui/16.8.0]
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- 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; ... ... @@ -250,7 +250,7 @@ 250 250 margin: 0 0 0 -25px; /* Remove padding added in normal view */ 251 251 > li { 252 252 &:empty { 253 - .nav-divider(@ menu-default-border);254 + .nav-divider(@navbar-default-border); 254 254 } 255 255 } 256 256 ul { ... ... @@ -264,14 +264,14 @@ 264 264 box-shadow: none; 265 265 li { 266 266 /* Text inside menu */ 267 - color: @ menu-default-link-color;268 + color: @navbar-default-link-color; 268 268 /* Links inside menu */ 269 269 a { 270 - color: @ menu-default-link-color;271 + color: @navbar-default-link-color; 271 271 } 272 272 /* Submenus inside menu */ 273 273 &.xDropdown { 274 - color: @ menu-default-link-color;275 + color: @navbar-default-link-color; 275 275 &.open { 276 276 background-color: transparent; 277 277 color: inherit; ... ... @@ -278,11 +278,11 @@ 278 278 } 279 279 /* When in dropdown we also have a link */ 280 280 > span > a { 281 - color: @ menu-default-link-color;282 + color: @navbar-default-link-color; 282 282 } 283 283 } 284 284 &:empty { 285 - .nav-divider(@ menu-default-border);286 + .nav-divider(@navbar-default-border); 286 286 } 287 287 } 288 288 } ... ... @@ -312,16 +312,15 @@ 312 312 313 313 .menu-horizontal-toggle { 314 314 .clearfix; 315 - background-color: @menu-default-bg; 316 - border-color: @menu-default-border; 317 - min-height: @menu-height; 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; 318 318 & .navbar-toggle { 319 319 float: left; 320 320 padding-left: 15px; 321 - padding-top: 0; 322 - padding-bottom: 0; 323 323 & .icon-bar { 324 - background-color: @ menu-default-link-color;324 + background-color: @navbar-default-link-color; 325 325 transition: .3s ease all; 326 326 &:nth-of-type(2) { 327 327 opacity: 0;