// Icon related variables
@iconSize: 1.5em;
@iconGutterWidth: 1em;
+
+// Form input sizes
+@checkboxSize: 2em;
+@radioSize: 2em;
color: lighten( @mainColor, @colorLightenPercentage );
}
// Focus and active states
- &:focus, &:active {
+ &:focus,
+ &:active {
color: darken( @mainColor, @colorDarkenPercentage );
outline: none; // outline fix
}
&:hover {
color: @mainColor;
}
- &:focus, &:active {
+ &:focus,
+ &:active {
color: darken( @mainColor, @colorDarkenPercentage );
}
}
display: inline-block;
padding: .5em 1em;
margin: 0;
- .box-sizing(border-box);
+ .box-sizing( border-box );
// Disable weird iOS styling
-webkit-appearance: none;
- // IE6/IE7 hack
- // http://stackoverflow.com/a/5838575/365238
+ // IE 6 & 7 hack
+ // https://stackoverflow.com/a/5838575/365238
*display: inline;
zoom: 1;
// Container styling
- .button-colors(#FFF, #CCC, #777);
+ .button-colors( #fff, #ccc, #777 );
border-radius: @borderRadius;
min-width: 4em;
// Styleguide 2.1.1.
&.mw-ui-progressive,
&.mw-ui-primary {
- .button-colors(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
+ .button-colors( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
&.mw-ui-quiet {
- .button-colors-quiet(@colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive);
+ .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
}
}
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
- .button-colors(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
+ .button-colors( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
&.mw-ui-quiet {
- .button-colors-quiet(@colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive);
+ .button-colors-quiet( @colorConstructive, @colorConstructiveHighlight, @colorConstructiveActive );
}
}
//
// Styleguide 2.1.3.
&.mw-ui-destructive {
- .button-colors(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
+ .button-colors( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
&.mw-ui-quiet {
- .button-colors-quiet(@colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive);
+ .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
}
}
// Styleguide 2.1.4.
&.mw-ui-quiet {
background: transparent;
- border: none;
+ border: 0;
text-shadow: none;
- .button-colors-quiet(@colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive);
+ .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
&:hover,
&:focus {
border-bottom-left-radius: @borderRadius;
}
- &:not(:first-child) {
- border-left: none;
+ &:not( :first-child ) {
+ border-left: 0;
}
&:last-child{
//
// Styling checkboxes in a way that works cross browser is a tricky problem to solve.
// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
-// This renders in all browsers except IE6-8 which do not support the :checked selector;
-// these are kept backwards-compatible using the :not(#noop) selector.
+// This renders in all browsers except IE 6-8 which do not support the :checked selector;
+// these are kept backwards-compatible using the `:not( #noop )` selector.
// You should give the checkbox and label matching "id" and "for" attributes, respectively.
//
// Markup:
vertical-align: middle;
}
-@checkboxSize: 2em;
-
// We use the not selector to cancel out styling on IE 8 and below
-// We also disable this styling on javascript disabled devices. This fixes the issue with
+// We also disable this styling on JavaScript disabled devices. This fixes the issue with
// Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
// more capable browsers with unstyled checkboxes.
-.client-js .mw-ui-checkbox:not(#noop) {
+.client-js .mw-ui-checkbox:not( #noop ) {
// Position relatively so we can make use of absolute pseudo elements
position: relative;
display: table;
height: @checkboxSize;
// This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
max-width: none;
- margin: 0;
- margin-right: 0.4em;
+ margin: 0 0.4em 0 0;
display: table-cell;
& + label {
// the pseudo before element of the label after the checkbox now looks like a checkbox
& + label::before {
content: '';
- cursor: pointer;
- .box-sizing(border-box);
+ background-color: #fff;
+ .background-image-svg( 'images/checked.svg', 'images/checked.png' );
+ background-position: center center;
+ background-origin: border-box;
+ background-repeat: no-repeat;
+ .background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em );
+ background-size: 0 0;
+ .box-sizing( border-box );
position: absolute;
+ // align the checkbox to middle of the text
+ top: 50%;
left: 0;
- border-radius: @borderRadius;
width: @checkboxSize;
height: @checkboxSize;
- line-height: @checkboxSize;
- background-color: #fff;
- border: 1px solid @colorGray7;
- // align the checkbox to middle of the text
- top: 50%;
margin-top: -1em;
- .background-image-svg('images/checked.svg', 'images/checked.png');
- .background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em );
- background-repeat: no-repeat;
- background-position: center center;
- background-origin: border-box;
- background-size: 0 0;
+ border: 1px solid @colorGray7;
+ border-radius: @borderRadius;
+ line-height: @checkboxSize;
+ cursor: pointer;
}
// when the input is checked, style the label pseudo before element that followed as a checked checkbox
// disabled and checked checkboxes have a white circle
&:disabled:checked + label::before {
- .background-image-svg('images/checked_disabled.svg', 'images/checked_disabled.png');
+ .background-image-svg( 'images/checked_disabled.svg', 'images/checked_disabled.png' );
}
}
}
//
// Styleguide 5.1.
.mw-ui-vform {
- .box-sizing(border-box);
+ .box-sizing( border-box );
width: @defaultFormWidth;
select,
.mw-ui-button {
display: block;
- .box-sizing(border-box);
+ .box-sizing( border-box );
margin: 0;
width: 100%;
}
// Give dropdown lists the same spacing as input fields for consistency.
// Values taken from .agora-field-styling() in mixins/form.less
select {
- padding: 0.35em 0.5em 0.35em 0.5em;
+ padding: 0.35em 0.5em;
vertical-align: middle;
}
> label {
display: block;
- .box-sizing(border-box);
+ .box-sizing( border-box );
.agora-label-styling();
width: auto;
margin: 0 0 0.2em;
// Override input styling just for checkboxes and radio inputs.
input[type="radio"] {
display: inline;
- .box-sizing(content-box);
+ .box-sizing( content-box );
width: auto;
}
.errorbox,
.warningbox,
.successbox {
- .box-sizing(border-box);
+ .box-sizing( border-box );
font-size: 0.9em;
margin: 0 0 1em 0;
padding: 0.5em;
// Colours taken from those for .errorbox in shared.css
.error {
- color: #cc0000;
+ color: @colorErrorText;
border: 1px solid #fac5c5;
background-color: #fae3e3;
text-shadow: 0 1px #fae3e3;
@import "mediawiki.ui/variables";
// Mixins
-.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
+.mixin-mw-ui-icon-bgimage( @iconSvg, @iconPng ) {
&.mw-ui-icon {
&:before {
- .background-image-svg(@iconSvg, @iconPng);
+ .background-image-svg( @iconSvg, @iconPng );
}
}
}
// Icons
//
// To use icons you must be using a browser that supports pseudo elements.
-// This includes support for IE8.
+// This includes support for IE 8.
// http://caniuse.com/#feat=css-gencontent
//
// For elements that are intended to have both an icon and text, browsers that
width: @width;
min-width: @width;
max-width: @width;
+
&:before {
left: 0;
right: 0;
&.mw-ui-icon-before:before,
&.mw-ui-icon-element:before {
background-position: 50% 50%;
- float: left;
- display: block;
background-repeat: no-repeat;
background-size: 100% auto;
+ float: left;
+ display: block;
min-height: @iconSize;
content: '';
}
.mw-ui-input {
// turn off default input styling for input[type="search"] fields
-webkit-appearance: none;
- border: 1px solid @colorFieldBorder;
- .box-sizing(border-box);
- width: 100%;
- padding: .3em .3em .3em .6em;
+ .box-sizing( border-box );
display: block;
- vertical-align: middle;
+ width: 100%;
+ border: 1px solid @colorFieldBorder;
border-radius: @borderRadius;
+ padding: 0.3em 0.3em 0.3em 0.6em;
font-family: inherit;
font-size: inherit;
line-height: inherit;
+ vertical-align: middle;
// Placeholder text styling must be set individually for each browser @winter
&::-webkit-input-placeholder { // webkit
//
// Styling radios in a way that works cross browser is a tricky problem to solve.
// In MediaWiki UI put a radio and label inside a mw-ui-radio div.
-// This renders in all browsers except IE6-8 which do not support the :checked selector;
-// these are kept backwards-compatible using the :not(#noop) selector.
+// This renders in all browsers except IE 6-8 which do not support the :checked selector;
+// these are kept backwards-compatible using the `:not( #noop )` selector.
// You should give the radio and label matching "id" and "for" attributes, respectively.
//
// Markup:
vertical-align: middle;
}
-@radioSize: 2em;
-
// We use the not selector to cancel out styling on IE 8 and below.
-// We also disable this styling on javascript disabled devices. This fixes the issue with
+// We also disable this styling on JavaScript disabled devices. This fixes the issue with
// Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
// more capable browsers with unstyled radio buttons.
-.client-js .mw-ui-radio:not(#noop) {
+.client-js .mw-ui-radio:not( #noop ) {
// Position relatively so we can make use of absolute pseudo elements
position: relative;
line-height: @radioSize;
// the pseudo before element of the label after the radio now looks like a radio
& + label::before {
content: '';
- cursor: pointer;
- .box-sizing(border-box);
+ background-color: #fff;
+ .background-image-svg( 'images/radio_checked.svg', 'images/radio_checked.png' );
+ background-origin: border-box;
+ background-position: center center;
+ background-repeat: no-repeat;
+ .background-size( @radioSize, @radioSize );
+ background-size: 0 0;
+ .box-sizing( border-box );
position: absolute;
left: 0;
- border-radius: 100%;
width: @radioSize;
height: @radioSize;
- background-color: #fff;
border: 1px solid @colorGray7;
- .background-image-svg('images/radio_checked.svg', 'images/radio_checked.png');
- .background-size( @radioSize, @radioSize );
- background-repeat: no-repeat;
- background-position: center center;
- background-origin: border-box;
- background-size: 0 0;
+ border-radius: 100%;
+ cursor: pointer;
}
// when the input is checked, style the label pseudo before element that followed as a checked radio
// disabled radios have a gray background
&:disabled + label::before {
- cursor: default;
background-color: @colorGray14;
border-color: @colorGray14;
+ cursor: default;
}
// disabled and checked radios have a white circle
&:disabled:checked + label::before {
- .background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png');
+ .background-image-svg( 'images/radio_disabled.svg', 'images/radio_disabled.png' );
}
}
}
*/
.mw-ui-text {
- // The selector order is like this on purpose; IE6 ignores the second selector,
+ // The selector order is like this on purpose; IE 6 ignores the second selector,
// so we don't want to accidentally apply this color on all mw-ui-CONTEXT classes
.mw-ui-progressive& {
color: @colorProgressive;
dépôts / lhc / web / wiklou.git / commitdiff