Merge some CSS rules into the layout less file

Includes adding a less file for minerva layout rules. To make best
use of the less shortcuts and avoid duplication, some selectors
have been slightly changed. Outcome should still be identical.

Change-Id: I92179ecf6045c938cace0e7e809b7ad4cf035727
This commit is contained in:
WMDE-Fisch 2022-06-23 17:31:13 +02:00
parent c295a731ec
commit a80f662cfb
6 changed files with 48 additions and 58 deletions

View file

@ -2161,7 +2161,8 @@
],
"minerva": [
"modules/ve-mw/ui/styles/pages/ve.ui.MWParameterPage-minerva.css",
"modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage-minerva.css"
"modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage-minerva.css",
"modules/ve-mw/ui/styles/layouts/ve.ui.MWTwoPaneTransclusionDialogLayout-minerva.less"
]
},
"dependencies": [

View file

@ -104,14 +104,6 @@
display: none;
}
.ve-ui-mwTemplateDialog .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
width: 240px;
}
.ve-ui-mwTemplateDialog .oo-ui-menuLayout > .oo-ui-menuLayout-content {
left: 240px;
}
.ve-ui-mwTemplateDialog.ve-ui-mwTransclusionDialog-small-screen.ve-ui-mwTransclusionDialog-expanded .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
border-right: 0;
width: 100%;
@ -248,29 +240,6 @@
left: 10px;
}
.ve-ui-mwTemplateDialog .oo-ui-outlineControlsWidget {
padding: 2px;
display: flex;
align-items: flex-start;
justify-content: left;
}
.ve-ui-mwTemplateDialog .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-movers {
float: left;
}
.ve-ui-mwTemplateDialog .oo-ui-outlineControlsWidget .oo-ui-buttonWidget {
margin-left: 4px !important; /* stylelint-disable-line declaration-no-important */
}
.ve-ui-mwTemplateDialog .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-items > .oo-ui-buttonWidget:first-child {
margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
}
.ve-ui-mwTemplateDialog .oo-ui-outlineControlsWidget > .oo-ui-outlineControlsWidget-movers > .oo-ui-buttonWidget:nth-child( 2 ) {
margin-left: -4px !important; /* stylelint-disable-line declaration-no-important */
}
.ve-ui-mwTransclusionOutlineTemplateWidget-searchWidget {
margin: 8px 24px;
width: auto;

View file

@ -0,0 +1,6 @@
.ve-ui-mwTwoPaneTransclusionDialogLayout {
&-stackLayout {
/* We don't want anything to collapse left/right, so shouldn't use margin */
padding: 0 20px;
}
}

View file

@ -1,5 +1,8 @@
.ve-ui-mwTwoPaneTransclusionDialogLayout {
&-stackLayout {
/* We don't want anything to collapse left/right, so shouldn't use margin */
padding: 0 48px;
&.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable {
// Override from PanelLayout; only the StackLayout must be scrollable
overflow: hidden;
@ -8,13 +11,16 @@
> .oo-ui-panelLayout {
width: 100%;
box-sizing: border-box;
// @padding-panel-dialog
padding: 20px;
margin: 48px 0 20px 0;
&:last-child {
margin-bottom: 48px;
}
}
}
&-outlinePanel {
> .oo-ui-outlineControlsWidget {
.oo-ui-outlineControlsWidget {
position: absolute;
bottom: 0;
left: 0;
@ -22,11 +28,38 @@
height: 2.5em;
// @border-dialog-bar
border-top: 1px solid #c8ccd1;
padding: 2px;
display: flex;
align-items: flex-start;
justify-content: left;
.oo-ui-buttonWidget {
margin-left: 4px !important; /* stylelint-disable-line declaration-no-important */
}
&-items {
> .oo-ui-buttonWidget:first-child {
margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
}
}
&-movers {
float: left;
> .oo-ui-buttonWidget:nth-child( 2 ) {
margin-left: -4px !important; /* stylelint-disable-line declaration-no-important */
}
}
}
}
> .oo-ui-menuLayout-menu {
width: 240px;
// @border-dialog-bar
border-right: 1px solid #c8ccd1;
}
> .oo-ui-menuLayout-content {
left: 240px;
}
}

View file

@ -5,12 +5,7 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
.oo-ui-menuLayout-content > .ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout {
/* We don't want anything to collapse left/right, so shouldn't use margin */
padding: 0 20px;
}
.ve-ui-mwTransclusionDialog-multipart-message,
.ve-ui-mwTransclusionDialog-multipart-message + .oo-ui-panelLayout {
.ve-ui-mwTransclusionDialog-multipart-message + .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog-multipart-message {
margin-top: 20px;
}

View file

@ -5,31 +5,17 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
.oo-ui-menuLayout-content > .ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout {
/* We don't want anything to collapse left/right, so shouldn't use margin */
padding: 0 48px;
}
.ve-ui-mwTemplateDialog .ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout > .oo-ui-panelLayout {
padding: 0;
}
.ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout > .oo-ui-panelLayout,
.ve-ui-mwTransclusionDialog-multipart-message {
/* This top/bottom margin is meant to collapse with the next one */
margin: 48px 0 20px 0;
}
.ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout > .ve-ui-mwParameterPage,
.ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout > .ve-ui-mwAddParameterPage {
.ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout > .oo-ui-panelLayout.ve-ui-mwParameterPage,
.ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout > .oo-ui-panelLayout.ve-ui-mwAddParameterPage {
/* Tighter margins within a group of parameters. */
margin-top: 20px;
}
.ve-ui-mwTwoPaneTransclusionDialogLayout-stackLayout > .oo-ui-panelLayout:last-child {
margin-bottom: 48px;
}
.ve-ui-mwTransclusionDialog-template-note {
margin-top: 16px;
}