MediaWiki 1.30.2

[autoinstallsdev/mediawiki.git] / resources / src / mediawiki.ui / components / forms.less

diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less
new file mode 100644 (file)
index 0000000..d3c76d0
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -0,0 +1,173 @@
+// Form elements and layouts
+
+@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
+@import 'mediawiki.ui/mixins';
+
+// --------------------------------------------------------------------------
+// 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;
+
+// Forms
+//
+// Styleguide 5.
+
+// VForm
+//
+// Style a compact vertical stacked form ("VForm") and the elements in divs
+// within it. See button and inputs section on guidance of how and when to use them.
+//
+// Markup:
+// <form class="mw-ui-vform">
+//   <div class="mw-ui-vform-field">This is a form example.</div>
+//   <div class="mw-ui-vform-field">
+//     <label>Username </label>
+//     <input class="mw-ui-input" value="input">
+//   </div>
+//   <div class="mw-ui-vform-field">
+//     <button class="mw-ui-button mw-ui-progressive">Button in vform</button>
+//   </div>
+// </form>
+//
+// Styleguide 5.1.
+.mw-ui-vform {
+       .box-sizing( border-box );
+
+       width: @defaultFormWidth;
+
+       // MW currently doesn't use the type attribute everywhere on inputs.
+       select,
+       .mw-ui-button {
+               display: block;
+               .box-sizing( border-box );
+               margin: 0;
+               width: 100%;
+       }
+
+       // 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;
+               vertical-align: middle;
+       }
+
+       > label {
+               display: block;
+               .box-sizing( border-box );
+               .agora-label-styling();
+               width: auto;
+               margin: 0 0 0.2em;
+               padding: 0;
+       }
+
+       // Override input styling just for checkboxes and radio inputs.
+       input[type='radio'] {
+               display: inline;
+               .box-sizing( content-box );
+               width: auto;
+       }
+
+       // Styles for information boxes
+       //
+       // Regular HTMLForm uses .error class, some special pages like
+       // SpecialUserlogin (login and create account) use .errorbox.
+       //
+       // Markup:
+       // <form class="mw-ui-vform">
+       //   <div class="errorbox">An error occurred</div>
+       //   <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 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 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 5.2.
+       .error,
+       .warning,
+       .errorbox,
+       .warningbox,
+       .successbox {
+               .box-sizing( border-box );
+               font-size: 0.9em;
+               margin: 0 0 1em 0;
+               padding: 0.5em;
+               word-wrap: break-word;
+       }
+
+       // Colours taken from those for .errorbox in shared.css
+       .error {
+               color: @colorErrorText;
+               border: 1px solid #fac5c5;
+               background-color: #fae3e3;
+       }
+
+       // Colours taken from those for .warningbox in shared.css
+       .warning {
+               color: @colorWarningText;
+               border: 1px solid #fde29b;
+               background-color: #fdf1d1;
+       }
+
+       // 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-field .error {
+               display: block;
+               margin-top: 5px;
+       }
+
+}
+
+// --------------------------------------------------------------------------
+// Elements
+// --------------------------------------------------------------------------
+
+// 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-field {
+       display: block;
+       margin: 0 0 15px;
+       padding: 0;
+       width: 100%;
+}
+
+// Apply mw-ui-label to individual elements to style them.
+// You generally don't need to use this class if <label> is within an Agora
+// form container such as mw-ui-vform
+.mw-ui-label {
+       .agora-label-styling();
+}
+
+// Nesting an input  inside a label with this class
+// improves alignment, e.g.
+//
+// <label class="mw-ui-radio-label">
+//   <input type="radio">The label text
+// </label>
+.mw-ui-radio-label {
+       .agora-inline-label-styling();
+}