git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/buttons.less

   1 //
   2 // Buttons
   3 // --------------------------------------------------
   4
   5
   6 // Base styles
   7 // --------------------------------------------------
   8
   9 // Core styles
  10 .btn {
  11   display: inline-block;
  12   padding: @padding-base-vertical @padding-base-horizontal;
  13   margin-bottom: 0; // For input.btn
  14   font-size: @font-size-base;
  15   font-weight: 500;
  16   line-height: @line-height-base;
  17   text-align: center;
  18   vertical-align: middle;
  19   cursor: pointer;
  20   border: 1px solid transparent;
  21   border-radius: @border-radius-base;
  22   white-space: nowrap;
  23
  24   &:focus {
  25     .tab-focus();
  26   }
  27
  28   &:hover,
  29   &:focus {
  30     color: @btn-hover-color;
  31     text-decoration: none;
  32   }
  33
  34   &:active,
  35   &.active {
  36     outline: 0;
  37     .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  38   }
  39
  40   &.disabled,
  41   &[disabled],
  42   fieldset[disabled] & {
  43     cursor: default;
  44     pointer-events: none; // Future-proof disabling of clicks
  45     .opacity(.65);
  46     .box-shadow(none);
  47   }
  48
  49 }
  50
  51
  52 // Alternate buttons
  53 // --------------------------------------------------
  54
  55 .btn-default {
  56   .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
  57 }
  58 .btn-primary {
  59   .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
  60 }
  61 // Warning appears as orange
  62 .btn-warning {
  63   .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
  64 }
  65 // Danger and error appear as red
  66 .btn-danger {
  67   .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
  68 }
  69 // Success appears as green
  70 .btn-success {
  71   .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
  72 }
  73 // Info appears as blue-green
  74 .btn-info {
  75   .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
  76 }
  77
  78
  79 // Link buttons
  80 // -------------------------
  81
  82 // Make a button look and behave like a link
  83 .btn-link {
  84   color: @link-color;
  85   font-weight: normal;
  86   cursor: pointer;
  87   border-radius: 0;
  88
  89   &,
  90   &:active,
  91   &[disabled],
  92   fieldset[disabled] & {
  93     background-color: transparent;
  94     .box-shadow(none);
  95   }
  96   &,
  97   &:hover,
  98   &:focus,
  99   &:active {
 100     border-color: transparent;
 101   }
 102   &:hover,
 103   &:focus {
 104     color: @link-hover-color;
 105     text-decoration: underline;
 106     background-color: transparent;
 107   }
 108   &[disabled],
 109   fieldset[disabled] & {
 110     &:hover,
 111     &:focus {
 112       color: @gray-dark;
 113       text-decoration: none;
 114     }
 115   }
 116 }
 117
 118
 119 // Button Sizes
 120 // --------------------------------------------------
 121
 122 .btn-large {
 123   padding: @padding-large-vertical @padding-large-horizontal;
 124   font-size: @font-size-large;
 125   border-radius: @border-radius-large;
 126 }
 127 .btn-small {
 128   padding: @padding-small-vertical @padding-small-horizontal;
 129   font-size: @font-size-small;
 130   line-height: 1.5; // ensure proper height of button next to small input
 131   border-radius: @border-radius-small;
 132 }
 133
 134
 135 // Block button
 136 // --------------------------------------------------
 137
 138 .btn-block {
 139   display: block;
 140   width: 100%;
 141   padding-left: 0;
 142   padding-right: 0;
 143 }
 144
 145 // Vertically space out multiple block buttons
 146 .btn-block + .btn-block {
 147   margin-top: 5px;
 148 }
 149
 150 // Specificity overrides
 151 input[type="submit"],
 152 input[type="reset"],
 153 input[type="button"] {
 154   &.btn-block {
 155     width: 100%;
 156   }
 157 }