From f6d65e533c62f6deb21342d4901ece24497b433e Mon Sep 17 00:00:00 2001 From: Pierre Schmitz Date: Thu, 4 Jun 2015 07:31:04 +0200 Subject: Update to MediaWiki 1.25.1 --- resources/src/mediawiki.ui/components/anchors.less | 89 +++++++-------- resources/src/mediawiki.ui/components/buttons.less | 11 +- .../src/mediawiki.ui/components/checkbox.less | 120 +++++++++++++-------- resources/src/mediawiki.ui/components/forms.less | 15 +-- resources/src/mediawiki.ui/components/icons.less | 107 ++++++++++++++++++ .../src/mediawiki.ui/components/images/checked.svg | 2 +- .../components/images/checked_disabled.png | Bin 0 -> 333 bytes .../components/images/checked_disabled.svg | 1 + .../src/mediawiki.ui/components/images/ok.png | Bin 0 -> 442 bytes .../src/mediawiki.ui/components/images/ok.svg | 1 + .../components/images/radio_checked.png | Bin 0 -> 286 bytes .../components/images/radio_checked.svg | 1 + .../components/images/radio_disabled.png | Bin 0 -> 251 bytes .../components/images/radio_disabled.svg | 1 + resources/src/mediawiki.ui/components/inputs.less | 20 ++-- resources/src/mediawiki.ui/components/radio.less | 116 ++++++++++++++++++++ resources/src/mediawiki.ui/components/text.less | 40 +++++++ 17 files changed, 414 insertions(+), 110 deletions(-) create mode 100644 resources/src/mediawiki.ui/components/icons.less create mode 100644 resources/src/mediawiki.ui/components/images/checked_disabled.png create mode 100644 resources/src/mediawiki.ui/components/images/checked_disabled.svg create mode 100644 resources/src/mediawiki.ui/components/images/ok.png create mode 100644 resources/src/mediawiki.ui/components/images/ok.svg create mode 100644 resources/src/mediawiki.ui/components/images/radio_checked.png create mode 100644 resources/src/mediawiki.ui/components/images/radio_checked.svg create mode 100644 resources/src/mediawiki.ui/components/images/radio_disabled.png create mode 100644 resources/src/mediawiki.ui/components/images/radio_disabled.svg create mode 100644 resources/src/mediawiki.ui/components/radio.less create mode 100644 resources/src/mediawiki.ui/components/text.less (limited to 'resources/src/mediawiki.ui/components') diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less index e1b258dd..f0fb7b95 100644 --- a/resources/src/mediawiki.ui/components/anchors.less +++ b/resources/src/mediawiki.ui/components/anchors.less @@ -3,13 +3,8 @@ @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; - } - } +.mixin-mw-ui-anchor-styles( @mainColor ) { + color: @mainColor; // Hover state &:hover { @@ -21,57 +16,65 @@ outline: none; // outline fix } - color: @mainColor; - // Quiet mode is gray at first &.mw-ui-quiet { - .mw-ui-anchor-quiet( @mainColor ); + .mixin-mw-ui-anchor-styles-quiet( @mainColor ); } } -.mw-ui-anchor-quiet( @mainColor ) { - color: @colorTextLight; - text-decoration: none; +/* +Anchors - &:hover { - color: @mainColor; - } - &:focus, &:active { - color: darken( @mainColor, @colorDarkenPercentage ); - } -} +The anchor base type can be applied to A elements when a basic context styling needs to be given to a link, without +having to assign it as a button type. mw-ui-anchor only changes the text color, and should not be used in combination +with other base classes, such as mw-ui-button. -/* -Text & Anchors +Markup: +Progressive +Constructive +Destructive -Allows you to give text a context as to the type of action it is indicating. +.mw-ui-quiet - Quiet until interaction. -Styleguide 6. +Styleguide 6.2. */ +// Setup compound anchor selectors (such as .mw-ui-anchor.mw-ui-progressive) +.mw-ui-anchor { + &.mw-ui-progressive { + .mixin-mw-ui-anchor-styles( @colorProgressive ); + } + + &.mw-ui-constructive { + .mixin-mw-ui-anchor-styles( @colorConstructive ); + } + + &.mw-ui-destructive { + .mixin-mw-ui-anchor-styles( @colorDestructive ); + } +} + /* -Guidelines +Quiet anchors -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. +Use quiet anchors when they are less important and alongside other progressive/destructive/progressive +anchors. Use of quiet anchors is not recommended on mobile/tablet due to lack of hover state. Markup: -Progressive -Constructive -Destructive +Progressive +Constructive +Destructive -.mw-ui-quiet - Quiet until interaction. - -Styleguide 6.1. +Styleguide 6.2.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 ); +.mixin-mw-ui-anchor-styles-quiet( @mainColor ) { + color: @colorTextLight; + text-decoration: none; + + &:hover { + color: @mainColor; + } + &:focus, &:active { + color: darken( @mainColor, @colorDarkenPercentage ); + } } diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index f6a44fd4..f88f3ee6 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -17,6 +17,8 @@ // Neutral button styling // +// These are the main actions on the page/workflow. The page should have only one of progressive, constructive and desctructive buttons, the rest being quiet. +// // Markup: //
// @@ -47,7 +49,7 @@ // Container styling .button-colors(#FFF); border-radius: @borderRadius; - min-width: 80px; + min-width: 4em; // Ensure that buttons and inputs are nicely aligned when they have differing heights vertical-align: middle; @@ -165,8 +167,7 @@ // Destructive buttons // - // Use destructive buttons for actions which result in the destruction of data. - // e.g. deleting a page. + // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user. // This should not be used for cancel buttons. // // Markup: @@ -188,7 +189,8 @@ // Quiet buttons // - // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons. + // Use quiet buttons when they are less important and alongside other constructive, progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow. + // Its use is not recommended on mobile/tablet due to lack of hover state. // // Markup: //
@@ -257,6 +259,7 @@ a.mw-ui-button { // // Styleguide 2.2. .mw-ui-button-group > * { + min-width: 48px; border-radius: 0; float: left; diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less index e39646bc..4829f5f6 100644 --- a/resources/src/mediawiki.ui/components/checkbox.less +++ b/resources/src/mediawiki.ui/components/checkbox.less @@ -11,27 +11,42 @@ // // Markup: //
-// +// +// //
//
-// +// +// +//
+//
+// +// +//
+//
+// +// //
// -// Styleguide 5. +// Styleguide 3. .mw-ui-checkbox { display: inline-block; vertical-align: middle; } -@checkboxSize: 24px; +@checkboxSize: 2em; // We use the not selector to cancel out styling on IE 8 and below -.mw-ui-checkbox:not(#noop) { +// We also disable this styling on javascript disabled devices. This fixes the issue with +// Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other +// more capable browsers with unstyled checkboxes. +.client-js .mw-ui-checkbox:not(#noop) { // Position relatively so we can make use of absolute pseudo elements position: relative; - line-height: @checkboxSize; + display: table; * { + // reset font sizes (see bug 72727) + font: inherit; vertical-align: middle; } @@ -42,59 +57,70 @@ // ensure the invisible checkbox takes up the required width width: @checkboxSize; height: @checkboxSize; + // This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet) + max-width: none; + margin: 0; + margin-right: 0.4em; + display: table-cell; - // the pseudo before element of the label after the checkbox now looks like a checkbox & + label { - cursor: pointer; + display: table-cell; + } - &::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; - } + // the pseudo before element of the label after the checkbox now looks like a checkbox + & + label::before { + .transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) ); + content: ''; + cursor: pointer; + .box-sizing(border-box); + position: absolute; + left: 0; + border-radius: @borderRadius; + width: @checkboxSize; + height: @checkboxSize; + line-height: @checkboxSize; + background-color: #fff; + border: 1px solid @colorGray7; + // align the checkbox to middle of the text + top: 50%; + margin-top: -1em; + .background-image-svg('images/checked.svg', 'images/checked.png'); + .background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em ); + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + background-size: 0 0; } // 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; - } - } + &:checked + label::before { + background-size: 100% 100%; + } + + &:active + label::before { + background-color: @colorGray13; + border-color: @colorGray13; } - @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; - } - } + &:focus + label::before { + border-width: 2px; } - // disabled checked boxes have a gray background - &:disabled + label { + &:focus:hover + label::before, + &:hover + label::before { + border-bottom-width: 3px; + } + + // disabled checkboxes have a gray background + &:disabled + label::before { cursor: default; + background-color: @colorGray14; + border-color: @colorGray14; + } - &::before { - background-color: lightgrey; - } + // disabled and checked checkboxes have a white circle + &:disabled:checked + label::before { + .background-image-svg('images/checked_disabled.svg', 'images/checked_disabled.png'); } } } diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less index 592a3098..dc49e202 100644 --- a/resources/src/mediawiki.ui/components/forms.less +++ b/resources/src/mediawiki.ui/components/forms.less @@ -15,7 +15,7 @@ // Forms // -// Styleguide 3. +// Styleguide 5. // VForm // @@ -34,7 +34,7 @@ //
// // -// Styleguide 3.1. +// Styleguide 5.1. .mw-ui-vform { .box-sizing(border-box); @@ -102,7 +102,7 @@ //
// // - // Styleguide 3.2. + // Styleguide 5.2. .error, .errorbox, .warningbox, @@ -153,14 +153,15 @@ // You generally don't need to use this class if