golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Merge "Remove Vector skinStyles for icons and fix language button"

This commit is contained in:
jenkins-bot 2021-07-21 18:44:37 +00:00 committed by Gerrit Code Review
parent 14e9d6ba9f 96136a0e2d
commit 364c35dcdf
7 changed files with 20 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.storybook/common.less
View File

@ -1,7 +1,6 @@
@import '../resources/common/variables.less';
@import './integration.less';
@import './icons.less';
@import '../skinStyles/mediawiki.ui.icon.less';
body {
font-family: @font-family-sans;

16
resources/common/variables.less
View File

@ -20,22 +20,6 @@
@outline-color-base--focus: @color-primary;
//
// == Icons ==
// FIXME: Use mediawiki.skin.variables when available.
//
@icon-touch-area-sm: 34;
@icon-touch-area-md: 44;
@font-size-browser: 16; // Assumed browser default of `16px`.
// Small icon
@icon-glyph-size-sm: 16;
@icon-size-sm: unit( @icon-glyph-size-sm / @font-size-browser, em );
@icon-padding-sm: unit( ( @icon-touch-area-sm - @icon-glyph-size-sm ) / 2 / @font-size-browser, em );
// Medium icon
@icon-glyph-size-md: 20;
@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em );
@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em );
//
// == Typography ==
//

23
resources/skins.vector.styles/components/LanguageButton.less
View File

@ -8,22 +8,31 @@
height: @height-lang-button;
.mw-ui-icon:before {
margin-right: 8px;
// Put icon on correct standard normal state color.
opacity: 0.87;
}
.vector-menu-heading {
// Special treatment for language button, based on Vector font-size
font-size: @font-size-base;
// avoid sub pixel rendering
line-height: 1.493em;
font-size: initial;
// reset padding styles in MenuDropdown.less with right padding for arrow.
padding: 4px 30px 4px 8px;
padding-right: 30px;
padding-left: 8px;
// Prevent select of span text "X languages"
user-select: none;
// Remove opacity on language button (it applies to more menu because of label color).
opacity: 1;
// Hack: mw-ui-icon is not designed to be used with mw-ui-button
// Must disable min-height of mw-ui-button
min-height: 22px;
// mw-ui-icon resets the button border.
border: 1px solid transparent;
// center vertically in heading.
margin-top: 2px;
span {
// Special treatment for language button, based on Vector font-size
font-size: @font-size-base;
}
&:after {
top: 0;
@ -32,7 +41,7 @@
.vector-menu-content {
top: auto;
left: auto;
left: -@border-width-base;
right: -@border-width-base;
// align borders of open menu align with button
.box-sizing( border-box );

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

@ -139,6 +139,9 @@
&:after {
background-position: 100% 0%;
// 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 );
top: @icon-padding-md + ( @bg-height / 2 );
right: @offset-icon-down-arrow;
}

6
resources/skins.vector.styles/layouts/screen.less
View File

@ -208,12 +208,6 @@ body {
.mw-body-header {
.mixin-clearfix();
// TODO: Can be changed to `.mw-portlet-lang` when langauge-in-header feature is default.
#p-lang-btn {
// should be vertically aligned with heading.
margin-top: ( ( @font-size-heading-1 * @line-height-heading ) - @height-lang-button ) / 2;
}
}
// TODO: Can be changed to `.mw-body .mw-portlet-lang` when langauge-in-header feature is default.

3
skin.json
View File

@ -223,8 +223,7 @@
"+mediawiki.notification": "skinStyles/mediawiki.notification.less",
"+oojs-ui-core.styles": "skinStyles/ooui.less",
"mediawiki.special": "skinStyles/mediawiki.special.less",
"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
"+mediawiki.ui.icon": "skinStyles/mediawiki.ui.icon.less"
"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less"
}
},
"config": {

77
skinStyles/mediawiki.ui.icon.less
View File

@ -1,77 +0,0 @@
// Override core's `.mw-ui-icon` which defaults to 24x24.
// The Design Style Guide and its icons are now set to 20x20.
// FIXME: With core set to 20x20 this file should become obsolete, see T191021.
@import '../resources/common/variables.less';
.vector-search-box .mw-ui-icon:before,
.vector-search-box .mw-ui-icon.mw-ui-icon-element:before,
.mw-portlet-lang .mw-ui-icon:before {
background-size: unit( @size-icon / @font-size-base, em ) auto;
width: unit( @size-icon / @font-size-base, em );
height: unit( @size-icon / @font-size-base, em );
}
.skin-vector-consolidated-user-links .vector-search-box,
.skin-vector-consolidated-user-links .mw-portlet-lang,
.skin-vector-consolidated-user-links {
.mw-ui-icon {
font-size: initial;
&:before {
display: block;
height: 100%;
min-width: 1.25em;
min-height: 1.25em;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
background-position: center;
position: static;
margin: 0;
}
}
.mw-ui-icon-element {
padding: 0.75em;
width: 1.25em;
height: 1.25em;
min-width: 1.25em;
min-height: 1.25em;
// stylelint-disable-next-line declaration-no-important
box-sizing: content-box !important;
line-height: 0;
&:before {
width: 100%;
}
}
.mw-ui-icon-before {
&:before {
display: inline-block;
font-size: initial;
width: auto;
min-width: 1.25em;
min-height: 1.25em;
margin-right: 8px;
vertical-align: middle;
}
}
}
body:not( .skin-vector-consolidated-user-links ) {
#mw-sidebar-button {
// Override minimum dimensions set by mw-ui-icon.mw-ui-icon-element.
min-width: @size-sidebar-button;
min-height: @size-sidebar-button;
width: @size-sidebar-button;
height: @size-sidebar-button;
&:before {
min-width: 20px;
min-height: 20px;
height: 100%;
// Center it horizontally.
margin: 0 unit( 12px / @font-size-browser, em ); // 0.75em @ 16;
}
}
}