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

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