git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/button-groups.less

   1 //
   2 // Button groups
   3 // --------------------------------------------------
   4
   5 // Button carets
   6 .btn .caret {
   7   border-top-color: @btn-default-color;
   8 }
   9 .dropup .btn .caret {
  10   border-bottom-color: @btn-default-color;
  11 }
  12
  13 // Make the div behave like a button
  14 .btn-group,
  15 .btn-group-vertical {
  16   position: relative;
  17   display: inline-block;
  18   vertical-align: middle; // match .btn alignment given font-size hack above
  19   > .btn {
  20     position: relative;
  21     float: left;
  22     // Bring the "active" button to the front
  23     &:hover,
  24     &:active {
  25       z-index: 2;
  26     }
  27   }
  28 }
  29
  30 // Prevent double borders when buttons are next to each other
  31 .btn-group .btn + .btn {
  32   margin-left: -1px;
  33 }
  34
  35 // Optional: Group multiple button groups together for a toolbar
  36 .btn-toolbar {
  37   .clearfix();
  38
  39   .btn-group {
  40     float: left;
  41   }
  42   // Space out series of button groups
  43   > .btn,
  44   > .btn-group {
  45     + .btn,
  46     + .btn-group {
  47       margin-left: 5px;
  48     }
  49   }
  50 }
  51
  52 .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  53   border-radius: 0;
  54 }
  55
  56 // 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
  57 .btn-group > .btn:first-child {
  58   margin-left: 0;
  59   &:not(:last-child):not(.dropdown-toggle) {
  60     .border-right-radius(0);
  61   }
  62 }
  63 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
  64 .btn-group > .btn:last-child:not(:first-child),
  65 .btn-group > .dropdown-toggle:not(:first-child) {
  66   .border-left-radius(0);
  67 }
  68
  69 // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
  70 .btn-group > .btn-group {
  71   float: left;
  72 }
  73 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  74   border-radius: 0;
  75 }
  76 .btn-group > .btn-group:first-child {
  77   > .btn:last-child,
  78   > .dropdown-toggle {
  79     .border-right-radius(0);
  80   }
  81 }
  82 .btn-group > .btn-group:last-child > .btn:first-child {
  83   .border-left-radius(0);
  84 }
  85
  86 // On active and open, don't show outline
  87 .btn-group .dropdown-toggle:active,
  88 .btn-group.open .dropdown-toggle {
  89   outline: 0;
  90 }
  91
  92
  93
  94 // Split button dropdowns
  95 // ----------------------
  96
  97 // Give the line between buttons some depth
  98 .btn-group > .btn + .dropdown-toggle {
  99   padding-left: 8px;
 100   padding-right: 8px;
 101 }
 102 .btn-group > .btn-large + .dropdown-toggle {
 103   padding-left: 12px;
 104   padding-right: 12px;
 105 }
 106
 107 // The clickable button for toggling the menu
 108 // Remove the gradient and set the same inset shadow as the :active state
 109 .btn-group.open .dropdown-toggle {
 110   .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
 111 }
 112
 113
 114 // Reposition the caret
 115 .btn .caret {
 116   margin-left: 0;
 117 }
 118 // Carets in other button sizes
 119 .btn-large .caret {
 120   border-width: 5px;
 121 }
 122 // Upside down carets for .dropup
 123 .dropup .btn-large .caret {
 124   border-bottom-width: 5px;
 125 }
 126
 127
 128 // Vertical button groups
 129 // ----------------------
 130
 131 .btn-group-vertical > .btn {
 132   display: block;
 133   float: none;
 134   width: 100%;
 135   max-width: 100%;
 136   + .btn {
 137     margin-top: -1px;
 138   }
 139 }
 140 .btn-group-vertical .btn {
 141   &:not(:first-child):not(:last-child) {
 142     border-radius: 0;
 143   }
 144   &:first-child {
 145     .border-bottom-radius(0);
 146   }
 147   &:last-child {
 148     .border-top-radius(0);
 149   }
 150 }
 151
 152
 153 // Justified button groups
 154 // ----------------------
 155
 156 .btn-group-justified {
 157   display: table;
 158   width: 100%;
 159   .btn {
 160     float: none;
 161     display: table-cell;
 162     width: 1%;
 163   }
 164 }
 165
 166
 167 // Checkbox and radio options
 168 .btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
 169 .btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
 170   display: none;
 171 }