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

Make extra `<span>` in Vector tabs optional 

Applying calculation measurments to have full pixel equivalent to
`em` based properties that are necessary for user font scaling
preference ability.

Also:
* Changing watchlist icon to `em` based sizing and remodulate positioning
  by putting it on `:before` elements.
* Changing calculation of `.vectorMenu h3` to acommodate down arrow indicator.

TODO:
* Remove the extra <span> (in separate commit, to make it easier
  to rest cache compat during code review).

Bug: T236410
Change-Id: I8237976e05870378be3430e3e14c3e6993de3dc1
This commit is contained in:
Timo Tijhof 2019-10-24 18:44:35 +01:00 committed by Volker E
parent 0e2f5de63c
commit 481c90798e
2 changed files with 69 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/tabs.less
View File

@ -1,3 +1,4 @@
@import '../variables';
@import 'mediawiki.mixins'; @import 'mediawiki.mixins';
/** /**
@ -40,13 +41,19 @@
white-space: nowrap; white-space: nowrap;
a { a {
// Tab separator: Border between tabs and outer right border.
background-position: right bottom;
color: @color-link; color: @color-link;
.box-sizing( border-box );
display: block; display: block;
height: 1.9em; float: left;
padding-left: 0.615em; // Equals `8px` at computed `font-size` of `13px` below height: unit( 40 / @font-size-tabs / @font-size-browser, em );
padding-right: 0.615em; position: relative;
cursor: pointer; padding-top: 1.25em;
padding-left: 8px;
padding-right: 8px;
font-size: @font-size-tabs; font-size: @font-size-tabs;
cursor: pointer;
} }
} }
@ -76,20 +83,6 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
// Tab separator: Border between tabs and outer right border.
span {
background-position: right bottom;
display: inline-block;
height: 100%;
a {
float: left;
display: block;
position: relative;
padding-top: 1.25em;
}
}
} }
/* Variants and Actions */ /* Variants and Actions */
@ -101,33 +94,33 @@
line-height: 1.125em; line-height: 1.125em;
h3 { h3 {
span { color: @color-nav-subtle;
color: @color-nav-subtle; position: relative;
position: relative; display: block;
display: block; .box-sizing( border-box );
padding-left: 0.615em; // `padding-top` needs to scale with font-size.
padding-top: 1.25em; padding-top: 1.25em;
padding-right: 16px; padding-left: 8px;
font-size: @font-size-tabs; padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
font-weight: normal; font-size: @font-size-tabs;
font-weight: normal;
&:after { &:after {
content: ''; content: '';
.background-image-svg( 'images/arrow-down.svg', 'images/arrow-down.png' ); .background-image-svg( 'images/arrow-down.svg', 'images/arrow-down.png' );
background-position: 100% 50%; background-position: 100% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
top: 1.25em; top: unit( 10 / @font-size-tabs / @font-size-browser, em );
right: 0; right: 8px;
bottom: 0; bottom: 0;
left: 0; width: unit( 16 / @font-size-tabs / @font-size-browser, em );
// Modify the color of the image from the default #222 to approx. #444 to match the text. // Modify the color of the image from the default #222 to approx. #444 to match the text.
opacity: 0.85; opacity: 0.85;
}
} }
&:hover span, &:hover,
&:focus span { &:focus {
color: @color-base; color: @color-base;
&:after { &:after {
@ -196,22 +189,21 @@
// Tab separator: Outer end (right in LTR) border of "Actions" menu. // Tab separator: Outer end (right in LTR) border of "Actions" menu.
background-position: right bottom; background-position: right bottom;
float: left; float: left;
font-size: @font-size-reset; height: unit( 40 / @font-size-tabs / @font-size-browser, em );
height: 2.5em;
margin: 0 -@border-width-base 0 0; margin: 0 -@border-width-base 0 0;
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to // `padding-right` >= `1px` effectively moves the "background border" outside of the element to
// act like a real border. It is necessary for `.vectorMenu .menu` dropdown to align well. // act like a real border. It is necessary for `.vectorMenu .menu` dropdown to align well.
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with // 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
// `padding-left` in `.vectorMenu h3 span` // `padding-left` in `.vectorMenu h3 a`
padding: 0 0.5em 0 0; padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
} }
// Tab Separators // Tab Separators
// `.vectorTabs`: Outer start border (left in LTR) of tab row. // `.vectorTabs`: Outer start border (left in LTR) of tab row.
// `.vectorTabs span`: Border between tabs and outer end (right in LTR) border. // `.vectorTabs a`: Border between tabs and outer end (right in LTR) border.
// `#mw-head .vectorMenu h3`: // Outer end (right in LTR) border of "Actions" menu. // `#mw-head .vectorMenu h3`: // Outer end (right in LTR) border of "Actions" menu.
.vectorTabs, .vectorTabs,
.vectorTabs span, .vectorTabs a,
#mw-head .vectorMenu h3 { #mw-head .vectorMenu h3 {
background-image: url( images/tab-separator.png ); background-image: url( images/tab-separator.png );
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% ); background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );

47
components/watchstar.less
View File

@ -1,3 +1,4 @@
@import '../variables';
@import 'mediawiki.mixins.rotation'; @import 'mediawiki.mixins.rotation';
/* Watch/Unwatch Icon Styling */ /* Watch/Unwatch Icon Styling */
@ -5,49 +6,59 @@
* (in which case it is inside .vectorMenu instead of .vectorTabs). */ * (in which case it is inside .vectorMenu instead of .vectorTabs). */
.vectorTabs { .vectorTabs {
// `#ca-unwatch` & `#ca-watch` both carry `.mw-watchlink` as well. // `#ca-unwatch` & `#ca-watch` both carry `.mw-watchlink` as well.
@width-watchlink: unit( 28 / @font-size-tabs / @font-size-browser, em );
@height-watchlink: unit( 40 / @font-size-tabs / @font-size-browser, em );
@size-watchlink-icon: unit( 16 / @font-size-tabs / @font-size-browser, em );
.mw-watchlink.icon a { .mw-watchlink.icon a {
background-position: 5px 60%; width: @width-watchlink;
background-repeat: no-repeat;
margin: 0;
padding: 0;
display: block;
width: 28px;
/* This hides the text but shows the background image */ /* This hides the text but shows the background image */
/* Must not exceed parent's height, otherwise the background disappears on Chrome (T196610) */ /* Must not exceed parent's height, otherwise the background disappears on Chrome (T196610) */
padding-top: 2.5em / 0.8125;
height: 0; height: 0;
padding: @height-watchlink 0 0 0;
overflow: hidden; overflow: hidden;
&:before {
background-repeat: no-repeat;
background-position: 50% 50%;
content: '';
display: block;
position: absolute;
top: unit( 14 / @font-size-tabs / @font-size-browser, em );
left: unit( 5 / @font-size-tabs / @font-size-browser, em );
width: @size-watchlink-icon;
height: @size-watchlink-icon;
}
} }
#ca-unwatch.icon a { #ca-unwatch.icon a:before {
.background-image-svg( 'images/unwatch-icon.svg', 'images/unwatch-icon.png' ); .background-image-svg( 'images/unwatch-icon.svg', 'images/unwatch-icon.png' );
} }
#ca-watch.icon a { #ca-watch.icon a:before {
.background-image-svg( 'images/watch-icon.svg', 'images/watch-icon.png' ); .background-image-svg( 'images/watch-icon.svg', 'images/watch-icon.png' );
} }
#ca-unwatch.icon a:hover, #ca-unwatch.icon a:hover:before,
#ca-unwatch.icon a:focus { #ca-unwatch.icon a:focus:before {
.background-image-svg( 'images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png' ); .background-image-svg( 'images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png' );
} }
#ca-watch.icon a:hover, #ca-watch.icon a:hover:before,
#ca-watch.icon a:focus { #ca-watch.icon a:focus:before {
.background-image-svg( 'images/watch-icon-hl.svg', 'images/watch-icon-hl.png' ); .background-image-svg( 'images/watch-icon-hl.svg', 'images/watch-icon-hl.png' );
} }
// Loading watchstar link class. // Loading watchstar link class.
#ca-unwatch.icon .loading, #ca-unwatch.icon .loading:before,
#ca-watch.icon .loading { #ca-watch.icon .loading:before {
background-image: url( images/watch-icon-loading.svg ); background-image: url( images/watch-icon-loading.svg );
background-position: 50% 60%;
.rotation( 700ms ); .rotation( 700ms );
/* Suppress the hilarious rotating focus outline on Firefox */ /* Suppress the hilarious rotating focus outline on Firefox */
outline: 0; outline: 0;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
-webkit-transform-origin: 50% 57%; -webkit-transform-origin: 50% 50%;
transform-origin: 50% 57%; transform-origin: 50% 50%;
} }
} }