mazerte/generator-footguard

// Button
//
// Buttons are action items.
//
// Markup:
// <a href="#" class="button {$modifiers}">Link Button</a>
// <button class="button {$modifiers}">Button Element</button>
// <input type="button" class="button {$modifiers}" value="Input Element"/>
//
// :hover                - Highlight the button
// :active               - "Press" the button down when clicked.
// .info                 - Indicate information
//
// Styleguide 1
.button
  background-color: #bbb
  text-decoration: none
  padding: 10px
  cursor: pointer

  &:hover
    background-color: red

  &:active
    background-color: black

  &.info
    background-color: lightblue

// Button corners
//
// Buttons can be as rounded as desired.
//
// Markup:
// <a href="#" class="button {$modifiers}">Link Button</a>
// <button class="button {$modifiers}">Button Element</button>
// <input type="button" class="button {$modifiers}" value="Input Element"/>
//
// .curved                - Indicate slightly rounded buttons
// .rounded               - Indicated circular buttons
//
// Styleguide 1.1
.button
  &.curved
    border-radius: 10px

  &.rounded
    border-radius: 50%