Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Input-group

A layout component for grouping form inputs with adjacent actions or information

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "gap": 0.5em,
  "border-radius" : null,
  "item-min-width" : 0,
  "item-padding-x" : 0.75em,
  "item-padding-y" : null,
  "overlap-margin" : null,
  "field-min-width" : 0,
  "cue-background-color" : rgba(0,0,0,0.1),
  "joined-button-radius-match" : true,
);
File Information
  • File: _input-group.scss
  • Group: input-group
  • Type: variable
  • Lines (comments): 17-27
  • Lines (code): 29-39

Map Properties

Name Type Default Description
gap Dimension 0.5em Gap between items when not joined
border-radius Dimension null Border radius for joined items (and cue when not joined). Defaults to form-theme input-border-radius
item-min-width Dimension 0 Minimum width for items (buttons, cues)
item-padding-x Dimension 0.75em Horizontal padding for cue items
item-padding-y Dimension null Vertical padding for cue items. Defaults to button vertical padding.
overlap-margin Dimension null Negative margin for joined items. Defaults to form-theme border width.
field-min-width Dimension 0 Minimum width for the field item
cue-background-color Color rgba(0,0,0,0.1) Background color for cue items
joined-button-radius-match Color true Whether or not to use the 'border-radius' for input-group vs button's border-radius

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _input-group.scss
  • Group: input-group
  • Type: mixin
  • Lines (comments): 41-44
  • Lines (code): 46-48

Examples

@include ulu.component-input-group-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component stylesheets

File Information
  • File: _input-group.scss
  • Group: input-group
  • Type: mixin
  • Lines (comments): 59-62
  • Lines (code): 64-165

Demo

View

Examples

@include ulu.component-input-group-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _input-group.scss
  • Group: input-group
  • Type: function
  • Lines (comments): 50-53
  • Lines (code): 55-57

Examples

@include ulu.component-input-group-get("property");

Parameters

Name Type Description
$name Map Name of property

Require