diff options
Diffstat (limited to 'resources/src/mediawiki.ui/components')
| -rw-r--r-- | resources/src/mediawiki.ui/components/anchors.less | 77 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/buttons.less | 276 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/checkbox.less | 100 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/forms.less | 166 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/images/checked.png | bin | 0 -> 327 bytes | |||
| -rw-r--r-- | resources/src/mediawiki.ui/components/images/checked.svg | 1 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/inputs.less | 126 | ||||
| -rw-r--r-- | resources/src/mediawiki.ui/components/utilities.less | 47 |
8 files changed, 793 insertions, 0 deletions
diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less new file mode 100644 index 00000000..e1b258dd --- /dev/null +++ b/resources/src/mediawiki.ui/components/anchors.less @@ -0,0 +1,77 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; +@import "mediawiki.ui/mixins"; + +// Helpers +.mw-ui-anchor( @mainColor ) { + // Make all context classes take the main color in IE6 + .select-ie6-only& { + &:link, &:visited, &:hover, &:focus, &:active { + color: @mainColor; + } + } + + // Hover state + &:hover { + color: lighten( @mainColor, @colorLightenPercentage ); + } + // Focus and active states + &:focus, &:active { + color: darken( @mainColor, @colorDarkenPercentage ); + outline: none; // outline fix + } + + color: @mainColor; + + // Quiet mode is gray at first + &.mw-ui-quiet { + .mw-ui-anchor-quiet( @mainColor ); + } +} + +.mw-ui-anchor-quiet( @mainColor ) { + color: @colorTextLight; + text-decoration: none; + + &:hover { + color: @mainColor; + } + &:focus, &:active { + color: darken( @mainColor, @colorDarkenPercentage ); + } +} + +/* +Text & Anchors + +Allows you to give text a context as to the type of action it is indicating. + +Styleguide 6. +*/ + +/* +Guidelines + +This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context. + +Markup: +<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a> +<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a> +<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a> + +.mw-ui-quiet - Quiet until interaction. + +Styleguide 6.1. +*/ +.mw-ui-progressive { + .mw-ui-anchor( @colorProgressive ); +} +.mw-ui-constructive { + .mw-ui-anchor( @colorConstructive ); +} +.mw-ui-destructive { + .mw-ui-anchor( @colorDestructive ); +} +.mw-ui-quiet { + .mw-ui-anchor-quiet( @colorTextLight ); +} diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less new file mode 100644 index 00000000..f6a44fd4 --- /dev/null +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -0,0 +1,276 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; +@import "mediawiki.ui/mixins"; + +// 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. + +@transitionDuration: .1s; +@transitionFunction: ease-in-out; + +// Neutral button styling +// +// Markup: +// <div> +// <button class="mw-ui-button">.mw-ui-button</button> +// </div> +// <div> +// <button class="mw-ui-button" disabled>.mw-ui-button</button> +// </div> +// +// Styleguide 2.1. +.mw-ui-button { + // Inherit the font rather than apply user agent stylesheet (bug 70072) + font-family: inherit; + font-size: 1em; + // 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(#FFF); + border-radius: @borderRadius; + min-width: 80px; + + // 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: + // <div> + // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button> + // </div> + // + // Styleguide 2.1.6. + &.mw-ui-big { + font-size: 1.3em; + } + + // Block buttons + // + // Some buttons might need to be stacked. + // + // Markup: + // <div> + // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button> + // </div> + // + // 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: + // <div> + // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button> + // </div> + // + // 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: + // <div> + // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button> + // </div> + // + // 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: + // <div> + // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button> + // </div> + // + // 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: + // <div> + // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button> + // </div> + // <div> + // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button> + // </div> + // + // Styleguide 2.1.4. + &.mw-ui-quiet { + background: transparent; + border: none; + text-shadow: none; + .button-colors-quiet(@colorButtonText); + + &: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: @borderRadius; + border-bottom-left-radius: @borderRadius; + } + + &:not(:first-child) { + border-left: none; + } + + &:last-child{ + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; + } +} diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less new file mode 100644 index 00000000..e39646bc --- /dev/null +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -0,0 +1,100 @@ +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; + +// Checkbox +// +// Styling checkboxes in a way that works cross browser is a tricky problem to solve. +// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div. +// This renders in all browsers except IE6-8 which do not support the :checked selector; +// these are kept backwards-compatible using the :not(#noop) selector. +// You should give the checkbox and label matching "id" and "for" attributes, respectively. +// +// Markup: +// <div class="mw-ui-checkbox"> +// <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label> +// </div> +// <div class="mw-ui-checkbox"> +// <input type="checkbox" id="kss-example-5-2" disabled><label for="kss-example-5-2">Disabled checkbox</label> +// </div> +// +// Styleguide 5. +.mw-ui-checkbox { + display: inline-block; + vertical-align: middle; +} + +@checkboxSize: 24px; + +// We use the not selector to cancel out styling on IE 8 and below +.mw-ui-checkbox:not(#noop) { + // Position relatively so we can make use of absolute pseudo elements + position: relative; + line-height: @checkboxSize; + + * { + vertical-align: middle; + } + + input[type="checkbox"] { + // we hide the input element as instead we will style the label that follows + // we use opacity so that VoiceOver software can still identify it + opacity: 0; + // ensure the invisible checkbox takes up the required width + width: @checkboxSize; + height: @checkboxSize; + + // the pseudo before element of the label after the checkbox now looks like a checkbox + & + label { + cursor: pointer; + + &::before { + content: ''; + position: absolute; + left: 0; + display: inline-block; + border-radius: @borderRadius; + margin-right: 18px; + width: @checkboxSize; + height: @checkboxSize; + background-color: #fff; + border: 1px solid grey; + } + } + + // when the input is checked, style the label pseudo before element that followed as a checked checkbox + &:checked { + + label { + &::before { + .background-image-svg('images/checked.svg', 'images/checked.png'); + background-repeat: no-repeat; + background-position: center top; + } + } + } + + @focusBottomBorderSize: 3px; + &:active, + &:focus { + + label { + &::after { + content: ''; + position: absolute; + width: @checkboxSize; + height: @checkboxSize - @focusBottomBorderSize + 1; // offset by bottom border + // offset from the checkbox by 1px to account for left border + left: 1px; + border-bottom: solid @focusBottomBorderSize lightgrey; + } + } + } + + // disabled checked boxes have a gray background + &:disabled + label { + cursor: default; + + &::before { + background-color: lightgrey; + } + } + } +} diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less new file mode 100644 index 00000000..592a3098 --- /dev/null +++ b/resources/src/mediawiki.ui/components/forms.less @@ -0,0 +1,166 @@ +// 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 3. + +// 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-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. + 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 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 3.2. + .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 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-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(); // mixins/forms.less +} + +// 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(); +} diff --git a/resources/src/mediawiki.ui/components/images/checked.png b/resources/src/mediawiki.ui/components/images/checked.png Binary files differnew file mode 100644 index 00000000..ce4e6b9a --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/checked.png diff --git a/resources/src/mediawiki.ui/components/images/checked.svg b/resources/src/mediawiki.ui/components/images/checked.svg new file mode 100644 index 00000000..aea69db4 --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/checked.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 12l5 5 11-12" stroke="#00B78C" stroke-width="3" fill="none"/></svg>
\ No newline at end of file diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less new file mode 100644 index 00000000..1da42a45 --- /dev/null +++ b/resources/src/mediawiki.ui/components/inputs.less @@ -0,0 +1,126 @@ +// Inputs + +@import "mediawiki.mixins"; +@import "mediawiki.ui/variables"; +@import "mediawiki.ui/mixins"; + +// Placeholder text styling helper +.field-placeholder-styling() { + font-style: italic; + font-weight: normal; +} +// Inputs +// +// Apply the mw-ui-input class to input and textarea fields. +// +// Styleguide 1. + +// mw-ui-input +// +// Style an input using MediaWiki UI. +// Currently in draft status and subject to change. +// When focused a progressive highlight appears to the left of the field. +// +// Markup: +// <input class="mw-ui-input" placeholder="Enter your name"> +// <textarea class="mw-ui-input">Text here</textarea> +// +// Styleguide 1.1. +.mw-ui-input { + // turn off default input styling for input[type="search"] fields + -webkit-appearance: none; + border: 1px solid @colorFieldBorder; + .box-sizing(border-box); + width: 100%; + padding: .4em .3em .2em .6em; + display: block; + vertical-align: middle; + border-radius: @borderRadius; + // Override user agent stylesheet properties. Instead use parent element. + color: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + .transition(~"border linear .2s, box-shadow linear .2s"); + + // Placeholder text styling must be set individually for each browser @winter + &::-webkit-input-placeholder { // webkit + .field-placeholder-styling; + } + &::-moz-placeholder { // FF 4-18 + .field-placeholder-styling; + } + &:-moz-placeholder { // FF >= 19 + .field-placeholder-styling; + } + &:-ms-input-placeholder { // IE >= 10 + .field-placeholder-styling; + } + + // Remove red outline from inputs which have required field and invalid content. + // This is a Firefox only issue + // See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid + // This should be above :focus so focus behaviour takes preference + &:invalid { + box-shadow: none; + } + + &:focus { + box-shadow: inset .45em 0 0 @colorProgressive; + border-color: @colorGrayDark; + // Remove focus glow on input[type="search"] + outline: 0; + } +} + +textarea.mw-ui-input { + min-height: 8em; +} + +// mw-ui-input-inline +// +// Use mw-ui-input-inline with mw-ui-input in cases where you want a button to line up with the input. +// +// Markup: +// <input class="mw-ui-input mw-ui-input-inline"> +// <button class="mw-ui-button mw-ui-constructive">go</button> +// +// Styleguide 1.2. +input[type="number"], +.mw-ui-input-inline { + display: inline-block; + width: auto; +} + +// mw-ui-input-large +// +// Use mw-ui-input-large with mw-ui-input in cases where there are multiple inputs on a screen and you +// want to draw attention to one instance. For example, replying with a subject line and more text. +// Currently in draft status and subject to change. When used on an input field, the text is styled +// in a large font. When used alongside another mw-ui-input large they are pushed together to form one +// contiguous block. +// +// Markup: +// <input value="input" class="mw-ui-input mw-ui-input-large" value="input" placeholder="Enter subject"> +// <textarea class="mw-ui-input mw-ui-input-large" placeholder="Provide additional details"></textarea> +// +// Styleguide 1.3. +.mw-ui-input-large { + margin-top: 0; + margin-bottom: 0; + + // When two large inputs are together, we make them flush by hiding one of the borders + & + .mw-ui-input-large { + margin-top: -1px; + } + // When focusing, make the input relative to raise it above any attached inputs to unhide its borders + &:focus { + position: relative; + } +} + +input.mw-ui-input-large { + font-size: 1.75em; + font-weight: bold; + line-height: 1.25em; +} diff --git a/resources/src/mediawiki.ui/components/utilities.less b/resources/src/mediawiki.ui/components/utilities.less new file mode 100644 index 00000000..0bbb440f --- /dev/null +++ b/resources/src/mediawiki.ui/components/utilities.less @@ -0,0 +1,47 @@ +// Utilities +// +// Other things which effect the behaviour of components + +// 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> +.mw-ui-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> +.mw-ui-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> +.mw-ui-center-block { + display: block; + margin-left: auto; + margin-right: auto; +} |
