[Summary view] [Print] [Text view]

   1  // Make the div behave like a button
   2  .btn-group,
   3  .btn-group-vertical {
   4    position: relative;
   5    display: inline-flex;
   6    vertical-align: middle; // match .btn alignment given font-size hack above
   7  
   8    > .btn {
   9      position: relative;
  10      flex: 1 1 auto;
  11    }
  12  
  13    // Bring the hover, focused, and "active" buttons to the front to overlay
  14    // the borders properly
  15    > .btn-check:checked + .btn,
  16    > .btn-check:focus + .btn,
  17    > .btn:hover,
  18    > .btn:focus,
  19    > .btn:active,
  20    > .btn.active {
  21      z-index: 1;
  22    }
  23  }
  24  
  25  // Optional: Group multiple button groups together for a toolbar
  26  .btn-toolbar {
  27    display: flex;
  28    flex-wrap: wrap;
  29    justify-content: flex-start;
  30  
  31    .input-group {
  32      width: auto;
  33    }
  34  }
  35  
  36  .btn-group {
  37    // Prevent double borders when buttons are next to each other
  38    > .btn:not(:first-child),
  39    > .btn-group:not(:first-child) {
  40      margin-left: -$btn-border-width;
  41    }
  42  
  43    // Reset rounded corners
  44    > .btn:not(:last-child):not(.dropdown-toggle),
  45    > .btn-group:not(:last-child) > .btn {
  46      @include border-end-radius(0);
  47    }
  48  
  49    // The left radius should be 0 if the button is:
  50    // - the "third or more" child
  51    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
  52    // - part of a btn-group which isn't the first child
  53    > .btn:nth-child(n + 3),
  54    > :not(.btn-check) + .btn,
  55    > .btn-group:not(:first-child) > .btn {
  56      @include border-start-radius(0);
  57    }
  58  }
  59  
  60  // Sizing
  61  //
  62  // Remix the default button sizing classes into new ones for easier manipulation.
  63  
  64  .btn-group-sm > .btn { @extend .btn-sm; }
  65  .btn-group-lg > .btn { @extend .btn-lg; }
  66  
  67  
  68  //
  69  // Split button dropdowns
  70  //
  71  
  72  .dropdown-toggle-split {
  73    padding-right: $btn-padding-x * .75;
  74    padding-left: $btn-padding-x * .75;
  75  
  76    &::after,
  77    .dropup &::after,
  78    .dropend &::after {
  79      margin-left: 0;
  80    }
  81  
  82    .dropstart &::before {
  83      margin-right: 0;
  84    }
  85  }
  86  
  87  .btn-sm + .dropdown-toggle-split {
  88    padding-right: $btn-padding-x-sm * .75;
  89    padding-left: $btn-padding-x-sm * .75;
  90  }
  91  
  92  .btn-lg + .dropdown-toggle-split {
  93    padding-right: $btn-padding-x-lg * .75;
  94    padding-left: $btn-padding-x-lg * .75;
  95  }
  96  
  97  
  98  // The clickable button for toggling the menu
  99  // Set the same inset shadow as the :active state
 100  .btn-group.show .dropdown-toggle {
 101    @include box-shadow($btn-active-box-shadow);
 102  
 103    // Show no shadow for `.btn-link` since it has no other button styles.
 104    &.btn-link {
 105      @include box-shadow(none);
 106    }
 107  }
 108  
 109  
 110  //
 111  // Vertical button groups
 112  //
 113  
 114  .btn-group-vertical {
 115    flex-direction: column;
 116    align-items: flex-start;
 117    justify-content: center;
 118  
 119    > .btn,
 120    > .btn-group {
 121      width: 100%;
 122    }
 123  
 124    > .btn:not(:first-child),
 125    > .btn-group:not(:first-child) {
 126      margin-top: -$btn-border-width;
 127    }
 128  
 129    // Reset rounded corners
 130    > .btn:not(:last-child):not(.dropdown-toggle),
 131    > .btn-group:not(:last-child) > .btn {
 132      @include border-bottom-radius(0);
 133    }
 134  
 135    > .btn ~ .btn,
 136    > .btn-group:not(:first-child) > .btn {
 137      @include border-top-radius(0);
 138    }
 139  }