portal-FE-common/src/styles/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 }