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

   1 @import "mediawiki.mixins";
   2 @import "../../settings/typography";
   3 @import "../../mixins/effects";
   4
   5 // Buttons
   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 // Styleguide 2.
  14
  15 @buttonBorderRadius: 3px;
  16 @transitionDuration: .1s;
  17 @transitionFunction: ease-in-out;
  18
  19 // Neutral button styling
  20 //
  21 // Markup:
  22 // <button class="mw-ui-button">.mw-ui-button</button>
  23 // <button class="mw-ui-button" disabled>.mw-ui-button</button>
  24 // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
  25 // <button class="mw-ui-button mw-ui-quiet" disabled>.mw-ui-button</button>
  26 //
  27 // Styleguide 2.1.
  28 .mw-ui-button {
  29         // Container layout
  30         display: inline-block;
  31         padding: .5em 1em;
  32         margin: 0;
  33
  34         // IE6/IE7 hack
  35         // http://stackoverflow.com/a/5838575/365238
  36         *display: inline;
  37         zoom: 1;
  38
  39         // Container styling
  40         .button-colors(@colorWhite);
  41         border-radius: @buttonBorderRadius;
  42
  43         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  44         vertical-align: middle;
  45
  46         // Content styling
  47         text-align: center;
  48         font-weight: bold;
  49         white-space: nowrap;
  50         text-shadow: 0 1px rgba(0, 0, 0, .1);
  51
  52         // Interaction styling
  53         cursor: pointer;
  54
  55         &:disabled {
  56                 text-shadow: none;
  57                 cursor: default;
  58         }
  59
  60         .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
  61
  62         // Styling for specific button types
  63         // -----------------------------------------
  64         &.mw-ui-big {
  65                 font-size: @baseFontSize * 1.3;
  66         }
  67
  68         &.mw-ui-block {
  69                 display: block;
  70                 width: 100%;
  71         }
  72
  73         // Progressive buttons
  74         //
  75         // Use progressive buttons for actions which lead to a next step in the process.
  76         // .mw-ui-primary is deprecated, kept for compatibility.
  77         //
  78         // Markup:
  79         // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
  80         // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
  81         // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
  82         // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
  83         //
  84         // Styleguide 2.1.1.
  85         &.mw-ui-progressive,
  86         &.mw-ui-primary {
  87                 .button-colors(@colorProgressive);
  88
  89                 &.mw-ui-quiet {
  90                         .button-colors-quiet(@colorProgressive);
  91                 }
  92         }
  93
  94         // Constructive buttons
  95         //
  96         // Use constructive buttons for actions which result in a final action in the process that results
  97         // in a change of state.
  98         // e.g. save changes button
  99         //
 100         // Markup:
 101         // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
 102         // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
 103         // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
 104         // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
 105         //
 106         // Styleguide 2.1.2.
 107         &.mw-ui-constructive {
 108                 .button-colors(@colorConstructive);
 109
 110                 &.mw-ui-quiet {
 111                         .button-colors-quiet(@colorConstructive);
 112                 }
 113         }
 114
 115         // Destructive buttons
 116         //
 117         // Use destructive buttons for actions which result in the destruction of data.
 118         // e.g. deleting a page.
 119         // This should not be used for cancel buttons.
 120         //
 121         // Markup:
 122         // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 123         // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 124         // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
 125         // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
 126         //
 127         // Styleguide 2.1.3.
 128         &.mw-ui-destructive {
 129                 .button-colors(@colorDestructive);
 130
 131                 &.mw-ui-quiet {
 132                         .button-colors-quiet(@colorDestructive);
 133                 }
 134         }
 135
 136         &.mw-ui-quiet {
 137                 background: transparent;
 138                 border: none;
 139                 text-shadow: none;
 140                 .button-colors-quiet(@colorGrayDark);
 141
 142                 &:hover,
 143                 &:focus {
 144                         box-shadow: none;
 145                 }
 146
 147                 &:active,
 148                 &:disabled {
 149                         background: transparent;
 150                 }
 151         }
 152 }
 153
 154 a.mw-ui-button {
 155         text-decoration: none;
 156
 157         // This overrides an underline declaration on a:hover and a:focus in
 158         // commonElements.css, which the class alone isn't specific enough to do.
 159         &:hover,
 160         &:focus {
 161                 text-decoration: none;
 162         }
 163 }
 164
 165 // Button groups
 166 //
 167 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 168 //
 169 // Markup:
 170 // <div class="mw-ui-button-group">
 171 //   <div class="mw-ui-button">A</div>
 172 //   <div class="mw-ui-button">B</div>
 173 //   <div class="mw-ui-button">C</div>
 174 //   <div class="mw-ui-button">D</div>
 175 // </div><div style="clear:both"></div>
 176 //
 177 // Styleguide 2.2.
 178 .mw-ui-button-group > * {
 179         border-radius: 0;
 180         float: left;
 181
 182         &:first-child{
 183                 border-top-left-radius: @buttonBorderRadius;
 184                 border-bottom-left-radius: @buttonBorderRadius;
 185         }
 186
 187         &:last-child{
 188                 border-top-right-radius: @buttonBorderRadius;
 189                 border-bottom-right-radius: @buttonBorderRadius;
 190         }
 191 }