resources/src/mediawiki.ui.button/button.less

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mediawiki.mixins.less';
   3 @import 'mediawiki.ui/mixins.buttons.less';
   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 // Neutral button styling
  14 //
  15 // These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.
  16 //
  17 // Markup:
  18 // <div>
  19 //   <button class="mw-ui-button">.mw-ui-button</button>
  20 // </div>
  21 // <div>
  22 //   <button class="mw-ui-button" disabled>.mw-ui-button</button>
  23 // </div>
  24 .mw-ui-button {
  25         background-color: @background-color-interactive-subtle;
  26         border-color: @border-color-base;
  27         color: @color-base;
  28         .mw-ui-button();
  29         .mw-ui-button-states();
  30
  31         // If a sibling element is a checklist, the state should also apply to the button.
  32         input[ type='checkbox' ]:hover + &,
  33         &:hover {
  34                 background-color: @background-color-base;
  35                 color: @color-base--hover;
  36         }
  37
  38         input[ type='checkbox' ]:focus + &,
  39         &:focus {
  40                 // Make sure that `color` isn't inheriting from user-agent styles
  41                 color: @color-base;
  42                 border-color: @border-color-progressive--focus;
  43                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
  44                 // Set the standard focus `outline` transparent. A `border` and `box-shadow` visual
  45                 // focus is added above for common rendering.
  46                 // In Windows high contrast mode the transparent outline becomes visible.
  47                 // As vendor stylesheets set the outline on `:focus`, we need to follow here too and
  48                 // can't rely on the next selector to override it.
  49                 outline: @outline-base--focus;
  50         }
  51
  52         input[ type='checkbox' ]:active + &,
  53         &:active {
  54                 background-color: @background-color-interactive;
  55                 color: @color-emphasized;
  56                 border-color: @border-color-interactive;
  57                 box-shadow: none;
  58         }
  59
  60         &.mw-ui-icon-element {
  61                 &:not( .mw-ui-icon-with-label-desktop ) {
  62                         /* stylelint-disable-next-line declaration-no-important */
  63                         color: transparent !important;
  64
  65                         span:not( .mw-ui-icon ) {
  66                                 .mixin-screen-reader-text();
  67                         }
  68                 }
  69
  70                 @media all and ( max-width: @max-width-breakpoint-tablet ) {
  71                         span:not( .mw-ui-icon ) {
  72                                 .mixin-screen-reader-text();
  73                         }
  74
  75                         &.mw-ui-icon-with-label-desktop {
  76                                 /* stylelint-disable-next-line declaration-no-important */
  77                                 color: transparent !important;
  78                         }
  79                 }
  80         }
  81
  82         // Styling for specific button types
  83         // -----------------------------------------
  84
  85         // Quiet buttons
  86         //
  87         // 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.
  88         // Its use is  not recommended on mobile/tablet due to lack of hover state.
  89         //
  90         // Markup:
  91         // <div>
  92         //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
  93         // </div>
  94         // <div>
  95         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
  96         // </div>
  97         // <div>
  98         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
  99         // </div>
 100         // <div>
 101         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
 102         // </div>
 103         // <div>
 104         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
 105         // </div>
 106         &.mw-ui-quiet,
 107         &.mw-ui-quiet.mw-ui-progressive,
 108         &.mw-ui-quiet.mw-ui-destructive {
 109                 background-color: transparent;
 110                 // Quiet buttons all start gray, and reveal
 111                 // progressive/destructive color on hover and active.
 112                 color: @color-base;
 113                 border-color: @border-color-transparent;
 114                 font-weight: bold;
 115
 116                 &:not( .mw-ui-icon-element ) {
 117                         min-height: 32px;
 118                 }
 119
 120                 // If a sibling element is a checklist, the state should also apply to the button.
 121                 input[ type='checkbox' ]:hover + &,
 122                 &:hover {
 123                         background-color: @background-color-button-quiet--hover;
 124                         color: @color-base;
 125                 }
 126
 127                 input[ type='checkbox' ]:focus + &,
 128                 &:focus {
 129                         color: @color-base;
 130                         border-color: @border-color-progressive--focus;
 131                         box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
 132                 }
 133
 134                 input[ type='checkbox' ]:active + &,
 135                 &:active {
 136                         background-color: @background-color-button-quiet--active;
 137                         color: @color-emphasized;
 138                         border-color: @border-color-interactive;
 139                         box-shadow: none;
 140                 }
 141
 142                 &:disabled,
 143                 &:disabled:hover,
 144                 &:disabled:active {
 145                         background-color: @background-color-transparent;
 146                         color: @color-disabled;
 147                         border-color: @border-color-transparent;
 148                 }
 149         }
 150
 151         // Progressive buttons
 152         //
 153         // Use progressive buttons for actions which lead to a next step in the process.
 154         //
 155         // Markup:
 156         // <div>
 157         //   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
 158         // </div>
 159         // <div>
 160         //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
 161         // </div>
 162         &.mw-ui-progressive {
 163                 .mw-ui-button-colors-primary( @color-progressive, @color-progressive--hover, @color-progressive--active );
 164
 165                 &.mw-ui-quiet {
 166                         background-color: @background-color-transparent;
 167                         color: @color-progressive;
 168                         border-color: @border-color-transparent;
 169
 170                         input[ type='checkbox' ]:hover + &,
 171                         &:hover {
 172                                 // TODO: Should be a token.
 173                                 // This came out of `background-color-primary` by mediawiki.ui.
 174                                 // Value was `fade( #347bff, 20% )`, which results in `rgba( 52, 123, 255, 0.2 )`.
 175                                 // WikimediaUI Base was featuring
 176                                 // `@background-color-primary--hover: rgba( 41, 98, 204, 0.1 )` in contrast.
 177                                 // Let's keep this static for the time being and revisit with a new Codex token.
 178                                 background-color: rgba( 52, 123, 255, 0.2 );
 179                                 color: @color-progressive--hover;
 180                                 border-color: @border-color-transparent;
 181                         }
 182
 183                         input[ type='checkbox' ]:focus + &,
 184                         &:focus {
 185                                 color: @color-progressive--focus;
 186                                 border-color: @color-progressive--focus;
 187                         }
 188
 189                         input[ type='checkbox' ]:active + &,
 190                         &:active {
 191                                 color: @color-inverted;
 192                                 background-color: @color-progressive--active;
 193                                 border-color: @color-progressive--active;
 194                         }
 195                 }
 196         }
 197
 198         // Destructive buttons
 199         //
 200         // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
 201         // This should not be used for cancel buttons.
 202         //
 203         // Markup:
 204         // <div>
 205         //   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 206         // </div>
 207         // <div>
 208         //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 209         // </div>
 210         &.mw-ui-destructive {
 211                 .mw-ui-button-colors-primary( @color-destructive, @color-destructive--hover, @color-destructive--active );
 212
 213                 &.mw-ui-quiet {
 214                         color: @color-destructive;
 215                         background-color: @background-color-transparent;
 216                         border-color: @border-color-transparent;
 217
 218                         input[ type='checkbox' ]:hover + &,
 219                         &:hover {
 220                                 background-color: @background-color-destructive--hover;
 221                                 border-color: @border-color-transparent;
 222                                 color: @color-destructive--hover;
 223                         }
 224
 225                         input[ type='checkbox' ]:focus + &,
 226                         &:focus {
 227                                 color: @color-destructive;
 228                                 border-color: @color-destructive--focus;
 229                         }
 230
 231                         input[ type='checkbox' ]:active + &,
 232                         &:active {
 233                                 color: @color-inverted;
 234                                 background-color: @color-destructive--active;
 235                                 border-color: @color-destructive--active;
 236                         }
 237                 }
 238         }
 239
 240         // Big buttons
 241         //
 242         // Not all buttons are equal. You can emphasise certain actions over others
 243         // using the mw-ui-big class.
 244         //
 245         // Markup:
 246         // <div>
 247         //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
 248         // </div>
 249         // <div>
 250         //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
 251         // </div>
 252         // <div>
 253         //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
 254         // </div>
 255         &.mw-ui-big {
 256                 font-size: 1.3em;
 257         }
 258
 259         // Block buttons
 260         //
 261         // Some buttons might need to be stacked.
 262         //
 263         // Markup:
 264         // <div>
 265         //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
 266         // </div>
 267         // <div>
 268         //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
 269         // </div>
 270         // <div>
 271         //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
 272         // </div>
 273         &.mw-ui-block {
 274                 display: block;
 275                 width: 100%;
 276                 margin-left: auto;
 277                 margin-right: auto;
 278         }
 279 }
 280
 281 a.mw-ui-button {
 282         text-decoration: none;
 283
 284         // This overrides an underline declaration on a:hover and a:focus in
 285         // commonElements.css, which the class alone isn't specific enough to do.
 286         &:hover,
 287         &:focus {
 288                 text-decoration: none;
 289         }
 290 }
 291
 292 // Button groups
 293 //
 294 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 295 //
 296 // Markup:
 297 // <div class="mw-ui-button-group">
 298 //   <div class="mw-ui-button is-on">A</div>
 299 //   <div class="mw-ui-button">B</div>
 300 //   <div class="mw-ui-button">C</div>
 301 //   <div class="mw-ui-button">D</div>
 302 // </div><div style="clear:both"></div>
 303 .mw-ui-button-group {
 304         & > * {
 305                 min-width: 48px;
 306                 border-radius: 0;
 307                 float: left;
 308
 309                 &:first-child {
 310                         border-top-left-radius: @border-radius-base;
 311                         border-bottom-left-radius: @border-radius-base;
 312                 }
 313
 314                 &:not( :first-child ) {
 315                         border-left: 0;
 316                 }
 317
 318                 &:last-child {
 319                         border-top-right-radius: @border-radius-base;
 320                         border-bottom-right-radius: @border-radius-base;
 321                 }
 322         }
 323
 324         & .is-on .button {
 325                 cursor: @cursor-base;
 326         }
 327 }