Generated by SassMeister.com.

SassMeister-input.scss

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

//  ----------------------------------------------------------------------
//  COLOR - TEXT/ICON
//  ----------------------------------------------------------------------

//  BRAND COLORS
$colorBrand: #4A89DC; // Primary brand blue used for background and marketing
$colorBrandDark: #3373B8; // Brand blue used for text and shades

//  BRAND TEXT COLORS
$colorTextBrandLight: $colorBrand; // Brand blue used for text on dark background
$colorTextBrand: $colorBrandDark; // Brand blue used for text on light background

//  DARK BLUE TEXT COLORS
$colorTextTwilight: #183E67; // Dark Blue
$colorTextMidnight: #1B2948; // Darker Blue

//  DARK GREY TEXT COLORS
$colorTextPitch: #333330; // Darkest grey used for body text
$colorTextThunder: #767676; // Darker grey on white

//  LIGHT TEXT COLORS
$colorTextEclipse: #ADADAD; // Dark grey on white. Used for placeholder text. (Innaccessible on light background)
$colorTextKoala: #CCCBCA; //  Light grey text (Innaccessible on light background)

//  WHITE TEXT COLORS
$colorTextWhite: #FFFFFF; // White text

//  SECONDARY TEXT COLORS
$colorTextViolet: #7966BA; // Purple
$colorTextShamrock: #38A462; // Forest green
$colorTextLava: #D52D24; // Red


//  ----------------------------------------------------------------------
//  COLOR - BACKGROUND
//  ----------------------------------------------------------------------

//  BRAND BACKGROUND COLORS
$colorBackgroundBrand: $colorBrand; // Brand blue
$colorBackgroundBrandDark: $colorBrandDark; // Brand blue

//  DARK BACKGROUND COLORS
$colorBackgroundTwilight: #183E67; // Dark Blue
$colorBackgroundMidnight: #1B2948; // Darker Blue
$colorBackgroundPitch: #333330; // Darkest grey used for body text
$colorBackgroundThunder: #767676; // Darker grey on white

//  LIGHT COOL BACKGROUND COLORS
$colorBackgroundWind: #E4F1FD;
$colorBackgroundMist: #ECF5FD;
$colorBackgroundIce: #F9FCFF; // Lightest blue hover

//  LIGHT WARM BACKGROUND COLORS
$colorBackgroundHaze: #F2EFE9;
$colorBackgroundCloud: #F9F7F2;
$colorBackgroundFog: #FAFAF9; // Warm Background

//  WHITE BACKGROUND COLOR
$colorBackgroundWhite: #FFFFFF; // White background

//  SECONDARY BACKGROUND COLORS
$colorBackgroundViolet: #7966BA; // Purple
$colorBackgroundCaribbean: #36CCB6; // Aqua green
$colorBackgroundShamrock: #38A462; // Forest green
$colorBackgroundCactus: #8ECC5A; // Lime green
$colorBackgroundSunrise: #F2CB27; // Yellow
$colorBackgroundLava: #D52D24; // Red


//  ----------------------------------------------------------------------
//  COLOR MAPPING
//  ----------------------------------------------------------------------

// TODO: evaluate
$colorLava:     $colorBackgroundLava;
$colorShamrock: $colorBackgroundShamrock;
$colorBrand:    $colorBackgroundBrand;
$colorViolet:   $colorBackgroundViolet;
$colorThunder:  $colorBackgroundThunder;
$colorPitch:    $colorBackgroundPitch;
$colorWhite:    $colorBackgroundWhite;





//  ----------------------------------------------------------------------
//  COMPONENTS
//  ----------------------------------------------------------------------

$buttonLinkColors:
  red    $colorLava,
  green  $colorShamrock,
  blue   $colorBrand,
  purple $colorViolet,
  grey   $colorThunder,
  black  $colorPitch,
  white  $colorTextWhite;


@mixin button-link($color: $colorThunder) {
  @if index($buttonLinkColors, $color) {
    @if $color == $colorBrand {
      $color: $colorTextBrand;
    }

    color: $color;
    font-weight: normal;

    @if $color == $colorThunder or $color == $colorPitch {
      &:hover,
      &:focus {
        color: $colorTextBrand;
      }

      &:active {
        color: $colorBrandDark;
      }
    } @else {
      &:hover,
      &:focus {
        color: darken($color, 25%);
      }

      &:active {
        color: darken($color, 35%);
      }
    }

    &[disabled] {
      &,
      &:hover,
      &:focus,
      &:active {
        color: $color;
        background: none;
        opacity: 0.4;
      }
    }
  }
}

.Link {
  @include button-link($colorBrand);

  @each $color-name, $color-var in $buttonLinkColors {
    &.Link-#{$color-name} {
      @include button-link($color-var);
    }
  }
}