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