mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-13 17:57:06 +00:00
13de4ff225
We will couple the roll out of the consolidated user links code with the roll out of the new icon styles. This change is restricted to the user links feature and will result in some slight UI discrepencies until Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5 is merged. Bug: T191021 Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
78 lines
1.9 KiB
Plaintext
78 lines
1.9 KiB
Plaintext
// 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;
|
|
}
|
|
}
|
|
}
|