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

   1 @import "mediawiki.mixins";
   2 @import "mediawiki.ui/variables";
   3 @import "mediawiki.ui/mixins";
   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 // Neutral button styling
  16 //
  17 // These are the main actions on the page/workflow. The page should have only one of progressive and destructive buttons, the rest being quiet.
  18 //
  19 // Markup:
  20 // <div>
  21 //   <button class="mw-ui-button">.mw-ui-button</button>
  22 // </div>
  23 // <div>
  24 //   <button class="mw-ui-button" disabled>.mw-ui-button</button>
  25 // </div>
  26 //
  27 // Styleguide 2.1.
  28 .mw-ui-button {
  29         // Inherit the font rather than apply user agent stylesheet (bug 70072)
  30         font-family: inherit;
  31         font-size: 1em;
  32         // Container layout
  33         display: inline-block;
  34         min-width: 4em;
  35         max-width: 28.75em; // equivalent to 460px, @see T95367
  36         padding: .5em 1em;
  37         margin: 0;
  38         border-radius: @borderRadius;
  39         .box-sizing( border-box );
  40
  41         // Disable weird iOS styling
  42         -webkit-appearance: none;
  43
  44         // IE 6 & 7 hack
  45         // https://stackoverflow.com/a/5838575/365238
  46         *display: inline;
  47         zoom: 1;
  48
  49         // Ensure that buttons and inputs are nicely aligned when they have differing heights
  50         vertical-align: middle;
  51
  52         // Content styling
  53         .button-colors( @colorGray15, #fff, #d9d9d9 );
  54         text-align: center;
  55         font-weight: bold;
  56
  57         // Interaction styling
  58         cursor: pointer;
  59
  60         &:focus {
  61                 outline-width: 0;
  62
  63                 // Remove the inner border and padding in Firefox.
  64                 &::-moz-focus-inner {
  65                         border-color: transparent;
  66                         padding: 0;
  67                 }
  68         }
  69
  70         // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9
  71         &:not( :disabled ) {
  72                 .transition( ~'background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms' );
  73         }
  74
  75         &:disabled {
  76                 text-shadow: none;
  77                 cursor: default;
  78         }
  79
  80         // Styling for specific button types
  81         // -----------------------------------------
  82
  83         // Big buttons
  84         //
  85         // Not all buttons are equal. You can emphasise certain actions over others
  86         // using the mw-ui-big class.
  87         //
  88         // Markup:
  89         // <div>
  90         //   <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
  91         // </div>
  92         // <div>
  93         //   <button class="mw-ui-button mw-ui-progressive mw-ui-big">.mw-ui-progressive</button>
  94         // </div>
  95         // <div>
  96         //   <button class="mw-ui-button mw-ui-destructive mw-ui-big">.mw-ui-destructive</button>
  97         // </div>
  98         //
  99         // Styleguide 2.1.6.
 100         &.mw-ui-big {
 101                 font-size: 1.3em;
 102         }
 103
 104         // Block buttons
 105         //
 106         // Some buttons might need to be stacked.
 107         //
 108         // Markup:
 109         // <div>
 110         //   <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
 111         // </div>
 112         // <div>
 113         //   <button class="mw-ui-button mw-ui-progressive mw-ui-block">.mw-ui-progressive</button>
 114         // </div>
 115         // <div>
 116         //   <button class="mw-ui-button mw-ui-destructive mw-ui-block">.mw-ui-destructive</button>
 117         // </div>
 118         //
 119         // Styleguide 2.1.5.
 120         &.mw-ui-block {
 121                 display: block;
 122                 width: 100%;
 123                 margin-left: auto;
 124                 margin-right: auto;
 125         }
 126
 127         // Progressive buttons
 128         //
 129         // Use progressive buttons for actions which lead to a next step in the process.
 130         // .mw-ui-constructive is deprecated; consolidated with `progressive`, see T110555
 131         // .mw-ui-primary is deprecated, kept for compatibility.
 132         //
 133         // Markup:
 134         // <div>
 135         //   <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
 136         // </div>
 137         // <div>
 138         //   <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
 139         // </div>
 140         //
 141         // Styleguide 2.1.1.
 142         &.mw-ui-progressive,
 143         &.mw-ui-constructive,
 144         &.mw-ui-primary {
 145                 .button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 146
 147                 &.mw-ui-quiet {
 148                         .button-colors-quiet( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
 149                 }
 150         }
 151
 152         // Destructive buttons
 153         //
 154         // Use destructive buttons for actions that remove or limit, such as deleting a page or blocking a user.
 155         // This should not be used for cancel buttons.
 156         //
 157         // Markup:
 158         // <div>
 159         //   <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
 160         // </div>
 161         // <div>
 162         //   <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
 163         // </div>
 164         //
 165         // Styleguide 2.1.2.
 166         &.mw-ui-destructive {
 167                 .button-colors-primary( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 168
 169                 &.mw-ui-quiet {
 170                         .button-colors-quiet( @colorDestructive, @colorDestructiveHighlight, @colorDestructiveActive );
 171                 }
 172         }
 173
 174         // Quiet buttons
 175         //
 176         // Use quiet buttons when they are less important and alongside other progressive or destructive buttons. It should be used for an action that exits the user from the current view/workflow.
 177         // Its use is  not recommended on mobile/tablet due to lack of hover state.
 178         //
 179         // Markup:
 180         // <div>
 181         //   <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
 182         // </div>
 183         // <div>
 184         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
 185         // </div>
 186         // <div>
 187         //   <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
 188         // </div>
 189         // <div>
 190         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
 191         // </div>
 192         // <div>
 193         //   <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
 194         // </div>
 195         //
 196         // Styleguide 2.1.3.
 197         &.mw-ui-quiet {
 198                 background: transparent;
 199                 border: 0;
 200                 text-shadow: none;
 201                 .button-colors-quiet( @colorButtonText, @colorButtonTextHighlight, @colorButtonTextActive );
 202
 203                 &:hover,
 204                 &:focus {
 205                         box-shadow: none;
 206                 }
 207
 208                 &:active,
 209                 &:disabled {
 210                         background: transparent;
 211                 }
 212         }
 213 }
 214
 215 a.mw-ui-button {
 216         text-decoration: none;
 217
 218         // This overrides an underline declaration on a:hover and a:focus in
 219         // commonElements.css, which the class alone isn't specific enough to do.
 220         &:hover,
 221         &:focus {
 222                 text-decoration: none;
 223         }
 224
 225         // a-tags behave different to inputs if the line-height attribute is inherited
 226         // from another element (e.g. mw-body-content). They appear bigger as input
 227         // tags. See Bug T116427. To fix that, apply the correct line-height (used
 228         // for inputs) to a-tags, too.
 229         line-height: normal;
 230 }
 231
 232 // Button groups
 233 //
 234 // Group of buttons. Make sure you clear the floating after using a mw-ui-button-group.
 235 //
 236 // Markup:
 237 // <div class="mw-ui-button-group">
 238 //   <div class="mw-ui-button is-on">A</div>
 239 //   <div class="mw-ui-button">B</div>
 240 //   <div class="mw-ui-button">C</div>
 241 //   <div class="mw-ui-button">D</div>
 242 // </div><div style="clear:both"></div>
 243 //
 244 // Styleguide 2.2.
 245 .mw-ui-button-group {
 246         & > * {
 247                 min-width: 48px;
 248                 border-radius: 0;
 249                 float: left;
 250
 251                 &:first-child {
 252                         border-top-left-radius: @borderRadius;
 253                         border-bottom-left-radius: @borderRadius;
 254                 }
 255
 256                 &:not( :first-child ) {
 257                         border-left: 0;
 258                 }
 259
 260                 &:last-child {
 261                         border-top-right-radius: @borderRadius;
 262                         border-bottom-right-radius: @borderRadius;
 263                 }
 264         }
 265
 266         & .is-on .button {
 267                 cursor: default;
 268         }
 269 }