From 4ac9fa081a7c045f6a9f1cfc529d82423f485b2e Mon Sep 17 00:00:00 2001 From: Pierre Schmitz Date: Sun, 8 Dec 2013 09:55:49 +0100 Subject: Update to MediaWiki 1.22.0 --- .../scss/components/default/_forms.scss | 114 +++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss (limited to 'resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss') diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss new file mode 100644 index 00000000..a9cec39a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss @@ -0,0 +1,114 @@ +// Form elements and layouts + +// -------------------------------------------------------------------------- +// 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 { + @include 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; + @include 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]), { + @include agora-field-styling; // mixins/_forms.scss + } + + label { + display: block; + @include box-sizing(border-box); + @include 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; + @include 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 { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + 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 { + @include agora-field-styling; // mixins/_forms.scss +} + +// Apply mw-ui-label to individual elements to style them. +// You generally don't need to use this class if