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