1// 2// Buttons 3// -------------------------------------------------- 4 5 6// Base styles 7// -------------------------------------------------- 8 9// Core 10.btn { 11 display: inline-block; 12 .ie7-inline-block(); 13 padding: 4px 12px; 14 margin-bottom: 0; // For input.btn 15 font-size: @baseFontSize; 16 line-height: @baseLineHeight; 17 text-align: center; 18 vertical-align: middle; 19 cursor: pointer; 20 .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); 21 border: 1px solid @btnBorder; 22 *border: 0; // Remove the border to prevent IE7's black border on input:focus 23 border-bottom-color: darken(@btnBorder, 10%); 24 .border-radius(@baseBorderRadius); 25 .ie7-restore-left-whitespace(); // Give IE7 some love 26 .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); 27 28 // Hover/focus state 29 &:hover, 30 &:focus { 31 color: @grayDark; 32 text-decoration: none; 33 background-position: 0 -15px; 34 35 // transition is only when going to hover/focus, otherwise the background 36 // behind the gradient (there for IE<=9 fallback) gets mismatched 37 .transition(background-position .1s linear); 38 } 39 40 // Focus state for keyboard and accessibility 41 &:focus { 42 .tab-focus(); 43 } 44 45 // Active state 46 &.active, 47 &:active { 48 background-image: none; 49 outline: 0; 50 .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); 51 } 52 53 // Disabled state 54 &.disabled, 55 &[disabled] { 56 cursor: default; 57 background-image: none; 58 .opacity(65); 59 .box-shadow(none); 60 } 61 62} 63 64 65 66// Button Sizes 67// -------------------------------------------------- 68 69// Large 70.btn-large { 71 padding: @paddingLarge; 72 font-size: @fontSizeLarge; 73 .border-radius(@borderRadiusLarge); 74} 75.btn-large [class^="icon-"], 76.btn-large [class*=" icon-"] { 77 margin-top: 4px; 78} 79 80// Small 81.btn-small { 82 padding: @paddingSmall; 83 font-size: @fontSizeSmall; 84 .border-radius(@borderRadiusSmall); 85} 86.btn-small [class^="icon-"], 87.btn-small [class*=" icon-"] { 88 margin-top: 0; 89} 90.btn-mini [class^="icon-"], 91.btn-mini [class*=" icon-"] { 92 margin-top: -1px; 93} 94 95// Mini 96.btn-mini { 97 padding: @paddingMini; 98 font-size: @fontSizeMini; 99 .border-radius(@borderRadiusSmall); 100} 101 102 103// Block button 104// ------------------------- 105 106.btn-block { 107 display: block; 108 width: 100%; 109 padding-left: 0; 110 padding-right: 0; 111 .box-sizing(border-box); 112} 113 114// Vertically space out multiple block buttons 115.btn-block + .btn-block { 116 margin-top: 5px; 117} 118 119// Specificity overrides 120input[type="submit"], 121input[type="reset"], 122input[type="button"] { 123 &.btn-block { 124 width: 100%; 125 } 126} 127 128 129 130// Alternate buttons 131// -------------------------------------------------- 132 133// Provide *some* extra contrast for those who can get it 134.btn-primary.active, 135.btn-warning.active, 136.btn-danger.active, 137.btn-success.active, 138.btn-info.active, 139.btn-inverse.active { 140 color: rgba(255,255,255,.75); 141} 142 143// Set the backgrounds 144// ------------------------- 145.btn-primary { 146 .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); 147} 148// Warning appears are orange 149.btn-warning { 150 .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); 151} 152// Danger and error appear as red 153.btn-danger { 154 .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); 155} 156// Success appears as green 157.btn-success { 158 .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); 159} 160// Info appears as a neutral blue 161.btn-info { 162 .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); 163} 164// Inverse appears as dark gray 165.btn-inverse { 166 .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); 167} 168 169 170// Cross-browser Jank 171// -------------------------------------------------- 172 173button.btn, 174input[type="submit"].btn { 175 176 // Firefox 3.6 only I believe 177 &::-moz-focus-inner { 178 padding: 0; 179 border: 0; 180 } 181 182 // IE7 has some default padding on button controls 183 *padding-top: 3px; 184 *padding-bottom: 3px; 185 186 &.btn-large { 187 *padding-top: 7px; 188 *padding-bottom: 7px; 189 } 190 &.btn-small { 191 *padding-top: 3px; 192 *padding-bottom: 3px; 193 } 194 &.btn-mini { 195 *padding-top: 1px; 196 *padding-bottom: 1px; 197 } 198} 199 200 201// Link buttons 202// -------------------------------------------------- 203 204// Make a button look and behave like a link 205.btn-link, 206.btn-link:active, 207.btn-link[disabled] { 208 background-color: transparent; 209 background-image: none; 210 .box-shadow(none); 211} 212.btn-link { 213 border-color: transparent; 214 cursor: pointer; 215 color: @linkColor; 216 .border-radius(0); 217} 218.btn-link:hover, 219.btn-link:focus { 220 color: @linkColorHover; 221 text-decoration: underline; 222 background-color: transparent; 223} 224.btn-link[disabled]:hover, 225.btn-link[disabled]:focus { 226 color: @grayDark; 227 text-decoration: none; 228} 229