lightspeeddevelopment/lsx

// LSX Variables

// This file contains the theme's variables declarations and some vendor's variables overriding.
// Also, it was created separately so we can import it in the vendor's files. In this way, our variables are available to the entire project.

$blue: (#418AD0, #374750, #367DC0, #2B3840);
$dark-gray: #434343;
$light-gray: #F6F6F6;
$orange: (#F7AE00, #CE9100, #EDA700);
$red-accent: #D84E2E;
$breaker: #DADDDF;
$small: #919191;
$gray: (#EAEAEA, #CCCCCC, #4A4A4A);
$green: (#6BA913, #649E12);

$grid-float-breakpoint: 1200px;
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);

$body-bg: #F6F6F6;
$text-color: #4A4A4A;
$link-color: nth($blue, 1);
$link-hover-color: nth($orange, 1);
$link-hover-decoration: none;

$font-family-sans-serif: 'Noto Sans', sans-serif;
$font-family-serif: 'Lora', serif;

$font-size-base: 15px;

$font-size-h1: 40px;
$font-size-h2: 30px;
$font-size-h3: 22px;
$font-size-h4: 22px;
$font-size-h5: 20px;
$font-size-h6: $font-size-base;

$headings-font-family: $font-family-serif;
$headings-font-weight: 400;
$headings-line-height: 1.25;

$line-height-base: 1.6;

$btn-default-color: #FFF;
$btn-font-weight: 700;
$btn-border-radius-base: 3px;

$input-height-base: 50px;
$input-border: #DDD;
$input-color: $text-color;
$input-border-radius: 2px;
$input-border-focus: nth($blue, 1);
$input-color-placeholder: #9F9C9C;

$table-border-color: $breaker;
$page-header-border-color: $breaker;

$lsx-gap: 2.4rem;
$lsx-medium-gap: 4.25rem;
$lsx-large-gap: 8.5rem;

$buttons: (
    color: #FFF,
    color-hover: #FFF,
    bg: nth($blue, 1),
    bg-hover: nth($blue, 3),
    shadow: darken(nth($blue, 1), 15%)
);

$cta-buttons: (
    color: #FFF,
    color-hover: #FFF,
    bg: nth($orange, 1),
    bg-hover: nth($orange, 3),
    shadow: darken(nth($orange, 1), 15%)
);

$secondary-buttons: (
    color: nth($gray, 3),
    color-hover: nth($gray, 3),
    bg: nth($gray, 1),
    bg-hover: nth($gray, 2),
    shadow: darken(nth($gray, 1), 15%)
);

$tertiary-buttons: (
    color: #FFF,
    color-hover: #FFF,
    bg: nth($green, 1),
    bg-hover: nth($green, 2),
    shadow: darken(nth($green, 1), 15%)
);

$top-menu: (
    bg: #333,
    link: #FFF,
    hover: #D93A3A,
    icon: #D93A3A,
    icon-hover: #D93A3A,
    dropdown: #333,
    dropdown-hover: #333,
    dropdown-link: #FFF,
    dropdown-link-hover: #D93A3A,
    height: 32px
);

$nav: (
    bg: #FFF,
    link: #515151,
    hover: nth($blue, 1),
    dropdown: nth($blue, 2),
    dropdown-hover: nth($blue, 4),
    dropdown-link: #FFF,
    dropdown-link-hover: nth($blue, 1)
);

$header: (
    bg: #FFF,
    link: $red-accent,
    hover: nth($orange, 1),
    description: $dark-gray
);

$banner: (
    bg: nth($blue, 4),
    color: #FFF,
    color-image: #FFF,
    breadcrumb-bg: nth($blue, 2),
    breadcrumb-color: $small,
    breadcrumb-current: #FFF
);

$content: (
    bg: $body-bg,
    breaker: $breaker,
    header: $text-color,
    color: $text-color,
    link: nth($blue, 1),
    hover: nth($orange, 1),
    small: $small,
    full-bg: #FFF,
    full-color: $text-color,
    full-link: nth($blue, 1),
    full-hover: nth($orange, 1),
    full-cta-bg: nth($blue, 1),
    full-cta-color: #FFF,
    full-cta-link: nth($blue, 2),
    full-cta-hover: nth($orange, 1)
);

$footer: (
    bg: nth($blue, 4),
    color: #FFF,
    link: nth($orange, 1),
    hover: nth($orange, 2)
);

$footer-widgets: (
    bg: nth($blue, 2),
    color: #FFF,
    link: #FFF,
    hover: nth($orange, 1)
);

$footer-cta: (
    bg: nth($blue, 4),
    color: #FFF,
    link: nth($blue, 1),
    hover: nth($blue, 3)
);

$social-icons: (
    'codepen': '\f1cb',
    'digg': '\f1a6',
    'dribbble': '\f17d',
    'dropbox': '\f16b',
    'facebook': '\f09a',
    'feed': '\f09e',
    'flickr': '\f16e',
    'foursquare': '\f180',
    'getpocket': '\f265',
    'github': '\f09b',
    'instagram': '\f16d',
    'linkedin': '\f0e1',
    'mailto': '\f0e0',
    'pinterest': '\f0d2',
    'plus.google': '\f0d5',
    'polldaddy': '\f128',
    'reddit': '\f281',
    'spotify': '\f1bc',
    'stumbleupon': '\f1a4',
    'tumblr': '\f173',
    'twitch': '\f1e8',
    'twitter': '\f099',
    'vimeo': '\f27d',
    'wordpress': '\f19a',
    'youtube': '\f16a'
);