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

   1 // Common button mixins for MediaWiki
   2 //
   3 // Helper mixins used to create button styles. this file is importable
   4 // by all less files via `@import 'mediawiki.mixins.buttons';`.
   5
   6 /* stylelint-disable selector-class-pattern */
   7
   8 // Primary buttons mixin
   9 .button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
  10         background-color: @bgColor;
  11         color: #fff;
  12         // border of the same color as background so that light background and
  13         // dark background buttons are the same height and width
  14         border: 1px solid @bgColor;
  15
  16         &:hover {
  17                 background-color: @highlightColor;
  18                 border-color: @highlightColor;
  19         }
  20
  21         &:focus {
  22                 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
  23         }
  24
  25         &:active,
  26         &.is-on {
  27                 background-color: @activeColor;
  28                 border-color: @activeColor;
  29                 box-shadow: none;
  30         }
  31
  32         &:disabled {
  33                 background-color: @colorGray12;
  34                 color: #fff;
  35                 border-color: @colorGray12;
  36
  37                 // Make sure disabled buttons don't have hover and active states
  38                 &:hover,
  39                 &:active {
  40                         background-color: @colorGray12;
  41                         color: #fff;
  42                         border-color: @colorGray12;
  43                         box-shadow: none;
  44                 }
  45         }
  46 }