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         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  23         vertical-align: middle;
  24
  25         // Content styling
  26         text-align: center;
  27         text-decoration: none;
  28
  29         font-weight: bold;
  30
  31         // Interaction styling
  32         cursor: pointer;
  33
  34         &:disabled,
  35         &.mw-ui-disabled {
  36                 cursor: default;
  37         }
  38
  39         // Button sizes and displays
  40         // -----------------------------------------
  41         &.mw-ui-big {
  42                 font-size: @baseFontSize * 1.3;
  43         }
  44         &.mw-ui-block {
  45                 display: block;
  46                 width: 100%;
  47         }
  48 }
  49
  50 // This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
  51 // class alone isn't specific enough to do
  52 a.mw-ui-button {
  53         text-decoration: none;
  54 }
  55
  56 // Button groups
  57 .mw-ui-button-group > * {
  58         border-radius: 0;
  59         float: left;
  60
  61         &:first-child{
  62                 border-top-left-radius: @buttonBorderRadius;
  63                 border-bottom-left-radius: @buttonBorderRadius;
  64         }
  65
  66         &:last-child{
  67                 border-top-right-radius: @buttonBorderRadius;
  68                 border-bottom-right-radius: @buttonBorderRadius;
  69         }
  70 }