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