codekingpro/portable-devtools

1// stylelint-disable selector-no-qualifying-type2 3// Make the div behave like a button4.btn-group,5.btn-group-vertical {6  position: relative;7  display: inline-flex;8  vertical-align: middle; // match .btn alignment given font-size hack above9 10  > .btn {11    position: relative;12    flex: 1 1 auto;13 14    // Bring the hover, focused, and "active" buttons to the front to overlay15    // the borders properly16    @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 toolbar28.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 other40  > .btn:not(:first-child),41  > .btn-group:not(:first-child) {42    margin-left: -$btn-border-width;43  }44 45  // Reset rounded corners46  > .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// Sizing58//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 dropdowns67//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 menu96// Set the same inset shadow as the :active state97.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 groups109//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 corners127  > .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 options140//141// In order to support the browser's form validation feedback, powered by the142// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use143// `display: none;` or `visibility: hidden;` as that also hides the popover.144// Simply visually hiding the inputs via `opacity` would leave them clickable in145// 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 and149// 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>` value155 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}164