Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="content">
<button class="btn btn--default btn--tiny">Button</button>
<button class="btn btn--default-outline btn--tiny">Button</button>
<br>
<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default-outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default-outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default-outline btn--medium">Button</button>
<br>

<button class="btn btn--default btn--large">Button</button>
<button class="btn btn--default-outline btn--large">Button</button>
<br><br>
<button class="btn btn--success btn--small">Button</button>
<button class="btn btn--success-outline btn--small">Button</button>
<br>

<button class="btn btn--success btn--regular">Button</button>
<button class="btn btn--success-outline btn--regular">Button</button>
<br>

<button class="btn btn--success btn--medium">Button</button>
<button class="btn btn--success-outline btn--medium">Button</button>
<br>

<button class="btn btn--success btn--large">Button</button>
<button class="btn btn--success-outline btn--large">Button</button>
<br><br>
<button class="btn btn--warning btn--small">Button</button>
<button class="btn btn--warning-outline btn--small">Button</button>
<br>

<button class="btn btn--warning btn--regular">Button</button>
<button class="btn btn--warning-outline btn--regular">Button</button>
<br>

<button class="btn btn--warning btn--medium">Button</button>
<button class="btn btn--warning-outline btn--medium">Button</button>
<br>

<button class="btn btn--warning btn--large">Button</button>
<button class="btn btn--warning-outline btn--large">Button</button>
<br><br>
<button class="btn btn--error btn--small">Button</button>
<button class="btn btn--error-outline btn--small">Button</button>
<br>

<button class="btn btn--error btn--regular">Button</button>
<button class="btn btn--error-outline btn--regular">Button</button>
<br>

<button class="btn btn--error btn--medium">Button</button>
<button class="btn btn--error-outline btn--medium">Button</button>
<br>

<button class="btn btn--error btn--large">Button</button>
<button class="btn btn--error-outline btn--large">Button</button>
<br><br>

</div>
<div class="content">
<input class="input input--default input--tiny" placeholder="input" />
<br>
<input class="input input--default input--small" placeholder="input" />
<br>

<input class="input input--default input--regular" placeholder="input" />
<br>

<input class="input input--default input--medium" placeholder="input" />
<br>

<input class="input input--default input--large" placeholder="input" />
<br><br>
<input class="input input--success input--small" placeholder="input" />
<br>

<input class="input input--success input--regular" placeholder="input" />
<br>

<input class="input input--success input--medium" placeholder="input" />
<br>

<input class="input input--success input--large" placeholder="input" />
<br><br>
<input class="input input--warning input--small" placeholder="input" />
<br>

<input class="input input--warning input--regular" placeholder="input" />
<br>

<input class="input input--warning input--medium" placeholder="input" />
<br>

<input class="input input--warning input--large" placeholder="input" />
<br><br>
<input class="input input--error input--small" placeholder="input" />
<br>

<input class="input input--error input--regular" placeholder="input" />
<br>

<input class="input input--error input--medium" placeholder="input" />
<br>

<input class="input input--error input--large" placeholder="input" />
</div>

<div class="content">
<div class="alert alert--default alert--tiny">Alert message</div><br>
<div class="alert alert--default alert--small">Alert message</div><br>
<div class="alert alert--default alert--regular">Alert message</div><br>
<div class="alert alert--default alert--medium">Alert message</div><br>
<div class="alert alert--default alert--large">Alert message</div>
<br><br>
<div class="alert alert--success alert--small">Alert message</div><br>
<div class="alert alert--success alert--regular">Alert message</div><br>
<div class="alert alert--success alert--medium">Alert message</div><br>
<div class="alert alert--success alert--large">Alert message</div>
<br><br>
<div class="alert alert--warning alert--small">Alert message</div><br>
<div class="alert alert--warning alert--regular">Alert message</div><br>
<div class="alert alert--warning alert--medium">Alert message</div><br>
<div class="alert alert--warning alert--large">Alert message</div>
<br><br>
<div class="alert alert--error alert--small">Alert message</div><br>
<div class="alert alert--error alert--regular">Alert message</div><br>
<div class="alert alert--error alert--medium">Alert message</div><br>
<div class="alert alert--error alert--large">Alert message</div>
<br><br>

</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

/*------------------------------------*\
  VARIABLE
\*------------------------------------*/
$UI_sizing_ratio: 1.2;

$UI_size: (
  tiny 1 / $UI_sizing_ratio / $UI_sizing_ratio,
  small 1 / $UI_sizing_ratio,
  regular 1, 
  medium 1 * $UI_sizing_ratio, 
  large 1 * $UI_sizing_ratio * $UI_sizing_ratio
);

$UI_state: (
  default #73C4F2,
  warning #FFAA4A,
  error #F51F21,
  success #00C55D
);

