css/bootstrap/button-groups.less

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