|
|
/******************************* Site Settings*******************************/
/*------------------- Paths--------------------*/
@imagePath : "../../themes/packages/default/assets/images";@fontPath : "../../themes/packages/default/assets/fonts";
/*------------------- Fonts--------------------*/
@headerFont : "Helvetica Neue", Arial, Helvetica, sans-serif;@pageFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
/*------------------- Site Colors--------------------*/
/*--- Colors ---*/@blue : #0074D9;@green : #2ECC40;@orange : #FF851B;@pink : #D9499A;@purple : #A24096;@red : #FF4136;@teal : #39CCCC;@yellow : #FFCB08;
@black : #191919;@grey : #CCCCCC;@white : #FFFFFF;
@primaryColor : @blue;@secondaryColor : @black;@tertiaryColor : @orange;
/*------------------- Page--------------------*/
@bodyBackground : #FCFCFC;@fontSize : 14px;@textColor : rgba(0, 0, 0, 0.8);
@headerMargin : 1em 0em 1rem;@paragraphMargin : 0em 0em 1em;
@linkColor : #009FDA;@linkUnderline : none;@linkHoverColor : lighten( @linkColor, 5);
@highlightBackground : #FFFFCC;@highlightColor : @textColor;
/*------------------- Background Colors--------------------*/
@subtleTransparentBlack : rgba(0, 0, 0, 0.01);@transparentBlack : rgba(0, 0, 0, 0.05);@strongTransparentBlack : rgba(0, 0, 0, 0.10);
@subtleTransparentWhite : rgba(255, 255, 255, 0.01);@transparentWhite : rgba(255, 255, 255, 0.05);@strongTransparentWhite : rgba(255, 255, 255, 0.01);
/* Used for differentiating neutrals */@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
/* Used for differentiating layers */@subtleShadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.05);
/*------------------- Grid--------------------*/
@columnCount: 16;
/*------------------- Breakpoints--------------------*/
@mobileBreakpoint : 320px;@tabletBreakpoint : 768px;@computerBreakpoint : 992px;@largeMonitorBreakpoint : 1400px;@widescreenMonitorBreakpoint : 1900px;
/******************************* Power-User*******************************/
/*------------------- Icons--------------------*/
/* Max Width of Icon */@iconWidth : 1.23em;
/*------------------- Easing--------------------*/
@defaultEasing: ease;
/*--- Light Variations ---*/@lightBlue : #54C8FF;@lightGreen : #2ECC40;@lightOrange : #FF851B;@lightPink : #FF8EDF;@lightPurple : #CDC6FF;@lightRed : #FF695E;@lightTeal : #6DFFFF;@lightYellow : #FFE21F;
/*--- Neutrals ---*/@darkBlack : #232323;@lightBlack : #555555;@darkGrey : #AAAAAA;@lightGrey : #DCDDDE;@offWhite : #FAFAFA;@darkWhite : #F0F0F0;
/*--- Colored Backgrounds ---*/@blueBackground : #D3E4F3;@greenBackground : #DEF2E0;@orangeBackground : #F7E5D6;@pinkBackground : #F9CEE6;@purpleBackground : #E0DDF5;@redBackground : #F8D5D3;@tealBackground : #D2F5F5;@yellowBackground : #FCF5D8;
/*--- Colored Text ---*/@blueTextColor : @blue;@greenTextColor : @green;@orangeTextColor : @orange;@pinkTextColor : @pink;@purpleTextColor : @purple;@redTextColor : @red;@tealTextColor : #10A3A3; // Teal text is difficult to read@yellowTextColor : #B58105; // Yellow text is difficult to read
/*--- Colored Headers ---*/@blueHeaderColor : darken(@blueTextColor, 5);@greenHeaderColor : darken(@greenTextColor, 5);@orangeHeaderColor : darken(@orangeTextColor, 5);@pinkHeaderColor : darken(@pinkTextColor, 5);@purpleHeaderColor : darken(@purpleTextColor, 5);@redHeaderColor : darken(@redTextColor, 5);@tealHeaderColor : darken(@tealTextColor, 5);@yellowHeaderColor : darken(@yellowTextColor, 5);
/*------------------- Emotive Colors--------------------*/
/* Mood */@positiveBackgroundColor : #DFF0D8;@negativeBackgroundColor : #F2DEDE;
@positiveBorderColor : #D6E9C6;@negativeBorderColor : #DA9797;
/* Solid Background Color */@positiveColor : @green;@negativeColor : @red;
@positiveTextColor : #3C763D;@negativeTextColor : #A94442;
/* Status */@infoBackgroundColor : #D9EDF7;@warningBackgroundColor : #FCF8E3;@successBackgroundColor : @positiveBackgroundColor;@errorBackgroundColor : @negativeBackgroundColor;
@infoBorderColor : #BCE8F1;@warningBorderColor : #FAEBCC;@successBorderColor : @positiveBorderColor;@errorBorderColor : @negativeBorderColor;
@infoTextColor : #31708F;@warningTextColor : #8A6D3B;@successTextColor : @positiveTextColor;@errorTextColor : @negativeTextColor;
/* Darkened Headers */@positiveHeaderColor : darken(@positiveTextColor, 5);@negativeHeaderColor : darken(@negativeTextColor, 5);@infoHeaderColor : darken(@infoTextColor, 5);@warningHeaderColor : darken(@warningTextColor, 5);@successHeaderColor : darken(@successTextColor, 5);@errorHeaderColor : darken(@errorTextColor, 5);
/*------------------- Neutral Text--------------------*/
@darkTextColor : rgba(0, 0, 0, 0.85);@lightTextColor : rgba(0, 0, 0, 0.4);
@invertedTextColor : rgba(255, 255, 255, 1);@invertedLightTextColor : rgba(255, 255, 255, 0.8);@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);@invertedSelectedTextColor : rgba(255, 255, 255, 1);@invertedDisabledTextColor : rgba(255, 255, 255, 0.3);
@unselectedTextColor : rgba(0, 0, 0, 0.4);@selectedTextColor : rgba(0, 0, 0, 0.8);@disabledTextColor : rgba(0, 0, 0, 0.2);
/*------------------- Brand Colors--------------------*/
@facebookColor : #3B579D;@twitterColor : #4092CC;@googlePlusColor : #D34836;@linkedInColor : #1F88BE;@youtubeColor : #CC181E;@instagramColor : #49769C;@pinterestColor : #00ACED;@vkColor : #4D7198;
/*------------------- Grid Columns--------------------*/
@oneWide : (1 / @columnCount * 100%);@twoWide : (2 / @columnCount * 100%);@threeWide : (3 / @columnCount * 100%);@fourWide : (4 / @columnCount * 100%);@fiveWide : (5 / @columnCount * 100%);@sixWide : (6 / @columnCount * 100%);@sevenWide : (7 / @columnCount * 100%);@eightWide : (8 / @columnCount * 100%);@nineWide : (9 / @columnCount * 100%);@tenWide : (10 / @columnCount * 100%);@elevenWide : (11 / @columnCount * 100%);@twelveWide : (12 / @columnCount * 100%);@thirteenWide : (13 / @columnCount * 100%);@fourteenWide : (14 / @columnCount * 100%);@fifteenWide : (15 / @columnCount * 100%);@sixteenWide : (16 / @columnCount * 100%);
@oneColumn : (1 / 1 * 100%);@twoColumn : (1 / 2 * 100%);@threeColumn : (1 / 3 * 100%);@fourColumn : (1 / 4 * 100%);@fiveColumn : (1 / 5 * 100%);@sixColumn : (1 / 6 * 100%);@sevenColumn : (1 / 7 * 100%);@eightColumn : (1 / 8 * 100%);@nineColumn : (1 / 9 * 100%);@tenColumn : (1 / 10 * 100%);@elevenColumn : (1 / 11 * 100%);@twelveColumn : (1 / 12 * 100%);@thirteenColumn : (1 / 13 * 100%);@fourteenColumn : (1 / 14 * 100%);@fifteenColumn : (1 / 15 * 100%);@sixteenColumn : (1 / 16 * 100%);
/*------------------- Borders--------------------*/
@circularRadius : 500rem;
@borderColor : rgba(0, 0, 0, 0.1);@selectedBorderColor : rgba(0, 0, 0, 0.2);
@solidBorderColor : #DDDDDD;@solidSelectedBorderColor : #B0B0B0;
@whiteBorderColor : rgba(255, 255, 255, 0.2);@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
@solidWhiteBorderColor : #555555;@selectedSolidWhiteBorderColor : #999999;
/*------------------- Sizes--------------------*/
@mini : 0.7em;@tiny : 0.8em;@small : 0.875em;@medium : 1em;@large : 1.125em;@big : 1.25em;@huge : 1.375em;@massive : 1.5em;
/*------------------- Transitions--------------------*/
@transitionDuration : 0.25s;@transitionEasing : ease;
/******************************* States*******************************/
/*------------------- Disabled--------------------*/
@disabledOpacity: 0.3;
/*------------------- Hover--------------------*/
/*--- Colors ---*/@primaryColorHover : lighten( @primaryColor, 5);@secondaryColorHover : lighten( @secondaryColor, 5);@tertiaryColorHover : lighten( @tertiaryColor, 5);
@blueHover : lighten( @blue, 5);@greenHover : lighten( @green, 5);@orangeHover : lighten( @orange, 5);@pinkHover : lighten( @pink, 5);@purpleHover : lighten( @purple, 5);@redHover : lighten( @red, 5);@tealHover : lighten( @teal, 5);@yellowHover : lighten( @yellow, 5);
/*--- Emotive ---*/@positiveColorHover : lighten( @positiveColor, 5);@negativeColorHover : lighten( @negativeColor, 5);
/*--- Neutrals ---*/@darkBlackHover : lighten( @darkBlack, 5);@blackHover : lighten( @black, 5);@lightBlackHover : lighten( @lightBlack, 5);
@lightGreyHover : lighten( @lightGrey, 5);@greyHover : lighten( @grey, 5);@darkGreyHover : lighten( @darkGrey, 5);
@whiteHover : lighten( @white, 5);@offWhiteHover : lighten( @offWhite, 5);@darkWhiteHover : lighten( @darkWhite, 5);
@facebookHoverColor : lighten( @facebookColor, 5);@twitterHoverColor : lighten( @twitterColor, 5);@googlePlusHoverColor : lighten( @googlePlusColor, 5);@linkedInHoverColor : lighten( @linkedInColor, 5);@youtubeHoverColor : lighten( @youtubeColor, 5);@instagramHoverColor : lighten( @instagramColor, 5);@pinterestHoverColor : lighten( @pinterestColor, 5);@vkHoverColor : lighten( @vkColor, 5);
/*------------------- Down (:active)--------------------*/
/*--- Colors ---*/@primaryColorDown : darken(@primaryColor, 7);@secondaryColorDown : darken(@secondaryColor, 7);@tertiaryColorDown : darken(@tertiaryColor, 7);
@blueDown : darken(@blue, 7);@greenDown : darken(@green, 7);@orangeDown : darken(@orange, 7);@pinkDown : darken(@pink, 7);@purpleDown : darken(@purple, 7);@redDown : darken(@red, 7);@tealDown : darken(@teal, 7);@yellowDown : darken(@yellow, 7);
/*--- Emotive ---*/@positiveColorDown : darken(@positiveColor, 7);@negativeColorDown : darken(@negativeColor, 7);
/*--- Neutrals ---*/@darkBlackDown : darken(@darkBlack, 7);@blackDown : darken(@black, 7);@lightBlackDown : darken(@lightBlack, 7);
@lightGreyDown : darken(@lightGrey, 7);@greyDown : darken(@grey, 7);@darkGreyDown : darken(@darkGrey, 7);
@whiteDown : darken(@white, 7);@offWhiteDown : darken(@offWhite, 7);@darkWhiteDown : darken(@darkWhite, 7);
@facebookDownColor : darken(@facebookColor, 7);@twitterDownColor : darken(@twitterColor, 7);@googlePlusDownColor : darken(@googlePlusColor, 7);@linkedInDownColor : darken(@linkedInColor, 7);@youtubeDownColor : darken(@youtubeColor, 7);@instagramDownColor : darken(@instagramColor, 7);@pinterestDownColor : darken(@pinterestColor, 7);@vkDownColor : darken(@vkColor, 7);
/*------------------- Active--------------------*/
/*--- Standard ---*/@primaryColorActive : darken(@primaryColor, 5);@secondaryColorActive : darken(@secondaryColor, 5);@tertiaryColorActive : darken(@tertiaryColor, 5);
@blueActive : darken(@blue, 5);@greenActive : darken(@green, 5);@orangeActive : darken(@orange, 5);@pinkActive : darken(@pink, 5);@purpleActive : darken(@purple, 5);@redActive : darken(@red, 5);@tealActive : darken(@teal, 5);@yellowActive : darken(@yellow, 5);
/*--- Emotive ---*/@positiveColorActive : darken(@positiveColor, 5);@negativeColorActive : darken(@negativeColor, 5);
/*--- Neutrals ---*/@darkBlackActive : darken(@darkBlack, 5);@blackActive : darken(@black, 5);@lightBlackActive : darken(@lightBlack, 5);
@lightGreyActive : darken(@lightGrey, 5);@greyActive : darken(@grey, 5);@darkGreyActive : darken(@darkGrey, 5);
@whiteActive : darken(@white, 5);@offWhiteActive : darken(@offWhite, 5);@darkWhiteActive : darken(@darkWhite, 5);
@facebookActiveColor : darken(@facebookColor, 5);@twitterActiveColor : darken(@twitterColor, 5);@googlePlusActiveColor : darken(@googlePlusColor, 5);@linkedInActiveColor : darken(@linkedInColor, 5);@youtubeActiveColor : darken(@youtubeColor, 5);@instagramActiveColor : darken(@instagramColor, 5);@pinterestActiveColor : darken(@pinterestColor, 5);@vkActiveColor : darken(@vkColor, 5);
|