$base-font-size: 14px;
$base-line-height: 1.5714285714;

$base-radius: 3px;
$button-radius: $base-radius;
$form-radius: $base-radius;


/*------------------------------------*\
  BASE
\*------------------------------------*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  font-family: DIN;
  font-weight: regular;
  font-size: $base-font-size;
  line-height: $base-line-height;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: $base-line-height;
}


/*------------------------------------*\
  MIXIN
\*------------------------------------*/
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value * $base-font-size};

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  } 

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  } 

  #{$property}: $pxValues; 
  #{$property}: $remValues;
}

@mixin mm($modifier, $extend-from-parent: false) {
  @at-root {
    $selector: nth(&, 1);
    $direct-parent: nth($selector, length($selector));
    @if $extend-from-parent == true {
      #{$direct-parent}--#{$modifier} { @extend #{$direct-parent}; }
    }
    #{&}--#{$modifier} { @content; }
  }
}


/*------------------------------------*\
  BUTTON - mixin
\*------------------------------------*/
@mixin button ($colour) {
  $colour-lightness: lightness($colour);
  background: $colour;
  border: 1px solid $colour;
  &:hover { background: lighten($colour, 10 - $colour-lightness/10); }
  &:active { background: darken($colour, 10 - $colour-lightness/10); }
}

@mixin button-outline($colour) {
  $colour-lightness: lightness($colour);
  border: 1px solid $colour;
  color: $colour;
  background: white;
  &:hover { background: lighten($colour, 95 - $colour-lightness); }
  &:active { background: lighten($colour, 90 - $colour-lightness); }
}


/*------------------------------------*\
  BUTTON - style
\*------------------------------------*/
.btn {
  border-radius: $button-radius;
  color: white;
  cursor: pointer;
  vertical-align:middle;
  
  @each $state in $UI_state {
    $temp-value: nth($state, 2);
    @include mm(nth($state, 1)){
      @include button($temp-value);
    }
    
    @include mm(nth($state, 1) + "-outline"){
      @include button-outline($temp-value);
    }
  }

  @each $size in $UI_size {
    $temp-value: nth($size, 2);
    @include mm(nth($size, 1)) {
      font-size: round($temp-value*$base-font-size);
      padding: round($temp-value/3*$base-font-size) round($temp-value*$base-font-size);
    }
  }
  
  @include mm('full-width') {
    width: 100%;
  }
}

/*------------------------------------*\
  INPUT - mixin
\*------------------------------------*/
@mixin input($border-color, $focus-color) {
	border-color: $border-color;
  &:focus { border-color: $focus-color;}
}

