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 @buttonBorderRadius: 3px;
  16 @transitionDuration: .1s;
  17 @transitionFunction: ease-in-out;
  18
  19 // Neutral button styling
  20 //
  21 // Markup:
  22 // <button class="mw-ui-button">.mw-ui-button</button>
  23 // <button class="mw-ui-button" disabled>.mw-ui-button</button>
  24 //
  25 // Styleguide 2.1.
  26 .mw-ui-button {
  27         // Container layout
  28         display: inline-block;
  29         padding: .5em 1em;
  30         margin: 0;
  31         .box-sizing(border-box);
  32
  33         // Disable weird iOS styling
  34         -webkit-appearance: none;
  35
  36         // IE6/IE7 hack
  37         // http://stackoverflow.com/a/5838575/365238
  38         *display: inline;
  39         zoom: 1;
  40
  41         // Container styling
  42         .button-colors(@colorWhite);
  43         border-radius: @buttonBorderRadius;
  44
  45         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  46         vertical-align: middle;
  47
  48         // Content styling
  49         text-align: center;
  50         font-weight: bold;
  51
  52         // Interaction styling
  53         cursor: pointer;
  54
  55         &:disabled {
  56                 text-shadow: none;
  57                 cursor: default;
  58         }
  59
  60         .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
  61
  62         // Styling for specific button types
  63         // -----------------------------------------
  64
  65         // Big buttons
  66         //
  67         // Not all buttons are equal. You can emphasise certain actions over others
  68         // using the mw-ui-big class.
  69         //
  70         // Markup:
  71         // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
  72         // <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
  73         // <button class="mw-ui-button mw-ui-constructive mw-ui-big">.mw-ui-constructive</button>
  74         // <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
  75         //
  76         // Styleguide 2.1.6.
  77         &.mw-ui-big {
  78                 font-size: @baseFontSize * 1.3;
  79         }
  80
  81         // Block buttons
  82         //
  83         // Some buttons might need to be stacked.
  84         //
  85         // Markup:
  86         // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
  87         // <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
  88         // <button class="mw-ui-button mw-ui-constructive mw-ui-block">.mw-ui-constructive</button>
  89         // <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
  90         //
  91         // Styleguide 2.1.5.
  92         &.mw-ui-block {
  93                 display: block;
  94                 width: 100%;
  95         }
  96
  97         // Progressive buttons
  98         //
  99         // Use progressive buttons for actions which lead to a next step in the process.
 100         // .mw-ui-primary is deprecated, kept for compatibility.
 101         //
 102         // Markup:
 103         // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
 104         // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
 105         //
 106         // Styleguide 2.1.1.
 107         &.mw-ui-progressive,
 108         &.mw-ui-primary {
 109                 .button-colors(@colorProgressive);
 110
 111                 &.mw-ui-quiet {
 112                         .button-colors-quiet(@colorProgressive);
 113                 }
 114         }
 115
 116         // Constructive buttons
 117         //
 118         // Use constructive buttons for actions which result in a final action in the process that results
 119         // in a change of state.
 120         // e.g. save changes button
 121         //
 122         // Markup:
 123         // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
 124         // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
 125         //
 126         // Styleguide 2.1.2.
 127         &.mw-ui-constructive {
 128                 .button-colors(@colorConstructive);
 129
 130                 &.mw-ui-quiet {
 131                         .button-colors-quiet(@colorConstructive);
 132                 }
 133         }
 134
 135         // Destructive buttons
 136         //
 137         // Use destructive buttons for actions which result in the destruction of data.
 138         // e.g. deleting a page.
 139         // This should not be used for cancel buttons.
 140         //
 141         // Markup:
 142         // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 143         // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 144         //
 145         // Styleguide 2.1.3.
 146         &.mw-ui-destructive {
 147                 .button-colors(@colorDestructive);
 148
 149                 &.mw-ui-quiet {
 150                         .button-colors-quiet(@colorDestructive);
 151                 }
 152         }
 153
 154         // Quiet buttons
 155         //
 156         // Use quiet buttons when they are less important and alongisde other progressive/destructive/progressive buttons.
 157         //
 158         // Markup:
 159         // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
 160         // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
 161         // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
 162         // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
 163         // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
 164         // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
 165         // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
 166         //
 167         // Styleguide 2.1.4.
 168         &.mw-ui-quiet {
 169                 background: transparent;
 170                 border: none;
 171                 text-shadow: none;
 172                 .button-colors-quiet(@colorGrayDark);
 173
 174                 &:hover,
 175                 &:focus {
 176                         box-shadow: none;
 177                 }
 178
 179                 &:active,
 180                 &:disabled {
 181                         background: transparent;
 182                 }
 183         }
 184 }
 185
 186 a.mw-ui-button {
 187         text-decoration: none;
 188
 189         // This overrides an underline declaration on a:hover and a:focus in
 190         // commonElements.css, which the class alone isn't specific enough to do.
 191         &:hover,
 192         &:focus {
 193                 text-decoration: none;
 194         }
 195 }
 196
 197 // Button groups
 198 //
 199 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 200 //
 201 // Markup:
 202 // <div class="mw-ui-button-group">
 203 //   <div class="mw-ui-button">A</div>
 204 //   <div class="mw-ui-button">B</div>
 205 //   <div class="mw-ui-button">C</div>
 206 //   <div class="mw-ui-button">D</div>
 207 // </div><div style="clear:both"></div>
 208 //
 209 // Styleguide 2.2.
 210 .mw-ui-button-group > * {
 211         border-radius: 0;
 212         float: left;
 213
 214         &:first-child {
 215                 border-top-left-radius: @buttonBorderRadius;
 216                 border-bottom-left-radius: @buttonBorderRadius;
 217         }
 218
 219         &:not(:first-child) {
 220                 border-left: none;
 221         }
 222
 223         &:last-child{
 224                 border-top-right-radius: @buttonBorderRadius;
 225                 border-bottom-right-radius: @buttonBorderRadius;
 226         }
 227 }