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

Isolate Vector Styles to their Respective Component 

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
This commit is contained in:
Nicholas Ray 2020-02-28 13:06:33 -07:00 committed by Jdlrobson
parent cdd5ebd74d
commit 9823538683
19 changed files with 243 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
resources/skins.vector.styles/footer.less → resources/skins.vector.styles/Footer.less
View File

32
resources/skins.vector.styles/Navigation.less Normal file
View File

@ -0,0 +1,32 @@
@import 'mediawiki.mixins.less';
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
position: absolute;
top: -9999px;
}
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
/* Navigation Containers */
#left-navigation {
float: left;
margin-left: 10em;
margin-top: 2.5em;
/* When right nav would overlap left nav, it's placed below it
(normal CSS floats behavior). This rule ensures that no empty space
is shown between them due to right nav's margin-top. Page layout
is still broken, but at least the nav overlaps only the page title
instead of half the content. */
margin-bottom: -2.5em;
}
#right-navigation {
float: right;
margin-top: 2.5em;
}

0
resources/skins.vector.styles/personalNavigation.less → resources/skins.vector.styles/PersonalMenu.less
View File

49
resources/skins.vector.styles/Portal.less Normal file
View File

@ -0,0 +1,49 @@
@import '../../variables.less';
@import 'mediawiki.mixins.less';
.portal {
margin: 0 0.6em 0 0.7em;
padding: 0.25em 0;
direction: ltr;
h3 {
color: @color-nav-subtle;
font-weight: normal;
margin: 0.5em 0 0 ( @margin-left-nav-main-body / @font-size-nav-main-heading );
padding: 0.25em 0;
cursor: default;
border: 0;
font-size: @font-size-nav-main-heading;
}
.body {
background-image: url( images/portal-separator.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
background-image: linear-gradient( to right, transparent 0, #c8ccd1 35%, #c8ccd1 70%, transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
background-repeat: no-repeat;
background-size: 100% @border-width-base;
margin-left: @margin-left-nav-main-body;
padding-top: 0;
ul {
list-style: none none;
margin: 0;
padding-top: 0.3em;
}
li {
margin: 0;
padding: 0.25em 0;
font-size: @font-size-nav-main-body;
line-height: @line-height-nav;
word-wrap: break-word;
a {
color: @color-link;
&:visited {
color: @color-link--visited;
}
}
}
}
}

0
resources/skins.vector.styles/search.less → resources/skins.vector.styles/SearchBox.less
View File

40
resources/skins.vector.styles/Sidebar.less Normal file
View File

@ -0,0 +1,40 @@
@import '../../variables.less';
/* Logo */
#p-logo {
width: 10em;
height: 160px;
a {
background-position: center center;
background-repeat: no-repeat;
display: block;
width: 10em;
height: 160px;
text-decoration: none;
}
}
/* Panel */
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0;
font-size: @font-size-nav-main;
/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
#p-logo + .portal {
background-image: none;
margin-top: 1em;
h3 {
display: none;
}
.body {
background-image: none;
margin-left: @margin-left-nav-main-body;
}
}
}

86
resources/skins.vector.styles/tabs.less → resources/skins.vector.styles/VectorMenu.less
View File

@ -1,90 +1,6 @@
@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;
}
}
}
/* Variants and Actions */
.vectorMenu {
direction: ltr;
@ -242,5 +158,3 @@
outline: auto -webkit-focus-ring-color; // Webkit style
}
}
@import 'watchstar.less';

88
resources/skins.vector.styles/VectorTabs.less Normal file
View File

@ -0,0 +1,88 @@
@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';

17
resources/skins.vector.styles/common.less
View File

@ -169,3 +169,20 @@ pre,
#siteNotice {
font-size: @font-size-site-notice;
}
.mw-jump-link:not( :focus ) {
.mixin-screen-reader-text;
}
/* Head */
#mw-page-base {
background-position: bottom left;
height: 5em;
.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em;
}

138
resources/skins.vector.styles/navigation.less
View File

