mixin for a sweet mobile button

responsive-button.scss

//--------------------------------------------Button mixins------------------------------------------------//

// We need to define a new button-base because there are some font settings like line height we don't always want
// This is because of variable type faces and font-sizes

@mixin responsive-button-base() {
  border-style:$button-border-style;
  border-width:$button-border-width;
}

// Our wrapper mixin for all the settings you'd ever need, and some sensible defaults for everything
@mixin responsive-button-theme($padding: $button-sml, $color: $default-button-color, $radius: $global-radius, $full-width: false, $disabled: false, $is-input: false, $inset-shadow: $inset-shadow, $active: $active) {
  @include responsive-button-base();
  @include button-size($padding, $full-width, $is-input);
  @include button-style($color, $radius, $disabled);
  @include single-transition;

  /**
   * The $active argument only refers to the click behavior
   * our global $inset-shadow var sets whether to include the inset shadow or not
   */

  @if $inset-shadow == true {
    @include inset-shadow($active);
  }
}

@mixin responsive-button($size: 25px, $font-size: 25px, $content: "+", $font-family: $arial, $font-color: #FFF, $radius: 20px) {

  @media #{$tiny} {

    color:transparent;
    width:$size;
    height:$size;
    line-height:$size;
    border-radius:$radius;
    overflow:hidden;
    position:absolute;
    padding:0;
    top:0;
    right:0;

    &:before {
      position:absolute;
      top:0;
      left:0;
      content:$content;
      color:#{$font-color} !important;
      display:block;
      width:$size;
      height:$size;
      line-height:$size;
      text-align:center;
      font-weight:bold;
      font-family: $arial;
      font-size:$font-size;
    }
  }
}