mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-01 10:46:54 +00:00
91af0e098d
Now that the header collapses at small resolutions (I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the search toggle to show the search box when clicked and hides it when the user clicks outside the search box. * Adds searchToggle.js to perform handle the toggle behavior of the searchbox. * Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less so that these can be used to set the start margin of the search box (enabling its start edge to match the tab text start edge). * Modifies screen.less to only apply search max-width when >= @width-breakpoint-tablet Bug: T284242 Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
85 lines
1.9 KiB
Plaintext
85 lines
1.9 KiB
Plaintext
@import '../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
/**
|
|
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
|
*/
|
|
|
|
/* Namespaces and Views */
|
|
.vector-menu-tabs {
|
|
// Tab separator: Outer start border (left in LTR) of tab row.
|
|
background-position: left bottom;
|
|
float: left;
|
|
height: 2.5em;
|
|
padding-left: @border-width-base;
|
|
|
|
/* Navigation Labels */
|
|
h3 {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
float: left;
|
|
height: 100%;
|
|
list-style: none none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
// Tab fade background: Fade inside from light grey to white.
|
|
background-image: url( images/tab-normal-fade.png ); // Support: IE 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
|
|
background-image: linear-gradient( to top, @border-color-content--tabs-inactive 0, #e8f2f8 1px, #fff 100% ); // Support: Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
|
|
background-position: left bottom;
|
|
background-repeat: repeat-x;
|
|
float: left;
|
|
display: block;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: @line-height-nav;
|
|
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;
|
|
float: left;
|
|
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
|
position: relative;
|
|
padding-top: 1.25em;
|
|
padding-left: @padding-horizontal-tabs;
|
|
padding-right: @padding-horizontal-tabs;
|
|
font-size: @font-size-tabs;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.new {
|
|
a,
|
|
a:visited {
|
|
color: @color-link-new;
|
|
}
|
|
}
|
|
|
|
.selected {
|
|
// Overwrite above in browsers that support `rgba()`.
|
|
background: rgba( 255, 255, 255, 1 ); // stylelint-disable-line declaration-block-no-shorthand-property-overrides
|
|
|
|
a,
|
|
a:visited {
|
|
color: @color-link-selected;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
a {
|
|
background-position: right bottom;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|