mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 10:21:40 +00:00
Update Vector menu CSS to use vector-menu-heading
instead of h3
Replaced h3 tag in includes/templates/Menu.mustache with label tag. Replaced h3 elements in .storybook/icons.less, resources/common/components/Menu.less, resources/common/components/MenuDropdown.less, resources/common/components/MenuPortal.less, resources/common/components/MenuTabs.less,resources/skins.vector.styles.legacy/components/MenuDropdown.less, resources/skins.vector.styles/components/UserLinks.less, resources/skins.vector.styles.legacy/components/Sidebar.less and resources/skins.vector.styles.legacy/layouts/screen.less by vector-menu-heading. Bug: T290280 Change-Id: I6eee7d6bc47c74a62166d4579fd4d3da3dc88e88
This commit is contained in:
parent
835e8673e4
commit
ab11cc9adb
|
@ -1,4 +1,4 @@
|
|||
.vector-menu-dropdown h3:after {
|
||||
.vector-menu-dropdown .vector-menu-heading:after {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23202122' d='m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5'/%3E%3C/svg%3E%0A") !important;
|
||||
}
|
||||
|
||||
|
|
|
@ -12,13 +12,13 @@
|
|||
data-event-name="ui.dropdown-{{id}}"
|
||||
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox" aria-labelledby="{{id}}-label" />
|
||||
{{/is-dropdown}}
|
||||
<h3 id="{{id}}-label" aria-label="{{aria-label}}"{{#heading-class}} class="{{.}}"{{/heading-class}}{{^is-legacy}} aria-hidden="true"{{/is-legacy}}>
|
||||
<label id="{{id}}-label" aria-label="{{aria-label}}"{{#heading-class}} class="{{.}}"{{/heading-class}}{{^is-legacy}} aria-hidden="true"{{/is-legacy}}>
|
||||
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
|
||||
{{#is-dropdown}}
|
||||
<span class="vector-menu-checkbox-expanded">{{msg-vector-menu-checkbox-expanded}}</span>
|
||||
<span class="vector-menu-checkbox-collapsed">{{msg-vector-menu-checkbox-collapsed}}</span>
|
||||
{{/is-dropdown}}
|
||||
</h3>
|
||||
</label>
|
||||
<div class="vector-menu-content">
|
||||
{{{html-before-portal}}}
|
||||
<ul class="vector-menu-content-list">{{{html-items}}}</ul>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
.mw-portlet {
|
||||
// Hidden by default, but displayed by certain menus
|
||||
// e.g. MenuPortal
|
||||
h3 {
|
||||
.vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
position: relative;
|
||||
line-height: 1.125em;
|
||||
|
||||
h3 {
|
||||
.vector-menu-heading {
|
||||
color: @color-base--subtle;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
@ -115,7 +115,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#mw-head .vector-menu-dropdown h3 {
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||||
background-position: right bottom;
|
||||
float: left;
|
||||
|
@ -124,17 +124,17 @@
|
|||
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
|
||||
// act like a real border. It is necessary for `.vector-menu-dropdown .vector-menu-content-list` dropdown to align well.
|
||||
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
|
||||
// `padding-left` in `.vector-menu-dropdown h3 a`
|
||||
// `padding-left` in `.vector-menu-dropdown .vector-menu-heading a`
|
||||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||||
}
|
||||
|
||||
// Tab Separators
|
||||
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
|
||||
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
|
||||
// `#mw-head .vector-menu-dropdown h3`: // Outer end (right in LTR) border of "Actions" menu.
|
||||
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
|
||||
.vector-menu-tabs,
|
||||
.vector-menu-tabs a,
|
||||
#mw-head .vector-menu-dropdown h3 {
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
// Support: IE 9, which doesn't understand `linear-gradient`.
|
||||
background-image: url( images/tab-separator.png );
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
|
@ -165,7 +165,7 @@
|
|||
}
|
||||
|
||||
.vector-menu-dropdown-noicon {
|
||||
h3 {
|
||||
.vector-menu-heading {
|
||||
// `padding-top` needs to scale with font-size.
|
||||
padding-top: 1.25em;
|
||||
padding-left: 8px;
|
||||
|
@ -175,7 +175,7 @@
|
|||
}
|
||||
|
||||
// Add focus state to legacy menu dropdown buttons (i.e. p-variants, p-cactions)
|
||||
.vector-menu-checkbox:focus + h3 {
|
||||
.vector-menu-checkbox:focus + .vector-menu-heading {
|
||||
// Simulate browser focus ring
|
||||
outline: dotted 1px; // Firefox style
|
||||
outline: auto -webkit-focus-ring-color; // Webkit style
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
padding: 0.25em 0;
|
||||
direction: ltr;
|
||||
|
||||
h3 {
|
||||
.vector-menu-heading {
|
||||
display: block;
|
||||
background-image: url( images/portal-separator.png ); // Support: IE 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
|
||||
background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
padding-left: @border-width-base;
|
||||
|
||||
/* Navigation Labels */
|
||||
h3 {
|
||||
.vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.vector-menu-checkbox {
|
||||
&:checked + h3:after {
|
||||
&:checked + .vector-menu-heading:after {
|
||||
transform: scaleY( -1 );
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
nav:first-child {
|
||||
background-image: none;
|
||||
|
||||
h3 {
|
||||
.vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -146,7 +146,7 @@ body {
|
|||
}
|
||||
|
||||
// hide the heading of the first menu
|
||||
#p-logo + .mw-portlet h3 {
|
||||
#p-logo + .mw-portlet .vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -160,7 +160,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.vector-user-menu-logged-out h3 {
|
||||
.vector-user-menu-logged-out .vector-menu-heading {
|
||||
&:before {
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -170,7 +170,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.vector-user-menu-logged-in h3 {
|
||||
.vector-user-menu-logged-in .vector-menu-heading {
|
||||
// FIXME: Ideally this variable should be accessible from mediawiki.skin.variables
|
||||
// Remove it when we can.
|
||||
@icon-padding-md: unit( 12 / @font-size-browser, em );
|
||||
|
|
Loading…
Reference in a new issue