/mizuxe2017/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: 0 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  // Prevent double borders when buttons are next to each other
 27  .btn + .btn,
 28  .btn + .btn-group,
 29  .btn-group + .btn,
 30  .btn-group + .btn-group {
 31    margin-left: -$btn-border-width;
 32  }
 33}
 34
 35// Optional: Group multiple button groups together for a toolbar
 36.btn-toolbar {
 37  display: flex;
 38  flex-wrap: wrap;
 39  justify-content: flex-start;
 40
 41  .input-group {
 42    width: auto;
 43  }
 44}
 45
 46.btn-group {
 47  > .btn:first-child {
 48    margin-left: 0;
 49  }
 50
 51  // Reset rounded corners
 52  > .btn:not(:last-child):not(.dropdown-toggle),
 53  > .btn-group:not(:last-child) > .btn {
 54    @include border-right-radius(0);
 55  }
 56
 57  > .btn:not(:first-child),
 58  > .btn-group:not(:first-child) > .btn {
 59    @include border-left-radius(0);
 60  }
 61}
 62
 63// Sizing
 64//
 65// Remix the default button sizing classes into new ones for easier manipulation.
 66
 67.btn-group-sm > .btn { @extend .btn-sm; }
 68.btn-group-lg > .btn { @extend .btn-lg; }
 69
 70
 71//
 72// Split button dropdowns
 73//
 74
 75.dropdown-toggle-split {
 76  padding-right: $btn-padding-x * .75;
 77  padding-left: $btn-padding-x * .75;
 78
 79  &::after {
 80    margin-left: 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 + .btn,
122  > .btn + .btn-group,
123  > .btn-group + .btn,
124  > .btn-group + .btn-group {
125    margin-top: -$btn-border-width;
126    margin-left: 0;
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:not(:first-child),
136  > .btn-group:not(:first-child) > .btn {
137    @include border-top-radius(0);
138  }
139}
140
141
142// Checkbox and radio options
143//
144// In order to support the browser's form validation feedback, powered by the
145// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
146// `display: none;` or `visibility: hidden;` as that also hides the popover.
147// Simply visually hiding the inputs via `opacity` would leave them clickable in
148// certain cases which is prevented by using `clip` and `pointer-events`.
149// This way, we ensure a DOM element is visible to position the popover from.
150//
151// See https://github.com/twbs/bootstrap/pull/12794 and
152// https://github.com/twbs/bootstrap/pull/14559 for more information.
153
154.btn-group-toggle {
155  > .btn,
156  > .btn-group > .btn {
157    margin-bottom: 0; // Override default `<label>` value
158
159    input[type="radio"],
160    input[type="checkbox"] {
161      position: absolute;
162      clip: rect(0, 0, 0, 0);
163      pointer-events: none;
164    }
165  }
166}