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

   1 @import "../../settings/typography";
   2 @import "../../mixins/effects";
   3
   4 @buttonBorderRadius: 3px;
   5
   6 // Button styling
   7 .mw-ui-button {
   8         // Container layout
   9         display: inline-block;
  10         padding: 0.4em 1em 0.4em 1em;
  11         margin: 0;
  12
  13         // IE6/IE7 hack
  14         // http://stackoverflow.com/a/5838575/365238
  15         *display: inline;
  16         zoom: 1;
  17
  18         // Container styling
  19         .buttonColors();
  20         border-radius: @buttonBorderRadius;
  21
  22         // Content styling
  23         vertical-align: middle;
  24
  25         text-align: center;
  26         text-decoration: none;
  27
  28         font-weight: bold;
  29
  30         // Interaction styling
  31         cursor: pointer;
  32
  33         &:disabled,
  34         &.mw-ui-disabled {
  35                 cursor: default;
  36         }
  37
  38         // Button sizes and displays
  39         // -----------------------------------------
  40         &.mw-ui-big {
  41                 font-size: @baseFontSize * 1.3;
  42         }
  43         &.mw-ui-block {
  44                 display: block;
  45                 width: 100%;
  46         }
  47 }
  48
  49 // This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
  50 // class alone isn't specific enough to do
  51 a.mw-ui-button {
  52         text-decoration: none;
  53 }
  54
  55 // Button groups
  56 .mw-ui-button-group > * {
  57         border-radius: 0;
  58         float: left;
  59
  60         &:first-child{
  61                 border-top-left-radius: @buttonBorderRadius;
  62                 border-bottom-left-radius: @buttonBorderRadius;
  63         }
  64
  65         &:last-child{
  66                 border-top-right-radius: @buttonBorderRadius;
  67                 border-bottom-right-radius: @buttonBorderRadius;
  68         }
  69 }