/* MediaWiki UI */
'mediawiki.ui' => array(
- 'skinStyles' => array(
- 'default' => 'resources/src/mediawiki.ui/default.less',
- 'vector' => 'resources/src/mediawiki.ui/vector.less',
+ 'styles' => array(
+ 'resources/src/mediawiki.ui/default.less',
),
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),
// Lightweight module for button styles
'mediawiki.ui.button' => array(
- 'skinStyles' => array(
- 'default' => 'resources/src/mediawiki.ui/components/default/buttons.less',
- 'vector' => 'resources/src/mediawiki.ui/components/vector/buttons.less',
+ 'styles' => array(
+ 'resources/src/mediawiki.ui/components/buttons.less',
),
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
+++ /dev/null
-// FIXME: remove @colorProgressiveShadow (shadows should be generated
-// in LESS by dimming the original colors)
-@colorProgressiveShadow: #4091ed;
-
-// White; for background use, and text use on dark backgrounds
-@colorWhite: #fff;
-// Off-white; for background use on white backgrounds
-@colorOffWhite: #fafafa;
-// Dark gray; for non-text use
-@colorGrayDark: #898989;
-// Light gray; for non-text use
-@colorGrayLight: #ccc;
-// Very light gray; for non-text use
-@colorGrayLighter: #ddd;
-// Lightest gray; for non-text use
-@colorGrayLightest: #eee;
-
-// Dark gray; for body text
-@colorText: #252525;
-// Light gray; for less important body text and links
-@colorTextLight: #696969;
-
-// Blue; for contextual use of a continuing action
-@colorProgressive: #347bff;
-// Orange; for contextual use of returning to a past action
-@colorRegressive: #ff7e1e;
-// Green; for contextual use of a positive finalizing action
-@colorConstructive: #00af89;
-// Red; for contextual use of a negative finalizing action
-@colorDestructive: #d11d13;
-
-// Used in mixins to darken contextual colors by the same amount (eg. focus)
-@colorDarkenPercentage: 13.5%;
-// Used in mixins to lighten contextual colors by the same amount (eg. hover)
-@colorLightenPercentage: 13.5%;
\ No newline at end of file
-@import "mediawiki.ui/colors";
// ----------------------------------------------------------------------------
// Button styling
// ----------------------------------------------------------------------------
-@import "mediawiki.ui/colors";
-
// Font is not included.
// For Vector, that should be layered on top with vector-type
.agora-field-styling() {
+++ /dev/null
-@import "mediawiki.ui/typography";
-
-.vector-type() {
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
-}
+++ /dev/null
-.agora-flush-left() {
- float: left;
- margin-left: 0;
- padding-left: 0;
-}
-
-.agora-flush-right() {
- float: right;
- margin-right: 0;
- padding-right: 0;
-}
-
-.agora-center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
+++ /dev/null
-@baseFontSize: 1em;
-@baseLineHeight: 1.4 * @baseFontSize;
-@baseFontColor: @colorText;
-
-@smallFontSize: 0.75em;
--- /dev/null
+@baseFontSize: 1em;
+
+// FIXME: remove @colorProgressiveShadow (shadows should be generated
+// in LESS by dimming the original colors)
+@colorProgressiveShadow: #4091ed;
+
+// White; for background use, and text use on dark backgrounds
+@colorWhite: #fff;
+// Off-white; for background use on white backgrounds
+@colorOffWhite: #fafafa;
+// Dark gray; for non-text use
+@colorGrayDark: #898989;
+// Light gray; for non-text use
+@colorGrayLight: #ccc;
+// Very light gray; for non-text use
+@colorGrayLighter: #ddd;
+// Lightest gray; for non-text use
+@colorGrayLightest: #eee;
+
+// Dark gray; for body text
+@colorText: #252525;
+// Light gray; for less important body text and links
+@colorTextLight: #696969;
+
+// Blue; for contextual use of a continuing action
+@colorProgressive: #347bff;
+// Orange; for contextual use of returning to a past action
+@colorRegressive: #ff7e1e;
+// Green; for contextual use of a positive finalizing action
+@colorConstructive: #00af89;
+// Red; for contextual use of a negative finalizing action
+@colorDestructive: #d11d13;
+
+// Used in mixins to darken contextual colors by the same amount (eg. focus)
+@colorDarkenPercentage: 13.5%;
+// Used in mixins to lighten contextual colors by the same amount (eg. hover)
+@colorLightenPercentage: 13.5%;
\ No newline at end of file
--- /dev/null
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins/effects";
+
+// Buttons
+//
+// All buttons start with mw-ui-button class, modified by other classes.
+// It can be any element. Due to a lack of a CSS reset, the exact styling of
+// the button depends on what type of element is used.
+// There are two kinds of buttons, the default is a "Call to Action" with an obvious border
+// and there is a quiet kind without a border.
+//
+// Styleguide 2.
+
+@buttonBorderRadius: 3px;
+@transitionDuration: .1s;
+@transitionFunction: ease-in-out;
+
+// Neutral button styling
+//
+// Markup:
+// <button class="mw-ui-button">.mw-ui-button</button>
+// <button class="mw-ui-button" disabled>.mw-ui-button</button>
+//
+// Styleguide 2.1.
+.mw-ui-button {
+ // Container layout
+ display: inline-block;
+ padding: .5em 1em;
+ margin: 0;
+ .box-sizing(border-box);
+
+ // Disable weird iOS styling
+ -webkit-appearance: none;
+
+ // IE6/IE7 hack
+ // http://stackoverflow.com/a/5838575/365238
+ *display: inline;
+ zoom: 1;
+
+ // Container styling
+ .button-colors(@colorWhite);
+ border-radius: @buttonBorderRadius;
+
+ // Ensure that buttons and inputs are nicely aligned when they have differing heights
+ vertical-align: middle;
+
+ // Content styling
+ text-align: center;
+ font-weight: bold;
+
+ // Interaction styling
+ cursor: pointer;
+
+ &:disabled {
+ text-shadow: none;
+ cursor: default;
+ }
+
+ .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
+
+ // Styling for specific button types
+ // -----------------------------------------
+
+ // Big buttons
+ //
+ // Not all buttons are equal. You can emphasise certain actions over others
+ // using the mw-ui-big class.
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
+ //
+ // Styleguide 2.1.6.
+ &.mw-ui-big {
+ font-size: @baseFontSize * 1.3;
+ }
+
+ // Block buttons
+ //
+ // Some buttons might need to be stacked.
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
+ //
+ // Styleguide 2.1.5.
+ &.mw-ui-block {
+ display: block;
+ width: 100%;
+ }
+
+ // Progressive buttons
+ //
+ // Use progressive buttons for actions which lead to a next step in the process.
+ // .mw-ui-primary is deprecated, kept for compatibility.
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
+ //
+ // Styleguide 2.1.1.
+ &.mw-ui-progressive,
+ &.mw-ui-primary {
+ .button-colors(@colorProgressive);
+
+ &.mw-ui-quiet {
+ .button-colors-quiet(@colorProgressive);
+ }
+ }
+
+ // Constructive buttons
+ //
+ // Use constructive buttons for actions which result in a final action in the process that results
+ // in a change of state.
+ // e.g. save changes button
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
+ //
+ // Styleguide 2.1.2.
+ &.mw-ui-constructive {
+ .button-colors(@colorConstructive);
+
+ &.mw-ui-quiet {
+ .button-colors-quiet(@colorConstructive);
+ }
+ }
+
+ // Destructive buttons
+ //
+ // Use destructive buttons for actions which result in the destruction of data.
+ // e.g. deleting a page.
+ // This should not be used for cancel buttons.
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
+ //
+ // Styleguide 2.1.3.
+ &.mw-ui-destructive {
+ .button-colors(@colorDestructive);
+
+ &.mw-ui-quiet {
+ .button-colors-quiet(@colorDestructive);
+ }
+ }
+
+ // Quiet buttons
+ //
+ // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
+ //
+ // Markup:
+ // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
+ //
+ // Styleguide 2.1.4.
+ &.mw-ui-quiet {
+ background: transparent;
+ border: none;
+ text-shadow: none;
+ .button-colors-quiet(@colorGrayDark);
+
+ &:hover,
+ &:focus {
+ box-shadow: none;
+ }
+
+ &:active,
+ &:disabled {
+ background: transparent;
+ }
+ }
+}
+
+a.mw-ui-button {
+ text-decoration: none;
+
+ // This overrides an underline declaration on a:hover and a:focus in
+ // commonElements.css, which the class alone isn't specific enough to do.
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+}
+
+// Button groups
+//
+// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
+//
+// Markup:
+// <div class="mw-ui-button-group">
+// <div class="mw-ui-button">A</div>
+// <div class="mw-ui-button">B</div>
+// <div class="mw-ui-button">C</div>
+// <div class="mw-ui-button">D</div>
+// </div><div style="clear:both"></div>
+//
+// Styleguide 2.2.
+.mw-ui-button-group > * {
+ border-radius: 0;
+ float: left;
+
+ &:first-child {
+ border-top-left-radius: @buttonBorderRadius;
+ border-bottom-left-radius: @buttonBorderRadius;
+ }
+
+ &:not(:first-child) {
+ border-left: none;
+ }
+
+ &:last-child{
+ border-top-right-radius: @buttonBorderRadius;
+ border-bottom-right-radius: @buttonBorderRadius;
+ }
+}
+++ /dev/null
-@import "mediawiki.mixins";
-@import "mediawiki.ui/typography";
-@import "mediawiki.ui/mixins/effects";
-@import "mediawiki.ui/mixins/utilities";
-
-// Buttons
-//
-// All buttons start with mw-ui-button class, modified by other classes.
-// It can be any element. Due to a lack of a CSS reset, the exact styling of
-// the button depends on what type of element is used.
-// There are two kinds of buttons, the default is a "Call to Action" with an obvious border
-// and there is a quiet kind without a border.
-//
-// Styleguide 2.
-
-@buttonBorderRadius: 3px;
-@transitionDuration: .1s;
-@transitionFunction: ease-in-out;
-
-// Neutral button styling
-//
-// Markup:
-// <button class="mw-ui-button">.mw-ui-button</button>
-// <button class="mw-ui-button" disabled>.mw-ui-button</button>
-//
-// Styleguide 2.1.
-.mw-ui-button {
- // Container layout
- display: inline-block;
- padding: .5em 1em;
- margin: 0;
- .box-sizing(border-box);
-
- // Disable weird iOS styling
- -webkit-appearance: none;
-
- // IE6/IE7 hack
- // http://stackoverflow.com/a/5838575/365238
- *display: inline;
- zoom: 1;
-
- // Container styling
- .button-colors(@colorWhite);
- border-radius: @buttonBorderRadius;
-
- // Ensure that buttons and inputs are nicely aligned when they have differing heights
- vertical-align: middle;
-
- // Content styling
- text-align: center;
- font-weight: bold;
-
- // Interaction styling
- cursor: pointer;
-
- &:disabled {
- text-shadow: none;
- cursor: default;
- }
-
- .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
-
- // Styling for specific button types
- // -----------------------------------------
-
- // Big buttons
- //
- // Not all buttons are equal. You can emphasise certain actions over others
- // using the mw-ui-big class.
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
- //
- // Styleguide 2.1.6.
- &.mw-ui-big {
- font-size: @baseFontSize * 1.3;
- }
-
- // Block buttons
- //
- // Some buttons might need to be stacked.
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
- //
- // Styleguide 2.1.5.
- &.mw-ui-block {
- display: block;
- width: 100%;
- }
-
- // Progressive buttons
- //
- // Use progressive buttons for actions which lead to a next step in the process.
- // .mw-ui-primary is deprecated, kept for compatibility.
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
- //
- // Styleguide 2.1.1.
- &.mw-ui-progressive,
- &.mw-ui-primary {
- .button-colors(@colorProgressive);
-
- &.mw-ui-quiet {
- .button-colors-quiet(@colorProgressive);
- }
- }
-
- // Constructive buttons
- //
- // Use constructive buttons for actions which result in a final action in the process that results
- // in a change of state.
- // e.g. save changes button
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
- //
- // Styleguide 2.1.2.
- &.mw-ui-constructive {
- .button-colors(@colorConstructive);
-
- &.mw-ui-quiet {
- .button-colors-quiet(@colorConstructive);
- }
- }
-
- // Destructive buttons
- //
- // Use destructive buttons for actions which result in the destruction of data.
- // e.g. deleting a page.
- // This should not be used for cancel buttons.
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
- //
- // Styleguide 2.1.3.
- &.mw-ui-destructive {
- .button-colors(@colorDestructive);
-
- &.mw-ui-quiet {
- .button-colors-quiet(@colorDestructive);
- }
- }
-
- // Quiet buttons
- //
- // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
- //
- // Markup:
- // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
- //
- // Styleguide 2.1.4.
- &.mw-ui-quiet {
- background: transparent;
- border: none;
- text-shadow: none;
- .button-colors-quiet(@colorGrayDark);
-
- &:hover,
- &:focus {
- box-shadow: none;
- }
-
- &:active,
- &:disabled {
- background: transparent;
- }
- }
-}
-
-a.mw-ui-button {
- text-decoration: none;
-
- // This overrides an underline declaration on a:hover and a:focus in
- // commonElements.css, which the class alone isn't specific enough to do.
- &:hover,
- &:focus {
- text-decoration: none;
- }
-}
-
-// Button groups
-//
-// Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
-//
-// Markup:
-// <div class="mw-ui-button-group">
-// <div class="mw-ui-button">A</div>
-// <div class="mw-ui-button">B</div>
-// <div class="mw-ui-button">C</div>
-// <div class="mw-ui-button">D</div>
-// </div><div style="clear:both"></div>
-//
-// Styleguide 2.2.
-.mw-ui-button-group > * {
- border-radius: 0;
- float: left;
-
- &:first-child {
- border-top-left-radius: @buttonBorderRadius;
- border-bottom-left-radius: @buttonBorderRadius;
- }
-
- &:not(:first-child) {
- border-left: none;
- }
-
- &:last-child{
- border-top-right-radius: @buttonBorderRadius;
- border-bottom-right-radius: @buttonBorderRadius;
- }
-}
+++ /dev/null
-// Form elements and layouts
-
-@import "mediawiki.mixins";
-@import "mediawiki.ui/mixins/utilities";
-@import "mediawiki.ui/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;
-
-// Forms
-//
-// Styleguide 3.
-
-// VForm
-//
-// Style a compact vertical stacked form ("VForm") and the elements in divs
-// within it. See button section on guidance of how and when to use mw-ui-constructive.
-//
-// 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 value="input">
-// </div>
-// <div class="mw-ui-vform-field">
-// <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
-// </div>
-// </form>
-//
-// Styleguide 3.1.
-.mw-ui-vform {
- .box-sizing(border-box);
-
- width: @defaultFormWidth;
-
- // MW currently doesn't use the type attribute everywhere on inputs.
- input,
- select,
- .mw-ui-button {
- display: block;
- .box-sizing(border-box);
- margin: 0;
- width: 100%;
- }
-
- // 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]) {
- .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);
- .agora-label-styling();
- width: auto;
- margin: 0 0 0.2em;
- 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;
- }
-
-
- // 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 3.1.
- .error,
- .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 skins/common/shared.css
- .error {
- color: #cc0000;
- border: 1px solid #fac5c5;
- background-color: #fae3e3;
- text-shadow: 0 1px #fae3e3;
- }
-
- // 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;
- }
-
-}
-
-// --------------------------------------------------------------------------
-// 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-div, /* for backwards-compatibility, remove before 1.24 */
-.mw-ui-vform-field {
- display: block;
- margin: 0 0 15px;
- 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 <input> 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 <label> is within an Agora
-// form container such as mw-ui-vform
-.mw-ui-label {
- .agora-label-styling(); // mixins/forms.less
-}
-
-// Nesting an input checkbox or radio button inside a label with this class
-// improves alignment, e.g.
-// <label class="mw-ui-checkbox-label">
-// <input type="checkbox">The label text
-// </label>
-.mw-ui-checkbox-label, .mw-ui-radio-label {
- .agora-inline-label-styling();
-}
--- /dev/null
+// Form elements and layouts
+
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/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;
+
+// Forms
+//
+// Styleguide 3.
+
+// VForm
+//
+// Style a compact vertical stacked form ("VForm") and the elements in divs
+// within it. See button section on guidance of how and when to use mw-ui-constructive.
+//
+// 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 value="input">
+// </div>
+// <div class="mw-ui-vform-field">
+// <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
+// </div>
+// </form>
+//
+// Styleguide 3.1.
+.mw-ui-vform {
+ .box-sizing(border-box);
+
+ width: @defaultFormWidth;
+
+ // MW currently doesn't use the type attribute everywhere on inputs.
+ input,
+ select,
+ .mw-ui-button {
+ display: block;
+ .box-sizing(border-box);
+ margin: 0;
+ width: 100%;
+ }
+
+ // 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]) {
+ .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);
+ .agora-label-styling();
+ width: auto;
+ margin: 0 0 0.2em;
+ 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;
+ }
+
+
+ // 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 3.1.
+ .error,
+ .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 skins/common/shared.css
+ .error {
+ color: #cc0000;
+ border: 1px solid #fac5c5;
+ background-color: #fae3e3;
+ text-shadow: 0 1px #fae3e3;
+ }
+
+ // 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;
+ }
+
+}
+
+// --------------------------------------------------------------------------
+// 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-div, /* for backwards-compatibility, remove before 1.24 */
+.mw-ui-vform-field {
+ display: block;
+ margin: 0 0 15px;
+ padding: 0;
+ width: 100%;
+
+ input {
+ font-size: 1em;
+ line-height: 1.4;
+ }
+}
+
+// Apply mw-ui-input to individual input fields to style them.
+// You generally don't need to use this class if <input> is within an Agora
+// form container such as mw-ui-vform
+.mw-ui-input {
+ .agora-field-styling(); // mixins/forms.less
+ font-size: 1em;
+ line-height: 1.4em;
+}
+
+// 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(); // mixins/forms.less
+}
+
+// Nesting an input checkbox or radio button inside a label with this class
+// improves alignment, e.g.
+// <label class="mw-ui-checkbox-label">
+// <input type="checkbox">The label text
+// </label>
+.mw-ui-checkbox-label, .mw-ui-radio-label {
+ .agora-inline-label-styling();
+}
-// Generic helper classes that could be used in many elements/layouts
-
-// --------------------------------------------------------------------------
-// Positioning
-// --------------------------------------------------------------------------
-
-@import "mediawiki.ui/mixins/utilities";
+// Utilities
+//
+// Other things which effect the behaviour of components
+//
+// Styleguide 4.
+// Flush left
+//
+// Used when you want to push an element to the left of its containing element
+//
+// Markup:
+// <div class="mw-ui-vform-field">
+// <label>Username <a href="#" class="mw-ui-flush-left">?</a></label>
+// <input>
+// </div>
+//
+// Styleguide 4.1.
.mw-ui-flush-left {
- .agora-flush-left();
+ float: left;
+ margin-left: 0;
+ padding-left: 0;
}
+// Flush right
+//
+// Used when you want to push an element to the right of its containing element
+//
+// Markup:
+// <div class="mw-ui-vform-field">
+// <label>Username <a href="#" class="mw-ui-flush-right">?</a></label>
+// <input>
+// </div>
+//
+// Styleguide 4.2.
.mw-ui-flush-right {
- .agora-flush-right();
+ float: right;
+ padding-right: 0;
+ margin-right: 0;
}
+// Center block
+//
+// Centers the element in its containing element
+//
+// Markup:
+// <div>
+// <button class="mw-ui-center-block">click me</button>
+// </div>
+//
+// Styleguide 4.3.
.mw-ui-center-block {
- .agora-center-block();
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
}
+++ /dev/null
-@import "../default/buttons"; // Layer Vector on top of the default settings.
-@import "mediawiki.ui/mixins/type";
-
-.mw-ui-button {
- .vector-type();
-}
+++ /dev/null
-// No default settings for containers yet.
-@import "mediawiki.ui/mixins/type";
-
-.mw-ui-container {
- .vector-type();
-}
+++ /dev/null
-@import "../default/forms"; // Layer Vector on top of the default settings.
-@import "mediawiki.ui/mixins/type";
-
-.mw-ui-vform,
-.mw-ui-vform input,
-.mw-ui-input {
- .vector-type();
-}
* Vector.
*/
+@import "components/forms";
@import "components/utilities";
-@import "components/default/forms";
+++ /dev/null
-/**
- * Provide Agora appearance for mw-ui-* classes when using the Vector skin.
- */
-
-// Typography
-//
-// We prefer the usage of Georgia Bold for all headings. Georgia Regular is used to place emphasis on pull-out or short quotations. This latter usage should be used sparingly.
-//
-// We prefer the use of Helvetica Neue Regular for body copy. Helvetiva Neue Bold for sub-headers. Pull-out quotes within the body copy should use Helvetica Neue Bold. Helvetica Neue is an not open-source font. Hence, below is a list of preferred alternate choices.
-//
-// Second choice: Helvetica
-//
-// Third choice: Arial
-//
-// Wiki content is often predominantly text; hence, visual hierarchy must be clear. Use these recommended type sizes to inform and establish information hierarchy and organization.
-//
-// Unless if you plan to put extra attention and manually adjust spacing, avoid justifying texts and paragraphs as they are harder to read and create unnecessary visual distractions. Along with centered text, they convey a formal and less friendly environment.
-//
-// It will be important to talk about other languages, scripts and writing direction - with the same level as importance, not as an afterthought.
-//
-// Styleguide 1.
-
-@import "mediawiki.mixins";
-@import "components/utilities";
-@import "components/vector/forms";
-@import "components/vector/containers";
dépôts / lhc / web / wiklou.git / commitdiff