Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

// Borders

$border-default: 1px solid rgba(0,0,0,.2);

// Spacing

$space-1: 0.5rem; //  8px
$space-2:   1rem; // 16px
$space-3: 1.5rem; // 24px
$space-4:   2rem; // 32px

// Colors

	// Fills

	$fill-red: #e32;
	$fill-pink: #eb2649;
	$fill-blue: #07e;
	$fill-yellow: #fe0;
	$fill-yellow-light: #fffab6;
	$fill-green: #6fb824;
	$fill-orange: #f49c1a;
	$fill-gray-lighter: #f4f4f4;
	$fill-gray: #aaa;
	$fill-gray-darker: #222;
	$fill-white: #fff;

	// Social Fills

	$fill-facebook: #3b5998;
	$fill-twitter: #55acee;
	$fill-google: #dd4b39;
	$fill-linkedin: #0077b5;
	$fill-pinterest: #bd081c;
	$fill-tumblr: #36465d;
	$fill-youtube: #cd201f;
	$fill-instagram: #517fa4;
	$fill-vine: #00b488;
	$fill-snapchat: #fffc00;

	// Type Colors

	$text-white: #fff;
	$text-gray: #333;
	$text-gray-lighter: #666;
	$text-gray-lightest: #999;
	$text-red: #e32;
	$text-orange: #f49c1a;
	$text-green: #6fb824;
	$text-blue: #07e;

// Typography

$type-1:  2.25rem;   //  8px
$type-2:  1.375rem;  // 16px
$type-3:  1.125rem;  // 16px
$type-4:  1rem;      // 16px
$type-5:  0.875rem;   // 12px
$type-6:  0.75rem;  // 10px

$line-height: 1.1;   // 1.1x the font-size

//
// Forms Config
// --------------------------------------------------

// encoding this as utf8 is good!
// https://css-tricks.com/probably-dont-base64-svg/
// but like url encode it first or IE/FF will hate you
// http://codepen.io/yoksel/details/JDqvs/
// svg icons saved as variables
$down-caret: "%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%20488%20285%27%3E%3Cpath%20d%3D%27M483.11%2029.381l-24.449-24.485c-2.934-2.938-7.335-4.897-11.246-4.897-3.912%200-8.313%201.959-11.246%204.897l-192.168%20192.448-192.168-192.448c-2.934-2.938-7.335-4.897-11.246-4.897-4.401%200-8.313%201.959-11.246%204.897l-24.449%2024.485c-2.934%202.938-4.89%207.345-4.89%2011.263s1.956%208.325%204.89%2011.263l227.864%20228.196c2.934%202.938%207.335%204.897%2011.246%204.897%203.912%200%208.313-1.959%2011.246-4.897l227.864-228.196c2.934-2.938%204.89-7.345%204.89-11.263s-1.956-8.325-4.89-11.263z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E";
$checkmark: "%3Csvg%20width%3D%2710%27%20height%3D%2710%27%20viewBox%3D%270%200%20512%20512%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M491.185%20120.619l-42.818-42.818c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-206.534%20206.849-92.563-92.877c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-42.818%2042.818c-5.667%205.667-8.815%2013.538-8.815%2021.409%200%207.871%203.148%2015.742%208.815%2021.409l113.972%20113.972%2042.818%2042.818c5.667%205.667%2013.538%208.815%2021.409%208.815%207.871%200%2015.742-3.148%2021.409-8.815l42.818-42.818%20227.943-227.943c5.667-5.667%208.815-13.538%208.815-21.409%200-7.871-3.148-15.742-8.815-21.409z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E";

// defining height for inputs
$input-height: $line-height + 1.75rem;
$input-height-small: $line-height + 1rem;

@mixin input {
	font-family: inherit;
  background: $fill-white;
  padding: 0 .75rem;
  border: 1px solid $fill-gray;
  font-size: $type-4;
  line-height: $input-height;
}

@mixin input--small {
  font-size: $type-5;
  line-height: $input-height-small; 
}

.text-input,
.textarea,
.select,
.date {
	@include input;
  
  &--small {
    @include input;
    @include input--small;
  }
}

SassMeister-output.css

.text-input,
.textarea,
.select,
.date {
  font-family: inherit;
  background: #fff;
  padding: 0 .75rem;
  border: 1px solid #aaa;
  font-size: 1rem;
  line-height: 2.85rem;
}
.text-input--small,
.textarea--small,
.select--small,
.date--small {
  font-family: inherit;
  background: #fff;
  padding: 0 .75rem;
  border: 1px solid #aaa;
  font-size: 1rem;
  line-height: 2.85rem;
  font-size: 0.875rem;
  line-height: 2.1rem;
}