less/button-groups.less

   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 }