mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-18 13:05:50 +00:00
9823538683
This will help with the encapsulation/reusability of each component.
* Stylesheets were renamed to reflect their respective component name
(e.g. search.less became SearchBox.less)
* Styles were isolated to each component:
* navigation.less now only contains classes that are relevant to
Navigation.mustache.
* personalNavigation.less, search.less, and tabs.less
imports were removed and made first-class styles.
* several selectors were moved into common.less
* #p-logo was moved into sidebar
* tabs.less was renamed to VectorTabs.less and styles specific to
VectorMenu.less were put into VectorMenu.less
* Storybook was updated to reflect changes
Bug: T243281
Change-Id: Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619
89 lines
2 KiB
Plaintext
89 lines
2 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 */
|
|
.vectorTabs {
|
|
// 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 8 & 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: 8px;
|
|
padding-right: 8px;
|
|
font-size: @font-size-tabs;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.new {
|
|
a,
|
|
a:visited {
|
|
color: @color-link-new;
|
|
}
|
|
}
|
|
|
|
.selected {
|
|
// Replace tab fade with flat color (matching top of would-be fade).
|
|
background-image: url( images/tab-current-fade.png );
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@import 'watchstar.less';
|