|
|
/******************************* Global Variables*******************************/
/*------------------- Paths--------------------*/
@imagePath : "../../themes/packages/default/assets/images";@fontPath : "../../themes/packages/default/assets/fonts";
/*------------------- Page--------------------*/
@bodyBackground : #FCFCFC;@fontSize : 14px;@textColor : rgba(0, 0, 0, 0.8);
@paragraphMargin : 1em 0em;
@linkColor : #009FDA;@linkUnderline : none;@linkHoverColor : lighten( @linkColor, 5);
@highlightBackground : #FFFFCC;@highlightColor : @textColor;
/*------------------- Breakpoints--------------------*/
@mobileBreakpoint : 320px;@tabletBreakpoint : 768px;@computerBreakpoint : 992px;@largeMonitorBreakpoint : 1400px;@widescreenMonitorBreakpoint : 1900px;
/*------------------- Fonts--------------------*/
@headerFont : Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;@pageFont : Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
/*------------------- Icons--------------------*/
/* Width of largest icon */@iconWidth : 1.23em;
/******************************* BG 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);
/******************************* Colors*******************************/
/*------------------- Background--------------------*/
/*--- Colors ---*/@blue : #0074D9;@green : #2ECC40;@orange : #FF851B;@pink : #D9499A;@purple : #564F8A;@red : #FF4136;@teal : #39CCCC;@yellow : #FFCB08;
@lightBlue : #54C8FF;@lightGreen : #2ECC40;@lightOrange : #FF851B;@lightPink : #FF8EDF;@lightPurple : #CDC6FF;@lightRed : #FF695E;@lightTeal : #6DFFFF;@lightYellow : #FFE21F;
@primaryColor : @teal;@secondaryColor : @black;@tertiaryColor : @orange;
/*--- Emotive ---*/
@infoColor : #E6F4F9;@warningColor : #96904D;@errorColor : #D95C5C;
/*--- Neutrals ---*/@darkBlack : #232323;@black : #555555;@lightBlack : #999999;
@darkGrey : #AAAAAA;@grey : #CCCCCC;@lightGrey : #DCDDDE;
@white : #FFFFFF;@offWhite : #FAFAFA;@darkWhite : #F0F0F0;
/*------------------- Emotive--------------------*/@positiveColor : @green;@positiveBorderColor : #FFFAFA;@positiveBackgroundColor : #E7BEBE;
@negativeColor : @red;@negativeBorderColor : lighten(@red, 25);@negativeBackgroundColor : lighten(@red, 38);
/*------------------- Text Colors--------------------*/
@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;
/*------------------- Borders--------------------*/
@circularRadius : 500rem;
@borderColor : rgba(0, 0, 0, 0.1);@selectedBorderColor : rgba(0, 0, 0, 0.2);@solidBorderColor : #DDDDDD;
@whiteBorderColor : rgba(255, 255, 255, 0.3);@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
/*------------------- 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);
@infoColorHover : lighten( @infoColor, 5);@warningColorHover : lighten( @warningColor, 5);@errorColorHover : lighten( @errorColor, 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);
@infoColorDown : darken(@infoColor, 7);@warningColorDown : darken(@warningColor, 7);@errorColorDown : darken(@errorColor, 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);
@infoColorActive : darken(@infoColor, 5);@warningColorActive : darken(@warningColor, 5);@errorColorActive : darken(@errorColor, 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);
|
