From c1f9b1f7b1b77776192048005dcc66dcf3df2bfb Mon Sep 17 00:00:00 2001 From: Pierre Schmitz Date: Sat, 27 Dec 2014 15:41:37 +0100 Subject: Update to MediaWiki 1.24.1 --- resources/src/mediawiki.ui/components/anchors.less | 77 ++++++ resources/src/mediawiki.ui/components/buttons.less | 276 +++++++++++++++++++++ .../src/mediawiki.ui/components/checkbox.less | 100 ++++++++ resources/src/mediawiki.ui/components/forms.less | 166 +++++++++++++ .../src/mediawiki.ui/components/images/checked.png | Bin 0 -> 327 bytes .../src/mediawiki.ui/components/images/checked.svg | 1 + resources/src/mediawiki.ui/components/inputs.less | 126 ++++++++++ .../src/mediawiki.ui/components/utilities.less | 47 ++++ resources/src/mediawiki.ui/default.less | 5 + resources/src/mediawiki.ui/styleguide.md | 11 + 10 files changed, 809 insertions(+) create mode 100644 resources/src/mediawiki.ui/components/anchors.less create mode 100644 resources/src/mediawiki.ui/components/buttons.less create mode 100644 resources/src/mediawiki.ui/components/checkbox.less create mode 100644 resources/src/mediawiki.ui/components/forms.less create mode 100644 resources/src/mediawiki.ui/components/images/checked.png create mode 100644 resources/src/mediawiki.ui/components/images/checked.svg create mode 100644 resources/src/mediawiki.ui/components/inputs.less create mode 100644 resources/src/mediawiki.ui/components/utilities.less create mode 100644 resources/src/mediawiki.ui/default.less create mode 100644 resources/src/mediawiki.ui/styleguide.md (limited to 'resources/src/mediawiki.ui') 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: +Progressive +Constructive +Destructive + +.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: +//
+// +//
+//
+// +//
+// +// 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: + //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ // + // Styleguide 2.1.6. + &.mw-ui-big { + font-size: 1.3em; + } + + // Block buttons + // + // Some buttons might need to be stacked. + // + // Markup: + //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ // + // 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: + //
+ // + //
+ //
+ // + //
+ // + // 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: + //
+ // + //
+ //
+ // + //
+ // + // 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: + //
+ // + //
+ //
+ // + //
+ // + // 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: + //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ //
+ // + //
+ // + // 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: +//
+//
A
+//
B
+//
C
+//
D
+//
+// +// 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: +//
+// +//
+//
+// +//
+// +// 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: +//
+//
This is a form example.
+//
+// +// +//
+//
+// +//
+//
+// +// 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: + //
+ //
An error occurred
+ //
A warning to be noted
+ //
Action successful!
+ //
A different kind of error
+ //
+ //
  • There are problems with some of your input.
+ //
+ //
+ // + //
+ //
+ // + // The value you specified is not a valid option. + //
+ //
+ // + //
+ //
+ // + // 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 / The label text +// +.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 new file mode 100644 index 00000000..ce4e6b9a Binary files /dev/null and b/resources/src/mediawiki.ui/components/images/checked.png differ 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 @@ + \ 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: +// +// +// +// 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: +// +// +// +// 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: +// +// +// +// 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: +//
+// +// +//
+.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: +//
+// +// +//
+.mw-ui-flush-right { + float: right; + padding-right: 0; + margin-right: 0; +} + +// Center block +// +// Centers the element in its containing element +// +// Markup: +//
+// +//
+.mw-ui-center-block { + display: block; + margin-left: auto; + margin-right: auto; +} diff --git a/resources/src/mediawiki.ui/default.less b/resources/src/mediawiki.ui/default.less new file mode 100644 index 00000000..c9d62087 --- /dev/null +++ b/resources/src/mediawiki.ui/default.less @@ -0,0 +1,5 @@ +/** + * Provide Agora appearance for mw-ui-* classes. + */ +@import "components/forms"; +@import "components/utilities"; diff --git a/resources/src/mediawiki.ui/styleguide.md b/resources/src/mediawiki.ui/styleguide.md new file mode 100644 index 00000000..61691c79 --- /dev/null +++ b/resources/src/mediawiki.ui/styleguide.md @@ -0,0 +1,11 @@ +#mediawiki.ui + +This is the living style guide for mediawiki.ui. It is generated from the mediawiki.ui LESS source code programmatically. Please use it as a reference when developing code for MediaWiki to ensure your design is consistent with others across the site. Note this document is a work in progress and subject to change. + +##Design Philosophy + +###Inviting +Our aesthetics should be clean and encourage interaction. + +###Worldly +We are thoughtful and are aware of cultural differences. We are careful about words, color usage, and images that might offend. We are also aware of limited connectivity in some areas of the world and are thoughtful of image sizes and loading speed. We work to support accessibility. -- cgit v1.2.2