mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 15:53:46 +00:00
Cleanup: Merge layout-search-header.less into default layout rules
Dropped all usages of the no longer applicable `skin-vector-search-header-legacy` class. Bug: T258116 Change-Id: I16a5cf8dda2ab84ff4b505d5a368587190c409cd
This commit is contained in:
jdlrobson
parent
924c751421
commit
717506b9c0
|
|
@ -61,8 +61,7 @@
|
|||
|
||||
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
|
||||
// checkbox input for the menu panel.
|
||||
.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar,
|
||||
.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
||||
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
||||
// Turn off presentation so that screen readers get the same effect as visually hiding.
|
||||
// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
|
||||
// instead to avoid hidden rendering.
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
// Default layout for Modern Vector.
|
||||
//
|
||||
|
||||
@margin-horizontal-sidebar-button-icon: 12px;
|
||||
|
||||
body {
|
||||
// General background/foreground color definition as one exception to the rule.
|
||||
background-color: @background-color-base;
|
||||
|
|
@ -49,13 +47,19 @@ body {
|
|||
/* Searchbox */
|
||||
#p-search {
|
||||
float: left;
|
||||
margin: 0.5em 0.5em 0 0.5em;
|
||||
min-width: 5em;
|
||||
margin: 0 0 0 @margin-horizontal-search;
|
||||
min-width: @min-width-search;
|
||||
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
|
||||
width: 13.2em;
|
||||
// Support: Modern browsers, responsive width.
|
||||
width: 20vw;
|
||||
max-width: 20em;
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
#searchform {
|
||||
margin-left: 0;
|
||||
max-width: @max-width-search;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main column */
|
||||
|
|
@ -97,6 +101,15 @@ body {
|
|||
float: right;
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
flex-grow: 1;
|
||||
flex-basis: @min-width-personal-tools;
|
||||
margin-left: @margin-horizontal-search;
|
||||
|
||||
// Support IE9: This is reset in @support query below if Flexbox is available.
|
||||
float: right;
|
||||
}
|
||||
|
||||
#mw-sidebar-button {
|
||||
float: left; // Browser: IE9 support - button as flex-child fallback.
|
||||
margin-left: -@margin-horizontal-sidebar-button-icon;
|
||||
|
|
@ -112,3 +125,12 @@ body {
|
|||
padding-left: @padding-left-sidebar;
|
||||
z-index: @z-index-sidebar;
|
||||
}
|
||||
|
||||
// At low resolutions the search must be pushed to the right of the screen
|
||||
// We use @width-comfortable to determine this threshold as we know it's not possible for
|
||||
// personal tools to be on the same line at this resolution.
|
||||
@media ( max-width: @width-comfortable ) {
|
||||
#p-search #searchform {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,29 +59,6 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.skin-vector-search-header-legacy #mw-head {
|
||||
width: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.skin-vector-search-header-legacy #left-navigation {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.skin-vector-search-header-legacy #right-navigation {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.skin-vector-search-header-legacy #p-personal {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.skin-vector-search-header-legacy #p-search {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#p-namespaces {
|
||||
background-image: none;
|
||||
padding-left: 0;
|
||||
|
|
@ -154,10 +131,6 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.skin-vector-search-header-legacy .mw-article-toolbar-container {
|
||||
margin-top: @height-header;
|
||||
}
|
||||
|
||||
&.skin-vector-search-header .mw-article-toolbar-container {
|
||||
// We want to keep the max-width of the article-toolbar-container the
|
||||
// same max-width as the article page's content container in order to
|
||||
|
|
@ -189,14 +162,6 @@
|
|||
max-width: none;
|
||||
}
|
||||
|
||||
// We want to keep the max-width of the article-toolbar-container the
|
||||
// same max-width as the article page's content container in order to
|
||||
// prevent it from moving when going from an article page to a
|
||||
// history/special page.
|
||||
&.skin-vector-search-header-legacy .mw-article-toolbar-container {
|
||||
max-width: @max-width-content-container;
|
||||
}
|
||||
|
||||
// Adjusts the content when sidebar is open regardless of the viewport width.
|
||||
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
|
||||
margin-left: @margin-start-content;
|
||||
|
|
@ -208,8 +173,7 @@
|
|||
// `.mw-page-container` because that will cut off the sidebar. Therefore, we
|
||||
// calculate the maximum distance from the start of `mw-page-container` to the
|
||||
// start of the sidebar.
|
||||
&.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar,
|
||||
&.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
||||
#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
||||
.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
|
||||
}
|
||||
|
||||
|
|
@ -226,8 +190,7 @@
|
|||
@media ( max-width: @max-width-margin-start-content ) {
|
||||
// Adjusts the content and mw-article-toolbar-container.
|
||||
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
|
||||
&.skin-vector-search-header-legacy .mw-checkbox-hack-checkbox:checked ~ #mw-navigation .mw-content-container,
|
||||
&.skin-vector-search-header .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
|
||||
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
|
||||
margin-left: @margin-start-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
|
||||
// Assumes various variables defined there.
|
||||
|
||||
@min-width-search: unit( 350px / @font-size-browser, em );
|
||||
@max-width-search: unit( 450px / @font-size-browser, em );
|
||||
@margin-horizontal-search: unit( 56px / @font-size-browser, em );
|
||||
|
||||
// The logo is variable width but typically consists of:
|
||||
// - a icon (50x50)
|
||||
// - a wordmark (approx 120px)
|
||||
@min-width-logo: unit( 180px / @font-size-browser, em );
|
||||
|
||||
@min-width-personal-tools: unit( 300px / @font-size-browser, em );
|
||||
|
||||
@padding-horizontal-page-container: 30px;
|
||||
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
|
||||
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
|
||||
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
|
||||
|
||||
// the width of the container if you exclude consideration for search
|
||||
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
|
||||
|
||||
@min-width-supported: @min-width-container-base + @min-width-search;
|
||||
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
|
||||
|
||||
@height-personal-tools: 2em;
|
||||
|
||||
.skin-vector-search-header {
|
||||
|
||||
// Header components
|
||||
#p-search {
|
||||
flex-grow: 1;
|
||||
// Support IE9: float will be disabled if display flex is supported
|
||||
float: left;
|
||||
// Override values to reflect new behaviour.
|
||||
min-width: @min-width-search;
|
||||
max-width: 100%;
|
||||
margin: 0 0 0 @margin-horizontal-search;
|
||||
|
||||
#searchform {
|
||||
margin-left: 0;
|
||||
max-width: @max-width-search;
|
||||
}
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
flex-grow: 1;
|
||||
flex-basis: @min-width-personal-tools;
|
||||
margin-left: @margin-horizontal-search;
|
||||
|
||||
// Support IE9: This is reset in @support query below if Flexbox is available.
|
||||
float: right;
|
||||
}
|
||||
|
||||
// At low resolutions the search must be pushed to the right of the screen
|
||||
// We use @width-comfortable to determine this threshold as we know it's not possible for
|
||||
// personal tools to be on the same line at this resolution.
|
||||
@media ( max-width: @width-comfortable ) {
|
||||
#p-search #searchform {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,33 @@
|
|||
2 * @padding-vertical-header;
|
||||
@width-grid-column-one: 11em;
|
||||
@padding-horizontal-page-container: 30px;
|
||||
@margin-horizontal-sidebar-button-icon: 12px;
|
||||
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
|
||||
// Assumes various variables defined there.
|
||||
|
||||
@min-width-search: unit( 350px / @font-size-browser, em );
|
||||
@max-width-search: unit( 450px / @font-size-browser, em );
|
||||
@margin-horizontal-search: unit( 56px / @font-size-browser, em );
|
||||
|
||||
// The logo is variable width but typically consists of:
|
||||
// - a icon (50x50)
|
||||
// - a wordmark (approx 120px)
|
||||
@min-width-logo: unit( 180px / @font-size-browser, em );
|
||||
|
||||
@min-width-personal-tools: unit( 300px / @font-size-browser, em );
|
||||
|
||||
@padding-horizontal-page-container: 30px;
|
||||
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
|
||||
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
|
||||
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
|
||||
|
||||
// the width of the container if you exclude consideration for search
|
||||
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
|
||||
|
||||
@min-width-supported: @min-width-container-base + @min-width-search;
|
||||
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
|
||||
|
||||
@height-personal-tools: 2em;
|
||||
|
||||
// Default layout.
|
||||
@import 'layout-default.less';
|
||||
|
|
@ -29,4 +56,3 @@
|
|||
// Feature flag modifications to layout (additive)
|
||||
//
|
||||
@import 'layout-max-width.less';
|
||||
@import 'layout-search-header.less';
|
||||
|
|
|
|||
Loading…
Reference in a new issue