libs/bootstrap/less/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   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 }