jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge "Update Vector menu CSS to use `vector-menu-heading` instead of `h3`"

This commit is contained in:
jenkins-bot 2022-03-02 19:21:10 +00:00 committed by Gerrit Code Review
parent 370321a54d ab11cc9adb
commit 288c8b95b2
10 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/icons.less
View File

@ -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;
}

4
includes/templates/Menu.mustache
View File

@ -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>

2
resources/common/components/Menu.less
View File

@ -4,7 +4,7 @@
.mw-portlet {
// Hidden by default, but displayed by certain menus
// e.g. MenuPortal
h3 {
.vector-menu-heading {
display: none;
}

14
resources/common/components/MenuDropdown.less
View File

@ -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

2
resources/common/components/MenuPortal.less
View File

@ -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+)

2
resources/common/components/MenuTabs.less
View File

@ -14,7 +14,7 @@
padding-left: @border-width-base;
/* Navigation Labels */
h3 {
.vector-menu-heading {
display: none;
}

2
resources/skins.vector.styles.legacy/components/MenuDropdown.less
View File

@ -11,7 +11,7 @@
}
.vector-menu-checkbox {
&:checked + h3:after {
&:checked + .vector-menu-heading:after {
transform: scaleY( -1 );
}
}

2
resources/skins.vector.styles.legacy/components/Sidebar.less
View File

@ -7,7 +7,7 @@
nav:first-child {
background-image: none;
h3 {
.vector-menu-heading {
display: none;
}

2
resources/skins.vector.styles.legacy/layouts/screen.less
View File

@ -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;
}

4
resources/skins.vector.styles/components/UserLinks.less
View File

@ -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 );