From: Juliusz Gonera Date: Mon, 4 Nov 2013 20:12:14 +0000 (-0500) Subject: Port mediawiki.ui SASS to LESS X-Git-Tag: 1.31.0-rc.0~18150^2~1 X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_ecrire%28%22brouteur%22%2C%28%24id_rubrique%20?a=commitdiff_plain;h=eb9cc2b9ce24286622870c4c654a5da875f01307;p=lhc%2Fweb%2Fwiklou.git Port mediawiki.ui SASS to LESS This was the only SASS in core. Remove gradient hacks for IE<10 (proprietary filter property) in vertical-gradient mixin. Buttons look fine without gradients too, and filter can often signfificantly degrade performance: http://gomilkyway.com/web/why-site-is-so-slow-on-ie-even-to-scroll-poor-ie-performance/ http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx (look for "performance") Remove text-shadow for button's text which had no effect on appearance. Remove obsolete or non-existent vendor-prefixed properties: * display: -moz-inline-stack (not needed for Firefox 3+) * -webkit-border-radius, -moz-border-radius (supported for sometime without a prefix, graceful degradation for old browsers) * -ms-border-radius, -o-border-radius (never existed) Remove *vertical-align: auto from IE6/IE7 inline hack. Can't find any evidence that it's necessary. Bug: 54485 Change-Id: I81d8d0c9f6705aef8bdb8a28e1154f2de4301235 --- diff --git a/.gitignore b/.gitignore index 7d1a30930d..9c0c3b6d7c 100644 --- a/.gitignore +++ b/.gitignore @@ -41,7 +41,6 @@ sftp-config.json # Building & testing node_modules/ -.sass-cache/ # Composer /vendor diff --git a/resources/Resources.php b/resources/Resources.php index 463dec823a..44356285b7 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1162,8 +1162,8 @@ return array( ), 'mediawiki.ui' => array( 'skinStyles' => array( - 'default' => 'resources/mediawiki.ui/mediawiki.ui.default.css', - 'vector' => 'resources/mediawiki.ui/mediawiki.ui.vector.css', + 'default' => 'resources/mediawiki.ui/default.less', + 'vector' => 'resources/mediawiki.ui/vector.less', ), 'position' => 'top', ), diff --git a/resources/mediawiki.ui/components/default/buttons.less b/resources/mediawiki.ui/components/default/buttons.less new file mode 100644 index 0000000000..201f2f415d --- /dev/null +++ b/resources/mediawiki.ui/components/default/buttons.less @@ -0,0 +1,69 @@ +@import "../../settings/typography"; +@import "../../mixins/effects"; + +@buttonBorderRadius: 3px; + +// Button styling +.mw-ui-button { + // 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; + + // Container styling + .buttonColors(); + border-radius: @buttonBorderRadius; + + // Content styling + vertical-align: middle; + + text-align: center; + text-decoration: none; + + font-weight: bold; + + // Interaction styling + cursor: pointer; + + &: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%; + } +} + +// 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; +} + +// Button groups +.mw-ui-button-group > * { + border-radius: 0; + float: left; + + &:first-child{ + border-top-left-radius: @buttonBorderRadius; + border-bottom-left-radius: @buttonBorderRadius; + } + + &:last-child{ + border-top-right-radius: @buttonBorderRadius; + border-bottom-right-radius: @buttonBorderRadius; + } +} diff --git a/resources/mediawiki.ui/components/default/forms.less b/resources/mediawiki.ui/components/default/forms.less new file mode 100644 index 0000000000..28b50d2e3a --- /dev/null +++ b/resources/mediawiki.ui/components/default/forms.less @@ -0,0 +1,115 @@ +// Form elements and layouts + +@import "../../mixins/utilities"; +@import "../../mixins/forms"; + +// -------------------------------------------------------------------------- +// Layouts +// -------------------------------------------------------------------------- + +// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the +// 'VForm' design, the form can't be narrower than this. +@captchaContainerWidth: 290px; +@defaultFormWidth: @captchaContainerWidth; + +// 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; + } +} + +// -------------------------------------------------------------------------- +// Elements +// -------------------------------------------------------------------------- + +// Apply this to individual elements to style them. +// You generally don't need to use this class on divs within an Agora +// form container such as mw-ui-vform +// XXX DRY: This repeats earlier styling, use an @include agora-div-styling ? +.mw-ui-vform-div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} + +// Apply mw-ui-input to individual input fields to style them. +// You generally don't need to use this class if is within an Agora +// form container such as mw-ui-vform +.mw-ui-input { + .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