/*------------------------------------*\
  INPUT - style
\*------------------------------------*/
.input {
  border-radius: $form-radius;
  outline: 0;
  border: 1px solid #eee;
  color: #616161;
  
  &:focus {
    border-color: #73C4F2;
  }
  
  @each $state in $UI_state {
    $temp-value: nth($state, 2);
    @include mm(nth($state, 1)) {
      @if nth($state, 1) == "default" {
        @include input(#eee, $temp-value);
      } @else {
        @include input($temp-value, $temp-value);
      }
    }
  }
  
  @each $size in $UI_size {
    $temp-value: nth($size, 2);
    @include mm(nth($size, 1)) {
      font-size: round($temp-value*$base-font-size);
      padding: round($temp-value/3*$base-font-size) round($temp-value/3*$base-font-size);
    }
  }
}

/*------------------------------------*\
  ALERT - mixin
\*------------------------------------*/
@mixin alert($colour) {
	border-color: $colour;
  color: $colour;
  
  $colour-lightness: lightness($colour);
  background: lighten($colour, 95 - $colour-lightness);
  
}

/*------------------------------------*\
  ALERT - style
\*------------------------------------*/
.alert {
  border-radius: $form-radius;
  outline: 0;
  border: 1px solid #eee;
  color: #616161;
  display: inline-block;

  
  @each $state in $UI_state {
    $temp-value: nth($state, 2);
    @include mm(nth($state, 1)) {
      @include alert($temp-value);
    }
  }
  
  @each $size in $UI_size {
    $temp-value: nth($size, 2);
    @include mm(nth($size, 1)) {
      font-size: round($temp-value*$base-font-size);
      padding: round($temp-value/3*$base-font-size) round($temp-value/2*$base-font-size);
    }
  }
}


/*------------------------------------*\
  DEMO
\*------------------------------------*/
.content {
  display: inline-block;
  width: 250px;
  vertical-align: top;
}

button, input, .alert {
  margin-bottom: 3px;
}

SassMeister-output.css

/*------------------------------------*\
  VARIABLE
\*------------------------------------*/
/*------------------------------------*\
  BASE
\*------------------------------------*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  font-family: DIN;
  font-weight: regular;
  font-size: 14px;
  line-height: 1.57143;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1.57143;
}

/*------------------------------------*\
  MIXIN
\*------------------------------------*/
/*------------------------------------*\
  BUTTON - mixin
\*------------------------------------*/
/*------------------------------------*\
  BUTTON - style
\*------------------------------------*/
.btn {
  border-radius: 3px;
  color: white;
  cursor: pointer;
  vertical-align: middle;
}
.btn--default {
  background: #73C4F2;
  border: 1px solid #73C4F2;
}
.btn--default:hover {
  background: #81caf3;
}
.btn--default:active {
  background: #65bef1;
}
.btn--default-outline {
  border: 1px solid #73C4F2;
  color: #73C4F2;
  background: white;
}
.btn--default-outline:hover {
  background: #e8f5fd;
}
.btn--default-outline:active {
  background: #d0ebfb;
}
.btn--warning {
  background: #FFAA4A;
  border: 1px solid #FFAA4A;
}
.btn--warning:hover {
  background: #ffb35c;
}
.btn--warning:active {
  background: #ffa238;
}
.btn--warning-outline {
  border: 1px solid #FFAA4A;
  color: #FFAA4A;
  background: white;
}
.btn--warning-outline:hover {
  background: #fff3e5;
}
.btn--warning-outline:active {
  background: #ffe7cc;
}
.btn--error {
  background: #F51F21;
  border: 1px solid #F51F21;
}
.btn--error:hover {
  background: #f63537;
}
.btn--error:active {
  background: #f20b0d;
}
.btn--error-outline {
  border: 1px solid #F51F21;
  color: #F51F21;
  background: white;
}
.btn--error-outline:hover {
  background: #fee7e7;
}
.btn--error-outline:active {
  background: #fdcecf;
}
.btn--success {
  background: #00C55D;
  border: 1px solid #00C55D;
}
.btn--success:hover {
  background: #00e46c;
}
.btn--success:active {
  background: #00a64e;
}
.btn--success-outline {
  border: 1px solid #00C55D;
  color: #00C55D;
  background: white;
}
.btn--success-outline:hover {
  background: #e5fff2;
}
.btn--success-outline:active {
  background: #ccffe4;
}
.btn--tiny {
  font-size: 10px;
  padding: 3px 10px;
}
.btn--small {
  font-size: 12px;
  padding: 4px 12px;
}
.btn--regular {
  font-size: 14px;
  padding: 5px 14px;
}
.btn--medium {
  font-size: 17px;
  padding: 6px 17px;
}
.btn--large {
  font-size: 20px;
  padding: 7px 20px;
}
.btn--full-width {
  width: 100%;
}

/*------------------------------------*\
  INPUT - mixin
\*------------------------------------*/
/*------------------------------------*\
  INPUT - style
\*------------------------------------*/
.input {
  border-radius: 3px;
  outline: 0;
  border: 1px solid #eee;
  color: #616161;
}
.input:focus {
  border-color: #73C4F2;
}
.input--default {
  border-color: #eee;
}
.input--default:focus {
  border-color: #73C4F2;
}
.input--warning {
  border-color: #FFAA4A;
}
.input--warning:focus {
  border-color: #FFAA4A;
}
.input--error {
  border-color: #F51F21;
}
.input--error:focus {
  border-color: #F51F21;
}
.input--success {
  border-color: #00C55D;
}
.input--success:focus {
  border-color: #00C55D;
}
.input--tiny {
  font-size: 10px;
  padding: 3px 3px;
}
.input--small {
  font-size: 12px;
  padding: 4px 4px;
}
.input--regular {
  font-size: 14px;
  padding: 5px 5px;
}
.input--medium {
  font-size: 17px;
  padding: 6px 6px;
}
.input--large {
  font-size: 20px;
  padding: 7px 7px;
}

/*------------------------------------*\
  ALERT - mixin
\*------------------------------------*/
/*------------------------------------*\
  ALERT - style
\*------------------------------------*/
.alert {
  border-radius: 3px;
  outline: 0;
  border: 1px solid #eee;
  color: #616161;
  display: inline-block;
}
.alert--default {
  border-color: #73C4F2;
  color: #73C4F2;
  background: #e8f5fd;
}
.alert--warning {
  border-color: #FFAA4A;
  color: #FFAA4A;
  background: #fff3e5;
}
.alert--error {
  border-color: #F51F21;
  color: #F51F21;
  background: #fee7e7;
}
.alert--success {
  border-color: #00C55D;
  color: #00C55D;
  background: #e5fff2;
}
.alert--tiny {
  font-size: 10px;
  padding: 3px 5px;
}
.alert--small {
  font-size: 12px;
  padding: 4px 6px;
}
.alert--regular {
  font-size: 14px;
  padding: 5px 7px;
}
.alert--medium {
  font-size: 17px;
  padding: 6px 8px;
}
.alert--large {
  font-size: 20px;
  padding: 7px 10px;
}

/*------------------------------------*\
  DEMO
\*------------------------------------*/
.content {
  display: inline-block;
  width: 250px;
  vertical-align: top;
}

button, input, .alert {
  margin-bottom: 3px;
}

SassMeister-rendered.html

<div class="content">
<button class="btn btn--default btn--tiny">Button</button>
<button class="btn btn--default-outline btn--tiny">Button</button>
<br>
<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default-outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default-outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default-outline btn--medium">Button</button>
<br>

<button class="btn btn--default btn--large">Button</button>
<button class="btn btn--default-outline btn--large">Button</button>
<br><br>
<button class="btn btn--success btn--small">Button</button>
<button class="btn btn--success-outline btn--small">Button</button>
<br>

<button class="btn btn--success btn--regular">Button</button>
<button class="btn btn--success-outline btn--regular">Button</button>
<br>

<button class="btn btn--success btn--medium">Button</button>
<button class="btn btn--success-outline btn--medium">Button</button>
<br>

<button class="btn btn--success btn--large">Button</button>
<button class="btn btn--success-outline btn--large">Button</button>
<br><br>
<button class="btn btn--warning btn--small">Button</button>
<button class="btn btn--warning-outline btn--small">Button</button>
<br>

<button class="btn btn--warning btn--regular">Button</button>
<button class="btn btn--warning-outline btn--regular">Button</button>
<br>

<button class="btn btn--warning btn--medium">Button</button>
<button class="btn btn--warning-outline btn--medium">Button</button>
<br>

<button class="btn btn--warning btn--large">Button</button>
<button class="btn btn--warning-outline btn--large">Button</button>
<br><br>
<button class="btn btn--error btn--small">Button</button>
<button class="btn btn--error-outline btn--small">Button</button>
<br>

<button class="btn btn--error btn--regular">Button</button>
<button class="btn btn--error-outline btn--regular">Button</button>
<br>

<button class="btn btn--error btn--medium">Button</button>
<button class="btn btn--error-outline btn--medium">Button</button>
<br>

<button class="btn btn--error btn--large">Button</button>
<button class="btn btn--error-outline btn--large">Button</button>
<br><br>

</div>
<div class="content">
<input class="input input--default input--tiny" placeholder="input" />
<br>
<input class="input input--default input--small" placeholder="input" />
<br>

<input class="input input--default input--regular" placeholder="input" />
<br>

<input class="input input--default input--medium" placeholder="input" />
<br>

<input class="input input--default input--large" placeholder="input" />
<br><br>
<input class="input input--success input--small" placeholder="input" />
<br>

<input class="input input--success input--regular" placeholder="input" />
<br>

<input class="input input--success input--medium" placeholder="input" />
<br>

<input class="input input--success input--large" placeholder="input" />
<br><br>
<input class="input input--warning input--small" placeholder="input" />
<br>

<input class="input input--warning input--regular" placeholder="input" />
<br>

<input class="input input--warning input--medium" placeholder="input" />
<br>

<input class="input input--warning input--large" placeholder="input" />
<br><br>
<input class="input input--error input--small" placeholder="input" />
<br>

<input class="input input--error input--regular" placeholder="input" />
<br>

<input class="input input--error input--medium" placeholder="input" />
<br>

<input class="input input--error input--large" placeholder="input" />
</div>

<div class="content">
<div class="alert alert--default alert--tiny">Alert message</div><br>
<div class="alert alert--default alert--small">Alert message</div><br>
<div class="alert alert--default alert--regular">Alert message</div><br>
<div class="alert alert--default alert--medium">Alert message</div><br>
<div class="alert alert--default alert--large">Alert message</div>
<br><br>
<div class="alert alert--success alert--small">Alert message</div><br>
<div class="alert alert--success alert--regular">Alert message</div><br>
<div class="alert alert--success alert--medium">Alert message</div><br>
<div class="alert alert--success alert--large">Alert message</div>
<br><br>
<div class="alert alert--warning alert--small">Alert message</div><br>
<div class="alert alert--warning alert--regular">Alert message</div><br>
<div class="alert alert--warning alert--medium">Alert message</div><br>
<div class="alert alert--warning alert--large">Alert message</div>
<br><br>
<div class="alert alert--error alert--small">Alert message</div><br>
<div class="alert alert--error alert--regular">Alert message</div><br>
<div class="alert alert--error alert--medium">Alert message</div><br>
<div class="alert alert--error alert--large">Alert message</div>
<br><br>

</div>