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/buttons.less | 276 +++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 resources/src/mediawiki.ui/components/buttons.less (limited to 'resources/src/mediawiki.ui/components/buttons.less') 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; + } +} -- cgit v1.2.3-54-g00ecf