From 2e56bd89aaa09d46813ae7f30f5059ba7a0ee714 Mon Sep 17 00:00:00 2001 From: Volker E Date: Fri, 25 Dec 2015 20:44:57 -0800 Subject: [PATCH] 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 --- .../mediawiki.ui/variables.less | 4 ++ .../src/mediawiki.ui/components/anchors.less | 6 ++- .../src/mediawiki.ui/components/buttons.less | 28 ++++++------ .../src/mediawiki.ui/components/checkbox.less | 43 +++++++++---------- .../src/mediawiki.ui/components/forms.less | 14 +++--- .../src/mediawiki.ui/components/icons.less | 11 ++--- .../src/mediawiki.ui/components/inputs.less | 10 ++--- .../src/mediawiki.ui/components/radio.less | 34 +++++++-------- .../src/mediawiki.ui/components/text.less | 2 +- 9 files changed, 77 insertions(+), 75 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less index 3b4a40317b..507109ae2c 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/variables.less +++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less @@ -72,3 +72,7 @@ // Icon related variables @iconSize: 1.5em; @iconGutterWidth: 1em; + +// Form input sizes +@checkboxSize: 2em; +@radioSize: 2em; diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less index f0fb7b95b3..5bb69b8a7a 100644 --- a/resources/src/mediawiki.ui/components/anchors.less +++ b/resources/src/mediawiki.ui/components/anchors.less @@ -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 ); } } diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index 600b7711c1..4ffaeeee40 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -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{ diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less index bd5dd4a297..d44e5d71df 100644 --- a/resources/src/mediawiki.ui/components/checkbox.less +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -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); + 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 @@ -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' ); } } } diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less index 6a5fa96339..cc96a5c09c 100644 --- a/resources/src/mediawiki.ui/components/forms.less +++ b/resources/src/mediawiki.ui/components/forms.less @@ -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; diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less index c90a6b9e93..9b9d32470d 100644 --- a/resources/src/mediawiki.ui/components/icons.less +++ b/resources/src/mediawiki.ui/components/icons.less @@ -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: ''; } diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less index 62f0e8345f..d0633aef68 100644 --- a/resources/src/mediawiki.ui/components/inputs.less +++ b/resources/src/mediawiki.ui/components/inputs.less @@ -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 diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less index 52effd65b2..448390a726 100644 --- a/resources/src/mediawiki.ui/components/radio.less +++ b/resources/src/mediawiki.ui/components/radio.less @@ -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' ); } } } diff --git a/resources/src/mediawiki.ui/components/text.less b/resources/src/mediawiki.ui/components/text.less index 500d42c4a4..cc27e9e357 100644 --- a/resources/src/mediawiki.ui/components/text.less +++ b/resources/src/mediawiki.ui/components/text.less @@ -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; -- 2.20.1