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