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
Volker E
parent
0e2f5de63c
commit
481c90798e
|
|
@ -1,3 +1,4 @@
|
|||
@import '../variables';
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
/**
|
||||
|
|
@ -40,13 +41,19 @@
|
|||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
// Tab separator: Border between tabs and outer right border.
|
||||
background-position: right bottom;
|
||||
color: @color-link;
|
||||
.box-sizing( border-box );
|
||||
display: block;
|
||||
height: 1.9em;
|
||||
padding-left: 0.615em; // Equals `8px` at computed `font-size` of `13px` below
|
||||
padding-right: 0.615em;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||||
position: relative;
|
||||
padding-top: 1.25em;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: @font-size-tabs;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,20 +83,6 @@
|
|||
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 */
|
||||
|
|
@ -101,33 +94,33 @@
|
|||
line-height: 1.125em;
|
||||
|
||||
h3 {
|
||||
span {
|
||||
color: @color-nav-subtle;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 0.615em;
|
||||
padding-top: 1.25em;
|
||||
padding-right: 16px;
|
||||
font-size: @font-size-tabs;
|
||||
font-weight: normal;
|
||||
color: @color-nav-subtle;
|
||||
position: relative;
|
||||
display: block;
|
||||
.box-sizing( border-box );
|
||||
// `padding-top` needs to scale with font-size.
|
||||
padding-top: 1.25em;
|
||||
padding-left: 8px;
|
||||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||||
font-size: @font-size-tabs;
|
||||
font-weight: normal;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
.background-image-svg( 'images/arrow-down.svg', 'images/arrow-down.png' );
|
||||
background-position: 100% 50%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 1.25em;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// Modify the color of the image from the default #222 to approx. #444 to match the text.
|
||||
opacity: 0.85;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
.background-image-svg( 'images/arrow-down.svg', 'images/arrow-down.png' );
|
||||
background-position: 100% 50%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: unit( 10 / @font-size-tabs / @font-size-browser, em );
|
||||
right: 8px;
|
||||
bottom: 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.
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&:hover span,
|
||||
&:focus span {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @color-base;
|
||||
|
||||
&:after {
|
||||
|
|
@ -196,22 +189,21 @@
|
|||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||||
background-position: right bottom;
|
||||
float: left;
|
||||
font-size: @font-size-reset;
|
||||
height: 2.5em;
|
||||
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||||
margin: 0 -@border-width-base 0 0;
|
||||
// `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.
|
||||
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
|
||||
// `padding-left` in `.vectorMenu h3 span`
|
||||
padding: 0 0.5em 0 0;
|
||||
// `padding-left` in `.vectorMenu h3 a`
|
||||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||||
}
|
||||
|
||||
// Tab Separators
|
||||
// `.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.
|
||||
.vectorTabs,
|
||||
.vectorTabs span,
|
||||
.vectorTabs a,
|
||||
#mw-head .vectorMenu h3 {
|
||||
background-image: url( images/tab-separator.png );
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import '../variables';
|
||||
@import 'mediawiki.mixins.rotation';
|
||||
|
||||
/* Watch/Unwatch Icon Styling */
|
||||
|
|
@ -5,49 +6,59 @@
|
|||
* (in which case it is inside .vectorMenu instead of .vectorTabs). */
|
||||
.vectorTabs {
|
||||
// `#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 {
|
||||
background-position: 5px 60%;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 28px;
|
||||
width: @width-watchlink;
|
||||
/* This hides the text but shows the background image */
|
||||
/* Must not exceed parent's height, otherwise the background disappears on Chrome (T196610) */
|
||||
padding-top: 2.5em / 0.8125;
|
||||
height: 0;
|
||||
padding: @height-watchlink 0 0 0;
|
||||
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' );
|
||||
}
|
||||
|
||||
#ca-watch.icon a {
|
||||
#ca-watch.icon a:before {
|
||||
.background-image-svg( 'images/watch-icon.svg', 'images/watch-icon.png' );
|
||||
}
|
||||
|
||||
#ca-unwatch.icon a:hover,
|
||||
#ca-unwatch.icon a:focus {
|
||||
#ca-unwatch.icon a:hover:before,
|
||||
#ca-unwatch.icon a:focus:before {
|
||||
.background-image-svg( 'images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png' );
|
||||
}
|
||||
|
||||
#ca-watch.icon a:hover,
|
||||
#ca-watch.icon a:focus {
|
||||
#ca-watch.icon a:hover:before,
|
||||
#ca-watch.icon a:focus:before {
|
||||
.background-image-svg( 'images/watch-icon-hl.svg', 'images/watch-icon-hl.png' );
|
||||
}
|
||||
|
||||
// Loading watchstar link class.
|
||||
#ca-unwatch.icon .loading,
|
||||
#ca-watch.icon .loading {
|
||||
#ca-unwatch.icon .loading:before,
|
||||
#ca-watch.icon .loading:before {
|
||||
background-image: url( images/watch-icon-loading.svg );
|
||||
background-position: 50% 60%;
|
||||
.rotation( 700ms );
|
||||
/* Suppress the hilarious rotating focus outline on Firefox */
|
||||
outline: 0;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
-webkit-transform-origin: 50% 57%;
|
||||
transform-origin: 50% 57%;
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue