github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/button-groups.less (about)

     1  //
     2  // Button groups
     3  // --------------------------------------------------
     4  
     5  // Make the div behave like a button
     6  .btn-group,
     7  .btn-group-vertical {
     8    position: relative;
     9    display: inline-block;
    10    vertical-align: middle; // match .btn alignment given font-size hack above
    11    > .btn {
    12      position: relative;
    13      float: left;
    14      // Bring the "active" button to the front
    15      &:hover,
    16      &:focus,
    17      &:active,
    18      &.active {
    19        z-index: 2;
    20      }
    21      &:focus {
    22        // Remove focus outline when dropdown JS adds it after closing the menu
    23        outline: none;
    24      }
    25    }
    26  }
    27  
    28  // Prevent double borders when buttons are next to each other
    29  .btn-group {
    30    .btn + .btn,
    31    .btn + .btn-group,
    32    .btn-group + .btn,
    33    .btn-group + .btn-group {
    34      margin-left: -1px;
    35    }
    36  }
    37  
    38  // Optional: Group multiple button groups together for a toolbar
    39  .btn-toolbar {
    40    margin-left: -5px; // Offset the first child's margin
    41    &:extend(.clearfix all);
    42  
    43    .btn-group,
    44    .input-group {
    45      float: left;
    46    }
    47    > .btn,
    48    > .btn-group,
    49    > .input-group {
    50      margin-left: 5px;
    51    }
    52  }
    53  
    54  .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    55    border-radius: 0;
    56  }
    57  
    58  // 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
    59  .btn-group > .btn:first-child {
    60    margin-left: 0;
    61    &:not(:last-child):not(.dropdown-toggle) {
    62      .border-right-radius(0);
    63    }
    64  }
    65  // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
    66  .btn-group > .btn:last-child:not(:first-child),
    67  .btn-group > .dropdown-toggle:not(:first-child) {
    68    .border-left-radius(0);
    69  }
    70  
    71  // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
    72  .btn-group > .btn-group {
    73    float: left;
    74  }
    75  .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
    76    border-radius: 0;
    77  }
    78  .btn-group > .btn-group:first-child {
    79    > .btn:last-child,
    80    > .dropdown-toggle {
    81      .border-right-radius(0);
    82    }
    83  }
    84  .btn-group > .btn-group:last-child > .btn:first-child {
    85    .border-left-radius(0);
    86  }
    87  
    88  // On active and open, don't show outline
    89  .btn-group .dropdown-toggle:active,
    90  .btn-group.open .dropdown-toggle {
    91    outline: 0;
    92  }
    93  
    94  
    95  // Sizing
    96  //
    97  // Remix the default button sizing classes into new ones for easier manipulation.
    98  
    99  .btn-group-xs > .btn { &:extend(.btn-xs); }
   100  .btn-group-sm > .btn { &:extend(.btn-sm); }
   101  .btn-group-lg > .btn { &:extend(.btn-lg); }
   102  
   103  
   104  // Split button dropdowns
   105  // ----------------------
   106  
   107  // Give the line between buttons some depth
   108  .btn-group > .btn + .dropdown-toggle {
   109    padding-left: 8px;
   110    padding-right: 8px;
   111  }
   112  .btn-group > .btn-lg + .dropdown-toggle {
   113    padding-left: 12px;
   114    padding-right: 12px;
   115  }
   116  
   117  // The clickable button for toggling the menu
   118  // Remove the gradient and set the same inset shadow as the :active state
   119  .btn-group.open .dropdown-toggle {
   120    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
   121  
   122    // Show no shadow for `.btn-link` since it has no other button styles.
   123    &.btn-link {
   124      .box-shadow(none);
   125    }
   126  }
   127  
   128  
   129  // Reposition the caret
   130  .btn .caret {
   131    margin-left: 0;
   132  }
   133  // Carets in other button sizes
   134  .btn-lg .caret {
   135    border-width: @caret-width-large @caret-width-large 0;
   136    border-bottom-width: 0;
   137  }
   138  // Upside down carets for .dropup
   139  .dropup .btn-lg .caret {
   140    border-width: 0 @caret-width-large @caret-width-large;
   141  }
   142  
   143  
   144  // Vertical button groups
   145  // ----------------------
   146  
   147  .btn-group-vertical {
   148    > .btn,
   149    > .btn-group,
   150    > .btn-group > .btn {
   151      display: block;
   152      float: none;
   153      width: 100%;
   154      max-width: 100%;
   155    }
   156  
   157    // Clear floats so dropdown menus can be properly placed
   158    > .btn-group {
   159      &:extend(.clearfix all);
   160      > .btn {
   161        float: none;
   162      }
   163    }
   164  
   165    > .btn + .btn,
   166    > .btn + .btn-group,
   167    > .btn-group + .btn,
   168    > .btn-group + .btn-group {
   169      margin-top: -1px;
   170      margin-left: 0;
   171    }
   172  }
   173  
   174  .btn-group-vertical > .btn {
   175    &:not(:first-child):not(:last-child) {
   176      border-radius: 0;
   177    }
   178    &:first-child:not(:last-child) {
   179      border-top-right-radius: @border-radius-base;
   180      .border-bottom-radius(0);
   181    }
   182    &:last-child:not(:first-child) {
   183      border-bottom-left-radius: @border-radius-base;
   184      .border-top-radius(0);
   185    }
   186  }
   187  .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
   188    border-radius: 0;
   189  }
   190  .btn-group-vertical > .btn-group:first-child:not(:last-child) {
   191    > .btn:last-child,
   192    > .dropdown-toggle {
   193      .border-bottom-radius(0);
   194    }
   195  }
   196  .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
   197    .border-top-radius(0);
   198  }
   199  
   200  
   201  
   202  // Justified button groups
   203  // ----------------------
   204  
   205  .btn-group-justified {
   206    display: table;
   207    width: 100%;
   208    table-layout: fixed;
   209    border-collapse: separate;
   210    > .btn,
   211    > .btn-group {
   212      float: none;
   213      display: table-cell;
   214      width: 1%;
   215    }
   216    > .btn-group .btn {
   217      width: 100%;
   218    }
   219  }
   220  
   221  
   222  // Checkbox and radio options
   223  [data-toggle="buttons"] > .btn > input[type="radio"],
   224  [data-toggle="buttons"] > .btn > input[type="checkbox"] {
   225    display: none;
   226  }