1// 2// Button groups 3// -------------------------------------------------- 4 5// Button carets 6// 7// Match the button text color to the arrow/caret for indicating dropdown-ness. 8 9.caret { 10 .btn-default & { 11 border-top-color: @btn-default-color; 12 } 13 .btn-primary &, 14 .btn-success &, 15 .btn-warning &, 16 .btn-danger &, 17 .btn-info & { 18 border-top-color: #fff; 19 } 20} 21.dropup { 22 .btn-default .caret { 23 border-bottom-color: @btn-default-color; 24 } 25 .btn-primary, 26 .btn-success, 27 .btn-warning, 28 .btn-danger, 29 .btn-info { 30 .caret { 31 border-bottom-color: #fff; 32 } 33 } 34} 35 36// Make the div behave like a button 37.btn-group, 38.btn-group-vertical { 39 position: relative; 40 display: inline-block; 41 vertical-align: middle; // match .btn alignment given font-size hack above 42 > .btn { 43 position: relative; 44 float: left; 45 // Bring the "active" button to the front 46 &:hover, 47 &:focus, 48 &:active, 49 &.active { 50 z-index: 2; 51 } 52 &:focus { 53 // Remove focus outline when dropdown JS adds it after closing the menu 54 outline: none; 55 } 56 } 57} 58 59// Prevent double borders when buttons are next to each other 60.btn-group { 61 .btn + .btn, 62 .btn + .btn-group, 63 .btn-group + .btn, 64 .btn-group + .btn-group { 65 margin-left: -1px; 66 } 67} 68 69// Optional: Group multiple button groups together for a toolbar 70.btn-toolbar { 71 .clearfix(); 72 73 .btn-group { 74 float: left; 75 } 76 // Space out series of button groups 77 > .btn, 78 > .btn-group { 79 + .btn, 80 + .btn-group { 81 margin-left: 5px; 82 } 83 } 84} 85 86.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { 87 border-radius: 0; 88} 89 90// 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 91.btn-group > .btn:first-child { 92 margin-left: 0; 93 &:not(:last-child):not(.dropdown-toggle) { 94 .border-right-radius(0); 95 } 96} 97// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it 98.btn-group > .btn:last-child:not(:first-child), 99.btn-group > .dropdown-toggle:not(:first-child) { 100 .border-left-radius(0); 101} 102 103// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) 104.btn-group > .btn-group { 105 float: left; 106} 107.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { 108 border-radius: 0; 109} 110.btn-group > .btn-group:first-child { 111 > .btn:last-child, 112 > .dropdown-toggle { 113 .border-right-radius(0); 114 } 115} 116.btn-group > .btn-group:last-child > .btn:first-child { 117 .border-left-radius(0); 118} 119 120// On active and open, don't show outline 121.btn-group .dropdown-toggle:active, 122.btn-group.open .dropdown-toggle { 123 outline: 0; 124} 125 126 127// Sizing 128// 129// Remix the default button sizing classes into new ones for easier manipulation. 130 131.btn-group-xs > .btn { .btn-xs(); } 132.btn-group-sm > .btn { .btn-sm(); } 133.btn-group-lg > .btn { .btn-lg(); } 134 135 136// Split button dropdowns 137// ---------------------- 138 139// Give the line between buttons some depth 140.btn-group > .btn + .dropdown-toggle { 141 padding-left: 8px; 142 padding-right: 8px; 143} 144.btn-group > .btn-lg + .dropdown-toggle { 145 padding-left: 12px; 146 padding-right: 12px; 147} 148 149// The clickable button for toggling the menu 150// Remove the gradient and set the same inset shadow as the :active state 151.btn-group.open .dropdown-toggle { 152 .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); 153 154 // Show no shadow for `.btn-link` since it has no other button styles. 155 &.btn-link { 156 .box-shadow(none); 157 } 158} 159 160 161// Reposition the caret 162.btn .caret { 163 margin-left: 0; 164} 165// Carets in other button sizes 166.btn-lg .caret { 167 border-width: @caret-width-large @caret-width-large 0; 168 border-bottom-width: 0; 169} 170// Upside down carets for .dropup 171.dropup .btn-lg .caret { 172 border-width: 0 @caret-width-large @caret-width-large; 173} 174 175 176// Vertical button groups 177// ---------------------- 178 179.btn-group-vertical { 180 > .btn, 181 > .btn-group { 182 display: block; 183 float: none; 184 width: 100%; 185 max-width: 100%; 186 } 187 188 // Clear floats so dropdown menus can be properly placed 189 > .btn-group { 190 .clearfix(); 191 > .btn { 192 float: none; 193 } 194 } 195 196 > .btn + .btn, 197 > .btn + .btn-group, 198 > .btn-group + .btn, 199 > .btn-group + .btn-group { 200 margin-top: -1px; 201 margin-left: 0; 202 } 203} 204 205.btn-group-vertical > .btn { 206 &:not(:first-child):not(:last-child) { 207 border-radius: 0; 208 } 209 &:first-child:not(:last-child) { 210 border-top-right-radius: @border-radius-base; 211 .border-bottom-radius(0); 212 } 213 &:last-child:not(:first-child) { 214 border-bottom-left-radius: @border-radius-base; 215 .border-top-radius(0); 216 } 217} 218.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { 219 border-radius: 0; 220} 221.btn-group-vertical > .btn-group:first-child { 222 > .btn:last-child, 223 > .dropdown-toggle { 224 .border-bottom-radius(0); 225 } 226} 227.btn-group-vertical > .btn-group:last-child > .btn:first-child { 228 .border-top-radius(0); 229} 230 231 232 233// Justified button groups 234// ---------------------- 235 236.btn-group-justified { 237 display: table; 238 width: 100%; 239 table-layout: fixed; 240 border-collapse: separate; 241 .btn { 242 float: none; 243 display: table-cell; 244 width: 1%; 245 } 246} 247 248 249// Checkbox and radio options 250[data-toggle="buttons"] > .btn > input[type="radio"], 251[data-toggle="buttons"] > .btn > input[type="checkbox"] { 252 display: none; 253} 254