mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 10:49:25 +00:00
Merge "Remove Vector skinStyles for icons and fix language button"
This commit is contained in:
commit
364c35dcdf
|
@ -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;
|
||||
|
|
|
@ -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 ==
|
||||
//
|
||||
|
|
|
@ -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 );
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue