_variables.scss

//Font Family Variables
$default-font: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$header-font: "Fira Sans", Helvetica, Arial, sans-serif;

//Color Variables
$button-background-color: #0095dd;
$button-background-disabled-color: #8a9ba8;
$button-background-hover-color: #08c;
$error-background-color: #d63920;
$error-text-color: #d63920;
$html-background-color: #f2f2f2;
$input-border-color: #424f59;
$input-text-color: #424f59;
$input-placeholder-color: #8a9ba8;
$input-row-border-color: #8a9ba8;
$input-row-focus-border-color: #0095dd;
$input-row-hover-border-color: #424f59;
$input-row-box-shadow-color: #f2f2f2;
$input-left-right-padding: 20px;
$link-color: #0095dd;
$marketing-border-color: #c3cfd8;
$message-text-color: #fff;
$mobile-html-background-color: #fff;
$show-password-background-color: #9aabb8;
$show-password-label-color: #8a9ba8;
$content-background-color: #fff;
$success-background-color: #5fad47;
$text-color: #424f59;
$faint-text-color: #8a9ba8;
$cropper-background-color: #000;

//Font-Size Variables
$large-font: 24px;
$medium-font: 18px;
$base-font: 14px;
$small-font: 12px;
$media-adjustment: 2px;

//Border-Radius Variables
$small-border-radius: 2px;
$big-border-radius: $small-border-radius * 2;

//Animation Variables
$short-transition: 150ms;
$medium-transition: $short-transition * 3;
$long-transition: $short-transition * 7;

$avatar-size: 240px;

@mixin font() {
  font-family: $default-font;
}

@mixin headerFont() {
  font-family: $header-font;
}

@mixin formElement() {
  // kills inset shadow on iOS browsers
  -webkit-appearance: none;
  background-color: $mobile-html-background-color;
  border: 1px solid $input-row-border-color;
  border-radius: $big-border-radius;
  box-shadow: inset 0 1px 1px $input-row-box-shadow-color;
  color: $input-text-color;
  font-size: $medium-font;
  height: 45px;
  outline: none;
  position: relative;
  transition-duration: $short-transition;
  transition-property: border-color;
  width: 100%;
  z-index: 2;
}