SCSS button mixins clean enough for a vato's pressed Pendleton.
Add this line to your application's Gemfile:
gem 'vato'
And then execute:
$ bundle
Add the vato-button
mixin on links, buttons and submit inputs.
a, button, input[type=submit] {
@include vato-button;
}
You can specify the theme and border radius.
button {
@include vato-button(red, .2em);
}
By default, theme defaults to flat-white
and border to 0
.
Add FontAwesome icons by adding the vato-icon
mixin.
You can specify the icon name, position (left or right) and border radius.
button {
@include vato-button(red, .2em);
@include vato-icon(home, right, .8em);
}
By default, icon name defaults to home
, position defaults to left
and border radius to 2.3em
.
The following is an example of how to set up a button group.
nav {
a {
@include vato-button(yellow);
}
a.home-button {
@include vato-icon(home);
}
a.contact-button {
@include vato-icon(coffee);
}
a.about-button {
@include vato-icon(envelope);
}
@include vato-button-group(.3em);
}
The vato-button-group
mixin takes the border radius as its argument and defaults to 0
.
The mixin must be placed after the button styles to ensure border radii and positioning directives on the individual buttons overridden by the group style.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request