Foundation - Button Group SASS Reference

Description

You can change the styles of the components by using SASS Reference.

Variables

The following table lists the SASS variables in project's settings file that makes the component's default styles to get customized.

Sr.No. Name & Description Type Default Value
1

$buttongroup-margin

It represents margin for button groups.

 Number 1rem
2

$buttongroup-spacing

It represents margin between every buttons in button group.

 Border 1px
3

$buttongroup-child-selector

It represents the selector for the buttons within a button group.

 String '.button'
4

$buttongroup-expand-max

It represents maximum buttons which can be in button group with even-width.

 Number 6

Mixins

To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.

button-group

@include button-group($child-selector);

It adds styles for a container of button group. The following table lists the parameter used for this purpose.

Sr.No. Parameter & Description Type Default Value
1

$child-selector

It represents the selector for the buttons within a button group.

 String $buttongroup-child-selector

button-group-expand

@include button-group-expand($count, $selector);

A full-width button group is created, which makes every button having equal width. It uses parameters, which are listed in the following table.

Sr.No. Parameter & Description Type Default Value
1

$count

Represents number of buttons within the button group. Setting it to auto, will generate CSS that considers many number of buttons.

 Keyword or Number auto
2

$selector

Represents the selector for the buttons within a button group.

 String $buttongroup-child-selector

button-group-stack

@include button-group-stack($selector);

It stacks the buttons in a group. The following table lists the parameter used for this purpose.

Sr.No. Parameter & Description Type Default Value
1

$selector

Represents the selector for the buttons within a button group.

 String $buttongroup-child-selector

button-group-unstack

@include button-group-unstack($selector);

It un-stacks the buttons in a group. The following table lists the parameter used for this purpose.

Sr.No. Parameter & Description Type Default Value
1

$selector

Represents the selector for the buttons within a button group.

 String $buttongroup-child-selector
foundation_basic_controls.htm
Advertisements