JordanHatch/maslow-redux

@mixin button {
  background: #ebebeb;
  border: none;
  border-bottom: .25em solid rgba(0,0,0,0.3);
  border-radius: 0px;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 1.1em;
  font-weight: 600;
  padding: .5em 1em;
  vertical-align: top;

  &, &:link, &:hover, &:active, &:focus {
    text-decoration: none;
  }

  &:hover, &:active, &:focus {
    background-color: darken(#ebebeb, 5%);
  }
}

@mixin button-primary {
  @include button;
  background-color: $button-primary-color;

  &, &:hover, &:active, &:focus {
    color: $white;
  }

  &:hover, &:active, &:focus {
    background-color: darken($button-primary-color, 5%);
  }
}

@mixin button-danger {
  @include button;
  background-color: $button-danger-color;

  &, &:hover, &:active, &:focus {
    color: $white;
  }

  &:hover, &:active, &:focus {
    background-color: darken($button-danger-color, 5%);
  }
}

@mixin button-small {
  font-size: .93em;
  padding: .2em .8em;
}

.button, .btn {
  &, &a, &a:link, &a:visited {
    @include button;
  }
}
.button-primary, .btn.btn-primary {
  &, &a, &a:link, &a:visited {
    @include button-primary;
  }
}
.button-danger, .btn.btn-danger {
  &, &a, &a:link, &a:visited {
    @include button-danger;
  }
}

//
//
// .btn {
//   &, &a {
//     &, &:hover, &:active {
//       border: 0;
//       border-bottom: .25em solid rgba(0,0,0,0.3);
//       border-radius: 0px;
//       font-size: 1.1em;
//       color: #000;
//       font-weight: 500;
//       background: #ebebeb;
//     }
//
//     &:hover, &:active {
//       background: darken(#ebebeb, 5%);
//     }
//
//     &.btn-primary, &.btn-danger {
//       color: #fff;
//     }
//   }
// }

// .btn.btn-primary {
//   &, &a {
//     background-color: $button-primary-color;
//
//     &, &:hover, &:active {
//       border-bottom: .25em solid rgba(0,0,0,0.3);
//     }
//
//     &:hover, &:active {
//       background-color: darken($button-primary-color, 5%);
//     }
//   }
// }
// .btn.btn-danger {
//   &, &a {
//     background-color: $button-danger-color;
//
//     &, &:hover, &:active {
//       border-bottom: .25em solid rgba(0,0,0,0.3);
//     }
//
//     &:hover, &:active {
//       background-color: darken($button-danger-color, 5%);
//     }
//   }
// }
//
// .button-group {
//   float: right;
// }