Control

Pack name: seed-control

Control config pack for Seed

Contents

Install

npm install seed-control --save

Dependencies


About

seed-control is a config pack designed to provide consistent size variables to other control components, such as inputs and buttons.


Configuration

Below are the default variables set for seed-control:

seed-control/_config.scss
$seed-control-size-default: 36px !default;

$seed-control-sizes: (
  sm: 28px,
  md: $seed-control-size-default,
  lg: 52px
) !default;

Customizing

You can modify the default variables of seed-control by defining them before you import the seed-control pack in your Sass setup.

scss/configs/_seed-control.scss
// Customizing seed-control sizes
$seed-control-sizes: (
  xs: 20px,
  sm: 28px,
  md: 32px,
  lg: 40px,
  xl: 54px
);

// Import seed-control
@import "pack/seed-control/_index";

Just be aware that other Sass code that use any of the seed-control variables will be affected (e.g. the seed-input pack).


Usage

It is recommended you use the _get() function from seed-dash to retrieve variables from the seed-control config.

_button.scss
// Dependencies
@import "pack/seed-control/_index";
@import "pack/seed-dash/_index";

.button {
  height: _get($seed-control-sizes, md);
}
button.css
.button {
  height: 36px;
}