tabulator-tables 5.4.3 → 5.5.0

package/src/scss/themes/semanticui/variables.scss

@@ -1,839 +1,839 @@
-/// Remove the unit of a length
-/// @param {Number} $number - Number to remove unit from
-/// @author Hugo Giraudel
-/// @return {Number} - Unitless number
-@function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return $number / ($number * 0 + 1);
-  }
-
-  @return $number;
-}
-
-/*******************************
-         Site Settings
-*******************************/
-
-/*-------------------
-       Fonts
---------------------*/
-
-$fontName          : 'Lato' !default;
-$fontSmoothing     : antialiased !default;
-
-$headerFont        : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
-$pageFont          : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
-
-$googleFontName    : $fontName !default;
-$importGoogleFonts : true !default;
-$googleFontSizes   : '400,700,400italic,700italic' !default;
-$googleSubset      : 'latin' !default;
-
-$googleProtocol    : 'https://' !default;
-$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}' !default;
-
-/*-------------------
-      Base Sizes
---------------------*/
-
-/* This is the single variable that controls them all */
-$emSize   : 14px !default;
-
-/* The size of page text  */
-$fontSize : 14px !default;
-
-/*-------------------
-  Exact Pixel Values
---------------------*/
-/*
-  These are used to specify exact pixel values in em
-  for things like borders that remain constantly
-  sized as emSize adjusts
-
-  Since there are many more sizes than names for sizes,
-  these are named by their original pixel values.
-
-*/
-
-
-$a1px  : strip-unit(1 / $emSize) + rem !default;
-$a4px  : strip-unit(4 / $emSize) + rem !default;
-$a11px  : strip-unit(11 / $emSize) + rem !default;
-$a14px  : strip-unit(14 / $emSize) + rem !default;
-
-$relative1px  : strip-unit(1 / $emSize) + em !default;
-$relative4px  : strip-unit(4 / $emSize) + em !default;
-$relative11px  : strip-unit(11 / $emSize) + em !default;
-$relative14px  : strip-unit(14 / $emSize) + em !default;
-
-
-
-/*-------------------
-    Border Radius
---------------------*/
-
-/* See Power-user section below
-   for explanation of $px variables
-*/
-$relativeBorderRadius: $relative4px !default;
-$absoluteBorderRadius: $a4px !default;
-
-$defaultBorderRadius: $absoluteBorderRadius !default;
-
-
-
-/*-------------------
-      Site Colors
---------------------*/
-
-/*---  Colors  ---*/
-$red              : #DB2828 !default;
-$orange           : #F2711C !default;
-$yellow           : #FBBD08 !default;
-$olive            : #B5CC18 !default;
-$green            : #21BA45 !default;
-$teal             : #00B5AD !default;
-$blue             : #2185D0 !default;
-$violet           : #6435C9 !default;
-$purple           : #A333C8 !default;
-$pink             : #E03997 !default;
-$brown            : #A5673F !default;
-$grey             : #767676 !default;
-$black            : #1B1C1D !default;
-
-/*---  Light Colors  ---*/
-$lightRed         : #FF695E !default;
-$lightOrange      : #FF851B !default;
-$lightYellow      : #FFE21F !default;
-$lightOlive       : #D9E778 !default;
-$lightGreen       : #2ECC40 !default;
-$lightTeal        : #6DFFFF !default;
-$lightBlue        : #54C8FF !default;
-$lightViolet      : #A291FB !default;
-$lightPurple      : #DC73FF !default;
-$lightPink        : #FF8EDF !default;
-$lightBrown       : #D67C1C !default;
-$lightGrey        : #DCDDDE !default;
-$lightBlack       : #545454 !default;
-
-/*---   Neutrals  ---*/
-$fullBlack        : #000000 !default;
-$offWhite         : #F9FAFB !default;
-$darkWhite        : #F3F4F5 !default;
-$midWhite         : #DCDDDE !default;
-$white            : #FFFFFF !default;
-
-/*--- Colored Backgrounds ---*/
-$redBackground    : #FFE8E6 !default;
-$orangeBackground : #FFEDDE !default;
-$yellowBackground : #FFF8DB !default;
-$oliveBackground  : #FBFDEF !default;
-$greenBackground  : #E5F9E7 !default;
-$tealBackground   : #E1F7F7 !default;
-$blueBackground   : #DFF0FF !default;
-$violetBackground : #EAE7FF !default;
-$purpleBackground : #F6E7FF !default;
-$pinkBackground   : #FFE3FB !default;
-$brownBackground  : #F1E2D3 !default;
-
-/*--- Colored Text ---*/
-$redTextColor    : $red !default;
-$orangeTextColor : $orange !default;
-$yellowTextColor : #B58105 !default; // Yellow text is difficult to read
-$oliveTextColor  : #8ABC1E !default; // Olive is difficult to read
-$greenTextColor  : #1EBC30 !default; // Green is difficult to read
-$tealTextColor   : #10A3A3 !default; // Teal text is difficult to read
-$blueTextColor   : $blue !default;
-$violetTextColor : $violet !default;
-$purpleTextColor : $purple !default;
-$pinkTextColor   : $pink !default;
-$brownTextColor  : $brown !default;
-
-/*--- Colored Headers ---*/
-$redHeaderColor    : darken($redTextColor, 5) !default;
-$oliveHeaderColor  : darken($oliveTextColor, 5) !default;
-$greenHeaderColor  : darken($greenTextColor, 5) !default;
-$yellowHeaderColor : darken($yellowTextColor, 5) !default;
-$blueHeaderColor   : darken($blueTextColor, 5) !default;
-$tealHeaderColor   : darken($tealTextColor, 5) !default;
-$pinkHeaderColor   : darken($pinkTextColor, 5) !default;
-$violetHeaderColor : darken($violetTextColor, 5) !default;
-$purpleHeaderColor : darken($purpleTextColor, 5) !default;
-$orangeHeaderColor : darken($orangeTextColor, 5) !default;
-$brownHeaderColor  : darken($brownTextColor, 5) !default;
-
-/*--- Colored Border ---*/
-$redBorderColor    : $redTextColor !default;
-$orangeBorderColor : $orangeTextColor !default;
-$yellowBorderColor : $yellowTextColor !default;
-$oliveBorderColor  : $oliveTextColor !default;
-$greenBorderColor  : $greenTextColor !default;
-$tealBorderColor   : $tealTextColor !default;
-$blueBorderColor   : $blueTextColor !default;
-$violetBorderColor : $violetTextColor !default;
-$purpleBorderColor : $purpleTextColor !default;
-$pinkBorderColor   : $pinkTextColor !default;
-$brownBorderColor  : $brownTextColor !default;
-
-/*-------------------
-     Alpha Colors
---------------------*/
-
-$subtleTransparentBlack     : rgba(0, 0, 0, 0.03) !default;
-$transparentBlack           : rgba(0, 0, 0, 0.05) !default;
-$strongTransparentBlack     : rgba(0, 0, 0, 0.10) !default;
-$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15) !default;
-
-$subtleTransparentWhite     : rgba(255, 255, 255, 0.02) !default;
-$transparentWhite           : rgba(255, 255, 255, 0.08) !default;
-$strongTransparentWhite     : rgba(255, 255, 255, 0.15) !default;
-
-
-
-/*-------------------
-    Brand Colors
---------------------*/
-
-$primaryColor        : $blue !default;
-$secondaryColor      : $black !default;
-
-$lightPrimaryColor   : $lightBlue !default;
-$lightSecondaryColor : $lightBlack !default;
-
-/*--------------
-  Page Heading
----------------*/
-
-$headerFontWeight : bold !default;
-$headerLineHeight : (18 / 14) * 1em !default;
-
-$h1 : (28 / 14) * 1rem !default;
-$h2 : (24 / 14) * 1rem !default;
-$h3 : (18 / 14) * 1rem !default;
-$h4 : (15 / 14) * 1rem !default;
-$h5 : (14 / 14) * 1rem !default;
-
-
-/*-------------------
-        Page
---------------------*/
-
-$pageBackground      : #FFFFFF !default;
-$pageOverflowX       : hidden !default;
-
-$lineHeight          : 1.4285em !default;
-$textColor           : rgba(0, 0, 0, 0.87) !default;
-
-
-/*--------------
-   Form Input
----------------*/
-
-/* This adjusts the default form input across all elements */
-$inputBackground        : $white !default;
-$inputVerticalPadding   : $relative11px !default;
-$inputHorizontalPadding : $relative14px !default;
-$inputPadding           : $inputVerticalPadding $inputHorizontalPadding !default;
-
-/* Input Text Color */
-$inputColor: $textColor !default;
-$inputPlaceholderColor: lighten($inputColor, 75) !default;
-$inputPlaceholderFocusColor: lighten($inputColor, 45) !default;
-
-/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
-$inputLineHeight: (17 / 14) * 1em !default;
-
-/*-------------------
-    Focused Input
---------------------*/
-
-/* Used on inputs, textarea etc */
-$focusedFormBorderColor: #85B7D9 !default;
-
-/* Used on dropdowns, other larger blocks */
-$focusedFormMutedBorderColor: #96C8DA !default;
-
-/*-------------------
-        Sizes
---------------------*/
-
-/*
-  Sizes are all expressed in terms of 14px/em (default em)
-  This ensures these "ratios" remain constant despite changes in EM
-*/
-
-$miniSize        : (11 / 14) !default;
-$tinySize        : (12 / 14) !default;
-$smallSize       : (13 / 14) !default;
-$mediumSize      : (14 / 14) !default;
-$largeSize       : (16 / 14) !default;
-$bigSize         : (18 / 14) !default;
-$hugeSize        : (20 / 14) !default;
-$massiveSize     : (24 / 14) !default;
-
-
-/*-------------------
-      Paragraph
---------------------*/
-
-$paragraphMargin     : 0em 0em 1em !default;
-$paragraphLineHeight : $lineHeight !default;
-
-/*-------------------
-       Links
---------------------*/
-
-$linkColor           : #4183C4 !default;
-$linkUnderline       : none !default;
-$linkHoverColor      : darken(saturate($linkColor, 20), 15) !default;
-$linkHoverUnderline  : $linkUnderline !default;
-
-/*-------------------
-  Highlighted Text
---------------------*/
-
-$highlightBackground      : #CCE2FF !default;
-$highlightColor           : $textColor !default;
-
-$inputHighlightBackground : rgba(100, 100, 100, 0.4) !default;
-$inputHighlightColor      : $textColor !default;
-
-/*-------------------
-       Em Sizes
---------------------*/
-
-/*
-  This rounds $size values to the closest pixel then expresses that value in (r)em.
-  This ensures all size values round to exact pixels
-*/
-$mini            : (round($miniSize * $emSize) / $emSize) * 1rem !default;
-$tiny            : (round($tinySize * $emSize) / $emSize) * 1rem !default;
-$small           : (round($smallSize * $emSize) / $emSize) * 1rem !default;
-$medium          : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
-$large           : (round($largeSize * $emSize) / $emSize) * 1rem !default;
-$big             : (round($bigSize * $emSize) / $emSize) * 1rem !default;
-$huge            : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
-$massive         : (round($massiveSize * $emSize) / $emSize) * 1rem !default;
-
-/* em */
-$relativeMini    : (round($miniSize * $emSize) / $emSize) * 1em !default;
-$relativeTiny    : (round($tinySize * $emSize) / $emSize) * 1em !default;
-$relativeSmall   : (round($smallSize * $emSize) / $emSize) * 1em !default;
-$relativeMedium  : (round($mediumSize * $emSize) / $emSize) * 1em !default;
-$relativeLarge   : (round($largeSize * $emSize) / $emSize) * 1em !default;
-$relativeBig     : (round($bigSize * $emSize) / $emSize) * 1em !default;
-$relativeHuge    : (round($hugeSize * $emSize) / $emSize) * 1em !default;
-$relativeMassive : (round($massiveSize * $emSize) / $emSize) * 1em !default;
-
-/* rem */
-$absoluteMini    : (round($miniSize * $emSize) / $emSize) * 1rem !default;
-$absoluteTiny    : (round($tinySize * $emSize) / $emSize) * 1rem !default;
-$absoluteSmall   : (round($smallSize * $emSize) / $emSize) * 1rem !default;
-$absoluteMedium  : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
-$absoluteLarge   : (round($largeSize * $emSize) / $emSize) * 1rem !default;
-$absoluteBig     : (round($bigSize * $emSize) / $emSize) * 1rem !default;
-$absoluteHuge    : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
-$absoluteMassive : (round($massiveSize * $emSize) / $emSize) * 1rem !default;
-
-
-/*-------------------
-       Loader
---------------------*/
-
-$loaderSize              : $relativeBig !default;
-$loaderSpeed             : 0.6s !default;
-$loaderLineWidth         : 0.2em !default;
-$loaderFillColor         : rgba(0, 0, 0, 0.1) !default;
-$loaderLineColor         : $grey !default;
-
-$invertedLoaderFillColor : rgba(255, 255, 255, 0.15) !default;
-$invertedLoaderLineColor : $white !default;
-
-/*-------------------
-        Grid
---------------------*/
-
-$columnCount: 16 !default;
-
-/*-------------------
-     Transitions
---------------------*/
-
-$defaultDuration : 0.1s !default;
-$defaultEasing   : ease !default;
-
-/*-------------------
-     Breakpoints
---------------------*/
-
-$mobileBreakpoint            : 320px !default;
-$tabletBreakpoint            : 768px !default;
-$computerBreakpoint          : 992px !default;
-$largeMonitorBreakpoint      : 1200px !default;
-$widescreenMonitorBreakpoint : 1920px !default;
-
-
-
-/* Columns */
-$oneWide        : (1 / $columnCount * 100%) !default;
-$twoWide        : (2 / $columnCount * 100%) !default;
-$threeWide      : (3 / $columnCount * 100%) !default;
-$fourWide       : (4 / $columnCount * 100%) !default;
-$fiveWide       : (5 / $columnCount * 100%) !default;
-$sixWide        : (6 / $columnCount * 100%) !default;
-$sevenWide      : (7 / $columnCount * 100%) !default;
-$eightWide      : (8 / $columnCount * 100%) !default;
-$nineWide       : (9 / $columnCount * 100%) !default;
-$tenWide        : (10 / $columnCount * 100%) !default;
-$elevenWide     : (11 / $columnCount * 100%) !default;
-$twelveWide     : (12 / $columnCount * 100%) !default;
-$thirteenWide   : (13 / $columnCount * 100%) !default;
-$fourteenWide   : (14 / $columnCount * 100%) !default;
-$fifteenWide    : (15 / $columnCount * 100%) !default;
-$sixteenWide    : (16 / $columnCount * 100%) !default;
-
-$oneColumn      : (1 / 1 * 100%) !default;
-$twoColumn      : (1 / 2 * 100%) !default;
-$threeColumn    : (1 / 3 * 100%) !default;
-$fourColumn     : (1 / 4 * 100%) !default;
-$fiveColumn     : (1 / 5 * 100%) !default;
-$sixColumn      : (1 / 6 * 100%) !default;
-$sevenColumn    : (1 / 7 * 100%) !default;
-$eightColumn    : (1 / 8 * 100%) !default;
-$nineColumn     : (1 / 9 * 100%) !default;
-$tenColumn      : (1 / 10 * 100%) !default;
-$elevenColumn   : (1 / 11 * 100%) !default;
-$twelveColumn   : (1 / 12 * 100%) !default;
-$thirteenColumn : (1 / 13 * 100%) !default;
-$fourteenColumn : (1 / 14 * 100%) !default;
-$fifteenColumn  : (1 / 15 * 100%) !default;
-$sixteenColumn  : (1 / 16 * 100%) !default;
-
-
-/*******************************
-           Power-User
-*******************************/
-
-
-/*-------------------
-    Emotive Colors
---------------------*/
-
-/* Positive */
-$positiveColor           : $green !default;
-$positiveBackgroundColor : #FCFFF5 !default;
-$positiveBorderColor     : #A3C293 !default;
-$positiveHeaderColor     : #1A531B !default;
-$positiveTextColor       : #2C662D !default;
-
-/* Negative */
-$negativeColor           : $red !default;
-$negativeBackgroundColor : #FFF6F6 !default;
-$negativeBorderColor     : #E0B4B4 !default;
-$negativeHeaderColor     : #912D2B !default;
-$negativeTextColor       : #9F3A38 !default;
-
-/* Info */
-$infoColor              : #31CCEC !default;
-$infoBackgroundColor    : #F8FFFF !default;
-$infoBorderColor        : #A9D5DE !default;
-$infoHeaderColor        : #0E566C !default;
-$infoTextColor          : #276F86 !default;
-
-/* Warning */
-$warningColor           : #F2C037 !default;
-$warningBorderColor     : #C9BA9B !default;
-$warningBackgroundColor : #FFFAF3 !default;
-$warningHeaderColor     : #794B02 !default;
-$warningTextColor       : #573A08 !default;
-
-/*-------------------
-        Paths
---------------------*/
-
-/* For source only. Modified in gulp for dist */
-$imagePath : '../../themes/default/assets/images' !default;
-$fontPath  : '../../themes/default/assets/fonts' !default;
-
-
-/*-------------------
-       Icons
---------------------*/
-
-/* Maximum Glyph Width of Icon */
-$iconWidth : 1.18em !default;
-
-/*-------------------
-     Neutral Text
---------------------*/
-
-$darkTextColor               : rgba(0, 0, 0, 0.85) !default;
-$mutedTextColor              : rgba(0, 0, 0, 0.6) !default;
-$lightTextColor              : rgba(0, 0, 0, 0.4) !default;
-
-$unselectedTextColor         : rgba(0, 0, 0, 0.4) !default;
-$hoveredTextColor            : rgba(0, 0, 0, 0.8) !default;
-$pressedTextColor            : rgba(0, 0, 0, 0.9) !default;
-$selectedTextColor           : rgba(0, 0, 0, 0.95) !default;
-$disabledTextColor           : rgba(0, 0, 0, 0.2) !default;
-
-$invertedTextColor           : rgba(255, 255, 255, 0.9) !default;
-$invertedMutedTextColor      : rgba(255, 255, 255, 0.8) !default;
-$invertedLightTextColor      : rgba(255, 255, 255, 0.7) !default;
-$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5) !default;
-$invertedHoveredTextColor    : rgba(255, 255, 255, 1) !default;
-$invertedPressedTextColor    : rgba(255, 255, 255, 1) !default;
-$invertedSelectedTextColor   : rgba(255, 255, 255, 1) !default;
-$invertedDisabledTextColor   : rgba(255, 255, 255, 0.2) !default;
-
-/*-------------------
-     Brand Colors
---------------------*/
-
-$facebookColor   : #3B5998 !default;
-$twitterColor    : #55ACEE !default;
-$googlePlusColor : #DD4B39 !default;
-$linkedInColor   : #1F88BE !default;
-$youtubeColor    : #CC181E !default;
-$pinterestColor  : #BD081C !default;
-$vkColor         : #4D7198 !default;
-$instagramColor  : #49769C !default;
-
-/*-------------------
-      Borders
---------------------*/
-
-$circularRadius                : 500rem !default;
-
-$borderColor               : rgba(34, 36, 38, 0.15) !default;
-$strongBorderColor         : rgba(34, 36, 38, 0.22) !default;
-$internalBorderColor       : rgba(34, 36, 38, 0.1) !default;
-$selectedBorderColor       : rgba(34, 36, 38, 0.35) !default;
-$strongSelectedBorderColor : rgba(34, 36, 38, 0.5) !default;
-$disabledBorderColor       : rgba(34, 36, 38, 0.5) !default;
-
-$solidInternalBorderColor  : #FAFAFA !default;
-$solidBorderColor          : #D4D4D5 !default;
-$solidSelectedBorderColor  : #BCBDBD !default;
-
-$whiteBorderColor              : rgba(255, 255, 255, 0.1) !default;
-$selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8) !default;
-
-$solidWhiteBorderColor         : #555555 !default;
-$selectedSolidWhiteBorderColor : #999999 !default;
-
-/*-------------------
-       Accents
---------------------*/
-
-/* Differentiating Neutrals */
-$subtleGradient: linear-gradient(transparent, $transparentBlack) !default;
-
-/* Differentiating Layers */
-$subtleShadow:
-  0px 1px 2px 0 $borderColor
- !default;
-$floatingShadow:
-  0px 2px 4px 0px rgba(34, 36, 38, 0.12),
-  0px 2px 10px 0px rgba(34, 36, 38, 0.15)
- !default;
-
-
-/*-------------------
-    Derived Values
---------------------*/
-
-/* Loaders Position Offset */
-$loaderOffset : -($loaderSize / 2) !default;
-$loaderMargin : $loaderOffset 0em 0em $loaderOffset !default;
-
-/* Rendered Scrollbar Width */
-$scrollbarWidth: 17px !default;
-
-/* Maximum Single Character Glyph Width, aka Capital "W" */
-$glyphWidth: 1.1em !default;
-
-/* Used to match floats with text */
-$lineHeightOffset       : (($lineHeight - 1em) / 2) !default;
-$headerLineHeightOffset : ($headerLineHeight - 1em) / 2 !default;
-
-/* Header Spacing */
-$headerTopMargin    : calc(2rem - #{$headerLineHeightOffset}) !default;
-$headerBottomMargin : 1rem !default;
-
-/* Minimum Mobile Width */
-$pageMinWidth       : 320px !default;
-
-/* Positive / Negative Dupes */
-$successBackgroundColor : $positiveBackgroundColor !default;
-$successColor           : $positiveColor !default;
-$successBorderColor     : $positiveBorderColor !default;
-$successHeaderColor     : $positiveHeaderColor !default;
-$successTextColor       : $positiveTextColor !default;
-
-$errorBackgroundColor   : $negativeBackgroundColor !default;
-$errorColor             : $negativeColor !default;
-$errorBorderColor       : $negativeBorderColor !default;
-$errorHeaderColor       : $negativeHeaderColor !default;
-$errorTextColor         : $negativeTextColor !default;
-
-
-/* Responsive */
-$largestMobileScreen : ($tabletBreakpoint - 1px) !default;
-$largestTabletScreen : ($computerBreakpoint - 1px) !default;
-$largestSmallMonitor : ($largeMonitorBreakpoint - 1px) !default;
-$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px) !default;
-
-
-
-/*******************************
-             States
-*******************************/
-
-/*-------------------
-      Disabled
---------------------*/
-
-$disabledOpacity: 0.45 !default;
-$disabledTextColor: rgba(40, 40, 40, 0.3) !default;
-$invertedDisabledTextColor: rgba(225, 225, 225, 0.3) !default;
-
-/*-------------------
-        Hover
---------------------*/
-
-/*---  Shadows  ---*/
-$floatingShadowHover:
-  0px 2px 4px 0px rgba(34, 36, 38, 0.15),
-  0px 2px 10px 0px rgba(34, 36, 38, 0.25)
- !default;
-
-/*---  Colors  ---*/
-$primaryColorHover    : saturate(darken($primaryColor, 5), 10) !default;
-$secondaryColorHover  : saturate(lighten($secondaryColor, 5), 10) !default;
-
-$redHover             : saturate(darken($red, 5), 10) !default;
-$orangeHover          : saturate(darken($orange, 5), 10) !default;
-$yellowHover          : saturate(darken($yellow, 5), 10) !default;
-$oliveHover           : saturate(darken($olive, 5), 10) !default;
-$greenHover           : saturate(darken($green, 5), 10) !default;
-$tealHover            : saturate(darken($teal, 5), 10) !default;
-$blueHover            : saturate(darken($blue, 5), 10) !default;
-$violetHover          : saturate(darken($violet, 5), 10) !default;
-$purpleHover          : saturate(darken($purple, 5), 10) !default;
-$pinkHover            : saturate(darken($pink, 5), 10) !default;
-$brownHover           : saturate(darken($brown, 5), 10) !default;
-
-$lightRedHover        : saturate(darken($lightRed, 5), 10) !default;
-$lightOrangeHover     : saturate(darken($lightOrange, 5), 10) !default;
-$lightYellowHover     : saturate(darken($lightYellow, 5), 10) !default;
-$lightOliveHover      : saturate(darken($lightOlive, 5), 10) !default;
-$lightGreenHover      : saturate(darken($lightGreen, 5), 10) !default;
-$lightTealHover       : saturate(darken($lightTeal, 5), 10) !default;
-$lightBlueHover       : saturate(darken($lightBlue, 5), 10) !default;
-$lightVioletHover     : saturate(darken($lightViolet, 5), 10) !default;
-$lightPurpleHover     : saturate(darken($lightPurple, 5), 10) !default;
-$lightPinkHover       : saturate(darken($lightPink, 5), 10) !default;
-$lightBrownHover      : saturate(darken($lightBrown, 5), 10) !default;
-$lightGreyHover       : saturate(darken($lightGrey, 5), 10) !default;
-$lightBlackHover      : saturate(darken($fullBlack, 5), 10) !default;
-
-/*---  Emotive  ---*/
-$positiveColorHover   : saturate(darken($positiveColor, 5), 10) !default;
-$negativeColorHover   : saturate(darken($negativeColor, 5), 10) !default;
-
-/*---  Brand   ---*/
-$facebookHoverColor   : saturate(darken($facebookColor, 5), 10) !default;
-$twitterHoverColor    : saturate(darken($twitterColor, 5), 10) !default;
-$googlePlusHoverColor : saturate(darken($googlePlusColor, 5), 10) !default;
-$linkedInHoverColor   : saturate(darken($linkedInColor, 5), 10) !default;
-$youtubeHoverColor    : saturate(darken($youtubeColor, 5), 10) !default;
-$instagramHoverColor  : saturate(darken($instagramColor, 5), 10) !default;
-$pinterestHoverColor  : saturate(darken($pinterestColor, 5), 10) !default;
-$vkHoverColor         : saturate(darken($vkColor, 5), 10) !default;
-
-/*---  Dark Tones  ---*/
-$fullBlackHover       : lighten($fullBlack, 5) !default;
-$blackHover           : lighten($black, 5) !default;
-$greyHover            : lighten($grey, 5) !default;
-
-/*---  Light Tones  ---*/
-$whiteHover           : darken($white, 5) !default;
-$offWhiteHover        : darken($offWhite, 5) !default;
-$darkWhiteHover       : darken($darkWhite, 5) !default;
-
-/*-------------------
-        Focus
---------------------*/
-
-/*---  Colors  ---*/
-$primaryColorFocus    : saturate(darken($primaryColor, 8), 20) !default;
-$secondaryColorFocus  : saturate(lighten($secondaryColor, 8), 20) !default;
-
-$redFocus             : saturate(darken($red, 8), 20) !default;
-$orangeFocus          : saturate(darken($orange, 8), 20) !default;
-$yellowFocus          : saturate(darken($yellow, 8), 20) !default;
-$oliveFocus           : saturate(darken($olive, 8), 20) !default;
-$greenFocus           : saturate(darken($green, 8), 20) !default;
-$tealFocus            : saturate(darken($teal, 8), 20) !default;
-$blueFocus            : saturate(darken($blue, 8), 20) !default;
-$violetFocus          : saturate(darken($violet, 8), 20) !default;
-$purpleFocus          : saturate(darken($purple, 8), 20) !default;
-$pinkFocus            : saturate(darken($pink, 8), 20) !default;
-$brownFocus           : saturate(darken($brown, 8), 20) !default;
-
-$lightRedFocus        : saturate(darken($lightRed, 8), 20) !default;
-$lightOrangeFocus     : saturate(darken($lightOrange, 8), 20) !default;
-$lightYellowFocus     : saturate(darken($lightYellow, 8), 20) !default;
-$lightOliveFocus      : saturate(darken($lightOlive, 8), 20) !default;
-$lightGreenFocus      : saturate(darken($lightGreen, 8), 20) !default;
-$lightTealFocus       : saturate(darken($lightTeal, 8), 20) !default;
-$lightBlueFocus       : saturate(darken($lightBlue, 8), 20) !default;
-$lightVioletFocus     : saturate(darken($lightViolet, 8), 20) !default;
-$lightPurpleFocus     : saturate(darken($lightPurple, 8), 20) !default;
-$lightPinkFocus       : saturate(darken($lightPink, 8), 20) !default;
-$lightBrownFocus      : saturate(darken($lightBrown, 8), 20) !default;
-$lightGreyFocus       : saturate(darken($lightGrey, 8), 20) !default;
-$lightBlackFocus      : saturate(darken($fullBlack, 8), 20) !default;
-
-/*---  Emotive  ---*/
-$positiveColorFocus   : saturate(darken($positiveColor, 8), 20) !default;
-$negativeColorFocus   : saturate(darken($negativeColor, 8), 20) !default;
-
-/*---  Brand   ---*/
-$facebookFocusColor   : saturate(darken($facebookColor, 8), 20) !default;
-$twitterFocusColor    : saturate(darken($twitterColor, 8), 20) !default;
-$googlePlusFocusColor : saturate(darken($googlePlusColor, 8), 20) !default;
-$linkedInFocusColor   : saturate(darken($linkedInColor, 8), 20) !default;
-$youtubeFocusColor    : saturate(darken($youtubeColor, 8), 20) !default;
-$instagramFocusColor  : saturate(darken($instagramColor, 8), 20) !default;
-$pinterestFocusColor  : saturate(darken($pinterestColor, 8), 20) !default;
-$vkFocusColor         : saturate(darken($vkColor, 8), 20) !default;
-
-/*---  Dark Tones  ---*/
-$fullBlackFocus       : lighten($fullBlack, 8) !default;
-$blackFocus           : lighten($black, 8) !default;
-$greyFocus            : lighten($grey, 8) !default;
-
-/*---  Light Tones  ---*/
-$whiteFocus           : darken($white, 8) !default;
-$offWhiteFocus        : darken($offWhite, 8) !default;
-$darkWhiteFocus       : darken($darkWhite, 8) !default;
-
-
-/*-------------------
-    Down (:active)
---------------------*/
-
-/*---  Colors  ---*/
-$primaryColorDown    : darken($primaryColor, 10) !default;
-$secondaryColorDown  : lighten($secondaryColor, 10) !default;
-
-$redDown             : darken($red, 10) !default;
-$orangeDown          : darken($orange, 10) !default;
-$yellowDown          : darken($yellow, 10) !default;
-$oliveDown           : darken($olive, 10) !default;
-$greenDown           : darken($green, 10) !default;
-$tealDown            : darken($teal, 10) !default;
-$blueDown            : darken($blue, 10) !default;
-$violetDown          : darken($violet, 10) !default;
-$purpleDown          : darken($purple, 10) !default;
-$pinkDown            : darken($pink, 10) !default;
-$brownDown           : darken($brown, 10) !default;
-
-$lightRedDown        : darken($lightRed, 10) !default;
-$lightOrangeDown     : darken($lightOrange, 10) !default;
-$lightYellowDown     : darken($lightYellow, 10) !default;
-$lightOliveDown      : darken($lightOlive, 10) !default;
-$lightGreenDown      : darken($lightGreen, 10) !default;
-$lightTealDown       : darken($lightTeal, 10) !default;
-$lightBlueDown       : darken($lightBlue, 10) !default;
-$lightVioletDown     : darken($lightViolet, 10) !default;
-$lightPurpleDown     : darken($lightPurple, 10) !default;
-$lightPinkDown       : darken($lightPink, 10) !default;
-$lightBrownDown      : darken($lightBrown, 10) !default;
-$lightGreyDown       : darken($lightGrey, 10) !default;
-$lightBlackDown      : darken($fullBlack, 10) !default;
-
-/*---  Emotive  ---*/
-$positiveColorDown   : darken($positiveColor, 10) !default;
-$negativeColorDown   : darken($negativeColor, 10) !default;
-
-/*---  Brand   ---*/
-$facebookDownColor   : darken($facebookColor, 10) !default;
-$twitterDownColor    : darken($twitterColor, 10) !default;
-$googlePlusDownColor : darken($googlePlusColor, 10) !default;
-$linkedInDownColor   : darken($linkedInColor, 10) !default;
-$youtubeDownColor    : darken($youtubeColor, 10) !default;
-$instagramDownColor  : darken($instagramColor, 10) !default;
-$pinterestDownColor  : darken($pinterestColor, 10) !default;
-$vkDownColor         : darken($vkColor, 10) !default;
-
-/*---  Dark Tones  ---*/
-$fullBlackDown       : lighten($fullBlack, 10) !default;
-$blackDown           : lighten($black, 10) !default;
-$greyDown            : lighten($grey, 10) !default;
-
-/*---  Light Tones  ---*/
-$whiteDown           : darken($white, 10) !default;
-$offWhiteDown        : darken($offWhite, 10) !default;
-$darkWhiteDown       : darken($darkWhite, 10) !default;
-
-
-/*-------------------
-        Active
---------------------*/
-
-/*---  Colors  ---*/
-$primaryColorActive    : saturate(darken($primaryColor, 5), 15) !default;
-$secondaryColorActive  : saturate(lighten($secondaryColor, 5), 15) !default;
-
-$redActive             : saturate(darken($red, 5), 15) !default;
-$orangeActive          : saturate(darken($orange, 5), 15) !default;
-$yellowActive          : saturate(darken($yellow, 5), 15) !default;
-$oliveActive           : saturate(darken($olive, 5), 15) !default;
-$greenActive           : saturate(darken($green, 5), 15) !default;
-$tealActive            : saturate(darken($teal, 5), 15) !default;
-$blueActive            : saturate(darken($blue, 5), 15) !default;
-$violetActive          : saturate(darken($violet, 5), 15) !default;
-$purpleActive          : saturate(darken($purple, 5), 15) !default;
-$pinkActive            : saturate(darken($pink, 5), 15) !default;
-$brownActive           : saturate(darken($brown, 5), 15) !default;
-
-$lightRedActive        : saturate(darken($lightRed, 5), 15) !default;
-$lightOrangeActive     : saturate(darken($lightOrange, 5), 15) !default;
-$lightYellowActive     : saturate(darken($lightYellow, 5), 15) !default;
-$lightOliveActive      : saturate(darken($lightOlive, 5), 15) !default;
-$lightGreenActive      : saturate(darken($lightGreen, 5), 15) !default;
-$lightTealActive       : saturate(darken($lightTeal, 5), 15) !default;
-$lightBlueActive       : saturate(darken($lightBlue, 5), 15) !default;
-$lightVioletActive     : saturate(darken($lightViolet, 5), 15) !default;
-$lightPurpleActive     : saturate(darken($lightPurple, 5), 15) !default;
-$lightPinkActive       : saturate(darken($lightPink, 5), 15) !default;
-$lightBrownActive      : saturate(darken($lightBrown, 5), 15) !default;
-$lightGreyActive       : saturate(darken($lightGrey, 5), 15) !default;
-$lightBlackActive      : saturate(darken($fullBlack, 5), 15) !default;
-
-/*---  Emotive  ---*/
-$positiveColorActive   : saturate(darken($positiveColor, 5), 15) !default;
-$negativeColorActive   : saturate(darken($negativeColor, 5), 15) !default;
-
-/*---  Brand   ---*/
-$facebookActiveColor   : saturate(darken($facebookColor, 5), 15) !default;
-$twitterActiveColor    : saturate(darken($twitterColor, 5), 15) !default;
-$googlePlusActiveColor : saturate(darken($googlePlusColor, 5), 15) !default;
-$linkedInActiveColor   : saturate(darken($linkedInColor, 5), 15) !default;
-$youtubeActiveColor    : saturate(darken($youtubeColor, 5), 15) !default;
-$instagramActiveColor  : saturate(darken($instagramColor, 5), 15) !default;
-$pinterestActiveColor  : saturate(darken($pinterestColor, 5), 15) !default;
-$vkActiveColor         : saturate(darken($vkColor, 5), 15) !default;
-
-/*---  Dark Tones  ---*/
-$fullBlackActive       : darken($fullBlack, 5) !default;
-$blackActive           : darken($black, 5) !default;
-$greyActive            : darken($grey, 5) !default;
-
-/*---  Light Tones  ---*/
-$whiteActive           : darken($white, 5) !default;
-$offWhiteActive        : darken($offWhite, 5) !default;
-$darkWhiteActive       : darken($darkWhite, 5) !default;
+/// Remove the unit of a length
+/// @param {Number} $number - Number to remove unit from
+/// @author Hugo Giraudel
+/// @return {Number} - Unitless number
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+       Fonts
+--------------------*/
+
+$fontName          : 'Lato' !default;
+$fontSmoothing     : antialiased !default;
+
+$headerFont        : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
+$pageFont          : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
+
+$googleFontName    : $fontName !default;
+$importGoogleFonts : true !default;
+$googleFontSizes   : '400,700,400italic,700italic' !default;
+$googleSubset      : 'latin' !default;
+
+$googleProtocol    : 'https://' !default;
+$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}' !default;
+
+/*-------------------
+      Base Sizes
+--------------------*/
+
+/* This is the single variable that controls them all */
+$emSize   : 14px !default;
+
+/* The size of page text  */
+$fontSize : 14px !default;
+
+/*-------------------
+  Exact Pixel Values
+--------------------*/
+/*
+  These are used to specify exact pixel values in em
+  for things like borders that remain constantly
+  sized as emSize adjusts
+
+  Since there are many more sizes than names for sizes,
+  these are named by their original pixel values.
+
+*/
+
+
+$a1px  : strip-unit(1 / $emSize) + rem !default;
+$a4px  : strip-unit(4 / $emSize) + rem !default;
+$a11px  : strip-unit(11 / $emSize) + rem !default;
+$a14px  : strip-unit(14 / $emSize) + rem !default;
+
+$relative1px  : strip-unit(1 / $emSize) + em !default;
+$relative4px  : strip-unit(4 / $emSize) + em !default;
+$relative11px  : strip-unit(11 / $emSize) + em !default;
+$relative14px  : strip-unit(14 / $emSize) + em !default;
+
+
+
+/*-------------------
+    Border Radius
+--------------------*/
+
+/* See Power-user section below
+   for explanation of $px variables
+*/
+$relativeBorderRadius: $relative4px !default;
+$absoluteBorderRadius: $a4px !default;
+
+$defaultBorderRadius: $absoluteBorderRadius !default;
+
+
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+$red              : #DB2828 !default;
+$orange           : #F2711C !default;
+$yellow           : #FBBD08 !default;
+$olive            : #B5CC18 !default;
+$green            : #21BA45 !default;
+$teal             : #00B5AD !default;
+$blue             : #2185D0 !default;
+$violet           : #6435C9 !default;
+$purple           : #A333C8 !default;
+$pink             : #E03997 !default;
+$brown            : #A5673F !default;
+$grey             : #767676 !default;
+$black            : #1B1C1D !default;
+
+/*---  Light Colors  ---*/
+$lightRed         : #FF695E !default;
+$lightOrange      : #FF851B !default;
+$lightYellow      : #FFE21F !default;
+$lightOlive       : #D9E778 !default;
+$lightGreen       : #2ECC40 !default;
+$lightTeal        : #6DFFFF !default;
+$lightBlue        : #54C8FF !default;
+$lightViolet      : #A291FB !default;
+$lightPurple      : #DC73FF !default;
+$lightPink        : #FF8EDF !default;
+$lightBrown       : #D67C1C !default;
+$lightGrey        : #DCDDDE !default;
+$lightBlack       : #545454 !default;
+
+/*---   Neutrals  ---*/
+$fullBlack        : #000000 !default;
+$offWhite         : #F9FAFB !default;
+$darkWhite        : #F3F4F5 !default;
+$midWhite         : #DCDDDE !default;
+$white            : #FFFFFF !default;
+
+/*--- Colored Backgrounds ---*/
+$redBackground    : #FFE8E6 !default;
+$orangeBackground : #FFEDDE !default;
+$yellowBackground : #FFF8DB !default;
+$oliveBackground  : #FBFDEF !default;
+$greenBackground  : #E5F9E7 !default;
+$tealBackground   : #E1F7F7 !default;
+$blueBackground   : #DFF0FF !default;
+$violetBackground : #EAE7FF !default;
+$purpleBackground : #F6E7FF !default;
+$pinkBackground   : #FFE3FB !default;
+$brownBackground  : #F1E2D3 !default;
+
+/*--- Colored Text ---*/
+$redTextColor    : $red !default;
+$orangeTextColor : $orange !default;
+$yellowTextColor : #B58105 !default; // Yellow text is difficult to read
+$oliveTextColor  : #8ABC1E !default; // Olive is difficult to read
+$greenTextColor  : #1EBC30 !default; // Green is difficult to read
+$tealTextColor   : #10A3A3 !default; // Teal text is difficult to read
+$blueTextColor   : $blue !default;
+$violetTextColor : $violet !default;
+$purpleTextColor : $purple !default;
+$pinkTextColor   : $pink !default;
+$brownTextColor  : $brown !default;
+
+/*--- Colored Headers ---*/
+$redHeaderColor    : darken($redTextColor, 5) !default;
+$oliveHeaderColor  : darken($oliveTextColor, 5) !default;
+$greenHeaderColor  : darken($greenTextColor, 5) !default;
+$yellowHeaderColor : darken($yellowTextColor, 5) !default;
+$blueHeaderColor   : darken($blueTextColor, 5) !default;
+$tealHeaderColor   : darken($tealTextColor, 5) !default;
+$pinkHeaderColor   : darken($pinkTextColor, 5) !default;
+$violetHeaderColor : darken($violetTextColor, 5) !default;
+$purpleHeaderColor : darken($purpleTextColor, 5) !default;
+$orangeHeaderColor : darken($orangeTextColor, 5) !default;
+$brownHeaderColor  : darken($brownTextColor, 5) !default;
+
+/*--- Colored Border ---*/
+$redBorderColor    : $redTextColor !default;
+$orangeBorderColor : $orangeTextColor !default;
+$yellowBorderColor : $yellowTextColor !default;
+$oliveBorderColor  : $oliveTextColor !default;
+$greenBorderColor  : $greenTextColor !default;
+$tealBorderColor   : $tealTextColor !default;
+$blueBorderColor   : $blueTextColor !default;
+$violetBorderColor : $violetTextColor !default;
+$purpleBorderColor : $purpleTextColor !default;
+$pinkBorderColor   : $pinkTextColor !default;
+$brownBorderColor  : $brownTextColor !default;
+
+/*-------------------
+     Alpha Colors
+--------------------*/
+
+$subtleTransparentBlack     : rgba(0, 0, 0, 0.03) !default;
+$transparentBlack           : rgba(0, 0, 0, 0.05) !default;
+$strongTransparentBlack     : rgba(0, 0, 0, 0.10) !default;
+$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15) !default;
+
+$subtleTransparentWhite     : rgba(255, 255, 255, 0.02) !default;
+$transparentWhite           : rgba(255, 255, 255, 0.08) !default;
+$strongTransparentWhite     : rgba(255, 255, 255, 0.15) !default;
+
+
+
+/*-------------------
+    Brand Colors
+--------------------*/
+
+$primaryColor        : $blue !default;
+$secondaryColor      : $black !default;
+
+$lightPrimaryColor   : $lightBlue !default;
+$lightSecondaryColor : $lightBlack !default;
+
+/*--------------
+  Page Heading
+---------------*/
+
+$headerFontWeight : bold !default;
+$headerLineHeight : (18 / 14) * 1em !default;
+
+$h1 : (28 / 14) * 1rem !default;
+$h2 : (24 / 14) * 1rem !default;
+$h3 : (18 / 14) * 1rem !default;
+$h4 : (15 / 14) * 1rem !default;
+$h5 : (14 / 14) * 1rem !default;
+
+
+/*-------------------
+        Page
+--------------------*/
+
+$pageBackground      : #FFFFFF !default;
+$pageOverflowX       : hidden !default;
+
+$lineHeight          : 1.4285em !default;
+$textColor           : rgba(0, 0, 0, 0.87) !default;
+
+
+/*--------------
+   Form Input
+---------------*/
+
+/* This adjusts the default form input across all elements */
+$inputBackground        : $white !default;
+$inputVerticalPadding   : $relative11px !default;
+$inputHorizontalPadding : $relative14px !default;
+$inputPadding           : $inputVerticalPadding $inputHorizontalPadding !default;
+
+/* Input Text Color */
+$inputColor: $textColor !default;
+$inputPlaceholderColor: lighten($inputColor, 75) !default;
+$inputPlaceholderFocusColor: lighten($inputColor, 45) !default;
+
+/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
+$inputLineHeight: (17 / 14) * 1em !default;
+
+/*-------------------
+    Focused Input
+--------------------*/
+
+/* Used on inputs, textarea etc */
+$focusedFormBorderColor: #85B7D9 !default;
+
+/* Used on dropdowns, other larger blocks */
+$focusedFormMutedBorderColor: #96C8DA !default;
+
+/*-------------------
+        Sizes
+--------------------*/
+
+/*
+  Sizes are all expressed in terms of 14px/em (default em)
+  This ensures these "ratios" remain constant despite changes in EM
+*/
+
+$miniSize        : (11 / 14) !default;
+$tinySize        : (12 / 14) !default;
+$smallSize       : (13 / 14) !default;
+$mediumSize      : (14 / 14) !default;
+$largeSize       : (16 / 14) !default;
+$bigSize         : (18 / 14) !default;
+$hugeSize        : (20 / 14) !default;
+$massiveSize     : (24 / 14) !default;
+
+
+/*-------------------
+      Paragraph
+--------------------*/
+
+$paragraphMargin     : 0em 0em 1em !default;
+$paragraphLineHeight : $lineHeight !default;
+
+/*-------------------
+       Links
+--------------------*/
+
+$linkColor           : #4183C4 !default;
+$linkUnderline       : none !default;
+$linkHoverColor      : darken(saturate($linkColor, 20), 15) !default;
+$linkHoverUnderline  : $linkUnderline !default;
+
+/*-------------------
+  Highlighted Text
+--------------------*/
+
+$highlightBackground      : #CCE2FF !default;
+$highlightColor           : $textColor !default;
+
+$inputHighlightBackground : rgba(100, 100, 100, 0.4) !default;
+$inputHighlightColor      : $textColor !default;
+
+/*-------------------
+       Em Sizes
+--------------------*/
+
+/*
+  This rounds $size values to the closest pixel then expresses that value in (r)em.
+  This ensures all size values round to exact pixels
+*/
+$mini            : (round($miniSize * $emSize) / $emSize) * 1rem !default;
+$tiny            : (round($tinySize * $emSize) / $emSize) * 1rem !default;
+$small           : (round($smallSize * $emSize) / $emSize) * 1rem !default;
+$medium          : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
+$large           : (round($largeSize * $emSize) / $emSize) * 1rem !default;
+$big             : (round($bigSize * $emSize) / $emSize) * 1rem !default;
+$huge            : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
+$massive         : (round($massiveSize * $emSize) / $emSize) * 1rem !default;
+
+/* em */
+$relativeMini    : (round($miniSize * $emSize) / $emSize) * 1em !default;
+$relativeTiny    : (round($tinySize * $emSize) / $emSize) * 1em !default;
+$relativeSmall   : (round($smallSize * $emSize) / $emSize) * 1em !default;
+$relativeMedium  : (round($mediumSize * $emSize) / $emSize) * 1em !default;
+$relativeLarge   : (round($largeSize * $emSize) / $emSize) * 1em !default;
+$relativeBig     : (round($bigSize * $emSize) / $emSize) * 1em !default;
+$relativeHuge    : (round($hugeSize * $emSize) / $emSize) * 1em !default;
+$relativeMassive : (round($massiveSize * $emSize) / $emSize) * 1em !default;
+
+/* rem */
+$absoluteMini    : (round($miniSize * $emSize) / $emSize) * 1rem !default;
+$absoluteTiny    : (round($tinySize * $emSize) / $emSize) * 1rem !default;
+$absoluteSmall   : (round($smallSize * $emSize) / $emSize) * 1rem !default;
+$absoluteMedium  : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
+$absoluteLarge   : (round($largeSize * $emSize) / $emSize) * 1rem !default;
+$absoluteBig     : (round($bigSize * $emSize) / $emSize) * 1rem !default;
+$absoluteHuge    : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
+$absoluteMassive : (round($massiveSize * $emSize) / $emSize) * 1rem !default;
+
+
+/*-------------------
+       Loader
+--------------------*/
+
+$loaderSize              : $relativeBig !default;
+$loaderSpeed             : 0.6s !default;
+$loaderLineWidth         : 0.2em !default;
+$loaderFillColor         : rgba(0, 0, 0, 0.1) !default;
+$loaderLineColor         : $grey !default;
+
+$invertedLoaderFillColor : rgba(255, 255, 255, 0.15) !default;
+$invertedLoaderLineColor : $white !default;
+
+/*-------------------
+        Grid
+--------------------*/
+
+$columnCount: 16 !default;
+
+/*-------------------
+     Transitions
+--------------------*/
+
+$defaultDuration : 0.1s !default;
+$defaultEasing   : ease !default;
+
+/*-------------------
+     Breakpoints
+--------------------*/
+
+$mobileBreakpoint            : 320px !default;
+$tabletBreakpoint            : 768px !default;
+$computerBreakpoint          : 992px !default;
+$largeMonitorBreakpoint      : 1200px !default;
+$widescreenMonitorBreakpoint : 1920px !default;
+
+
+
+/* Columns */
+$oneWide        : (1 / $columnCount * 100%) !default;
+$twoWide        : (2 / $columnCount * 100%) !default;
+$threeWide      : (3 / $columnCount * 100%) !default;
+$fourWide       : (4 / $columnCount * 100%) !default;
+$fiveWide       : (5 / $columnCount * 100%) !default;
+$sixWide        : (6 / $columnCount * 100%) !default;
+$sevenWide      : (7 / $columnCount * 100%) !default;
+$eightWide      : (8 / $columnCount * 100%) !default;
+$nineWide       : (9 / $columnCount * 100%) !default;
+$tenWide        : (10 / $columnCount * 100%) !default;
+$elevenWide     : (11 / $columnCount * 100%) !default;
+$twelveWide     : (12 / $columnCount * 100%) !default;
+$thirteenWide   : (13 / $columnCount * 100%) !default;
+$fourteenWide   : (14 / $columnCount * 100%) !default;
+$fifteenWide    : (15 / $columnCount * 100%) !default;
+$sixteenWide    : (16 / $columnCount * 100%) !default;
+
+$oneColumn      : (1 / 1 * 100%) !default;
+$twoColumn      : (1 / 2 * 100%) !default;
+$threeColumn    : (1 / 3 * 100%) !default;
+$fourColumn     : (1 / 4 * 100%) !default;
+$fiveColumn     : (1 / 5 * 100%) !default;
+$sixColumn      : (1 / 6 * 100%) !default;
+$sevenColumn    : (1 / 7 * 100%) !default;
+$eightColumn    : (1 / 8 * 100%) !default;
+$nineColumn     : (1 / 9 * 100%) !default;
+$tenColumn      : (1 / 10 * 100%) !default;
+$elevenColumn   : (1 / 11 * 100%) !default;
+$twelveColumn   : (1 / 12 * 100%) !default;
+$thirteenColumn : (1 / 13 * 100%) !default;
+$fourteenColumn : (1 / 14 * 100%) !default;
+$fifteenColumn  : (1 / 15 * 100%) !default;
+$sixteenColumn  : (1 / 16 * 100%) !default;
+
+
+/*******************************
+           Power-User
+*******************************/
+
+
+/*-------------------
+    Emotive Colors
+--------------------*/
+
+/* Positive */
+$positiveColor           : $green !default;
+$positiveBackgroundColor : #FCFFF5 !default;
+$positiveBorderColor     : #A3C293 !default;
+$positiveHeaderColor     : #1A531B !default;
+$positiveTextColor       : #2C662D !default;
+
+/* Negative */
+$negativeColor           : $red !default;
+$negativeBackgroundColor : #FFF6F6 !default;
+$negativeBorderColor     : #E0B4B4 !default;
+$negativeHeaderColor     : #912D2B !default;
+$negativeTextColor       : #9F3A38 !default;
+
+/* Info */
+$infoColor              : #31CCEC !default;
+$infoBackgroundColor    : #F8FFFF !default;
+$infoBorderColor        : #A9D5DE !default;
+$infoHeaderColor        : #0E566C !default;
+$infoTextColor          : #276F86 !default;
+
+/* Warning */
+$warningColor           : #F2C037 !default;
+$warningBorderColor     : #C9BA9B !default;
+$warningBackgroundColor : #FFFAF3 !default;
+$warningHeaderColor     : #794B02 !default;
+$warningTextColor       : #573A08 !default;
+
+/*-------------------
+        Paths
+--------------------*/
+
+/* For source only. Modified in gulp for dist */
+$imagePath : '../../themes/default/assets/images' !default;
+$fontPath  : '../../themes/default/assets/fonts' !default;
+
+
+/*-------------------
+       Icons
+--------------------*/
+
+/* Maximum Glyph Width of Icon */
+$iconWidth : 1.18em !default;
+
+/*-------------------
+     Neutral Text
+--------------------*/
+
+$darkTextColor               : rgba(0, 0, 0, 0.85) !default;
+$mutedTextColor              : rgba(0, 0, 0, 0.6) !default;
+$lightTextColor              : rgba(0, 0, 0, 0.4) !default;
+
+$unselectedTextColor         : rgba(0, 0, 0, 0.4) !default;
+$hoveredTextColor            : rgba(0, 0, 0, 0.8) !default;
+$pressedTextColor            : rgba(0, 0, 0, 0.9) !default;
+$selectedTextColor           : rgba(0, 0, 0, 0.95) !default;
+$disabledTextColor           : rgba(0, 0, 0, 0.2) !default;
+
+$invertedTextColor           : rgba(255, 255, 255, 0.9) !default;
+$invertedMutedTextColor      : rgba(255, 255, 255, 0.8) !default;
+$invertedLightTextColor      : rgba(255, 255, 255, 0.7) !default;
+$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5) !default;
+$invertedHoveredTextColor    : rgba(255, 255, 255, 1) !default;
+$invertedPressedTextColor    : rgba(255, 255, 255, 1) !default;
+$invertedSelectedTextColor   : rgba(255, 255, 255, 1) !default;
+$invertedDisabledTextColor   : rgba(255, 255, 255, 0.2) !default;
+
+/*-------------------
+     Brand Colors
+--------------------*/
+
+$facebookColor   : #3B5998 !default;
+$twitterColor    : #55ACEE !default;
+$googlePlusColor : #DD4B39 !default;
+$linkedInColor   : #1F88BE !default;
+$youtubeColor    : #CC181E !default;
+$pinterestColor  : #BD081C !default;
+$vkColor         : #4D7198 !default;
+$instagramColor  : #49769C !default;
+
+/*-------------------
+      Borders
+--------------------*/
+
+$circularRadius                : 500rem !default;
+
+$borderColor               : rgba(34, 36, 38, 0.15) !default;
+$strongBorderColor         : rgba(34, 36, 38, 0.22) !default;
+$internalBorderColor       : rgba(34, 36, 38, 0.1) !default;
+$selectedBorderColor       : rgba(34, 36, 38, 0.35) !default;
+$strongSelectedBorderColor : rgba(34, 36, 38, 0.5) !default;
+$disabledBorderColor       : rgba(34, 36, 38, 0.5) !default;
+
+$solidInternalBorderColor  : #FAFAFA !default;
+$solidBorderColor          : #D4D4D5 !default;
+$solidSelectedBorderColor  : #BCBDBD !default;
+
+$whiteBorderColor              : rgba(255, 255, 255, 0.1) !default;
+$selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8) !default;
+
+$solidWhiteBorderColor         : #555555 !default;
+$selectedSolidWhiteBorderColor : #999999 !default;
+
+/*-------------------
+       Accents
+--------------------*/
+
+/* Differentiating Neutrals */
+$subtleGradient: linear-gradient(transparent, $transparentBlack) !default;
+
+/* Differentiating Layers */
+$subtleShadow:
+  0px 1px 2px 0 $borderColor
+ !default;
+$floatingShadow:
+  0px 2px 4px 0px rgba(34, 36, 38, 0.12),
+  0px 2px 10px 0px rgba(34, 36, 38, 0.15)
+ !default;
+
+
+/*-------------------
+    Derived Values
+--------------------*/
+
+/* Loaders Position Offset */
+$loaderOffset : -($loaderSize / 2) !default;
+$loaderMargin : $loaderOffset 0em 0em $loaderOffset !default;
+
+/* Rendered Scrollbar Width */
+$scrollbarWidth: 17px !default;
+
+/* Maximum Single Character Glyph Width, aka Capital "W" */
+$glyphWidth: 1.1em !default;
+
+/* Used to match floats with text */
+$lineHeightOffset       : (($lineHeight - 1em) / 2) !default;
+$headerLineHeightOffset : ($headerLineHeight - 1em) / 2 !default;
+
+/* Header Spacing */
+$headerTopMargin    : calc(2rem - #{$headerLineHeightOffset}) !default;
+$headerBottomMargin : 1rem !default;
+
+/* Minimum Mobile Width */
+$pageMinWidth       : 320px !default;
+
+/* Positive / Negative Dupes */
+$successBackgroundColor : $positiveBackgroundColor !default;
+$successColor           : $positiveColor !default;
+$successBorderColor     : $positiveBorderColor !default;
+$successHeaderColor     : $positiveHeaderColor !default;
+$successTextColor       : $positiveTextColor !default;
+
+$errorBackgroundColor   : $negativeBackgroundColor !default;
+$errorColor             : $negativeColor !default;
+$errorBorderColor       : $negativeBorderColor !default;
+$errorHeaderColor       : $negativeHeaderColor !default;
+$errorTextColor         : $negativeTextColor !default;
+
+
+/* Responsive */
+$largestMobileScreen : ($tabletBreakpoint - 1px) !default;
+$largestTabletScreen : ($computerBreakpoint - 1px) !default;
+$largestSmallMonitor : ($largeMonitorBreakpoint - 1px) !default;
+$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px) !default;
+
+
+
+/*******************************
+             States
+*******************************/
+
+/*-------------------
+      Disabled
+--------------------*/
+
+$disabledOpacity: 0.45 !default;
+$disabledTextColor: rgba(40, 40, 40, 0.3) !default;
+$invertedDisabledTextColor: rgba(225, 225, 225, 0.3) !default;
+
+/*-------------------
+        Hover
+--------------------*/
+
+/*---  Shadows  ---*/
+$floatingShadowHover:
+  0px 2px 4px 0px rgba(34, 36, 38, 0.15),
+  0px 2px 10px 0px rgba(34, 36, 38, 0.25)
+ !default;
+
+/*---  Colors  ---*/
+$primaryColorHover    : saturate(darken($primaryColor, 5), 10) !default;
+$secondaryColorHover  : saturate(lighten($secondaryColor, 5), 10) !default;
+
+$redHover             : saturate(darken($red, 5), 10) !default;
+$orangeHover          : saturate(darken($orange, 5), 10) !default;
+$yellowHover          : saturate(darken($yellow, 5), 10) !default;
+$oliveHover           : saturate(darken($olive, 5), 10) !default;
+$greenHover           : saturate(darken($green, 5), 10) !default;
+$tealHover            : saturate(darken($teal, 5), 10) !default;
+$blueHover            : saturate(darken($blue, 5), 10) !default;
+$violetHover          : saturate(darken($violet, 5), 10) !default;
+$purpleHover          : saturate(darken($purple, 5), 10) !default;
+$pinkHover            : saturate(darken($pink, 5), 10) !default;
+$brownHover           : saturate(darken($brown, 5), 10) !default;
+
+$lightRedHover        : saturate(darken($lightRed, 5), 10) !default;
+$lightOrangeHover     : saturate(darken($lightOrange, 5), 10) !default;
+$lightYellowHover     : saturate(darken($lightYellow, 5), 10) !default;
+$lightOliveHover      : saturate(darken($lightOlive, 5), 10) !default;
+$lightGreenHover      : saturate(darken($lightGreen, 5), 10) !default;
+$lightTealHover       : saturate(darken($lightTeal, 5), 10) !default;
+$lightBlueHover       : saturate(darken($lightBlue, 5), 10) !default;
+$lightVioletHover     : saturate(darken($lightViolet, 5), 10) !default;
+$lightPurpleHover     : saturate(darken($lightPurple, 5), 10) !default;
+$lightPinkHover       : saturate(darken($lightPink, 5), 10) !default;
+$lightBrownHover      : saturate(darken($lightBrown, 5), 10) !default;
+$lightGreyHover       : saturate(darken($lightGrey, 5), 10) !default;
+$lightBlackHover      : saturate(darken($fullBlack, 5), 10) !default;
+
+/*---  Emotive  ---*/
+$positiveColorHover   : saturate(darken($positiveColor, 5), 10) !default;
+$negativeColorHover   : saturate(darken($negativeColor, 5), 10) !default;
+
+/*---  Brand   ---*/
+$facebookHoverColor   : saturate(darken($facebookColor, 5), 10) !default;
+$twitterHoverColor    : saturate(darken($twitterColor, 5), 10) !default;
+$googlePlusHoverColor : saturate(darken($googlePlusColor, 5), 10) !default;
+$linkedInHoverColor   : saturate(darken($linkedInColor, 5), 10) !default;
+$youtubeHoverColor    : saturate(darken($youtubeColor, 5), 10) !default;
+$instagramHoverColor  : saturate(darken($instagramColor, 5), 10) !default;
+$pinterestHoverColor  : saturate(darken($pinterestColor, 5), 10) !default;
+$vkHoverColor         : saturate(darken($vkColor, 5), 10) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackHover       : lighten($fullBlack, 5) !default;
+$blackHover           : lighten($black, 5) !default;
+$greyHover            : lighten($grey, 5) !default;
+
+/*---  Light Tones  ---*/
+$whiteHover           : darken($white, 5) !default;
+$offWhiteHover        : darken($offWhite, 5) !default;
+$darkWhiteHover       : darken($darkWhite, 5) !default;
+
+/*-------------------
+        Focus
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorFocus    : saturate(darken($primaryColor, 8), 20) !default;
+$secondaryColorFocus  : saturate(lighten($secondaryColor, 8), 20) !default;
+
+$redFocus             : saturate(darken($red, 8), 20) !default;
+$orangeFocus          : saturate(darken($orange, 8), 20) !default;
+$yellowFocus          : saturate(darken($yellow, 8), 20) !default;
+$oliveFocus           : saturate(darken($olive, 8), 20) !default;
+$greenFocus           : saturate(darken($green, 8), 20) !default;
+$tealFocus            : saturate(darken($teal, 8), 20) !default;
+$blueFocus            : saturate(darken($blue, 8), 20) !default;
+$violetFocus          : saturate(darken($violet, 8), 20) !default;
+$purpleFocus          : saturate(darken($purple, 8), 20) !default;
+$pinkFocus            : saturate(darken($pink, 8), 20) !default;
+$brownFocus           : saturate(darken($brown, 8), 20) !default;
+
+$lightRedFocus        : saturate(darken($lightRed, 8), 20) !default;
+$lightOrangeFocus     : saturate(darken($lightOrange, 8), 20) !default;
+$lightYellowFocus     : saturate(darken($lightYellow, 8), 20) !default;
+$lightOliveFocus      : saturate(darken($lightOlive, 8), 20) !default;
+$lightGreenFocus      : saturate(darken($lightGreen, 8), 20) !default;
+$lightTealFocus       : saturate(darken($lightTeal, 8), 20) !default;
+$lightBlueFocus       : saturate(darken($lightBlue, 8), 20) !default;
+$lightVioletFocus     : saturate(darken($lightViolet, 8), 20) !default;
+$lightPurpleFocus     : saturate(darken($lightPurple, 8), 20) !default;
+$lightPinkFocus       : saturate(darken($lightPink, 8), 20) !default;
+$lightBrownFocus      : saturate(darken($lightBrown, 8), 20) !default;
+$lightGreyFocus       : saturate(darken($lightGrey, 8), 20) !default;
+$lightBlackFocus      : saturate(darken($fullBlack, 8), 20) !default;
+
+/*---  Emotive  ---*/
+$positiveColorFocus   : saturate(darken($positiveColor, 8), 20) !default;
+$negativeColorFocus   : saturate(darken($negativeColor, 8), 20) !default;
+
+/*---  Brand   ---*/
+$facebookFocusColor   : saturate(darken($facebookColor, 8), 20) !default;
+$twitterFocusColor    : saturate(darken($twitterColor, 8), 20) !default;
+$googlePlusFocusColor : saturate(darken($googlePlusColor, 8), 20) !default;
+$linkedInFocusColor   : saturate(darken($linkedInColor, 8), 20) !default;
+$youtubeFocusColor    : saturate(darken($youtubeColor, 8), 20) !default;
+$instagramFocusColor  : saturate(darken($instagramColor, 8), 20) !default;
+$pinterestFocusColor  : saturate(darken($pinterestColor, 8), 20) !default;
+$vkFocusColor         : saturate(darken($vkColor, 8), 20) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackFocus       : lighten($fullBlack, 8) !default;
+$blackFocus           : lighten($black, 8) !default;
+$greyFocus            : lighten($grey, 8) !default;
+
+/*---  Light Tones  ---*/
+$whiteFocus           : darken($white, 8) !default;
+$offWhiteFocus        : darken($offWhite, 8) !default;
+$darkWhiteFocus       : darken($darkWhite, 8) !default;
+
+
+/*-------------------
+    Down (:active)
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorDown    : darken($primaryColor, 10) !default;
+$secondaryColorDown  : lighten($secondaryColor, 10) !default;
+
+$redDown             : darken($red, 10) !default;
+$orangeDown          : darken($orange, 10) !default;
+$yellowDown          : darken($yellow, 10) !default;
+$oliveDown           : darken($olive, 10) !default;
+$greenDown           : darken($green, 10) !default;
+$tealDown            : darken($teal, 10) !default;
+$blueDown            : darken($blue, 10) !default;
+$violetDown          : darken($violet, 10) !default;
+$purpleDown          : darken($purple, 10) !default;
+$pinkDown            : darken($pink, 10) !default;
+$brownDown           : darken($brown, 10) !default;
+
+$lightRedDown        : darken($lightRed, 10) !default;
+$lightOrangeDown     : darken($lightOrange, 10) !default;
+$lightYellowDown     : darken($lightYellow, 10) !default;
+$lightOliveDown      : darken($lightOlive, 10) !default;
+$lightGreenDown      : darken($lightGreen, 10) !default;
+$lightTealDown       : darken($lightTeal, 10) !default;
+$lightBlueDown       : darken($lightBlue, 10) !default;
+$lightVioletDown     : darken($lightViolet, 10) !default;
+$lightPurpleDown     : darken($lightPurple, 10) !default;
+$lightPinkDown       : darken($lightPink, 10) !default;
+$lightBrownDown      : darken($lightBrown, 10) !default;
+$lightGreyDown       : darken($lightGrey, 10) !default;
+$lightBlackDown      : darken($fullBlack, 10) !default;
+
+/*---  Emotive  ---*/
+$positiveColorDown   : darken($positiveColor, 10) !default;
+$negativeColorDown   : darken($negativeColor, 10) !default;
+
+/*---  Brand   ---*/
+$facebookDownColor   : darken($facebookColor, 10) !default;
+$twitterDownColor    : darken($twitterColor, 10) !default;
+$googlePlusDownColor : darken($googlePlusColor, 10) !default;
+$linkedInDownColor   : darken($linkedInColor, 10) !default;
+$youtubeDownColor    : darken($youtubeColor, 10) !default;
+$instagramDownColor  : darken($instagramColor, 10) !default;
+$pinterestDownColor  : darken($pinterestColor, 10) !default;
+$vkDownColor         : darken($vkColor, 10) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackDown       : lighten($fullBlack, 10) !default;
+$blackDown           : lighten($black, 10) !default;
+$greyDown            : lighten($grey, 10) !default;
+
+/*---  Light Tones  ---*/
+$whiteDown           : darken($white, 10) !default;
+$offWhiteDown        : darken($offWhite, 10) !default;
+$darkWhiteDown       : darken($darkWhite, 10) !default;
+
+
+/*-------------------
+        Active
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorActive    : saturate(darken($primaryColor, 5), 15) !default;
+$secondaryColorActive  : saturate(lighten($secondaryColor, 5), 15) !default;
+
+$redActive             : saturate(darken($red, 5), 15) !default;
+$orangeActive          : saturate(darken($orange, 5), 15) !default;
+$yellowActive          : saturate(darken($yellow, 5), 15) !default;
+$oliveActive           : saturate(darken($olive, 5), 15) !default;
+$greenActive           : saturate(darken($green, 5), 15) !default;
+$tealActive            : saturate(darken($teal, 5), 15) !default;
+$blueActive            : saturate(darken($blue, 5), 15) !default;
+$violetActive          : saturate(darken($violet, 5), 15) !default;
+$purpleActive          : saturate(darken($purple, 5), 15) !default;
+$pinkActive            : saturate(darken($pink, 5), 15) !default;
+$brownActive           : saturate(darken($brown, 5), 15) !default;
+
+$lightRedActive        : saturate(darken($lightRed, 5), 15) !default;
+$lightOrangeActive     : saturate(darken($lightOrange, 5), 15) !default;
+$lightYellowActive     : saturate(darken($lightYellow, 5), 15) !default;
+$lightOliveActive      : saturate(darken($lightOlive, 5), 15) !default;
+$lightGreenActive      : saturate(darken($lightGreen, 5), 15) !default;
+$lightTealActive       : saturate(darken($lightTeal, 5), 15) !default;
+$lightBlueActive       : saturate(darken($lightBlue, 5), 15) !default;
+$lightVioletActive     : saturate(darken($lightViolet, 5), 15) !default;
+$lightPurpleActive     : saturate(darken($lightPurple, 5), 15) !default;
+$lightPinkActive       : saturate(darken($lightPink, 5), 15) !default;
+$lightBrownActive      : saturate(darken($lightBrown, 5), 15) !default;
+$lightGreyActive       : saturate(darken($lightGrey, 5), 15) !default;
+$lightBlackActive      : saturate(darken($fullBlack, 5), 15) !default;
+
+/*---  Emotive  ---*/
+$positiveColorActive   : saturate(darken($positiveColor, 5), 15) !default;
+$negativeColorActive   : saturate(darken($negativeColor, 5), 15) !default;
+
+/*---  Brand   ---*/
+$facebookActiveColor   : saturate(darken($facebookColor, 5), 15) !default;
+$twitterActiveColor    : saturate(darken($twitterColor, 5), 15) !default;
+$googlePlusActiveColor : saturate(darken($googlePlusColor, 5), 15) !default;
+$linkedInActiveColor   : saturate(darken($linkedInColor, 5), 15) !default;
+$youtubeActiveColor    : saturate(darken($youtubeColor, 5), 15) !default;
+$instagramActiveColor  : saturate(darken($instagramColor, 5), 15) !default;
+$pinterestActiveColor  : saturate(darken($pinterestColor, 5), 15) !default;
+$vkActiveColor         : saturate(darken($vkColor, 5), 15) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackActive       : darken($fullBlack, 5) !default;
+$blackActive           : darken($black, 5) !default;
+$greyActive            : darken($grey, 5) !default;
+
+/*---  Light Tones  ---*/
+$whiteActive           : darken($white, 5) !default;
+$offWhiteActive        : darken($offWhite, 5) !default;
+$darkWhiteActive       : darken($darkWhite, 5) !default;