git.roojs.org Git - roojs1/blob - scss/bootstrap/_button-group.scss

   1 // stylelint-disable selector-no-qualifying-type
   2
   3 // Make the div behave like a button
   4 .btn-group,
   5 .btn-group-vertical {
   6   position: relative;
   7   display: inline-flex;
   8   vertical-align: middle; // match .btn alignment given font-size hack above
   9
  10   > .btn {
  11     position: relative;
  12     flex: 1 1 auto;
  13
  14     // Bring the hover, focused, and "active" buttons to the front to overlay
  15     // the borders properly
  16     @include hover {
  17       z-index: 1;
  18     }
  19     &:focus,
  20     &:active,
  21     &.active {
  22       z-index: 1;
  23     }
  24   }
  25 }
  26
  27 // Optional: Group multiple button groups together for a toolbar
  28 .btn-toolbar {
  29   display: flex;
  30   flex-wrap: wrap;
  31   justify-content: flex-start;
  32
  33   .input-group {
  34     width: auto;
  35   }
  36 }
  37
  38 .btn-group {
  39   // Prevent double borders when buttons are next to each other
  40   > .btn:not(:first-child),
  41   > .btn-group:not(:first-child) {
  42     margin-left: -$btn-border-width;
  43   }
  44
  45   // Reset rounded corners
  46   > .btn:not(:last-child):not(.dropdown-toggle),
  47   > .btn-group:not(:last-child) > .btn {
  48     @include border-right-radius(0);
  49   }
  50
  51   > .btn:not(:first-child),
  52   > .btn-group:not(:first-child) > .btn {
  53     @include border-left-radius(0);
  54   }
  55 }
  56
  57 // Sizing
  58 //
  59 // Remix the default button sizing classes into new ones for easier manipulation.
  60
  61 .btn-group-sm > .btn { @extend .btn-sm; }
  62 .btn-group-lg > .btn { @extend .btn-lg; }
  63
  64
  65 //
  66 // Split button dropdowns
  67 //
  68
  69 .dropdown-toggle-split {
  70   padding-right: $btn-padding-x * .75;
  71   padding-left: $btn-padding-x * .75;
  72
  73   &::after,
  74   .dropup &::after,
  75   .dropright &::after {
  76     margin-left: 0;
  77   }
  78
  79   .dropleft &::before {
  80     margin-right: 0;
  81   }
  82 }
  83
  84 .btn-sm + .dropdown-toggle-split {
  85   padding-right: $btn-padding-x-sm * .75;
  86   padding-left: $btn-padding-x-sm * .75;
  87 }
  88
  89 .btn-lg + .dropdown-toggle-split {
  90   padding-right: $btn-padding-x-lg * .75;
  91   padding-left: $btn-padding-x-lg * .75;
  92 }
  93
  94
  95 // The clickable button for toggling the menu
  96 // Set the same inset shadow as the :active state
  97 .btn-group.show .dropdown-toggle {
  98   @include box-shadow($btn-active-box-shadow);
  99
 100   // Show no shadow for `.btn-link` since it has no other button styles.
 101   &.btn-link {
 102     @include box-shadow(none);
 103   }
 104 }
 105
 106
 107 //
 108 // Vertical button groups
 109 //
 110
 111 .btn-group-vertical {
 112   flex-direction: column;
 113   align-items: flex-start;
 114   justify-content: center;
 115
 116   > .btn,
 117   > .btn-group {
 118     width: 100%;
 119   }
 120
 121   > .btn:not(:first-child),
 122   > .btn-group:not(:first-child) {
 123     margin-top: -$btn-border-width;
 124   }
 125
 126   // Reset rounded corners
 127   > .btn:not(:last-child):not(.dropdown-toggle),
 128   > .btn-group:not(:last-child) > .btn {
 129     @include border-bottom-radius(0);
 130   }
 131
 132   > .btn:not(:first-child),
 133   > .btn-group:not(:first-child) > .btn {
 134     @include border-top-radius(0);
 135   }
 136 }
 137
 138
 139 // Checkbox and radio options
 140 //
 141 // In order to support the browser's form validation feedback, powered by the
 142 // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
 143 // `display: none;` or `visibility: hidden;` as that also hides the popover.
 144 // Simply visually hiding the inputs via `opacity` would leave them clickable in
 145 // certain cases which is prevented by using `clip` and `pointer-events`.
 146 // This way, we ensure a DOM element is visible to position the popover from.
 147 //
 148 // See https://github.com/twbs/bootstrap/pull/12794 and
 149 // https://github.com/twbs/bootstrap/pull/14559 for more information.
 150
 151 .btn-group-toggle {
 152   > .btn,
 153   > .btn-group > .btn {
 154     margin-bottom: 0; // Override default `<label>` value
 155
 156     input[type="radio"],
 157     input[type="checkbox"] {
 158       position: absolute;
 159       clip: rect(0, 0, 0, 0);
 160       pointer-events: none;
 161     }
 162   }
 163 }