@ -1,138 +0,0 @@
@import 'mediawiki.mixins.less';
@import 'personalNavigation.less';
@import 'search.less';
@import 'tabs.less';
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
position: absolute;
top: -9999px;
}
.mw-jump-link:not( :focus ) {
.mixin-screen-reader-text;
}
/* Head */
#mw-page-base {
background-position: bottom left;
height: 5em;
.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em;
}
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
/* Navigation Containers */
#left-navigation {
float: left;
margin-left: 10em;
margin-top: 2.5em;
/* When right nav would overlap left nav, it's placed below it
(normal CSS floats behavior). This rule ensures that no empty space
is shown between them due to right nav's margin-top. Page layout
is still broken, but at least the nav overlaps only the page title
instead of half the content. */
margin-bottom: -2.5em;
}
#right-navigation {
float: right;
margin-top: 2.5em;
}
/* Logo */
#p-logo {
width: 10em;
height: 160px;
a {
background-position: center center;
background-repeat: no-repeat;
display: block;
width: 10em;
height: 160px;
text-decoration: none;
}
}
/* Panel */
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0;
font-size: @font-size-nav-main;
.portal {
margin: 0 0.6em 0 0.7em;
padding: 0.25em 0;
direction: ltr;
h3 {
color: @color-nav-subtle;
font-weight: normal;
margin: 0.5em 0 0 ( @margin-left-nav-main-body / @font-size-nav-main-heading );
padding: 0.25em 0;
cursor: default;
border: 0;
font-size: @font-size-nav-main-heading;
}
.body {
background-image: url( images/portal-separator.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
background-image: linear-gradient( to right, transparent 0, #c8ccd1 35%, #c8ccd1 70%, transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
background-repeat: no-repeat;
background-size: 100% @border-width-base;
margin-left: @margin-left-nav-main-body;
padding-top: 0;
ul {
list-style: none none;
margin: 0;
padding-top: 0.3em;
}
li {
margin: 0;
padding: 0.25em 0;
font-size: @font-size-nav-main-body;
line-height: @line-height-nav;
word-wrap: break-word;
a {
color: @color-link;
&:visited {
color: @color-link--visited;
}
}
}
}
}
/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
#p-logo + .portal {
background-image: none;
margin-top: 1em;
h3 {
display: none;
}
.body {
background-image: none;
margin-left: @margin-left-nav-main-body;
}
}
}

11
resources/skins.vector.styles/screen.less
View File

@ -1,7 +1,12 @@
/* Vector screen styles */
@import '../../variables.less';
@import 'common.less';
@import 'navigation.less';
@import 'footer.less';
@import 'PersonalMenu.less';
@import 'SearchBox.less';
@import 'VectorTabs.less';
@import 'VectorMenu.less';
@import 'Navigation.less';
@import 'Portal.less';
@import 'Sidebar.less';
@import 'Footer.less';
@import 'externalLinks.less';

2
stories/footer.stories.js
View File

@ -1,6 +1,6 @@
import mustache from 'mustache';
import { FOOTER_TEMPLATE_DATA, footerTemplate } from './footer.stories.data';
import '../resources/skins.vector.styles/footer.less';
import '../resources/skins.vector.styles/Footer.less';
import '../.storybook/common.less';
export default {

2
stories/menu.stories.js
View File

@ -1,5 +1,5 @@
import mustache from 'mustache';
import '../resources/skins.vector.styles/navigation.less';
import '../resources/skins.vector.styles/VectorMenu.less';
import '../.storybook/common.less';
import { vectorMenuTemplate, moreData, variantsData } from './menu.stories.data';

2
stories/navigation.stories.js
View File

@ -2,7 +2,7 @@ import mustache from 'mustache';
import { navTemplate, NAVIGATION_TEMPLATE_DATA,
NAVIGATION_TEMPLATE_PARTIALS } from './navigation.stories.data';
import '../.storybook/common.less';
import '../resources/skins.vector.styles/navigation.less';
import '../resources/skins.vector.styles/Navigation.less';
export default {
title: 'Navigation (Header + Sidebar)'

2
stories/personalNavigation.stories.js
View File

@ -1,6 +1,6 @@
import mustache from 'mustache';
import { personalMenuTemplate, PERSONAL_MENU_TEMPLATE_DATA } from './personalNavigation.stories.data';
import '../resources/skins.vector.styles/personalNavigation.less';
import '../resources/skins.vector.styles/PersonalMenu.less';
import '../.storybook/common.less';
export default {

2
stories/portal.stories.data.js
View File

@ -1,6 +1,6 @@
import mustache from 'mustache';
import portalTemplate from '!!raw-loader!../includes/templates/Portal.mustache';
import '../resources/skins.vector.styles/navigation.less';
import '../resources/skins.vector.styles/Portal.less';
import '../.storybook/common.less';
import { placeholder, htmluserlangattributes } from './utils';

2
stories/searchBox.stories.js
View File

@ -1,5 +1,5 @@
import mustache from 'mustache';
import '../resources/skins.vector.styles/search.less';
import '../resources/skins.vector.styles/SearchBox.less';
import '../.storybook/common.less';
import { searchBoxData, searchBoxTemplate } from './searchBox.stories.data';

4
stories/sidebar.stories.js
View File

@ -1,7 +1,7 @@
import mustache from 'mustache';
import '../.storybook/common.less';
import '../resources/skins.vector.styles/navigation.less';
import '../resources/skins.vector.styles/Sidebar.less';
import '../resources/skins.vector.styles/Portal.less';
import { sidebarTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './sidebar.stories.data';
export default {

2
stories/tabs.stories.js
View File

@ -1,6 +1,6 @@
import mustache from 'mustache';
import { namespaceTabsData, pageActionsData, vectorTabsTemplate } from './tabs.stories.data';
import '../resources/skins.vector.styles/tabs.less';
import '../resources/skins.vector.styles/VectorTabs.less';
import '../.storybook/common.less';
export default {