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

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