Generated by SassMeister.com.

inuit-beautons-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";

$brand-round: 0;

@mixin e($name) {
  @at-root   #{&}__#{$name} {
    @content;
  }
}
 
@mixin m($name) {
  @at-root   #{&}--#{$name} {
    @content;
  }
}

.btn {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
  border: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 3;
  padding-right: 1em;
  padding-left: 1em;
  border-radius: $brand-round;
}
.btn {
  &,
  &:hover {
    text-decoration: none;
  }
  &:active,
  &:focus {
    outline: none;
  }
}
.btn {
    @include m(small) {
        padding-right: 0.5em;
        padding-left: 0.5em;
        line-height: 2;      
    }
    @include m(large) {
        padding-right: 1.5em;
        padding-left: 1.5em;
        line-height: 4;
    }
    @include m(huge) {
        padding-right: 2em;
        padding-left: 2em;
        line-height: 5;
    }    
    @include m(full) {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        text-align: center;
    }        
    @include m(alpha) { font-size: 3rem; }    
    @include m(beta) { font-size: 2rem; }
    @include m(gamma) { font-size: 1rem; }
    @include m(natural) {
        vertical-align: baseline;
        font-size: inherit;
        line-height: inherit;
        padding-right: 0.5em;
        padding-left: 0.5em;        
    }
    @include m(primary) {}
    @include m(secondary) {}
    @include m(tertiary) {}
    @include m(positive) {
        background-color: #4A993E;
        color: #fff;        
    }
    @include m(negative) {
        background-color: #b33630;
        color: #fff;        
    }
    @include m(inactive) {
        &,
        &:hover,
        &:active,
        &:focus {
            background-color: #ddd;
            color: #777;
            cursor: text;            
        }
    }
    @include m(soft) { border-radius: 200px; }
    @include m(hard) { border-radius: 0;}
}

inuit-beautons-output.css

.btn {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  font-size: 100%;
  cursor: pointer;
  border: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 3;
  padding-right: 1em;
  padding-left: 1em;
  border-radius: 0;
}

.btn, .btn:hover {
  text-decoration: none;
}
.btn:active, .btn:focus {
  outline: none;
}

.btn--small {
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 2;
}
.btn--large {
  padding-right: 1.5em;
  padding-left: 1.5em;
  line-height: 4;
}
.btn--huge {
  padding-right: 2em;
  padding-left: 2em;
  line-height: 5;
}
.btn--full {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}
.btn--alpha {
  font-size: 3rem;
}
.btn--beta {
  font-size: 2rem;
}
.btn--gamma {
  font-size: 1rem;
}
.btn--natural {
  vertical-align: baseline;
  font-size: inherit;
  line-height: inherit;
  padding-right: 0.5em;
  padding-left: 0.5em;
}
.btn--positive {
  background-color: #4A993E;
  color: #fff;
}
.btn--negative {
  background-color: #b33630;
  color: #fff;
}
.btn--inactive, .btn--inactive:hover, .btn--inactive:active, .btn--inactive:focus {
  background-color: #ddd;
  color: #777;
  cursor: text;
}
.btn--soft {
  border-radius: 200px;
}
.btn--hard {
  border-radius: 0;
}