github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/themes/default/globals/site.variables (about)

     1  /*******************************
     2           Site Settings
     3  *******************************/
     4  
     5  /*-------------------
     6         Fonts
     7  --------------------*/
     8  
     9  @headerFont        : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    10  @pageFont          : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    11  @fontSmoothing     : antialiased;
    12  
    13  @importGoogleFonts : true;
    14  @googleFontName    : 'Lato';
    15  @googleFontSizes   : '400,700,400italic,700italic';
    16  @googleSubset      : 'latin';
    17  
    18  @googleProtocol    : 'https://';
    19  @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
    20  
    21  /*-------------------
    22        Base Sizes
    23  --------------------*/
    24  
    25  @emSize   : 14px;
    26  @fontSize : 14px;
    27  
    28  /*--------------
    29    Page Heading
    30  ---------------*/
    31  
    32  @headerFontWeight : bold;
    33  @headerLineHeight : 1.33em;
    34  
    35  @h1               : 2rem;
    36  @h2               : 1.714rem;
    37  @h3               : 1.28rem;
    38  @h4               : 1.071rem;
    39  @h5               : 1rem;
    40  
    41  /*-------------------
    42        Site Colors
    43  --------------------*/
    44  
    45  /*---  Colors  ---*/
    46  @black            : #1B1C1D;
    47  @blue             : #3B83C0;
    48  @green            : #5BBD72;
    49  @grey             : #CCCCCC;
    50  @orange           : #E07B53;
    51  @pink             : #D9499A;
    52  @purple           : #564F8A;
    53  @red              : #D95C5C;
    54  @teal             : #00B5AD;
    55  @yellow           : #F2C61F;
    56  
    57  /*---  Light Colors  ---*/
    58  @lightBlack       : #333333;
    59  @lightBlue        : #54C8FF;
    60  @lightGreen       : #2ECC40;
    61  @lightOrange      : #FF851B;
    62  @lightPink        : #FF8EDF;
    63  @lightPurple      : #CDC6FF;
    64  @lightRed         : #FF695E;
    65  @lightTeal        : #6DFFFF;
    66  @lightYellow      : #FFE21F;
    67  
    68  /*---   Neutrals  ---*/
    69  @fullBlack        : #000000;
    70  @darkGrey         : #AAAAAA;
    71  @lightGrey        : #DCDDDE;
    72  @offWhite         : #FAFAFA;
    73  @darkWhite        : #F0F0F0;
    74  @white            : #FFFFFF;
    75  
    76  /*-------------------
    77      Brand Colors
    78  --------------------*/
    79  
    80  @primaryColor        : @blue;
    81  @secondaryColor      : @black;
    82  
    83  @lightPrimaryColor   : @lightBlue;
    84  @lightSecondaryColor : @lightBlack;
    85  
    86  /*-------------------
    87          Sizes
    88  --------------------*/
    89  
    90  /*
    91    To have sizing resolve to a specified pixel values adjust
    92    the numerator to the desired font size and the denominator
    93    to the base em size
    94  */
    95  
    96  @miniSize        : (10 / 14);
    97  @tinySize        : (12 / 14);
    98  @smallSize       : (13 / 14);
    99  @mediumSize      : (14 / 14);
   100  @largeSize       : (16 / 14);
   101  @bigSize         : (18 / 14);
   102  @hugeSize        : (20 / 14);
   103  @massiveSize     : (24 / 14);
   104  
   105  /*-------------------
   106          Page
   107  --------------------*/
   108  
   109  @pageBackground      : #F7F7F7;
   110  @pageOverflowX       : hidden;
   111  
   112  @lineHeight          : 1.33;
   113  @textColor           : rgba(0, 0, 0, 0.8);
   114  
   115  /*-------------------
   116        Paragraph
   117  --------------------*/
   118  
   119  @paragraphMargin     : 0em 0em 1em;
   120  @paragraphLineHeight : @lineHeight;
   121  
   122  /*-------------------
   123         Links
   124  --------------------*/
   125  
   126  @linkColor           : #009FDA;
   127  @linkUnderline       : none;
   128  @linkHoverColor      : lighten(@linkColor, 5);
   129  
   130  /*-------------------
   131    Highlighted Text
   132  --------------------*/
   133  
   134  @highlightBackground      : #CCE2FF;
   135  @highlightColor           : @textColor;
   136  
   137  @inputHighlightBackground : rgba(100, 100, 100, 0.4);
   138  @inputHighlightColor      : @textColor;
   139  
   140  /*-------------------
   141         Loader
   142  --------------------*/
   143  
   144  @loaderSpeed: 0.6s;
   145  @loaderLineWidth: 0.2em;
   146  @loaderFillColor: rgba(0, 0, 0, 0.1);
   147  @loaderLineColor: @darkGrey;
   148  
   149  @invertedLoaderFillColor: rgba(255, 255, 255, 0.15);
   150  @invertedLoaderLineColor: @white;
   151  
   152  /*-------------------
   153          Grid
   154  --------------------*/
   155  
   156  @columnCount: 16;
   157  
   158  /*-------------------
   159       Breakpoints
   160  --------------------*/
   161  
   162  @mobileBreakpoint            : 320px;
   163  @tabletBreakpoint            : 768px;
   164  @computerBreakpoint          : 992px;
   165  @largeMonitorBreakpoint      : 1400px;
   166  @widescreenMonitorBreakpoint : 1920px;
   167  
   168  /*-------------------
   169       Alpha Colors
   170  --------------------*/
   171  
   172  @subtleTransparentBlack : rgba(0, 0, 0, 0.03);
   173  @transparentBlack       : rgba(0, 0, 0, 0.05);
   174  @strongTransparentBlack : rgba(0, 0, 0, 0.10);
   175  
   176  @subtleTransparentWhite : rgba(255, 255, 255, 0.02);
   177  @transparentWhite       : rgba(255, 255, 255, 0.05);
   178  @strongTransparentWhite : rgba(255, 255, 255, 0.07);
   179  
   180  /*-------------------
   181         Accents
   182  --------------------*/
   183  
   184  /* 4px @ default em */
   185  @relativeBorderRadius: 0.2857em;
   186  @absoluteBorderRadius: 0.2857rem;
   187  @defaultBorderRadius: @absoluteBorderRadius;
   188  
   189  /* Differentiating Neutrals */
   190  @subtleGradient: linear-gradient(transparent, @transparentBlack);
   191  
   192  /* Differentiating Layers */
   193  @subtleShadow: 0px 1px 2px 0 @transparentBlack;
   194  
   195  
   196  /*******************************
   197             Power-User
   198  *******************************/
   199  
   200  /*-------------------
   201          Paths
   202  --------------------*/
   203  
   204  /* For source only. Modified in gulp for dist */
   205  @imagePath : '../../themes/default/assets/images';
   206  @fontPath  : '../../themes/default/assets/fonts';
   207  
   208  /*-------------------
   209         Em Sizes
   210  --------------------*/
   211  
   212  /* Exact pixel values expressed in em */
   213  @mini            : unit( round(@miniSize * @emSize) / @emSize, rem);
   214  @tiny            : unit( round(@tinySize * @emSize) / @emSize, rem);
   215  @small           : unit( round(@smallSize * @emSize) / @emSize, rem);
   216  @medium          : unit( round(@mediumSize * @emSize) / @emSize, rem);
   217  @large           : unit( round(@largeSize * @emSize) / @emSize, rem);
   218  @big             : unit( round(@bigSize * @emSize) / @emSize, rem);
   219  @huge            : unit( round(@hugeSize * @emSize) / @emSize, rem);
   220  @massive         : unit( round(@massiveSize * @emSize) / @emSize, rem);
   221  
   222  @relativeMini    : unit( round(@miniSize * @emSize) / @emSize, em);
   223  @relativeTiny    : unit( round(@tinySize * @emSize) / @emSize, em);
   224  @relativeSmall   : unit( round(@smallSize * @emSize) / @emSize, em);
   225  @relativeMedium  : unit( round(@mediumSize * @emSize) / @emSize, em);
   226  @relativeLarge   : unit( round(@largeSize * @emSize) / @emSize, em);
   227  @relativeBig     : unit( round(@bigSize * @emSize) / @emSize, em);
   228  @relativeHuge    : unit( round(@hugeSize * @emSize) / @emSize, em);
   229  @relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em);
   230  
   231  /*-------------------
   232         Icons
   233  --------------------*/
   234  
   235  /* Maximum Glyph Width of Icon */
   236  @iconWidth : 1.18em;
   237  
   238  /*-------------------
   239         Easing
   240  --------------------*/
   241  
   242  @defaultEasing: ease;
   243  
   244  /*-------------------
   245       All Colors
   246  --------------------*/
   247  
   248  /*--- Colored Backgrounds ---*/
   249  @blueBackground   : #DFF0FF;
   250  @greenBackground  : #EBFFED;
   251  @orangeBackground : #FFEDDE;
   252  @pinkBackground   : #FFE3FB;
   253  @purpleBackground : #EAE7FF;
   254  @redBackground    : #FFE8E6;
   255  @tealBackground   : #E9FFFF;
   256  @yellowBackground : #FFF8DB;
   257  
   258  /*--- Colored Text ---*/
   259  @blueTextColor    : @blue;
   260  @orangeTextColor  : @orange;
   261  @pinkTextColor    : @pink;
   262  @purpleTextColor  : @purple;
   263  @redTextColor     : @red;
   264  @greenTextColor   : #1EBC30; // Green is difficult to read
   265  @tealTextColor    : #10A3A3; // Teal text is difficult to read
   266  @yellowTextColor  : #B58105; // Yellow text is difficult to read
   267  
   268  /*--- Colored Headers ---*/
   269  @blueHeaderColor   : darken(@blueTextColor, 5);
   270  @greenHeaderColor  : darken(@greenTextColor, 5);
   271  @orangeHeaderColor : darken(@orangeTextColor, 5);
   272  @pinkHeaderColor   : darken(@pinkTextColor, 5);
   273  @purpleHeaderColor : darken(@purpleTextColor, 5);
   274  @redHeaderColor    : darken(@redTextColor, 5);
   275  @tealHeaderColor   : darken(@tealTextColor, 5);
   276  @yellowHeaderColor : darken(@yellowTextColor, 5);
   277  
   278  
   279  /*-------------------
   280      Emotive Colors
   281  --------------------*/
   282  
   283  /* Positive */
   284  @positiveColor           : @green;
   285  @positiveBackgroundColor : #EEFFE7;
   286  @positiveBorderColor     : #B7CAA7;
   287  @positiveHeaderColor     : #356E36;
   288  @positiveTextColor       : #3C763D;
   289  
   290  /* Negative */
   291  @negativeColor           : @red;
   292  @negativeBackgroundColor : #FFF0F0;
   293  @negativeBorderColor     : #DBB1B1;
   294  @negativeHeaderColor     : #912D2B;
   295  @negativeTextColor       : #A94442;
   296  
   297  /* Info */
   298  @infoColor              : #31CCEC;
   299  @infoBackgroundColor    : #E9FAFF;
   300  @infoBorderColor        : #AAD6DF;
   301  @infoHeaderColor        : #297187;
   302  @infoTextColor          : #337B92;
   303  
   304  /* Warning */
   305  @warningColor           : #F2C037;
   306  @warningBorderColor     : #D9CAAB;
   307  @warningBackgroundColor : #FFFBE6;
   308  @warningHeaderColor     : #825C01;
   309  @warningTextColor       : #876A38;
   310  
   311  
   312  /*-------------------
   313       Neutral Text
   314  --------------------*/
   315  
   316  @darkTextColor               : rgba(0, 0, 0, 0.85);
   317  @lightTextColor              : rgba(0, 0, 0, 0.4);
   318  
   319  @unselectedTextColor         : rgba(0, 0, 0, 0.4);
   320  @hoveredTextColor            : rgba(0, 0, 0, 0.8);
   321  @pressedTextColor            : rgba(0, 0, 0, 0.8);
   322  @selectedTextColor           : rgba(0, 0, 0, 0.8);
   323  @disabledTextColor           : rgba(0, 0, 0, 0.2);
   324  
   325  @invertedTextColor           : rgba(255, 255, 255, 1);
   326  @invertedLightTextColor      : rgba(255, 255, 255, 0.8);
   327  @invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
   328  @invertedHoveredTextColor    : rgba(255, 255, 255, 1);
   329  @invertedPressedTextColor    : rgba(255, 255, 255, 1);
   330  @invertedSelectedTextColor   : rgba(255, 255, 255, 1);
   331  @invertedDisabledTextColor   : rgba(255, 255, 255, 0.2);
   332  
   333  /*-------------------
   334       Brand Colors
   335  --------------------*/
   336  
   337  @facebookColor   : #3B579D;
   338  @twitterColor    : #4092CC;
   339  @googlePlusColor : #D34836;
   340  @linkedInColor   : #1F88BE;
   341  @youtubeColor    : #CC181E;
   342  @instagramColor  : #49769C;
   343  @pinterestColor  : #00ACED;
   344  @vkColor         : #4D7198;
   345  
   346  /*-------------------
   347        Borders
   348  --------------------*/
   349  
   350  @circularRadius                : 500rem;
   351  
   352  @borderColor                   : rgba(39, 41, 43, 0.15);
   353  @selectedBorderColor           : rgba(39, 41, 43, 0.3);
   354  @disabledBorderColor           : rgba(39, 41, 43, 0.5);
   355  
   356  @solidBorderColor              : #D4D4D5;
   357  @solidSelectedBorderColor      : #BEBEBF;
   358  
   359  @whiteBorderColor              : rgba(255, 255, 255, 0.2);
   360  @selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);
   361  
   362  @solidWhiteBorderColor         : #555555;
   363  @selectedSolidWhiteBorderColor : #999999;
   364  
   365  
   366  /*-------------------
   367       Transitions
   368  --------------------*/
   369  
   370  @transitionDuration : 0.2s;
   371  @transitionEasing   : ease;
   372  
   373  /*-------------------
   374      Derived Values
   375  --------------------*/
   376  
   377  /* Rendered Scrollbar Width */
   378  @scrollbarWidth: 15px;
   379  
   380  /* Used to match floats with text */
   381  @lineHeightOffset       : ((@lineHeight - 1em) / 2);
   382  @headerLineHeightOffset : (@headerLineHeight - 1em) / 2;
   383  
   384  /* Header Spacing */
   385  @headerTopMargin    : ~"calc(2rem - "@headerLineHeightOffset~")";
   386  @headerBottomMargin : 1rem;
   387  @headerMargin       : @headerTopMargin 0em @headerBottomMargin;
   388  
   389  /* Minimum Mobile Width */
   390  @pageMinWidth       : 320px;
   391  
   392  /* Positive / Negative Dupes */
   393  @successColor           : @positiveColor;
   394  @errorColor             : @negativeColor;
   395  @successBackgroundColor : @positiveBackgroundColor;
   396  @errorBackgroundColor   : @negativeBackgroundColor;
   397  @successTextColor       : @positiveTextColor;
   398  @errorTextColor         : @negativeTextColor;
   399  @successBorderColor     : @positiveBorderColor;
   400  @errorBorderColor       : @negativeBorderColor;
   401  @successHeaderColor     : @positiveHeaderColor;
   402  @errorHeaderColor       : @negativeHeaderColor;
   403  
   404  /* Responsive */
   405  @largestMobileScreen : (@tabletBreakpoint - 1px);
   406  @largestTabletScreen : (@computerBreakpoint - 1px);
   407  @largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);
   408  
   409  /* Columns */
   410  @oneWide        : (1 / @columnCount * 100%);
   411  @twoWide        : (2 / @columnCount * 100%);
   412  @threeWide      : (3 / @columnCount * 100%);
   413  @fourWide       : (4 / @columnCount * 100%);
   414  @fiveWide       : (5 / @columnCount * 100%);
   415  @sixWide        : (6 / @columnCount * 100%);
   416  @sevenWide      : (7 / @columnCount * 100%);
   417  @eightWide      : (8 / @columnCount * 100%);
   418  @nineWide       : (9 / @columnCount * 100%);
   419  @tenWide        : (10 / @columnCount * 100%);
   420  @elevenWide     : (11 / @columnCount * 100%);
   421  @twelveWide     : (12 / @columnCount * 100%);
   422  @thirteenWide   : (13 / @columnCount * 100%);
   423  @fourteenWide   : (14 / @columnCount * 100%);
   424  @fifteenWide    : (15 / @columnCount * 100%);
   425  @sixteenWide    : (16 / @columnCount * 100%);
   426  
   427  @oneColumn      : (1 / 1 * 100%);
   428  @twoColumn      : (1 / 2 * 100%);
   429  @threeColumn    : (1 / 3 * 100%);
   430  @fourColumn     : (1 / 4 * 100%);
   431  @fiveColumn     : (1 / 5 * 100%);
   432  @sixColumn      : (1 / 6 * 100%);
   433  @sevenColumn    : (1 / 7 * 100%);
   434  @eightColumn    : (1 / 8 * 100%);
   435  @nineColumn     : (1 / 9 * 100%);
   436  @tenColumn      : (1 / 10 * 100%);
   437  @elevenColumn   : (1 / 11 * 100%);
   438  @twelveColumn   : (1 / 12 * 100%);
   439  @thirteenColumn : (1 / 13 * 100%);
   440  @fourteenColumn : (1 / 14 * 100%);
   441  @fifteenColumn  : (1 / 15 * 100%);
   442  @sixteenColumn  : (1 / 16 * 100%);
   443  
   444  
   445  /*******************************
   446             States
   447  *******************************/
   448  
   449  /*-------------------
   450        Disabled
   451  --------------------*/
   452  
   453  @disabledOpacity: 0.3;
   454  @disabledTextColor: rgba(40, 40, 40, 0.3);
   455  @invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
   456  
   457  /*-------------------
   458          Hover
   459  --------------------*/
   460  
   461  /*---  Colors  ---*/
   462  @primaryColorHover    : lighten(@primaryColor, 3);
   463  @secondaryColorHover  : lighten(@secondaryColor, 3);
   464  
   465  @blueHover            : lighten(@blue, 3);
   466  @greenHover           : lighten(@green, 3);
   467  @orangeHover          : lighten(@orange, 3);
   468  @pinkHover            : lighten(@pink, 3);
   469  @purpleHover          : lighten(@purple, 3);
   470  @redHover             : lighten(@red, 3);
   471  @tealHover            : lighten(@teal, 3);
   472  @yellowHover          : lighten(@yellow, 3);
   473  
   474  @lightBlueHover       : lighten(@lightBlue, 3);
   475  @lightGreenHover      : lighten(@lightGreen, 3);
   476  @lightOrangeHover     : lighten(@lightOrange, 3);
   477  @lightPinkHover       : lighten(@lightPink, 3);
   478  @lightPurpleHover     : lighten(@lightPurple, 3);
   479  @lightRedHover        : lighten(@lightRed, 3);
   480  @lightTealHover       : lighten(@lightTeal, 3);
   481  @lightYellowHover     : lighten(@lightYellow, 3);
   482  
   483  /*---  Emotive  ---*/
   484  @positiveColorHover   : lighten(@positiveColor, 3);
   485  @negativeColorHover   : lighten(@negativeColor, 3);
   486  
   487  /*---  Neutrals  ---*/
   488  @fullBlackHover       : lighten(@fullBlack, 3);
   489  @blackHover           : @black;
   490  
   491  @lightGreyHover       : lighten(@lightGrey, 3);
   492  @greyHover            : lighten(@grey, 3);
   493  @darkGreyHover        : lighten(@darkGrey, 3);
   494  
   495  @whiteHover           : lighten(@white, 3);
   496  @offWhiteHover        : lighten(@offWhite, 3);
   497  @darkWhiteHover       : lighten(@darkWhite, 3);
   498  
   499  @facebookHoverColor   : lighten(@facebookColor, 3);
   500  @twitterHoverColor    : lighten(@twitterColor, 3);
   501  @googlePlusHoverColor : lighten(@googlePlusColor, 3);
   502  @linkedInHoverColor   : lighten(@linkedInColor, 3);
   503  @youtubeHoverColor    : lighten(@youtubeColor, 3);
   504  @instagramHoverColor  : lighten(@instagramColor, 3);
   505  @pinterestHoverColor  : lighten(@pinterestColor, 3);
   506  @vkHoverColor         : lighten(@vkColor, 3);
   507  
   508  
   509  /*-------------------
   510      Down (:active)
   511  --------------------*/
   512  
   513  
   514  /*---  Colors  ---*/
   515  @primaryColorDown    : darken(@primaryColor, 7);
   516  @secondaryColorDown  : darken(@secondaryColor, 7);
   517  
   518  @blueDown            : darken(@blue, 7);
   519  @greenDown           : darken(@green, 7);
   520  @orangeDown          : darken(@orange, 7);
   521  @pinkDown            : darken(@pink, 7);
   522  @purpleDown          : darken(@purple, 7);
   523  @redDown             : darken(@red, 7);
   524  @tealDown            : darken(@teal, 7);
   525  @yellowDown          : darken(@yellow, 7);
   526  
   527  @lightBlueDown       : darken(@lightBlue, 7);
   528  @lightGreenDown      : darken(@lightGreen, 7);
   529  @lightOrangeDown     : darken(@lightOrange, 7);
   530  @lightPinkDown       : darken(@lightPink, 7);
   531  @lightPurpleDown     : darken(@lightPurple, 7);
   532  @lightRedDown        : darken(@lightRed, 7);
   533  @lightTealDown       : darken(@lightTeal, 7);
   534  @lightYellowDown     : darken(@lightYellow, 7);
   535  
   536  /*---  Emotive  ---*/
   537  @positiveColorDown   : darken(@positiveColor, 7);
   538  @negativeColorDown   : darken(@negativeColor, 7);
   539  
   540  /*---  Neutrals  ---*/
   541  @fullBlackDown       : darken(@fullBlack, 7);
   542  @blackDown           : darken(@black, 7);
   543  @lightBlackDown      : darken(@lightBlack, 7);
   544  
   545  @lightGreyDown       : darken(@lightGrey, 7);
   546  @greyDown            : darken(@grey, 7);
   547  @darkGreyDown        : darken(@darkGrey, 7);
   548  
   549  @whiteDown           : darken(@white, 7);
   550  @offWhiteDown        : darken(@offWhite, 7);
   551  @darkWhiteDown       : darken(@darkWhite, 7);
   552  
   553  @facebookDownColor   : darken(@facebookColor, 7);
   554  @twitterDownColor    : darken(@twitterColor, 7);
   555  @googlePlusDownColor : darken(@googlePlusColor, 7);
   556  @linkedInDownColor   : darken(@linkedInColor, 7);
   557  @youtubeDownColor    : darken(@youtubeColor, 7);
   558  @instagramDownColor  : darken(@instagramColor, 7);
   559  @pinterestDownColor  : darken(@pinterestColor, 7);
   560  @vkDownColor         : darken(@vkColor, 7);
   561  
   562  
   563  /*-------------------
   564          Active
   565  --------------------*/
   566  
   567  /*---  Standard  ---*/
   568  @primaryColorActive    : darken(@primaryColor, 5);
   569  @secondaryColorActive  : darken(@secondaryColor, 5);
   570  
   571  @blueActive            : darken(@blue, 5);
   572  @greenActive           : darken(@green, 5);
   573  @orangeActive          : darken(@orange, 5);
   574  @pinkActive            : darken(@pink, 5);
   575  @purpleActive          : darken(@purple, 5);
   576  @redActive             : darken(@red, 5);
   577  @tealActive            : darken(@teal, 5);
   578  @yellowActive          : darken(@yellow, 5);
   579  
   580  @lightBlueActive       : darken(@lightBlue, 5);
   581  @lightGreenActive      : darken(@lightGreen, 5);
   582  @lightOrangeActive     : darken(@lightOrange, 5);
   583  @lightPinkActive       : darken(@lightPink, 5);
   584  @lightPurpleActive     : darken(@lightPurple, 5);
   585  @lightRedActive        : darken(@lightRed, 5);
   586  @lightTealActive       : darken(@lightTeal, 5);
   587  @lightYellowActive     : darken(@lightYellow, 5);
   588  
   589  /*---  Emotive  ---*/
   590  @positiveColorActive   : darken(@positiveColor, 5);
   591  @negativeColorActive   : darken(@negativeColor, 5);
   592  
   593  /*---  Neutrals  ---*/
   594  @fullBlackActive       : darken(@fullBlack, 5);
   595  @blackActive           : darken(@black, 5);
   596  @lightBlackActive      : darken(@lightBlack, 5);
   597  
   598  @lightGreyActive       : darken(@lightGrey, 5);
   599  @greyActive            : darken(@grey, 5);
   600  @darkGreyActive        : darken(@darkGrey, 5);
   601  
   602  @whiteActive           : darken(@white, 5);
   603  @offWhiteActive        : darken(@offWhite, 5);
   604  @darkWhiteActive       : darken(@darkWhite, 5);
   605  
   606  @facebookActiveColor   : darken(@facebookColor, 5);
   607  @twitterActiveColor    : darken(@twitterColor, 5);
   608  @googlePlusActiveColor : darken(@googlePlusColor, 5);
   609  @linkedInActiveColor   : darken(@linkedInColor, 5);
   610  @youtubeActiveColor    : darken(@youtubeColor, 5);
   611  @instagramActiveColor  : darken(@instagramColor, 5);
   612  @pinterestActiveColor  : darken(@pinterestColor, 5);
   613  @vkActiveColor         : darken(@vkColor, 5);