themes/default/less/button-groups.less

   1 // BUTTON GROUPS
   2 // -------------
   3
   4
   5 // Make the div behave like a button
   6 .btn-group {
   7   position: relative;
   8   .clearfix(); // clears the floated buttons
   9   .ie7-restore-left-whitespace();
  10 }
  11
  12 // Space out series of button groups
  13 .btn-group + .btn-group {
  14   margin-left: 5px;
  15 }
  16
  17 // Optional: Group multiple button groups together for a toolbar
  18 .btn-toolbar {
  19   margin-top: @baseLineHeight / 2;
  20   margin-bottom: @baseLineHeight / 2;
  21   .btn-group {
  22     display: inline-block;
  23     .ie7-inline-block();
  24   }
  25 }
  26
  27 // Float them, remove border radius, then re-add to first and last elements
  28 .btn-group .btn {
  29   position: relative;
  30   float: left;
  31   margin-left: -1px;
  32   .border-radius(0);
  33 }
  34
  35
  36 // 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
  37 .btn-group .btn:first-child {
  38   margin-left: 0;
  39      -webkit-border-top-left-radius: 3px;
  40          -moz-border-radius-topleft: 3px;
  41              border-top-left-radius: 3px;
  42   -webkit-border-bottom-left-radius: 3px;
  43       -moz-border-radius-bottomleft: 3px;
  44           border-bottom-left-radius: 3px;
  45 }
  46 .btn-group .btn:last-child,
  47 .btn-group .dropdown-toggle {
  48      -webkit-border-top-right-radius: 3px;
  49          -moz-border-radius-topright: 3px;
  50              border-top-right-radius: 3px;
  51   -webkit-border-bottom-right-radius: 3px;
  52       -moz-border-radius-bottomright: 3px;
  53           border-bottom-right-radius: 3px;
  54 }
  55
  56
  57 // Reset corners for large buttons
  58 .btn-group .btn.large:first-child {
  59   margin-left: 0;
  60      -webkit-border-top-left-radius: 6px;
  61          -moz-border-radius-topleft: 6px;
  62              border-top-left-radius: 6px;
  63   -webkit-border-bottom-left-radius: 6px;
  64       -moz-border-radius-bottomleft: 6px;
  65           border-bottom-left-radius: 6px;
  66 }
  67 .btn-group .btn.large:last-child,
  68 .btn-group .large.dropdown-toggle {
  69      -webkit-border-top-right-radius: 6px;
  70          -moz-border-radius-topright: 6px;
  71              border-top-right-radius: 6px;
  72   -webkit-border-bottom-right-radius: 6px;
  73       -moz-border-radius-bottomright: 6px;
  74           border-bottom-right-radius: 6px;
  75 }
  76
  77 // On hover/focus/active, bring the proper btn to front
  78 .btn-group .btn:hover,
  79 .btn-group .btn:focus,
  80 .btn-group .btn:active,
  81 .btn-group .btn.active {
  82   z-index: 2;
  83 }
  84
  85 // On active and open, don't show outline
  86 .btn-group .dropdown-toggle:active,
  87 .btn-group.open .dropdown-toggle {
  88   outline: 0;
  89 }
  90
  91
  92
  93 // Split button dropdowns
  94 // ----------------------
  95
  96 // Give the line between buttons some depth
  97 .btn-group .dropdown-toggle {
  98   @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.1);
  99   .box-shadow(@shadow);
 100   *padding-top: 5px;
 101   *padding-bottom: 5px;
 102 }
 103
 104 .btn-group.open {
 105   // IE7's z-index only goes to the nearest positioned ancestor, which would
 106   // make the menu appear below buttons that appeared later on the page
 107   *z-index: @zindexDropdown;
 108
 109   // Reposition menu on open and round all corners
 110   .dropdown-menu {
 111     display: block;
 112     margin-top: 1px;
 113     .border-radius(3px);
 114   }
 115
 116   .dropdown-toggle {
 117     background-image: none;
 118     @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.05);
 119     .box-shadow(@shadow);
 120   }
 121 }
 122
 123 // Reposition the caret
 124 .btn .caret {
 125   margin-top: 7px;
 126   margin-left: 0;
 127 }
 128 .btn:hover .caret,
 129 .open.btn-group .caret {
 130   .opacity(100);
 131 }
 132
 133
 134 // Account for other colors
 135 .btn-primary,
 136 .btn-danger,
 137 .btn-info,
 138 .btn-success,
 139 .btn-inverse {
 140   .caret {
 141     border-top-color: @white;
 142     .opacity(75);
 143   }
 144 }
 145
 146 // Small button dropdowns
 147 .btn-small .caret {
 148   margin-top: 3px;
 149 }
 150