resources/src/mediawiki.ui/components/buttons.less

   1 @import "mediawiki.mixins";
   2 @import "mediawiki.ui/variables";
   3 @import "mediawiki.ui/mixins";
   4
   5 // Buttons
   6 //
   7 // All buttons start with mw-ui-button class, modified by other classes.
   8 // It can be any element.  Due to a lack of a CSS reset, the exact styling of
   9 // the button depends on what type of element is used.
  10 // There are two kinds of buttons, the default is a "Call to Action" with an obvious border
  11 // and there is a quiet kind without a border.
  12 //
  13 // Styleguide 2.
  14
  15 @transitionDuration: .1s;
  16 @transitionFunction: ease-in-out;
  17
  18 // Neutral button styling
  19 //
  20 // Markup:
  21 // <div>
  22 //   <button class="mw-ui-button">.mw-ui-button</button>
  23 // </div>
  24 // <div>
  25 //   <button class="mw-ui-button" disabled>.mw-ui-button</button>
  26 // </div>
  27 //
  28 // Styleguide 2.1.
  29 .mw-ui-button {
  30         // Inherit the font rather than apply user agent stylesheet (bug 70072)
  31         font-family: inherit;
  32         font-size: 1em;
  33         // Container layout
  34         display: inline-block;
  35         padding: .5em 1em;
  36         margin: 0;
  37         .box-sizing(border-box);
  38
  39         // Disable weird iOS styling
  40         -webkit-appearance: none;
  41
  42         // IE6/IE7 hack
  43         // http://stackoverflow.com/a/5838575/365238
  44         *display: inline;
  45         zoom: 1;
  46
  47         // Container styling
  48         .button-colors(#FFF);
  49         border-radius: @borderRadius;
  50         min-width: 4em;
  51
  52         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  53         vertical-align: middle;
  54
  55         // Content styling
  56         text-align: center;
  57         font-weight: bold;
  58
  59         // Interaction styling
  60         cursor: pointer;
  61
  62         &:disabled {
  63                 text-shadow: none;
  64                 cursor: default;
  65         }
  66
  67         .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
  68
  69         // Styling for specific button types
  70         // -----------------------------------------
  71
  72         // Big buttons
  73         //
  74         // Not all buttons are equal. You can emphasise certain actions over others
  75         // using the mw-ui-big class.
  76         //
  77         // Markup:
  78         // <div>
  79         //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
  80         // </div>
  81         // <div>
  82         //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
  83         // </div>
  84         // <div>
  85         //   <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
  86         // </div>
  87         // <div>
  88         //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
  89         // </div>
  90         //
  91         // Styleguide 2.1.6.
  92         &.mw-ui-big {
  93                 font-size: 1.3em;
  94         }
  95
  96         // Block buttons
  97         //
  98         // Some buttons might need to be stacked.
  99         //
 100         // Markup:
 101         // <div>
 102         //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
 103         // </div>
 104         // <div>
 105         //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
 106         // </div>
 107         // <div>
 108         //   <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
 109         // </div>
 110         // <div>
 111         //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
 112         // </div>
 113         //
 114         // Styleguide 2.1.5.
 115         &.mw-ui-block {
 116                 display: block;
 117                 width: 100%;
 118         }
 119
 120         // Progressive buttons
 121         //
 122         // Use progressive buttons for actions which lead to a next step in the process.
 123         // .mw-ui-primary is deprecated, kept for compatibility.
 124         //
 125         // Markup:
 126         // <div>
 127         //   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
 128         // </div>
 129         // <div>
 130         //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
 131         // </div>
 132         //
 133         // Styleguide 2.1.1.
 134         &.mw-ui-progressive,
 135         &.mw-ui-primary {
 136                 .button-colors(@colorProgressive);
 137
 138                 &.mw-ui-quiet {
 139                         .button-colors-quiet(@colorProgressive);
 140                 }
 141         }
 142
 143         // Constructive buttons
 144         //
 145         // Use constructive buttons for actions which result in a final action in the process that results
 146         // in a change of state.
 147         // e.g. save changes button
 148         //
 149         // Markup:
 150         // <div>
 151         //   <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
 152         // </div>
 153         // <div>
 154         //   <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
 155         // </div>
 156         //
 157         // Styleguide 2.1.2.
 158         &.mw-ui-constructive {
 159                 .button-colors(@colorConstructive);
 160
 161                 &.mw-ui-quiet {
 162                         .button-colors-quiet(@colorConstructive);
 163                 }
 164         }
 165
 166         // Destructive buttons
 167         //
 168         // Use destructive buttons for actions which result in the destruction of data.
 169         // e.g. deleting a page.
 170         // This should not be used for cancel buttons.
 171         //
 172         // Markup:
 173         // <div>
 174         //   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 175         // </div>
 176         // <div>
 177         //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 178         // </div>
 179         //
 180         // Styleguide 2.1.3.
 181         &.mw-ui-destructive {
 182                 .button-colors(@colorDestructive);
 183
 184                 &.mw-ui-quiet {
 185                         .button-colors-quiet(@colorDestructive);
 186                 }
 187         }
 188
 189         // Quiet buttons
 190         //
 191         // Use quiet buttons when they are less important and alongside other constructive/progressive/destructive buttons.
 192         // Use of quiet buttons is not recommended on mobile/tablet due to lack of hover state.
 193         //
 194         // Markup:
 195         // <div>
 196         //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
 197         // </div>
 198         // <div>
 199         //   <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
 200         // </div>
 201         // <div>
 202         //   <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
 203         // </div>
 204         // <div>
 205         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
 206         // </div>
 207         // <div>
 208         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
 209         // </div>
 210         // <div>
 211         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
 212         // </div>
 213         // <div>
 214         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
 215         // </div>
 216         //
 217         // Styleguide 2.1.4.
 218         &.mw-ui-quiet {
 219                 background: transparent;
 220                 border: none;
 221                 text-shadow: none;
 222                 .button-colors-quiet(@colorButtonText);
 223
 224                 &:hover,
 225                 &:focus {
 226                         box-shadow: none;
 227                 }
 228
 229                 &:active,
 230                 &:disabled {
 231                         background: transparent;
 232                 }
 233         }
 234 }
 235
 236 a.mw-ui-button {
 237         text-decoration: none;
 238
 239         // This overrides an underline declaration on a:hover and a:focus in
 240         // commonElements.css, which the class alone isn't specific enough to do.
 241         &:hover,
 242         &:focus {
 243                 text-decoration: none;
 244         }
 245 }
 246
 247 // Button groups
 248 //
 249 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 250 //
 251 // Markup:
 252 // <div class="mw-ui-button-group">
 253 //   <div class="mw-ui-button">A</div>
 254 //   <div class="mw-ui-button">B</div>
 255 //   <div class="mw-ui-button">C</div>
 256 //   <div class="mw-ui-button">D</div>
 257 // </div><div style="clear:both"></div>
 258 //
 259 // Styleguide 2.2.
 260 .mw-ui-button-group > * {
 261         min-width: 48px;
 262         border-radius: 0;
 263         float: left;
 264
 265         &:first-child {
 266                 border-top-left-radius: @borderRadius;
 267                 border-bottom-left-radius: @borderRadius;
 268         }
 269
 270         &:not(:first-child) {
 271                 border-left: none;
 272         }
 273
 274         &:last-child{
 275                 border-top-right-radius: @borderRadius;
 276                 border-bottom-right-radius: @borderRadius;
 277         }
 278 }