mediawiki-skins-Vector/resources/skins.vector.styles/MenuPortal.less
jdlrobson e048c2a729 Refactor: Simplify and standardize menu definitions
* Standardise the menu markup. This means all menus in Vector will now
be wrapped in a div and will have a heading.
* All menus now have the vector-menu class. Styles specific to personal tools
are moved to layout since these are concerned with placement.
* The ul class will always have menu class.
* emptyPortal class is generalised into vector-menu-empty for consistency
with other classes and moved from common.less into Menu.less
* Standardise hooks - BaseTemplateAfterPortlet can now be run on any
menu.

Changes to HTML:
* lang and dir attributes are moved from the h3 up to the div element
.vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3
* for non portals ul.menu" is now wrapped in a div.vector-menu-content

This change does impact the following CSS selectors which will need to be updated:

I see no matches for these selectors in code search.

```
 #p-variants > ul
 #p-namespaces > ul
 #p-personal > ul
 #p-views > ul
 #p-cactions > ul

```
Using global-search.toolforge.org I see one match
for p-variants, 26 for p-namespaces, 30 for p-personal,
36 for p-views and 7 for p-cactions. I see this as acceptable
breakage provided a user notice is sent out which it has been
(T252447)

Bug: T249372
Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145
2020-05-12 15:17:38 -07:00

54 lines
1.2 KiB
Plaintext

@import '../../variables.less';
@import 'mediawiki.mixins.less';
// FIXME: For cached HTML
.portal,
.vector-menu-portal {
margin: 0 @margin-end-portal 0 @margin-start-portal;
padding: 0.25em 0;
direction: ltr;
h3 {
display: block;
background-image: url( images/portal-separator.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
background-image: linear-gradient( to right, transparent 0, #c8ccd1 35%, #c8ccd1 70%, transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% @border-width-base;
color: @color-nav-subtle;
font-weight: normal;
margin: 0.5em 0 0 ( @margin-start-nav-main-body / @font-size-nav-main-heading );
padding: 0.25em 0;
cursor: default;
border: 0;
font-size: @font-size-nav-main-heading;
}
.body {
margin-left: @margin-start-portal-body;
padding-top: 0;
ul {
list-style: none none;
margin: 0;
padding-top: 0.3em;
}
li {
margin: 0;
padding: 0.25em 0;
font-size: @font-size-portal-list-item;
line-height: @line-height-nav;
word-wrap: break-word;
a {
color: @color-link;
&:visited {
color: @color-link--visited;
}
}
}
}
}