Merge "mediawiki.ui: Fix spacing for LESS"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
7dba5717d5
8 changed files with 125 additions and 125 deletions
|
|
@ -5,65 +5,65 @@
|
|||
|
||||
// Button styling
|
||||
.mw-ui-button {
|
||||
// Container layout
|
||||
display: inline-block;
|
||||
padding: 0.4em 1em 0.4em 1em;
|
||||
margin: 0;
|
||||
// Container layout
|
||||
display: inline-block;
|
||||
padding: 0.4em 1em 0.4em 1em;
|
||||
margin: 0;
|
||||
|
||||
// IE6/IE7 hack
|
||||
// http://stackoverflow.com/a/5838575/365238
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
// IE6/IE7 hack
|
||||
// http://stackoverflow.com/a/5838575/365238
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
|
||||
// Container styling
|
||||
.buttonColors();
|
||||
border-radius: @buttonBorderRadius;
|
||||
// Container styling
|
||||
.buttonColors();
|
||||
border-radius: @buttonBorderRadius;
|
||||
|
||||
// Content styling
|
||||
vertical-align: middle;
|
||||
// Content styling
|
||||
vertical-align: middle;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
|
||||
// Interaction styling
|
||||
cursor: pointer;
|
||||
// Interaction styling
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled,
|
||||
&.mw-ui-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
&:disabled,
|
||||
&.mw-ui-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Button sizes and displays
|
||||
// -----------------------------------------
|
||||
&.mw-ui-big {
|
||||
font-size: @baseFontSize * 1.3;
|
||||
}
|
||||
&.mw-ui-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
// Button sizes and displays
|
||||
// -----------------------------------------
|
||||
&.mw-ui-big {
|
||||
font-size: @baseFontSize * 1.3;
|
||||
}
|
||||
&.mw-ui-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
|
||||
// class alone isn't specific enough to do
|
||||
a.mw-ui-button {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Button groups
|
||||
.mw-ui-button-group > * {
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
|
||||
&:first-child{
|
||||
border-top-left-radius: @buttonBorderRadius;
|
||||
border-bottom-left-radius: @buttonBorderRadius;
|
||||
}
|
||||
&:first-child{
|
||||
border-top-left-radius: @buttonBorderRadius;
|
||||
border-bottom-left-radius: @buttonBorderRadius;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
border-top-right-radius: @buttonBorderRadius;
|
||||
border-bottom-right-radius: @buttonBorderRadius;
|
||||
}
|
||||
&:last-child{
|
||||
border-top-right-radius: @buttonBorderRadius;
|
||||
border-bottom-right-radius: @buttonBorderRadius;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,65 +15,65 @@
|
|||
// Style a compact vertical stacked form ("VForm") and the elements in divs
|
||||
// within it.
|
||||
.mw-ui-vform {
|
||||
.box-sizing(border-box);
|
||||
.box-sizing(border-box);
|
||||
|
||||
width: @defaultFormWidth;
|
||||
width: @defaultFormWidth;
|
||||
|
||||
// Immediate divs in a vform are block and spaced-out.
|
||||
& > div {
|
||||
display: block;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
// Immediate divs in a vform are block and spaced-out.
|
||||
& > div {
|
||||
display: block;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
// MW currently doesn't use the type attribute everywhere on inputs.
|
||||
input,
|
||||
.mw-ui-button {
|
||||
display: block;
|
||||
.box-sizing(border-box);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
// MW currently doesn't use the type attribute everywhere on inputs.
|
||||
input,
|
||||
.mw-ui-button {
|
||||
display: block;
|
||||
.box-sizing(border-box);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// We exclude these because they'll generally use mw-ui-button.
|
||||
// Otherwise, we'll unintentionally override that.
|
||||
input:not([type=button]):not([type=submit]):not([type=file]), {
|
||||
.agora-field-styling(); // mixins/forms.less
|
||||
}
|
||||
// We exclude these because they'll generally use mw-ui-button.
|
||||
// Otherwise, we'll unintentionally override that.
|
||||
input:not([type=button]):not([type=submit]):not([type=file]), {
|
||||
.agora-field-styling(); // mixins/forms.less
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
.box-sizing(border-box);
|
||||
.agora-label-styling();
|
||||
width: auto;
|
||||
margin: 0 0 0.2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
.box-sizing(border-box);
|
||||
.agora-label-styling();
|
||||
width: auto;
|
||||
margin: 0 0 0.2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Override input styling just for checkboxes and radio inputs.
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline;
|
||||
.box-sizing(content-box);
|
||||
width: auto;
|
||||
}
|
||||
// Override input styling just for checkboxes and radio inputs.
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline;
|
||||
.box-sizing(content-box);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// HTMLForm uses error, SpecialUserlogin (login and create account) uses
|
||||
// errorbox.
|
||||
// TODO move errorbox from mediawiki.special.vforms.css into here.
|
||||
.error {
|
||||
.box-sizing(border-box);
|
||||
font-size: 0.9em;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0.5em;
|
||||
color: #cc0000;
|
||||
border: 1px solid #fac5c5;
|
||||
background-color: #fae3e3;
|
||||
text-shadow: 0 1px #fae3e3;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
// HTMLForm uses error, SpecialUserlogin (login and create account) uses
|
||||
// errorbox.
|
||||
// TODO move errorbox from mediawiki.special.vforms.css into here.
|
||||
.error {
|
||||
.box-sizing(border-box);
|
||||
font-size: 0.9em;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0.5em;
|
||||
color: #cc0000;
|
||||
border: 1px solid #fac5c5;
|
||||
background-color: #fae3e3;
|
||||
text-shadow: 0 1px #fae3e3;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
|
|
@ -95,21 +95,21 @@
|
|||
// You generally don't need to use this class if <input> is within an Agora
|
||||
// form container such as mw-ui-vform
|
||||
.mw-ui-input {
|
||||
.agora-field-styling(); // mixins/forms.less
|
||||
.agora-field-styling(); // mixins/forms.less
|
||||
}
|
||||
|
||||
// Apply mw-ui-label to individual elements to style them.
|
||||
// You generally don't need to use this class if <label> is within an Agora
|
||||
// form container such as mw-ui-vform
|
||||
.mw-ui-label {
|
||||
.agora-label-styling(); // mixins/forms.less
|
||||
.agora-label-styling(); // mixins/forms.less
|
||||
}
|
||||
|
||||
// Nesting an input checkbox or radio button inside a label with this class
|
||||
// improves alignment, e.g.
|
||||
// <label class="mw-ui-checkbox-label">
|
||||
// <input type="checkbox">The label text
|
||||
// </label>
|
||||
// <label class="mw-ui-checkbox-label">
|
||||
// <input type="checkbox">The label text
|
||||
// </label>
|
||||
.mw-ui-checkbox-label, .mw-ui-radio-label {
|
||||
.agora-inline-label-styling();
|
||||
.agora-inline-label-styling();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,19 +2,19 @@
|
|||
@import "../../mixins/type";
|
||||
|
||||
.mw-ui-button {
|
||||
// Button colors determined by function.
|
||||
// -----------------------------------------
|
||||
&.mw-ui-primary {
|
||||
.buttonColors(@agoraBlue);
|
||||
}
|
||||
// Button colors determined by function.
|
||||
// -----------------------------------------
|
||||
&.mw-ui-primary {
|
||||
.buttonColors(@agoraBlue);
|
||||
}
|
||||
|
||||
&.mw-ui-constructive {
|
||||
.buttonColors(@agoraGreen);
|
||||
}
|
||||
&.mw-ui-constructive {
|
||||
.buttonColors(@agoraGreen);
|
||||
}
|
||||
|
||||
&.mw-ui-destructive {
|
||||
.buttonColors(@agoraRed);
|
||||
}
|
||||
&.mw-ui-destructive {
|
||||
.buttonColors(@agoraRed);
|
||||
}
|
||||
|
||||
.vector-type();
|
||||
.vector-type();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
@import "../../mixins/type";
|
||||
|
||||
.mw-ui-container {
|
||||
.vector-type();
|
||||
.vector-type();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
.mw-ui-vform,
|
||||
.mw-ui-vform > div input,
|
||||
.mw-ui-input {
|
||||
.vector-type();
|
||||
.vector-type();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../settings/typography";
|
||||
|
||||
.vector-type() {
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@
|
|||
}
|
||||
|
||||
.agora-flush-left() {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.agora-flush-right() {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.agora-center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ div.vectorTabs li.icon a {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
/* OVERRIDDEN BY COMPLIANT BROWSERS */
|
||||
div.vectorTabs span a {
|
||||
div.vectorTabs span a {
|
||||
display: inline-block;
|
||||
padding-top: 1.25em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue