tabulator-tables 6.5.0 → 6.5.1

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

@@ -0,0 +1,843 @@
+@use "sass:meta";
+@use "sass:math";
+@use "sass:color";
+
+/// 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 meta.type-of($number) == 'number' and not math.is-unitless($number) {
+    @return math.div($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  : calc(1 / strip-unit($emSize)) + rem !default;
+$a4px  : calc(4 / strip-unit($emSize)) + rem !default;
+$a11px  : calc(11 / strip-unit($emSize)) + rem !default;
+$a14px  : calc(14 / strip-unit($emSize)) + rem !default;
+
+$relative1px  : calc(1 / strip-unit($emSize)) + em !default;
+$relative4px  : calc(4 / strip-unit($emSize)) + em !default;
+$relative11px  : calc(11 / strip-unit($emSize)) + em !default;
+$relative14px  : calc(14 / strip-unit($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    : color.adjust($redTextColor, $lightness: -5%) !default;
+$oliveHeaderColor  : color.adjust($oliveTextColor, $lightness: -5%) !default;
+$greenHeaderColor  : color.adjust($greenTextColor, $lightness: -5%) !default;
+$yellowHeaderColor : color.adjust($yellowTextColor, $lightness: -5%) !default;
+$blueHeaderColor   : color.adjust($blueTextColor, $lightness: -5%) !default;
+$tealHeaderColor   : color.adjust($tealTextColor, $lightness: -5%) !default;
+$pinkHeaderColor   : color.adjust($pinkTextColor, $lightness: -5%) !default;
+$violetHeaderColor : color.adjust($violetTextColor, $lightness: -5%) !default;
+$purpleHeaderColor : color.adjust($purpleTextColor, $lightness: -5%) !default;
+$orangeHeaderColor : color.adjust($orangeTextColor, $lightness: -5%) !default;
+$brownHeaderColor  : color.adjust($brownTextColor, $lightness: -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 : calc(18 / 14) * 1em !default;
+
+$h1 : calc(28 / 14) * 1rem !default;
+$h2 : calc(24 / 14) * 1rem !default;
+$h3 : calc(18 / 14) * 1rem !default;
+$h4 : calc(15 / 14) * 1rem !default;
+$h5 : calc(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: color.adjust($inputColor, $lightness: 75%) !default;
+$inputPlaceholderFocusColor: color.adjust($inputColor, $lightness: 45%) !default;
+
+/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
+$inputLineHeight: calc(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        : calc(11 / 14) !default;
+$tinySize        : calc(12 / 14) !default;
+$smallSize       : calc(13 / 14) !default;
+$mediumSize      : calc(14 / 14) !default;
+$largeSize       : calc(16 / 14) !default;
+$bigSize         : calc(18 / 14) !default;
+$hugeSize        : calc(20 / 14) !default;
+$massiveSize     : calc(24 / 14) !default;
+
+
+/*-------------------
+      Paragraph
+--------------------*/
+
+$paragraphMargin     : 0em 0em 1em !default;
+$paragraphLineHeight : $lineHeight !default;
+
+/*-------------------
+       Links
+--------------------*/
+
+$linkColor           : #4183C4 !default;
+$linkUnderline       : none !default;
+$linkHoverColor      : color.adjust(color.adjust($linkColor, $saturation: 20%), $lightness: -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            : calc(math.round($miniSize * $emSize) / $emSize) * 1rem !default;
+$tiny            : calc(math.round($tinySize * $emSize) / $emSize) * 1rem !default;
+$small           : calc(math.round($smallSize * $emSize) / $emSize) * 1rem !default;
+$medium          : calc(math.round($mediumSize * $emSize) / $emSize) * 1rem !default;
+$large           : calc(math.round($largeSize * $emSize) / $emSize) * 1rem !default;
+$big             : calc(math.round($bigSize * $emSize) / $emSize) * 1rem !default;
+$huge            : calc(math.round($hugeSize * $emSize) / $emSize) * 1rem !default;
+$massive         : calc(math.round($massiveSize * $emSize) / $emSize) * 1rem !default;
+
+/* em */
+$relativeMini    : calc(math.round($miniSize * $emSize) / $emSize) * 1em !default;
+$relativeTiny    : calc(math.round($tinySize * $emSize) / $emSize) * 1em !default;
+$relativeSmall   : calc(math.round($smallSize * $emSize) / $emSize) * 1em !default;
+$relativeMedium  : calc(math.round($mediumSize * $emSize) / $emSize) * 1em !default;
+$relativeLarge   : calc(math.round($largeSize * $emSize) / $emSize) * 1em !default;
+$relativeBig     : calc(math.round($bigSize * $emSize) / $emSize) * 1em !default;
+$relativeHuge    : calc(math.round($hugeSize * $emSize) / $emSize) * 1em !default;
+$relativeMassive : calc(math.round($massiveSize * $emSize) / $emSize) * 1em !default;
+
+/* rem */
+$absoluteMini    : calc(math.round($miniSize * $emSize) / $emSize) * 1rem !default;
+$absoluteTiny    : calc(math.round($tinySize * $emSize) / $emSize) * 1rem !default;
+$absoluteSmall   : calc(math.round($smallSize * $emSize) / $emSize) * 1rem !default;
+$absoluteMedium  : calc(math.round($mediumSize * $emSize) / $emSize) * 1rem !default;
+$absoluteLarge   : calc(math.round($largeSize * $emSize) / $emSize) * 1rem !default;
+$absoluteBig     : calc(math.round($bigSize * $emSize) / $emSize) * 1rem !default;
+$absoluteHuge    : calc(math.round($hugeSize * $emSize) / $emSize) * 1rem !default;
+$absoluteMassive : calc(math.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        : calc(1 / $columnCount * 100%) !default;
+$twoWide        : calc(2 / $columnCount * 100%) !default;
+$threeWide      : calc(3 / $columnCount * 100%) !default;
+$fourWide       : calc(4 / $columnCount * 100%) !default;
+$fiveWide       : calc(5 / $columnCount * 100%) !default;
+$sixWide        : calc(6 / $columnCount * 100%) !default;
+$sevenWide      : calc(7 / $columnCount * 100%) !default;
+$eightWide      : calc(8 / $columnCount * 100%) !default;
+$nineWide       : calc(9 / $columnCount * 100%) !default;
+$tenWide        : calc(10 / $columnCount * 100%) !default;
+$elevenWide     : calc(11 / $columnCount * 100%) !default;
+$twelveWide     : calc(12 / $columnCount * 100%) !default;
+$thirteenWide   : calc(13 / $columnCount * 100%) !default;
+$fourteenWide   : calc(14 / $columnCount * 100%) !default;
+$fifteenWide    : calc(15 / $columnCount * 100%) !default;
+$sixteenWide    : calc(16 / $columnCount * 100%) !default;
+
+$oneColumn      : calc(1 / 1 * 100%) !default;
+$twoColumn      : calc(1 / 2 * 100%) !default;
+$threeColumn    : calc(1 / 3 * 100%) !default;
+$fourColumn     : calc(1 / 4 * 100%) !default;
+$fiveColumn     : calc(1 / 5 * 100%) !default;
+$sixColumn      : calc(1 / 6 * 100%) !default;
+$sevenColumn    : calc(1 / 7 * 100%) !default;
+$eightColumn    : calc(1 / 8 * 100%) !default;
+$nineColumn     : calc(1 / 9 * 100%) !default;
+$tenColumn      : calc(1 / 10 * 100%) !default;
+$elevenColumn   : calc(1 / 11 * 100%) !default;
+$twelveColumn   : calc(1 / 12 * 100%) !default;
+$thirteenColumn : calc(1 / 13 * 100%) !default;
+$fourteenColumn : calc(1 / 14 * 100%) !default;
+$fifteenColumn  : calc(1 / 15 * 100%) !default;
+$sixteenColumn  : calc(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 : - calc($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       : calc(($lineHeight - 1em) / 2) !default;
+$headerLineHeightOffset : calc(($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    : color.adjust(color.adjust($primaryColor, $lightness: -5%), $saturation: 10%) !default;
+$secondaryColorHover  : color.adjust(color.adjust($secondaryColor, $lightness: 5%), $saturation: 10%) !default;
+
+$redHover             : color.adjust(color.adjust($red, $lightness: -5%), $saturation: 10%) !default;
+$orangeHover          : color.adjust(color.adjust($orange, $lightness: -5%), $saturation: 10%) !default;
+$yellowHover          : color.adjust(color.adjust($yellow, $lightness: -5%), $saturation: 10%) !default;
+$oliveHover           : color.adjust(color.adjust($olive, $lightness: -5%), $saturation: 10%) !default;
+$greenHover           : color.adjust(color.adjust($green, $lightness: -5%), $saturation: 10%) !default;
+$tealHover            : color.adjust(color.adjust($teal, $lightness: -5%), $saturation: 10%) !default;
+$blueHover            : color.adjust(color.adjust($blue, $lightness: -5%), $saturation: 10%) !default;
+$violetHover          : color.adjust(color.adjust($violet, $lightness: -5%), $saturation: 10%) !default;
+$purpleHover          : color.adjust(color.adjust($purple, $lightness: -5%), $saturation: 10%) !default;
+$pinkHover            : color.adjust(color.adjust($pink, $lightness: -5%), $saturation: 10%) !default;
+$brownHover           : color.adjust(color.adjust($brown, $lightness: -5%), $saturation: 10%) !default;
+
+$lightRedHover        : color.adjust(color.adjust($lightRed, $lightness: -5%), $saturation: 10%) !default;
+$lightOrangeHover     : color.adjust(color.adjust($lightOrange, $lightness: -5%), $saturation: 10%) !default;
+$lightYellowHover     : color.adjust(color.adjust($lightYellow, $lightness: -5%), $saturation: 10%) !default;
+$lightOliveHover      : color.adjust(color.adjust($lightOlive, $lightness: -5%), $saturation: 10%) !default;
+$lightGreenHover      : color.adjust(color.adjust($lightGreen, $lightness: -5%), $saturation: 10%) !default;
+$lightTealHover       : color.adjust(color.adjust($lightTeal, $lightness: -5%), $saturation: 10%) !default;
+$lightBlueHover       : color.adjust(color.adjust($lightBlue, $lightness: -5%), $saturation: 10%) !default;
+$lightVioletHover     : color.adjust(color.adjust($lightViolet, $lightness: -5%), $saturation: 10%) !default;
+$lightPurpleHover     : color.adjust(color.adjust($lightPurple, $lightness: -5%), $saturation: 10%) !default;
+$lightPinkHover       : color.adjust(color.adjust($lightPink, $lightness: -5%), $saturation: 10%) !default;
+$lightBrownHover      : color.adjust(color.adjust($lightBrown, $lightness: -5%), $saturation: 10%) !default;
+$lightGreyHover       : color.adjust(color.adjust($lightGrey, $lightness: -5%), $saturation: 10%) !default;
+$lightBlackHover      : color.adjust(color.adjust($fullBlack, $lightness: -5%), $saturation: 10%) !default;
+
+/*---  Emotive  ---*/
+$positiveColorHover   : color.adjust(color.adjust($positiveColor, $lightness: -5%), $saturation: 10%) !default;
+$negativeColorHover   : color.adjust(color.adjust($negativeColor, $lightness: -5%), $saturation: 10%) !default;
+
+/*---  Brand   ---*/
+$facebookHoverColor   : color.adjust(color.adjust($facebookColor, $lightness: -5%), $saturation: 10%) !default;
+$twitterHoverColor    : color.adjust(color.adjust($twitterColor, $lightness: -5%), $saturation: 10%) !default;
+$googlePlusHoverColor : color.adjust(color.adjust($googlePlusColor, $lightness: -5%), $saturation: 10%) !default;
+$linkedInHoverColor   : color.adjust(color.adjust($linkedInColor, $lightness: -5%), $saturation: 10%) !default;
+$youtubeHoverColor    : color.adjust(color.adjust($youtubeColor, $lightness: -5%), $saturation: 10%) !default;
+$instagramHoverColor  : color.adjust(color.adjust($instagramColor, $lightness: -5%), $saturation: 10%) !default;
+$pinterestHoverColor  : color.adjust(color.adjust($pinterestColor, $lightness: -5%), $saturation: 10%) !default;
+$vkHoverColor         : color.adjust(color.adjust($vkColor, $lightness: -5%), $saturation: 10%) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackHover       : color.adjust($fullBlack, $lightness: 5%) !default;
+$blackHover           : color.adjust($black, $lightness: 5%) !default;
+$greyHover            : color.adjust($grey, $lightness: 5%) !default;
+
+/*---  Light Tones  ---*/
+$whiteHover           : color.adjust($white, $lightness: -5%) !default;
+$offWhiteHover        : color.adjust($offWhite, $lightness: -5%) !default;
+$darkWhiteHover       : color.adjust($darkWhite, $lightness: -5%) !default;
+
+/*-------------------
+        Focus
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorFocus    : color.adjust(color.adjust($primaryColor, $lightness: -8%), $saturation: 20%) !default;
+$secondaryColorFocus  : color.adjust(color.adjust($secondaryColor, $lightness: 8%), $saturation: 20%) !default;
+
+$redFocus             : color.adjust(color.adjust($red, $lightness: -8%), $saturation: 20%) !default;
+$orangeFocus          : color.adjust(color.adjust($orange, $lightness: -8%), $saturation: 20%) !default;
+$yellowFocus          : color.adjust(color.adjust($yellow, $lightness: -8%), $saturation: 20%) !default;
+$oliveFocus           : color.adjust(color.adjust($olive, $lightness: -8%), $saturation: 20%) !default;
+$greenFocus           : color.adjust(color.adjust($green, $lightness: -8%), $saturation: 20%) !default;
+$tealFocus            : color.adjust(color.adjust($teal, $lightness: -8%), $saturation: 20%) !default;
+$blueFocus            : color.adjust(color.adjust($blue, $lightness: -8%), $saturation: 20%) !default;
+$violetFocus          : color.adjust(color.adjust($violet, $lightness: -8%), $saturation: 20%) !default;
+$purpleFocus          : color.adjust(color.adjust($purple, $lightness: -8%), $saturation: 20%) !default;
+$pinkFocus            : color.adjust(color.adjust($pink, $lightness: -8%), $saturation: 20%) !default;
+$brownFocus           : color.adjust(color.adjust($brown, $lightness: -8%), $saturation: 20%) !default;
+
+$lightRedFocus        : color.adjust(color.adjust($lightRed, $lightness: -8%), $saturation: 20%) !default;
+$lightOrangeFocus     : color.adjust(color.adjust($lightOrange, $lightness: -8%), $saturation: 20%) !default;
+$lightYellowFocus     : color.adjust(color.adjust($lightYellow, $lightness: -8%), $saturation: 20%) !default;
+$lightOliveFocus      : color.adjust(color.adjust($lightOlive, $lightness: -8%), $saturation: 20%) !default;
+$lightGreenFocus      : color.adjust(color.adjust($lightGreen, $lightness: -8%), $saturation: 20%) !default;
+$lightTealFocus       : color.adjust(color.adjust($lightTeal, $lightness: -8%), $saturation: 20%) !default;
+$lightBlueFocus       : color.adjust(color.adjust($lightBlue, $lightness: -8%), $saturation: 20%) !default;
+$lightVioletFocus     : color.adjust(color.adjust($lightViolet, $lightness: -8%), $saturation: 20%) !default;
+$lightPurpleFocus     : color.adjust(color.adjust($lightPurple, $lightness: -8%), $saturation: 20%) !default;
+$lightPinkFocus       : color.adjust(color.adjust($lightPink, $lightness: -8%), $saturation: 20%) !default;
+$lightBrownFocus      : color.adjust(color.adjust($lightBrown, $lightness: -8%), $saturation: 20%) !default;
+$lightGreyFocus       : color.adjust(color.adjust($lightGrey, $lightness: -8%), $saturation: 20%) !default;
+$lightBlackFocus      : color.adjust(color.adjust($fullBlack, $lightness: -8%), $saturation: 20%) !default;
+
+/*---  Emotive  ---*/
+$positiveColorFocus   : color.adjust(color.adjust($positiveColor, $lightness: -8%), $saturation: 20%) !default;
+$negativeColorFocus   : color.adjust(color.adjust($negativeColor, $lightness: -8%), $saturation: 20%) !default;
+
+/*---  Brand   ---*/
+$facebookFocusColor   : color.adjust(color.adjust($facebookColor, $lightness: -8%), $saturation: 20%) !default;
+$twitterFocusColor    : color.adjust(color.adjust($twitterColor, $lightness: -8%), $saturation: 20%) !default;
+$googlePlusFocusColor : color.adjust(color.adjust($googlePlusColor, $lightness: -8%), $saturation: 20%) !default;
+$linkedInFocusColor   : color.adjust(color.adjust($linkedInColor, $lightness: -8%), $saturation: 20%) !default;
+$youtubeFocusColor    : color.adjust(color.adjust($youtubeColor, $lightness: -8%), $saturation: 20%) !default;
+$instagramFocusColor  : color.adjust(color.adjust($instagramColor, $lightness: -8%), $saturation: 20%) !default;
+$pinterestFocusColor  : color.adjust(color.adjust($pinterestColor, $lightness: -8%), $saturation: 20%) !default;
+$vkFocusColor         : color.adjust(color.adjust($vkColor, $lightness: -8%), $saturation: 20%) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackFocus       : color.adjust($fullBlack, $lightness: 8%) !default;
+$blackFocus           : color.adjust($black, $lightness: 8%) !default;
+$greyFocus            : color.adjust($grey, $lightness: 8%) !default;
+
+/*---  Light Tones  ---*/
+$whiteFocus           : color.adjust($white, $lightness: -8%) !default;
+$offWhiteFocus        : color.adjust($offWhite, $lightness: -8%) !default;
+$darkWhiteFocus       : color.adjust($darkWhite, $lightness: -8%) !default;
+
+
+/*-------------------
+    Down (:active)
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorDown    : color.adjust($primaryColor, $lightness: -10%) !default;
+$secondaryColorDown  : color.adjust($secondaryColor, $lightness: 10%) !default;
+
+$redDown             : color.adjust($red, $lightness: -10%) !default;
+$orangeDown          : color.adjust($orange, $lightness: -10%) !default;
+$yellowDown          : color.adjust($yellow, $lightness: -10%) !default;
+$oliveDown           : color.adjust($olive, $lightness: -10%) !default;
+$greenDown           : color.adjust($green, $lightness: -10%) !default;
+$tealDown            : color.adjust($teal, $lightness: -10%) !default;
+$blueDown            : color.adjust($blue, $lightness: -10%) !default;
+$violetDown          : color.adjust($violet, $lightness: -10%) !default;
+$purpleDown          : color.adjust($purple, $lightness: -10%) !default;
+$pinkDown            : color.adjust($pink, $lightness: -10%) !default;
+$brownDown           : color.adjust($brown, $lightness: -10%) !default;
+
+$lightRedDown        : color.adjust($lightRed, $lightness: -10%) !default;
+$lightOrangeDown     : color.adjust($lightOrange, $lightness: -10%) !default;
+$lightYellowDown     : color.adjust($lightYellow, $lightness: -10%) !default;
+$lightOliveDown      : color.adjust($lightOlive, $lightness: -10%) !default;
+$lightGreenDown      : color.adjust($lightGreen, $lightness: -10%) !default;
+$lightTealDown       : color.adjust($lightTeal, $lightness: -10%) !default;
+$lightBlueDown       : color.adjust($lightBlue, $lightness: -10%) !default;
+$lightVioletDown     : color.adjust($lightViolet, $lightness: -10%) !default;
+$lightPurpleDown     : color.adjust($lightPurple, $lightness: -10%) !default;
+$lightPinkDown       : color.adjust($lightPink, $lightness: -10%) !default;
+$lightBrownDown      : color.adjust($lightBrown, $lightness: -10%) !default;
+$lightGreyDown       : color.adjust($lightGrey, $lightness: -10%) !default;
+$lightBlackDown      : color.adjust($fullBlack, $lightness: -10%) !default;
+
+/*---  Emotive  ---*/
+$positiveColorDown   : color.adjust($positiveColor, $lightness: -10%) !default;
+$negativeColorDown   : color.adjust($negativeColor, $lightness: -10%) !default;
+
+/*---  Brand   ---*/
+$facebookDownColor   : color.adjust($facebookColor, $lightness: -10%) !default;
+$twitterDownColor    : color.adjust($twitterColor, $lightness: -10%) !default;
+$googlePlusDownColor : color.adjust($googlePlusColor, $lightness: -10%) !default;
+$linkedInDownColor   : color.adjust($linkedInColor, $lightness: -10%) !default;
+$youtubeDownColor    : color.adjust($youtubeColor, $lightness: -10%) !default;
+$instagramDownColor  : color.adjust($instagramColor, $lightness: -10%) !default;
+$pinterestDownColor  : color.adjust($pinterestColor, $lightness: -10%) !default;
+$vkDownColor         : color.adjust($vkColor, $lightness: -10%) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackDown       : color.adjust($fullBlack, $lightness: 10%) !default;
+$blackDown           : color.adjust($black, $lightness: 10%) !default;
+$greyDown            : color.adjust($grey, $lightness: 10%) !default;
+
+/*---  Light Tones  ---*/
+$whiteDown           : color.adjust($white, $lightness: -10%) !default;
+$offWhiteDown        : color.adjust($offWhite, $lightness: -10%) !default;
+$darkWhiteDown       : color.adjust($darkWhite, $lightness: -10%) !default;
+
+
+/*-------------------
+        Active
+--------------------*/
+
+/*---  Colors  ---*/
+$primaryColorActive    : color.adjust(color.adjust($primaryColor, $lightness: -5%), $saturation: 15%) !default;
+$secondaryColorActive  : color.adjust(color.adjust($secondaryColor, $lightness: 5%), $saturation: 15%) !default;
+
+$redActive             : color.adjust(color.adjust($red, $lightness: -5%), $saturation: 15%) !default;
+$orangeActive          : color.adjust(color.adjust($orange, $lightness: -5%), $saturation: 15%) !default;
+$yellowActive          : color.adjust(color.adjust($yellow, $lightness: -5%), $saturation: 15%) !default;
+$oliveActive           : color.adjust(color.adjust($olive, $lightness: -5%), $saturation: 15%) !default;
+$greenActive           : color.adjust(color.adjust($green, $lightness: -5%), $saturation: 15%) !default;
+$tealActive            : color.adjust(color.adjust($teal, $lightness: -5%), $saturation: 15%) !default;
+$blueActive            : color.adjust(color.adjust($blue, $lightness: -5%), $saturation: 15%) !default;
+$violetActive          : color.adjust(color.adjust($violet, $lightness: -5%), $saturation: 15%) !default;
+$purpleActive          : color.adjust(color.adjust($purple, $lightness: -5%), $saturation: 15%) !default;
+$pinkActive            : color.adjust(color.adjust($pink, $lightness: -5%), $saturation: 15%) !default;
+$brownActive           : color.adjust(color.adjust($brown, $lightness: -5%), $saturation: 15%) !default;
+
+$lightRedActive        : color.adjust(color.adjust($lightRed, $lightness: -5%), $saturation: 15%) !default;
+$lightOrangeActive     : color.adjust(color.adjust($lightOrange, $lightness: -5%), $saturation: 15%) !default;
+$lightYellowActive     : color.adjust(color.adjust($lightYellow, $lightness: -5%), $saturation: 15%) !default;
+$lightOliveActive      : color.adjust(color.adjust($lightOlive, $lightness: -5%), $saturation: 15%) !default;
+$lightGreenActive      : color.adjust(color.adjust($lightGreen, $lightness: -5%), $saturation: 15%) !default;
+$lightTealActive       : color.adjust(color.adjust($lightTeal, $lightness: -5%), $saturation: 15%) !default;
+$lightBlueActive       : color.adjust(color.adjust($lightBlue, $lightness: -5%), $saturation: 15%) !default;
+$lightVioletActive     : color.adjust(color.adjust($lightViolet, $lightness: -5%), $saturation: 15%) !default;
+$lightPurpleActive     : color.adjust(color.adjust($lightPurple, $lightness: -5%), $saturation: 15%) !default;
+$lightPinkActive       : color.adjust(color.adjust($lightPink, $lightness: -5%), $saturation: 15%) !default;
+$lightBrownActive      : color.adjust(color.adjust($lightBrown, $lightness: -5%), $saturation: 15%) !default;
+$lightGreyActive       : color.adjust(color.adjust($lightGrey, $lightness: -5%), $saturation: 15%) !default;
+$lightBlackActive      : color.adjust(color.adjust($fullBlack, $lightness: -5%), $saturation: 15%) !default;
+
+/*---  Emotive  ---*/
+$positiveColorActive   : color.adjust(color.adjust($positiveColor, $lightness: -5%), $saturation: 15%) !default;
+$negativeColorActive   : color.adjust(color.adjust($negativeColor, $lightness: -5%), $saturation: 15%) !default;
+
+/*---  Brand   ---*/
+$facebookActiveColor   : color.adjust(color.adjust($facebookColor, $lightness: -5%), $saturation: 15%) !default;
+$twitterActiveColor    : color.adjust(color.adjust($twitterColor, $lightness: -5%), $saturation: 15%) !default;
+$googlePlusActiveColor : color.adjust(color.adjust($googlePlusColor, $lightness: -5%), $saturation: 15%) !default;
+$linkedInActiveColor   : color.adjust(color.adjust($linkedInColor, $lightness: -5%), $saturation: 15%) !default;
+$youtubeActiveColor    : color.adjust(color.adjust($youtubeColor, $lightness: -5%), $saturation: 15%) !default;
+$instagramActiveColor  : color.adjust(color.adjust($instagramColor, $lightness: -5%), $saturation: 15%) !default;
+$pinterestActiveColor  : color.adjust(color.adjust($pinterestColor, $lightness: -5%), $saturation: 15%) !default;
+$vkActiveColor         : color.adjust(color.adjust($vkColor, $lightness: -5%), $saturation: 15%) !default;
+
+/*---  Dark Tones  ---*/
+$fullBlackActive       : color.adjust($fullBlack, $lightness: -5%) !default;
+$blackActive           : color.adjust($black, $lightness: -5%) !default;
+$greyActive            : color.adjust($grey, $lightness: -5%) !default;
+
+/*---  Light Tones  ---*/
+$whiteActive           : color.adjust($white, $lightness: -5%) !default;
+$offWhiteActive        : color.adjust($offWhite, $lightness: -5%) !default;
+$darkWhiteActive       : color.adjust($darkWhite, $lightness: -5%) !default;