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

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/mixins.buttons';
   3 @import 'mediawiki.ui/variables';
   4
   5 /* stylelint-disable selector-class-pattern */
   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 // Neutral button styling
  16 //
  17 // These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.
  18 //
  19 // Markup:
  20 // <div>
  21 //   <button class="mw-ui-button">.mw-ui-button</button>
  22 // </div>
  23 // <div>
  24 //   <button class="mw-ui-button" disabled>.mw-ui-button</button>
  25 // </div>
  26 //
  27 // Styleguide 2.1.
  28 .mw-ui-button {
  29         background-color: @colorGray15;
  30         color: @colorButtonText;
  31         .mw-ui-button();
  32         .mw-ui-button-states();
  33
  34         // Styling for specific button types
  35         // -----------------------------------------
  36
  37         // Quiet buttons
  38         //
  39         // Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow.
  40         // Its use is  not recommended on mobile/tablet due to lack of hover state.
  41         //
  42         // Markup:
  43         // <div>
  44         //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
  45         // </div>
  46         // <div>
  47         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
  48         // </div>
  49         // <div>
  50         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
  51         // </div>
  52         // <div>
  53         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
  54         // </div>
  55         // <div>
  56         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
  57         // </div>
  58         //
  59         // Styleguide 2.1.1.
  60         &.mw-ui-quiet,
  61         &.mw-ui-quiet.mw-ui-progressive,
  62         &.mw-ui-quiet.mw-ui-destructive {
  63                 background-color: transparent;
  64                 // Quiet buttons all start gray, and reveal
  65                 // progressive/destructive color on hover and active.
  66                 color: @colorButtonText;
  67                 border-color: transparent;
  68
  69                 &:hover {
  70                         background-color: transparent;
  71                         color: @colorButtonTextHighlight;
  72                         border-color: transparent;
  73                         box-shadow: none;
  74                 }
  75
  76                 &:active {
  77                         background-color: transparent;
  78                         color: @colorButtonTextActive;
  79                         border-color: transparent;
  80                 }
  81
  82                 &:focus {
  83                         background-color: transparent;
  84                         color: @colorButtonText;
  85                         border-color: transparent;
  86                         box-shadow: none;
  87                 }
  88
  89                 &:disabled,
  90                 &:disabled:hover,
  91                 &:disabled:active {
  92                         background-color: transparent;
  93                         color: @colorDisabledText;
  94                         border-color: transparent;
  95                 }
  96         }
  97
  98         // Progressive buttons
  99         //
 100         // Use progressive buttons for actions which lead to a next step in the process.
 101         //
 102         // Markup:
 103         // <div>
 104         //   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
 105         // </div>
 106         // <div>
 107         //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
 108         // </div>
 109         //
 110         // Styleguide 2.1.2.
 111         &.mw-ui-progressive {
 112                 .mw-ui-button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 113
 114                 &.mw-ui-quiet {
 115                         color: @colorProgressive;
 116
 117                         &:hover {
 118                                 background-color: transparent;
 119                                 color: @colorProgressiveHighlight;
 120                         }
 121
 122                         &:active {
 123                                 color: @colorProgressiveActive;
 124                         }
 125
 126                         &:focus {
 127                                 background-color: transparent;
 128                                 color: @colorProgressive;
 129                         }
 130                 }
 131         }
 132
 133         // Destructive buttons
 134         //
 135         // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
 136         // This should not be used for cancel buttons.
 137         //
 138         // Markup:
 139         // <div>
 140         //   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 141         // </div>
 142         // <div>
 143         //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 144         // </div>
 145         //
 146         // Styleguide 2.1.3.
 147         &.mw-ui-destructive {
 148                 .mw-ui-button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 149
 150                 &.mw-ui-quiet {
 151                         color: @colorDestructive;
 152
 153                         &:hover {
 154                                 background-color: transparent;
 155                                 color: @colorDestructiveHighlight;
 156                         }
 157
 158                         &:active {
 159                                 color: @colorDestructiveActive;
 160                         }
 161
 162                         &:focus {
 163                                 background-color: transparent;
 164                                 color: @colorDestructive;
 165                         }
 166                 }
 167         }
 168
 169         // Big buttons
 170         //
 171         // Not all buttons are equal. You can emphasise certain actions over others
 172         // using the mw-ui-big class.
 173         //
 174         // Markup:
 175         // <div>
 176         //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
 177         // </div>
 178         // <div>
 179         //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
 180         // </div>
 181         // <div>
 182         //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
 183         // </div>
 184         //
 185         // Styleguide 2.1.4.
 186         &.mw-ui-big {
 187                 font-size: 1.3em;
 188         }
 189
 190         // Block buttons
 191         //
 192         // Some buttons might need to be stacked.
 193         //
 194         // Markup:
 195         // <div>
 196         //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
 197         // </div>
 198         // <div>
 199         //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
 200         // </div>
 201         // <div>
 202         //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
 203         // </div>
 204         //
 205         // Styleguide 2.1.5.
 206         &.mw-ui-block {
 207                 display: block;
 208                 width: 100%;
 209                 margin-left: auto;
 210                 margin-right: auto;
 211         }
 212 }
 213
 214 input.mw-ui-button,
 215 button.mw-ui-button {
 216         // Buttons in Firefox have extra height
 217         &::-moz-focus-inner {
 218                 margin-top: -1px;
 219                 margin-bottom: -1px;
 220         }
 221 }
 222
 223 a.mw-ui-button {
 224         text-decoration: none;
 225
 226         // This overrides an underline declaration on a:hover and a:focus in
 227         // commonElements.css, which the class alone isn't specific enough to do.
 228         &:hover,
 229         &:focus {
 230                 text-decoration: none;
 231         }
 232 }
 233
 234 // Button groups
 235 //
 236 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 237 //
 238 // Markup:
 239 // <div class="mw-ui-button-group">
 240 //   <div class="mw-ui-button is-on">A</div>
 241 //   <div class="mw-ui-button">B</div>
 242 //   <div class="mw-ui-button">C</div>
 243 //   <div class="mw-ui-button">D</div>
 244 // </div><div style="clear:both"></div>
 245 //
 246 // Styleguide 2.2.
 247 .mw-ui-button-group {
 248         & > * {
 249                 min-width: 48px;
 250                 border-radius: 0;
 251                 float: left;
 252
 253                 &:first-child {
 254                         border-top-left-radius: @borderRadius;
 255                         border-bottom-left-radius: @borderRadius;
 256                 }
 257
 258                 &:not( :first-child ) {
 259                         border-left: 0;
 260                 }
 261
 262                 &:last-child {
 263                         border-top-right-radius: @borderRadius;
 264                         border-bottom-right-radius: @borderRadius;
 265                 }
 266         }
 267
 268         & .is-on .button {
 269                 cursor: default;
 270         }
 271 }