Control group
A series of classes that help align, combine, and group elements together for UI components like button groups or segment controls.
Install
npm install seed-control-group --save
Dependencies
Example
Border, border-radius, and z-index properties are automatically adjusted for elements placed within an .o-contorl-group selector.
Button groups
Using the button component from seed-button.
<div class="o-control-group" role="group">
<button class="c-button">Button</button>
<button class="c-button">Button</button>
<button class="c-button">Button</button>
</div>Full-width items
In order for a particular element to have a (responsive) full-width, the class of .o-control-group__block must be applied.
Input / button combo
<div class="o-control-group" role="group">
<input class="c-input o-control-group__block" value="I'm an input!" />
<button class="c-button">Button!</button>
</div>Input addons
Combining components from seed-input-addons and seed-input.
$
.00
<div class="o-control-group" role="group">
<div class="c-input-addon">$</div>
<input class="c-input o-control-group__block" value="1,000,000,000">
<div class="c-input-addon">.00</div>
</div>Configurations
Below are the default Sass configuration variables for seed-control-group. The variables can be found in the pack’s _config.scss file.
seed-control-group/_config.scss// Namespaces
$seed-control-group-namespace: "o-control-group" !default;
$seed-control-group-block-namespace: "#{$seed-control-group-namespace}__block" !default;