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

   1 @import "../../settings/typography";
   2 @import "../../mixins/effects";
   3
   4 // Buttons
   5 //
   6 // Styleguide 2.
   7
   8 @buttonBorderRadius: 3px;
   9
  10 // Button styling
  11 //
  12 // Basic button styling to be used on desktop skins. Can be any element.
  13 // Due to a lack of a CSS reset, the exact styling of the button depends on what type of element is used.
  14 //
  15 // Markup:
  16 // <div class="mw-ui-button">button.mw-ui-button</div>
  17 //
  18 // Styleguide 2.1.
  19 .mw-ui-button {
  20         // Container layout
  21         display: inline-block;
  22         padding: 0.4em 1em 0.4em 1em;
  23         margin: 0;
  24
  25         // IE6/IE7 hack
  26         // http://stackoverflow.com/a/5838575/365238
  27         *display: inline;
  28         zoom: 1;
  29
  30         // Container styling
  31         .buttonColors();
  32         border-radius: @buttonBorderRadius;
  33
  34         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  35         vertical-align: middle;
  36
  37         // Content styling
  38         text-align: center;
  39         text-decoration: none;
  40
  41         font-weight: bold;
  42
  43         // Interaction styling
  44         cursor: pointer;
  45
  46         &:disabled,
  47         &.mw-ui-disabled {
  48                 cursor: default;
  49         }
  50
  51         // Styling for specific button types
  52         // -----------------------------------------
  53         &.mw-ui-big {
  54                 font-size: @baseFontSize * 1.3;
  55         }
  56
  57         &.mw-ui-block {
  58                 display: block;
  59                 width: 100%;
  60         }
  61
  62         // Primary buttons
  63         //
  64         // Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons
  65         // use mw-ui-progressive (coming soon)
  66         //
  67         // Markup:
  68         // <button class="mw-ui-button mw-ui-primary">mw-ui-primary</button>
  69         //
  70         // Styleguide 2.1.1.
  71         &.mw-ui-primary {
  72                 .buttonColors(@agoraBlue);
  73         }
  74
  75         // Constructive buttons
  76         //
  77         // Use constructive buttons for actions which result in a final action in the process that results
  78         // in a change of state.
  79         // e.g. save changes button
  80         //
  81         // Markup:
  82         // <button class="mw-ui-button mw-ui-constructive">mw-ui-constructive</button>
  83         //
  84         // Styleguide 2.1.2.
  85         &.mw-ui-constructive {
  86                 .buttonColors(@agoraGreen);
  87         }
  88
  89         // Destructive buttons
  90         //
  91         // Use destructive buttons for actions which result in the destruction of data.
  92         // e.g. deleting a page.
  93         // This should not be used for cancel buttons.
  94         //
  95         // Markup:
  96         // <button class="mw-ui-button mw-ui-destructive">mw-ui-destructive</button>
  97         //
  98         // Styleguide 2.1.3.
  99         &.mw-ui-destructive {
 100                 .buttonColors(@agoraRed);
 101         }
 102 }
 103
 104 // This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
 105 // class alone isn't specific enough to do
 106 a.mw-ui-button {
 107         text-decoration: none;
 108 }
 109
 110 // Button groups
 111 //
 112 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 113 //
 114 // Markup:
 115 // <div class="mw-ui-button-group">
 116 //   <div class="mw-ui-button">A</div>
 117 //   <div class="mw-ui-button">B</div>
 118 //   <div class="mw-ui-button">C</div>
 119 //   <div class="mw-ui-button">D</div>
 120 // </div><div style="clear:both"></div>
 121 //
 122 // Styleguide 2.2.
 123 .mw-ui-button-group > * {
 124         border-radius: 0;
 125         float: left;
 126
 127         &:first-child{
 128                 border-top-left-radius: @buttonBorderRadius;
 129                 border-bottom-left-radius: @buttonBorderRadius;
 130         }
 131
 132         &:last-child{
 133                 border-top-right-radius: @buttonBorderRadius;
 134                 border-bottom-right-radius: @buttonBorderRadius;
 135         }
 136 }