Improve styles & align components to CSS/Less guidelines
Aligning mediawiki.ui components to CSS/Less guidelines by - harmonizing colors - harmonizing whitespaces - putting all variables centralized in variables file - harmonizing IE version comments Improving output by - order properties where appropriate - making use of CSS properties and color values shorthand notation where applicable - changing fixed values with variables where applicable Change-Id: Iad71a5342462af8e07fe3e625ecb00ac1559ba74
This commit is contained in:
Volker E
parent
edf52ea076
commit
2e56bd89aa
9 changed files with 78 additions and 76 deletions
|
|
@ -72,3 +72,7 @@
|
|||
// Icon related variables
|
||||
@iconSize: 1.5em;
|
||||
@iconGutterWidth: 1em;
|
||||
|
||||
// Form input sizes
|
||||
@checkboxSize: 2em;
|
||||
@radioSize: 2em;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
color: lighten( @mainColor, @colorLightenPercentage );
|
||||
}
|
||||
// Focus and active states
|
||||
&:focus, &:active {
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken( @mainColor, @colorDarkenPercentage );
|
||||
outline: none; // outline fix
|
||||
}
|
||||
|
|
@ -74,7 +75,8 @@ Styleguide 6.2.1.
|
|||
&:hover {
|
||||
color: @mainColor;
|
||||
}
|
||||
&:focus, &:active {
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken( @mainColor, @colorDarkenPercentage );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,18 +33,18 @@
|
|||
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;
|
||||
|
||||
|
|
@ -130,10 +130,10 @@
|
|||
// 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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,10 +153,10 @@
|
|||
//
|
||||
// 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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -175,10 +175,10 @@
|
|||
//
|
||||
// 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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,9 +213,9 @@
|
|||
// 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 {
|
||||
|
|
@ -269,8 +269,8 @@ a.mw-ui-button {
|
|||
border-bottom-left-radius: @borderRadius;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: none;
|
||||
&:not( :first-child ) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
//
|
||||
// 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:
|
||||
|
|
@ -33,13 +33,11 @@
|
|||
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;
|
||||
|
|
@ -62,8 +60,7 @@
|
|||
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 {
|
||||
|
|
@ -73,25 +70,25 @@
|
|||
// the pseudo before element of the label after the checkbox now looks like a checkbox
|
||||
& + label::before {
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
.box-sizing(border-box);
|
||||
position: absolute;
|
||||
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-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;
|
||||
width: @checkboxSize;
|
||||
height: @checkboxSize;
|
||||
margin-top: -1em;
|
||||
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
|
||||
|
|
@ -122,7 +119,7 @@
|
|||
|
||||
// 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' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
//
|
||||
// Styleguide 5.1.
|
||||
.mw-ui-vform {
|
||||
.box-sizing(border-box);
|
||||
.box-sizing( border-box );
|
||||
|
||||
width: @defaultFormWidth;
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
select,
|
||||
.mw-ui-button {
|
||||
display: block;
|
||||
.box-sizing(border-box);
|
||||
.box-sizing( border-box );
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -52,13 +52,13 @@
|
|||
// 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;
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
// Override input styling just for checkboxes and radio inputs.
|
||||
input[type="radio"] {
|
||||
display: inline;
|
||||
.box-sizing(content-box);
|
||||
.box-sizing( content-box );
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
.errorbox,
|
||||
.warningbox,
|
||||
.successbox {
|
||||
.box-sizing(border-box);
|
||||
.box-sizing( border-box );
|
||||
font-size: 0.9em;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0.5em;
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
|
||||
// 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;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
@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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
// 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
|
||||
|
|
@ -45,6 +45,7 @@
|
|||
width: @width;
|
||||
min-width: @width;
|
||||
max-width: @width;
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -56,10 +57,10 @@
|
|||
&.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: '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,16 +29,16 @@
|
|||
.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
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
//
|
||||
// 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:
|
||||
|
|
@ -33,13 +33,11 @@
|
|||
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;
|
||||
|
|
@ -64,21 +62,21 @@
|
|||
// 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
|
||||
|
|
@ -102,14 +100,14 @@
|
|||
|
||||
// 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' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Styleguide 6.1.
|
|||
*/
|
||||
|
||||
.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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue