[Summary view] [Print] [Text view]

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