@nib-styles/v2-buttons
v4.0.0
Published
nib styled buttons.
Downloads
3
Keywords
Readme
@nib-styles/v2-buttons
nib styled buttons.
Installation
npm install --save @nib-styles/v2-buttons
Note: Requires Opens Sans
and Roboto
fonts from Google Fonts:
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:700|Roboto:700' />
Usage
Using mixins
@import "@nib-styles/v2-buttons";
.feature {
&__call-to-action{
@include button('primary', $icon: 'person', $size: 'large')
}
}
<button class="feature__call-to-action">
Add a dependant
</button>
Using compiled classes
@import "@nib-styles/v2-buttons/compiled";
<button class="v2-button v2-button--primary v2-button--large v2-button--icon-on-right">
Add a dependant <i class="v2-icon v2-icon--person v2-icon--smallest v2-icon--offset-descenders"></i>
</button>
See the pattern library or example/example.html a complete list of classes.
Mixins
@include button($type, $color, $icon: false, $size: null);
$type
Required. May beprimary
,secondary
ortertiary
.$color
Required. Dependent on$type
.- Primary:
null
. (Default yellow) - Secondary:
green
,dark-grey
, orlight-grey
. - Tertiary:
green
,grey
orwhite
.
- Primary:
$icon
Optional. Iffalse
no icon is displayed. Iftrue
thechevron-circle-inverse
icon is displayed. May be the name of av2-icon
e.g.person
,gear
,dollar-circle
.$size
Optional. May bemedium
orlarge
.
Changelog
4.0.0
- break: bump version of
v2-icons
3.0.0
- addition: Mixins!
- removed: supplementary buttons
- removed: large button style