1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/static/less/buttons.less	Fri Dec 20 22:30:44 2013 +0100
     1.3 @@ -0,0 +1,155 @@
     1.4 +//
     1.5 +// Buttons
     1.6 +// --------------------------------------------------
     1.7 +
     1.8 +
     1.9 +// Base styles
    1.10 +// --------------------------------------------------
    1.11 +
    1.12 +.btn {
    1.13 +  display: inline-block;
    1.14 +  margin-bottom: 0; // For input.btn
    1.15 +  font-weight: @btn-font-weight;
    1.16 +  text-align: center;
    1.17 +  vertical-align: middle;
    1.18 +  cursor: pointer;
    1.19 +  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    1.20 +  border: 1px solid transparent;
    1.21 +  white-space: nowrap;
    1.22 +  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
    1.23 +  .user-select(none);
    1.24 +
    1.25 +  &:focus {
    1.26 +    .tab-focus();
    1.27 +  }
    1.28 +
    1.29 +  &:hover,
    1.30 +  &:focus {
    1.31 +    color: @btn-default-color;
    1.32 +    text-decoration: none;
    1.33 +  }
    1.34 +
    1.35 +  &:active,
    1.36 +  &.active {
    1.37 +    outline: 0;
    1.38 +    background-image: none;
    1.39 +    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
    1.40 +  }
    1.41 +
    1.42 +  &.disabled,
    1.43 +  &[disabled],
    1.44 +  fieldset[disabled] & {
    1.45 +    cursor: not-allowed;
    1.46 +    pointer-events: none; // Future-proof disabling of clicks
    1.47 +    .opacity(.65);
    1.48 +    .box-shadow(none);
    1.49 +  }
    1.50 +}
    1.51 +
    1.52 +
    1.53 +// Alternate buttons
    1.54 +// --------------------------------------------------
    1.55 +
    1.56 +.btn-default {
    1.57 +  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
    1.58 +}
    1.59 +.btn-primary {
    1.60 +  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
    1.61 +}
    1.62 +// Warning appears as orange
    1.63 +.btn-warning {
    1.64 +  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
    1.65 +}
    1.66 +// Danger and error appear as red
    1.67 +.btn-danger {
    1.68 +  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
    1.69 +}
    1.70 +// Success appears as green
    1.71 +.btn-success {
    1.72 +  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
    1.73 +}
    1.74 +// Info appears as blue-green
    1.75 +.btn-info {
    1.76 +  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
    1.77 +}
    1.78 +
    1.79 +
    1.80 +// Link buttons
    1.81 +// -------------------------
    1.82 +
    1.83 +// Make a button look and behave like a link
    1.84 +.btn-link {
    1.85 +  color: @link-color;
    1.86 +  font-weight: normal;
    1.87 +  cursor: pointer;
    1.88 +  border-radius: 0;
    1.89 +
    1.90 +  &,
    1.91 +  &:active,
    1.92 +  &[disabled],
    1.93 +  fieldset[disabled] & {
    1.94 +    background-color: transparent;
    1.95 +    .box-shadow(none);
    1.96 +  }
    1.97 +  &,
    1.98 +  &:hover,
    1.99 +  &:focus,
   1.100 +  &:active {
   1.101 +    border-color: transparent;
   1.102 +  }
   1.103 +  &:hover,
   1.104 +  &:focus {
   1.105 +    color: @link-hover-color;
   1.106 +    text-decoration: underline;
   1.107 +    background-color: transparent;
   1.108 +  }
   1.109 +  &[disabled],
   1.110 +  fieldset[disabled] & {
   1.111 +    &:hover,
   1.112 +    &:focus {
   1.113 +      color: @btn-link-disabled-color;
   1.114 +      text-decoration: none;
   1.115 +    }
   1.116 +  }
   1.117 +}
   1.118 +
   1.119 +
   1.120 +// Button Sizes
   1.121 +// --------------------------------------------------
   1.122 +
   1.123 +.btn-lg {
   1.124 +  // line-height: ensure even-numbered height of button next to large input
   1.125 +  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
   1.126 +}
   1.127 +.btn-sm {
   1.128 +  // line-height: ensure proper height of button next to small input
   1.129 +  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
   1.130 +}
   1.131 +.btn-xs {
   1.132 +  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
   1.133 +}
   1.134 +
   1.135 +
   1.136 +// Block button
   1.137 +// --------------------------------------------------
   1.138 +
   1.139 +.btn-block {
   1.140 +  display: block;
   1.141 +  width: 100%;
   1.142 +  padding-left: 0;
   1.143 +  padding-right: 0;
   1.144 +}
   1.145 +
   1.146 +// Vertically space out multiple block buttons
   1.147 +.btn-block + .btn-block {
   1.148 +  margin-top: 5px;
   1.149 +}
   1.150 +
   1.151 +// Specificity overrides
   1.152 +input[type="submit"],
   1.153 +input[type="reset"],
   1.154 +input[type="button"] {
   1.155 +  &.btn-block {
   1.156 +    width: 100%;
   1.157 +  }
   1.158 +}