Localisation updates from https://translatewiki.net.

[lhc/web/wiklou.git] / resources / src / mediawiki.ui / components / default / forms.less

diff --git a/resources/src/mediawiki.ui/components/default/forms.less b/resources/src/mediawiki.ui/components/default/forms.less
index 2b9b3cb..1a84afd 100644 (file)
--- a/resources/src/mediawiki.ui/components/default/forms.less
+++ b/resources/src/mediawiki.ui/components/default/forms.less
@@ -1,8 +1,8 @@
 // Form elements and layouts
 
 @import "mediawiki.mixins";
-@import "../../mixins/utilities";
-@import "../../mixins/forms";
+@import "mediawiki.ui/mixins/utilities";
+@import "mediawiki.ui/mixins/forms";
 
 // --------------------------------------------------------------------------
 // Layouts
@@ -24,12 +24,12 @@
 //
 // Markup:
 // <form class="mw-ui-vform">
-//   <div class="mw-ui-vform-div">This is a form example.</div>
-//   <div>
+//   <div class="mw-ui-vform-field">This is a form example.</div>
+//   <div class="mw-ui-vform-field">
 //     <label>Username </label>
 //     <input value="input">
 //   </div>
-//   <div>
+//   <div class="mw-ui-vform-field">
 //     <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
 //   </div>
 // </form>
@@ -40,17 +40,9 @@
 
        width: @defaultFormWidth;
 
-       // Immediate divs in a vform are block and spaced-out.
-       // XXX: We shouldn't depend on the tag name here...
-       & > div {
-               display: block;
-               margin: 0 0 15px 0;
-               padding: 0;
-               width: 100%;
-       }
-
        // MW currently doesn't use the type attribute everywhere on inputs.
        input,
+       select,
        .mw-ui-button {
                display: block;
                .box-sizing(border-box);
@@ -58,12 +50,19 @@
                width: 100%;
        }
 
-       // We exclude these because they'll generally use mw-ui-button.
+       // We exclude buttons because they'll generally use mw-ui-button.
        // Otherwise, we'll unintentionally override that.
-       input:not([type=button]):not([type=submit]):not([type=file]), {
+       input:not([type=button]):not([type=submit]):not([type=file]) {
                .agora-field-styling(); // mixins/forms.less
        }
 
+       // 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;
+               vertical-align: middle;
+       }
+
        label {
                display: block;
                .box-sizing(border-box);
@@ -93,35 +92,51 @@
        //   <div class="warningbox">A warning to be noted</div>
        //   <div class="successbox">Action successful!</div>
        //   <div class="error">A different kind of error</div>
-       //   <div>
+       //   <div class="error">
+       //     <ul><li>There are problems with some of your input.</li></ul>
+       //   </div>
+       //   <div class="mw-ui-vform-field">
        //     <input type="text" value="input" class="mw-ui-input">
-       //   <div>
        //   </div>
+       //   <div class="mw-ui-vform-field">
+       //     <select>
+       //       <option value="1">Option 1</option>
+       //       <option value="2">Option 2</option>
+       //     </select>
+       //     <span class="error">The value you specified is not a valid option.</span>
+       //   </div>
+       //   <div class="mw-ui-vform-field">
        //     <button class="mw-ui-button">Button in vform</button>
        //   </div>
        // </form>
        //
        // Styleguide 3.1.
-       .error {
+       .error,
+       .errorbox,
+       .warningbox,
+       .successbox {
                .box-sizing(border-box);
                font-size: 0.9em;
-               margin: 0 0 1em;
+               margin: 0 0 1em 0;
                padding: 0.5em;
+               word-wrap: break-word;
+       }
+
+       // Colours taken from those for .errorbox in skins/common/shared.css
+       .error {
                color: #cc0000;
                border: 1px solid #fac5c5;
                background-color: #fae3e3;
                text-shadow: 0 1px #fae3e3;
-               word-wrap: break-word;
        }
 
-       .errorbox,
-       .warningbox,
-       .successbox {
-               .box-sizing(border-box);
-               font-size: 0.9em;
-               margin: 0 0 1em 0;
-               padding: 0.5em;
-               word-wrap: break-word;
+       // This specifies styling for individual field validation error messages.
+       // Show them below the fields to prevent line break glitches, and leave
+       // some space between the field and the error message box.
+       .mw-ui-vform-div .error, /* for backwards-compatibility, remove before 1.24 */
+       .mw-ui-vform-field .error {
+               display: block;
+               margin-top: 5px;
        }
 
 }
@@ -130,12 +145,14 @@
 // 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 ?
-// XXX: What is this even for?
-.mw-ui-vform-div {
+// A wrapper for a single form field: the <input> / <select> / <button> element,
+// help text, labels, associated error/warning/success messages, and so on.
+// Elements with this class are generated by HTMLFormField in core MediaWiki.
+//
+// (We use a broad definition of 'field' here: a purely textual information
+// block is also a "field".)
+.mw-ui-vform-div, /* for backwards-compatibility, remove before 1.24 */
+.mw-ui-vform-field {
        display: block;
        margin: 0 0 15px;
        padding: 0;