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

Explicitly use LESS variable for breakpoint defined in mediawiki ui 

$wgResourceLoaderLESSVars is deprecated. Let's not use it anymore.

Change-Id: If28ab6884668700bc46533c8e2c377f17e6be696
Depends-On: Ib9f843147db4473ce5590741e0fb490384b0007e
Bug: T171365
This commit is contained in:
jdlrobson 2018-02-05 11:17:54 -08:00 committed by Jdlrobson
parent 7b84dc6171
commit 4389b67989
13 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
minerva.less/minerva.variables.less
View File

@ -15,8 +15,6 @@
@grayLight: @colorGray12;
@grayLightest: @colorGray14;
@width-breakpoint-mobile: 320px;
@width-breakpoint-desktop: 1000px;
// For backwards compatibility with MobileFrontend skinStyles
@wgMFDeviceWidthDesktop: @width-breakpoint-desktop;
@ -44,7 +42,7 @@
@headerMarginTop: -1px; // used to hide the header border top when a banner is not present
@searchBoxWidth: 375/16em;
@iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;
@deviceWidthTabletEms: unit( @deviceWidthTablet/16, em );
@deviceWidthTabletEms: unit( @width-breakpoint-tablet/16, em );
@brandingBoxWidth: @deviceWidthTabletEms - ( @iconSizeTotal * 3 ) - @searchBoxWidth;
@titleSectionSpacingTop: 20px;

2
resources/skins.minerva.base.styles/footer.less
View File

@ -76,7 +76,7 @@ footer {
}
}
@media ( min-width: @deviceWidthTablet ) {
@media ( min-width: @width-breakpoint-tablet ) {
footer {
.last-modified-bar {
padding-left: 0;

4
resources/skins.minerva.base.styles/print/styles.less
View File

@ -1,3 +1,5 @@
@import 'minerva.variables';
@media print {
.noprint,
.banner-container,
@ -28,7 +30,7 @@
}
}
@media print and ( max-device-width: @deviceWidthTablet ) {
@media print and ( max-device-width: @width-breakpoint-tablet ) {
// Chrome: override the default margins and reveal the footer
// Experimental technology (see https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size)
@page {

2
resources/skins.minerva.base.styles/ui.less
View File

@ -453,7 +453,7 @@ input.search {
margin: 0 @contentMargin;
}
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
// FIXME: this should be one generic class name
.page-summary-list,
.topic-title-list,

4
resources/skins.minerva.content.styles/hacks.less
View File

@ -143,7 +143,7 @@ FIXME: Review all of these hacks to see if they still apply.
width: auto !important;
}
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
// When in the HTML these should be revealed at tablet resolution (T172078)
.content {
.vertical-navbox,
@ -154,7 +154,7 @@ FIXME: Review all of these hacks to see if they still apply.
}
// Hacks to render galleries and multicol tables better on mobile
@media all and ( max-width: @deviceWidthTablet ) {
@media all and ( max-width: @width-breakpoint-tablet ) {
// Center images that might be less than the screen width.
// Image will appear centered and caption will take up full screen.

2
resources/skins.minerva.content.styles/main.less
View File

@ -53,7 +53,7 @@ body {
display: none !important;
}
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
.client-js {
// Avoid flash of unstyled content for tablet users while JavaScript is loading
// onclick attribute is removed by the toggling code.

4
resources/skins.minerva.mainMenu.styles/mainmenu.less
View File

@ -173,7 +173,7 @@ nav {
}
}
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
@rightDrawerLeftOffset: 100% - @rightDrawerWidth;
.secondary-navigation-enabled {
#mw-mf-page-center {
@ -258,7 +258,7 @@ nav {
}
}
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
.navigation-enabled {
#mw-mf-page-center {
left: @menuWidthTablet;

2
resources/skins.minerva.newusers/PointerOverlay.less
View File

@ -2,7 +2,7 @@
@colorTutorial: #2e76ff;
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
// Take into account padding in width of pointer overlay so that it
// can point to anything in the containing content area and avoid
// padding issues such as https://phabricator.wikimedia.org/F287611

2
resources/skins.minerva.tablet.styles/common.less
View File

@ -6,7 +6,7 @@ A file for css that optimises the Minerva skin on larger devices.
@import 'minerva.mixins';
@paddingVertical: 1.4em;
@media screen and ( min-width: @deviceWidthTablet ) {
@media screen and ( min-width: @width-breakpoint-tablet ) {
.client-js {
#searchIcon {
display: none;

2
resources/skins.minerva.tablet.styles/hacks.less
View File

@ -12,7 +12,7 @@ FIXME: Review all of these hacks to see if they still apply.
@import 'minerva.mixins';
/* Tablet specific styling */
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
// Float infoboxes to the right of the page
table.infobox {
margin: 0.5em 0 1em 35px !important;

2
skinStyles/mediawiki.special.search.styles/minerva.less
View File

@ -28,7 +28,7 @@
display: none;
}
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
#search {
display: none;
}

2
skinStyles/mediawiki.special.userlogin.common.styles/minerva.less
View File

@ -137,7 +137,7 @@
}
// FIXME: Some of these rules should actually be mobile first, only hiding inputs needs to be wrapped in a media query
@media all and ( max-width: @deviceWidthTablet ) {
@media all and ( max-width: @width-breakpoint-tablet ) {
@margin: 12px;
#userloginForm {

2
skinStyles/mobile.search/SearchOverlay.less
View File

@ -17,7 +17,7 @@
}
}
@media all and ( min-width: @deviceWidthTablet ) {
@media all and ( min-width: @width-breakpoint-tablet ) {
.search-overlay {
.search-box {
display: table-cell;