// 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;
+ }
}
// Style a compact vertical stacked form ("VForm") and the elements in divs
// within it.
.mw-ui-vform {
- .box-sizing(border-box);
-
- width: @defaultFormWidth;
-
- // 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%;
- }
-
- // 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;
- }
-
- // 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;
- }
+ .box-sizing(border-box);
+
+ width: @defaultFormWidth;
+
+ // 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%;
+ }
+
+ // 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;
+ }
+
+ // 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;
+ }
}
// --------------------------------------------------------------------------
// 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();
}
dépôts / lhc / web / wiklou.git / commitdiff