summaryrefslogtreecommitdiff
path: root/resources/src/mediawiki.ui/components/buttons.less
diff options
context:
space:
mode:
Diffstat (limited to 'resources/src/mediawiki.ui/components/buttons.less')
-rw-r--r--resources/src/mediawiki.ui/components/buttons.less276
1 files changed, 276 insertions, 0 deletions
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;
+ }
+}