Modules
Input
This module controls the appearance and states of input, select, textarea, checkbox, radio.
Usage #
There are no helper classes or modifiers needed to display input, select, textarea in default state.
<input />
<select></select>
<textarea></textarea>
<input type="checkbox">
<input type="radio">
Size #
By default, input, select, and textarea have two sizes, regular and large.
The large size is set for all controls with the input-large class.
<input class="input-large" />
<select class="input-large"></select>
<textare class="input-large"a></textarea>
Change size
You can change the default input sizes to what you want. To do this, extend the type size and input scales by replacing values. See also how to work with text size and scales for modules.
// =Scales
$scales: map-extend($scales, (
type: (
input: (
large: 32px 1.5
)
),
input: (
large: 64px
)
));
As a result, the large input will get new properties and will look different than the default one.
<input class="input-large">
Add size
You can add your own input size. To do this, extend the type size and input scales by adding the new modifier and values. See also how to work with text size and scales for modules.
// =Scales
$scales: map-extend($scales, (
type: (
input: (
mega: 40px 1.5
)
),
input: (
mega: 64px
)
));
Now add the values for this variant of the input. For example, to add padding or other appearance parameters. See also how to work with variants for modules.
// =Variants
$variants: map-extend($variants, (
input: (
mega: (
padding: 0.3em 0.25em
)
)
));
As a result, Superkube will automatically generate a input-mega modifier with a new size.
<input class="input-mega">
Width #
You can change the width of input, select, textarea using the width module.
<input class="w-100">
<input class="w-75">
<input class="w-50">
Light #
Superkube has a helper input-light class for displaying inputs on dark backgrounds.
<label class="text-light">...</label>
<input class="input-light">
<label class="text-light">...</label>
<select class="input-light"></select>
<label class="text-light">...</label>
<textarea class="input-light"></textarea>
States #
Set the disabled attribute to turn on the disabled state for inputs.
<input disabled>
<select disabled></select>
<textare disabled></textarea>
<label class="checkbox disabled">
<input type="checkbox" disabled> Checkbox
</label>
<label class="checkbox disabled">
<input type="radio" disabled> Radio
</label>
Use the input-error class to show those inputs that have input errors.
<input class="input-error" />
<select class="input-error"></select>
<textare class="input-error"a></textarea>
<input type="checkbox" class="input-error">
<input type="radio" class="input-error">
Add state
To add a new color for a module, first make sure that it is in the color palette.
If not, add a new color to $palette.
Now extend the colors and variants of the module with a new modifier and add colors from the palette.
See also how to work with colors and variants for modules.
// =Colors
$colors: map-extend($colors, (
input: (
success: (
base: (
color: palette(positive, dark),
border-color: palette(positive, base)
),
focus: (
border-color: palette(positive, base),
shadow: palette(positive, base)
)
)
)
));
// =Variants
$variants: map-extend($variants, (
input: (
success: (
focus: (
box-shadow: 0 0 2px color(input, success, focus, shadow)
)
)
)
));
Also add state for checkboxes and radios to your SCSS.
input[type="radio"],
input[type="checkbox"] {
&.input-success {
outline: 2px solid color(input, success, base, border-color);
}
}
As a result, Superkube will generate an input-success class with the new inputs state.
<input class="input-success" />
<select class="input-success"></select>
<textare class="input-success"a></textarea>
<input type="checkbox" class="input-success">
<input type="radio" class="input-success">
Addon #
Use the .input-addon class to append or prepend an icon or text.
// prepend
<div class="form-item">
<label>Input</label>
<div class="input-addon">
<span class="input-addon-item">$</span>
<input type="text" />
</div>
</div>
// append
<div class="form-item">
<label>Input</label>
<div class="input-addon">
<input type="text" />
<span class="input-addon-item icon-16">
<svg ...>
</span>
</div>
</div>
This also works with buttons.
<div class="form-item">
<label>Input</label>
<div class="input-addon">
<input type="text" />
<button class="button button-primary">Save</button>
</div>
</div>
Use the .input-addon-large class with input large variants.
<div class="form-item">
<label>Input</label>
<div class="input-addon input-addon-large">
<span class="input-addon-item">
<svg ...>
</span>
<input type="text" class="input-large" />
</div>
</div>
Inner addon
User the inner-addon wrapper to place text or an icon inside the input.
// left
<div class="form-item">
<label>Input</label>
<div class="inner-addon">
<span class="inner-addon-item text-muted">$</span>
<input type="text" class="pl-7" />
</div>
</div>
// right
<div class="form-item">
<label>Input</label>
<div class="inner-addon inner-addon-right">
<input type="text" class="pr-7" />
<span class="inner-addon-item text-muted">$</span>
</div>
</div>
// both
<div class="form-item">
<label>Input</label>
<div class="inner-addon inner-addon-both">
<span class="inner-addon-item icon-16">
<svg ...>
</span>
<input type="text" class="pr-7 pl-8" />
<span class="inner-addon-item text-muted">$</span>
</div>
</div>
Use the inner-addon-circle modifier to round the corners of the input.
Use inner-addon-clickable to make an icon, link, or text clickable inside the addon.
<div class="form-item">
<label>Input</label>
<div class="inner-addon inner-addon-circle inner-addon-both">
<span class="inner-addon-item icon-16">
<svg ...>
</span>
<input type="text" class="r-circle px-9" />
<span class="inner-addon-item inner-addon-clickable">
<span class="close"></span>
</span>
</div>
</div>
Variables #
The default properties and colors of the module are shown below. These are all specified in the source SCSS variables. This is here for clarity and to simplify modification and overriding of values.
// =Type
$scales: (
type: (
input: (
default: 15px 1.5,
large: 21px 1.5
)
),
input: (
base: 42px,
large: 52px
)
);
// =Colors
$colors: (
input: (
default: (
base: (
color: palette(neutral, darker),
border-color: palette(neutral, mid),
background-color: palette(white)
),
focus: (
border-color: palette(active, light),
shadow: rgba(palette(active, base), .3)
)
),
light: (
base: (
color: palette(white-o, 90),
border-color: palette(white-o, 25),
background-color: palette(white-o, 7)
),
focus: (
border-color: palette(white-o, 50),
shadow: palette(white-o, 30)
)
),
error: (
base: (
color: palette(negative, dark),
border-color: palette(negative, base)
),
focus: (
border-color: palette(negative, base),
shadow: rgba(palette(negative, base), .3)
)
)
),
input-addon: (
default: (
item: (
base: (
color: palette(black-o, 60),
background-color: palette(neutral, lighter)
)
)
)
)
);
// =Variants
$variants: (
input: (
default: (
base: (
border-radius: radius(base),
padding: 0.3em 0.5em,
border-width: 1px,
border-style: solid
),
focus: (
box-shadow: 0 0 4px color(input, default, focus, shadow)
)
),
large: (
border-radius: radius(base),
padding: 0.3em 0.4em
),
error: (
focus: (
box-shadow: 0 0 4px color(input, error, focus, shadow)
)
)
),
input-addon: (
default: (
item: (
base: (
padding: 0 0.85em,
border-radius: radius(base)
)
)
)
),
inner-addon: (
default: (
item: (
base: (
padding: 0 0.6em
)
)
),
circle: (
item: (
base: (
padding: 0 0.85em
)
)
)
)
);