diff --git a/resources/skins.vector.styles/footer.less b/resources/skins.vector.styles/Footer.less similarity index 100% rename from resources/skins.vector.styles/footer.less rename to resources/skins.vector.styles/Footer.less diff --git a/resources/skins.vector.styles/Navigation.less b/resources/skins.vector.styles/Navigation.less new file mode 100644 index 0000000..0100321 --- /dev/null +++ b/resources/skins.vector.styles/Navigation.less @@ -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; +} diff --git a/resources/skins.vector.styles/personalNavigation.less b/resources/skins.vector.styles/PersonalMenu.less similarity index 100% rename from resources/skins.vector.styles/personalNavigation.less rename to resources/skins.vector.styles/PersonalMenu.less diff --git a/resources/skins.vector.styles/Portal.less b/resources/skins.vector.styles/Portal.less new file mode 100644 index 0000000..b26e06c --- /dev/null +++ b/resources/skins.vector.styles/Portal.less @@ -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; + } + } + } + } +} diff --git a/resources/skins.vector.styles/search.less b/resources/skins.vector.styles/SearchBox.less similarity index 100% rename from resources/skins.vector.styles/search.less rename to resources/skins.vector.styles/SearchBox.less diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less new file mode 100644 index 0000000..0cc3ccc --- /dev/null +++ b/resources/skins.vector.styles/Sidebar.less @@ -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; + } + } +} diff --git a/resources/skins.vector.styles/tabs.less b/resources/skins.vector.styles/VectorMenu.less similarity index 66% rename from resources/skins.vector.styles/tabs.less rename to resources/skins.vector.styles/VectorMenu.less index 4cb4ab1..d516618 100644 --- a/resources/skins.vector.styles/tabs.less +++ b/resources/skins.vector.styles/VectorMenu.less @@ -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'; diff --git a/resources/skins.vector.styles/VectorTabs.less b/resources/skins.vector.styles/VectorTabs.less new file mode 100644 index 0000000..a7f178a --- /dev/null +++ b/resources/skins.vector.styles/VectorTabs.less @@ -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'; diff --git a/resources/skins.vector.styles/common.less b/resources/skins.vector.styles/common.less index 9cfa9fc..8d5b0e3 100644 --- a/resources/skins.vector.styles/common.less +++ b/resources/skins.vector.styles/common.less @@ -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; +} diff --git a/resources/skins.vector.styles/navigation.less b/resources/skins.vector.styles/navigation.less deleted file mode 100644 index b061a01..0000000 --- a/resources/skins.vector.styles/navigation.less +++ /dev/null @@ -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; - } - } -} diff --git a/resources/skins.vector.styles/screen.less b/resources/skins.vector.styles/screen.less index 0e052d3..671c70e 100644 --- a/resources/skins.vector.styles/screen.less +++ b/resources/skins.vector.styles/screen.less @@ -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'; diff --git a/stories/footer.stories.js b/stories/footer.stories.js index 85d9282..d0f8283 100644 --- a/stories/footer.stories.js +++ b/stories/footer.stories.js @@ -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 { diff --git a/stories/menu.stories.js b/stories/menu.stories.js index 5271265..0eee00c 100644 --- a/stories/menu.stories.js +++ b/stories/menu.stories.js @@ -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'; diff --git a/stories/navigation.stories.js b/stories/navigation.stories.js index 10d40b2..7f16779 100644 --- a/stories/navigation.stories.js +++ b/stories/navigation.stories.js @@ -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)' diff --git a/stories/personalNavigation.stories.js b/stories/personalNavigation.stories.js index dacf447..f3e1d7e 100644 --- a/stories/personalNavigation.stories.js +++ b/stories/personalNavigation.stories.js @@ -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 { diff --git a/stories/portal.stories.data.js b/stories/portal.stories.data.js index d5a92d7..9cc939e 100644 --- a/stories/portal.stories.data.js +++ b/stories/portal.stories.data.js @@ -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'; diff --git a/stories/searchBox.stories.js b/stories/searchBox.stories.js index 1f94191..8671645 100644 --- a/stories/searchBox.stories.js +++ b/stories/searchBox.stories.js @@ -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'; diff --git a/stories/sidebar.stories.js b/stories/sidebar.stories.js index 535676b..e94fdb5 100644 --- a/stories/sidebar.stories.js +++ b/stories/sidebar.stories.js @@ -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 { diff --git a/stories/tabs.stories.js b/stories/tabs.stories.js index f9505c3..98645b4 100644 --- a/stories/tabs.stories.js +++ b/stories/tabs.stories.js @@ -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 {