1// 2// Button groups 3// -------------------------------------------------- 4 5 6// Make the div behave like a button 7.btn-group { 8 position: relative; 9 display: inline-block; 10 .ie7-inline-block(); 11 font-size: 0; // remove as part 1 of font-size inline-block hack 12 vertical-align: middle; // match .btn alignment given font-size hack above 13 white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) 14 .ie7-restore-left-whitespace(); 15} 16 17// Space out series of button groups 18.btn-group + .btn-group { 19 margin-left: 5px; 20} 21 22// Optional: Group multiple button groups together for a toolbar 23.btn-toolbar { 24 font-size: 0; // Hack to remove whitespace that results from using inline-block 25 margin-top: @baseLineHeight / 2; 26 margin-bottom: @baseLineHeight / 2; 27 > .btn + .btn, 28 > .btn-group + .btn, 29 > .btn + .btn-group { 30 margin-left: 5px; 31 } 32} 33 34// Float them, remove border radius, then re-add to first and last elements 35.btn-group > .btn { 36 position: relative; 37 .border-radius(0); 38} 39.btn-group > .btn + .btn { 40 margin-left: -1px; 41} 42.btn-group > .btn, 43.btn-group > .dropdown-menu, 44.btn-group > .popover { 45 font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack 46} 47 48// Reset fonts for other sizes 49.btn-group > .btn-mini { 50 font-size: @fontSizeMini; 51} 52.btn-group > .btn-small { 53 font-size: @fontSizeSmall; 54} 55.btn-group > .btn-large { 56 font-size: @fontSizeLarge; 57} 58 59// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match 60.btn-group > .btn:first-child { 61 margin-left: 0; 62 .border-top-left-radius(@baseBorderRadius); 63 .border-bottom-left-radius(@baseBorderRadius); 64} 65// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it 66.btn-group > .btn:last-child, 67.btn-group > .dropdown-toggle { 68 .border-top-right-radius(@baseBorderRadius); 69 .border-bottom-right-radius(@baseBorderRadius); 70} 71// Reset corners for large buttons 72.btn-group > .btn.large:first-child { 73 margin-left: 0; 74 .border-top-left-radius(@borderRadiusLarge); 75 .border-bottom-left-radius(@borderRadiusLarge); 76} 77.btn-group > .btn.large:last-child, 78.btn-group > .large.dropdown-toggle { 79 .border-top-right-radius(@borderRadiusLarge); 80 .border-bottom-right-radius(@borderRadiusLarge); 81} 82 83// On hover/focus/active, bring the proper btn to front 84.btn-group > .btn:hover, 85.btn-group > .btn:focus, 86.btn-group > .btn:active, 87.btn-group > .btn.active { 88 z-index: 2; 89} 90 91// On active and open, don't show outline 92.btn-group .dropdown-toggle:active, 93.btn-group.open .dropdown-toggle { 94 outline: 0; 95} 96 97 98 99// Split button dropdowns 100// ---------------------- 101 102// Give the line between buttons some depth 103.btn-group > .btn + .dropdown-toggle { 104 padding-left: 8px; 105 padding-right: 8px; 106 .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); 107 *padding-top: 5px; 108 *padding-bottom: 5px; 109} 110.btn-group > .btn-mini + .dropdown-toggle { 111 padding-left: 5px; 112 padding-right: 5px; 113 *padding-top: 2px; 114 *padding-bottom: 2px; 115} 116.btn-group > .btn-small + .dropdown-toggle { 117 *padding-top: 5px; 118 *padding-bottom: 4px; 119} 120.btn-group > .btn-large + .dropdown-toggle { 121 padding-left: 12px; 122 padding-right: 12px; 123 *padding-top: 7px; 124 *padding-bottom: 7px; 125} 126 127.btn-group.open { 128 129 // The clickable button for toggling the menu 130 // Remove the gradient and set the same inset shadow as the :active state 131 .dropdown-toggle { 132 background-image: none; 133 .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); 134 } 135 136 // Keep the hover's background when dropdown is open 137 .btn.dropdown-toggle { 138 background-color: @btnBackgroundHighlight; 139 } 140 .btn-primary.dropdown-toggle { 141 background-color: @btnPrimaryBackgroundHighlight; 142 } 143 .btn-warning.dropdown-toggle { 144 background-color: @btnWarningBackgroundHighlight; 145 } 146 .btn-danger.dropdown-toggle { 147 background-color: @btnDangerBackgroundHighlight; 148 } 149 .btn-success.dropdown-toggle { 150 background-color: @btnSuccessBackgroundHighlight; 151 } 152 .btn-info.dropdown-toggle { 153 background-color: @btnInfoBackgroundHighlight; 154 } 155 .btn-inverse.dropdown-toggle { 156 background-color: @btnInverseBackgroundHighlight; 157 } 158} 159 160 161// Reposition the caret 162.btn .caret { 163 margin-top: 8px; 164 margin-left: 0; 165} 166// Carets in other button sizes 167.btn-large .caret { 168 margin-top: 6px; 169} 170.btn-large .caret { 171 border-left-width: 5px; 172 border-right-width: 5px; 173 border-top-width: 5px; 174} 175.btn-mini .caret, 176.btn-small .caret { 177 margin-top: 8px; 178} 179// Upside down carets for .dropup 180.dropup .btn-large .caret { 181 border-bottom-width: 5px; 182} 183 184 185 186// Account for other colors 187.btn-primary, 188.btn-warning, 189.btn-danger, 190.btn-info, 191.btn-success, 192.btn-inverse { 193 .caret { 194 border-top-color: @white; 195 border-bottom-color: @white; 196 } 197} 198 199 200 201// Vertical button groups 202// ---------------------- 203 204.btn-group-vertical { 205 display: inline-block; // makes buttons only take up the width they need 206 .ie7-inline-block(); 207} 208.btn-group-vertical > .btn { 209 display: block; 210 float: none; 211 max-width: 100%; 212 .border-radius(0); 213} 214.btn-group-vertical > .btn + .btn { 215 margin-left: 0; 216 margin-top: -1px; 217} 218.btn-group-vertical > .btn:first-child { 219 .border-radius(@baseBorderRadius @baseBorderRadius 0 0); 220} 221.btn-group-vertical > .btn:last-child { 222 .border-radius(0 0 @baseBorderRadius @baseBorderRadius); 223} 224.btn-group-vertical > .btn-large:first-child { 225 .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0); 226} 227.btn-group-vertical > .btn-large:last-child { 228 .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge); 229} 230