|
|
/******************************* Site Settings*******************************/
/*------------------- Paths--------------------*/
@imagePath : "../../themes/packages/default/assets/images";@fontPath : "../../themes/packages/default/assets/fonts";
/*------------------- Fonts--------------------*/
@headerFont : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;@pageFont : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;@fontSmoothing : antialiased;
@importGoogleFonts : true;@googleFontName : 'Lato';@googleFontSizes : '300,400,700,300italic,400italic,700italic';
/*------------------- Site Colors--------------------*/
/*--- Colors ---*/@blue : #3B83C0;@green : #5BBD72;@orange : #E07B53;@pink : #D9499A;@purple : #564F8A;@red : #D95C5C;@teal : #00B5AD;@yellow : #F2C61F;
@black : #1B1C1D;@grey : #CCCCCC;@white : #FFFFFF;
/*--- Light Colors ---*/@lightBlue : #54C8FF;@lightGreen : #2ECC40;@lightOrange : #FF851B;@lightPink : #FF8EDF;@lightPurple : #CDC6FF;@lightRed : #FF695E;@lightTeal : #6DFFFF;@lightYellow : #FFE21F;
@primaryColor : @blue;@secondaryColor : @black;
/*------------------- Page--------------------*/
@pageBackground : #F7F7F7;@lineHeight : 1.33;
@pageOverflowX : hidden;
@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 : rgba(255, 255, 160, 0.4);@highlightColor : @textColor;
/*------------------- Background Colors--------------------*/
@subtleTransparentBlack : rgba(0, 0, 0, 0.03);@transparentBlack : rgba(0, 0, 0, 0.05);@strongTransparentBlack : rgba(0, 0, 0, 0.10);
@subtleTransparentWhite : rgba(255, 255, 255, 0.02);@transparentWhite : rgba(255, 255, 255, 0.05);@strongTransparentWhite : rgba(255, 255, 255, 0.07);
/* Used for differentiating neutrals */@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
/* Used for differentiating layers */@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
/*------------------- Grid--------------------*/
@columnCount: 16;
/*------------------- Breakpoints--------------------*/
@mobileBreakpoint : 320px;@tabletBreakpoint : 768px;@computerBreakpoint : 992px;@largeMonitorBreakpoint : 1400px;@widescreenMonitorBreakpoint : 1920px;
/******************************* Power-User*******************************/
/*------------------- Icons--------------------*/
/* Max Width of Icon */@iconWidth : 1.23em;
/*------------------- Easing--------------------*/
@defaultEasing: ease;
/*--- Neutrals ---*/@fullBlack : #000000;@lightBlack : #333333;@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;@orangeTextColor : @orange;@pinkTextColor : @pink;@purpleTextColor : @purple;@redTextColor : @red;@greenTextColor : #1EBC30; // Green is difficult to read@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 */@positiveColor : @green;@negativeColor : @red;
@positiveBackgroundColor : #E4F5DD;@negativeBackgroundColor : #FAE8E8;
@positiveBorderColor : #B7CAA7;@negativeBorderColor : #DBB1B1;
@positiveTextColor : #3C763D;@negativeTextColor : #A94442;
/* Status */@infoColor : #31CCEC;@warningColor : #F2C037;@successColor : @positiveColor;@errorColor : @negativeColor;
@infoBackgroundColor : #E5F6FB;@warningBackgroundColor : #FCF8E3;
@infoBorderColor : #AAD6DF;@warningBorderColor : #D3C4A5;@warningTextColor : #8A6D3B;
@infoTextColor : #337B92;
/*------------------- Neutral Text--------------------*/
@darkTextColor : rgba(0, 0, 0, 0.85);@lightTextColor : rgba(0, 0, 0, 0.4);
@unselectedTextColor : rgba(0, 0, 0, 0.4);@hoveredTextColor : rgba(0, 0, 0, 0.8);@pressedTextColor : rgba(0, 0, 0, 0.8);@selectedTextColor : rgba(0, 0, 0, 0.8);@disabledTextColor : rgba(0, 0, 0, 0.2);
@invertedTextColor : rgba(255, 255, 255, 1);@invertedLightTextColor : rgba(255, 255, 255, 0.8);@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);@invertedHoveredTextColor : rgba(255, 255, 255, 1);@invertedPressedTextColor : rgba(255, 255, 255, 1);@invertedSelectedTextColor : rgba(255, 255, 255, 1);@invertedDisabledTextColor : rgba(255, 255, 255, 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.15);@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.2s;@transitionEasing : ease;
/*------------------- Derived Values--------------------*/
/* Makes sure padded grid can fit at 320px */@pageMinWidth : (320px - (@fontSize * 3));
/* Used to match floats with text */@lineHeightOffset : ((@lineHeight - 1em) / 2);
/* Positive / Negative Dupes */@successBackgroundColor : @positiveBackgroundColor;@errorBackgroundColor : @negativeBackgroundColor;@successTextColor : @positiveTextColor;@errorTextColor : @negativeTextColor;@successBorderColor : @positiveBorderColor;@errorBorderColor : @negativeBorderColor;
/* Header Colors */@positiveHeaderColor : darken(@positiveTextColor, 5);@negativeHeaderColor : darken(@negativeTextColor, 5);@infoHeaderColor : darken(@infoTextColor, 5);@warningHeaderColor : darken(@warningTextColor, 5);@successHeaderColor : darken(@successTextColor, 5);@errorHeaderColor : darken(@errorTextColor, 5);
/* Responsive */@largestMobileScreen : (@tabletBreakpoint - 1px);@largestTabletScreen : (@computerBreakpoint - 1px);
/* 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%);
/******************************* States*******************************/
/*------------------- Disabled--------------------*/
@disabledOpacity: 0.3;
/*------------------- Hover--------------------*/
/*--- Colors ---*/@primaryColorHover : lighten( @primaryColor, 3);@secondaryColorHover : lighten( @secondaryColor, 3);
@blueHover : lighten( @blue, 3);@greenHover : lighten( @green, 3);@orangeHover : lighten( @orange, 3);@pinkHover : lighten( @pink, 3);@purpleHover : lighten( @purple, 3);@redHover : lighten( @red, 3);@tealHover : lighten( @teal, 3);@yellowHover : lighten( @yellow, 3);
@lightBlueHover : lighten( @lightBlue, 3);@lightGreenHover : lighten( @lightGreen, 3);@lightOrangeHover : lighten( @lightOrange, 3);@lightPinkHover : lighten( @lightPink, 3);@lightPurpleHover : lighten( @lightPurple, 3);@lightRedHover : lighten( @lightRed, 3);@lightTealHover : lighten( @lightTeal, 3);@lightYellowHover : lighten( @lightYellow, 3);
/*--- Emotive ---*/@positiveColorHover : lighten( @positiveColor, 3);@negativeColorHover : lighten( @negativeColor, 3);
/*--- Neutrals ---*/@fullBlackHover : lighten( @fullBlack, 3);@blackHover : lighten( @black, 3);@lightBlackHover : lighten( @lightBlack, 3);
@lightGreyHover : lighten( @lightGrey, 3);@greyHover : lighten( @grey, 3);@darkGreyHover : lighten( @darkGrey, 3);
@whiteHover : lighten( @white, 3);@offWhiteHover : lighten( @offWhite, 3);@darkWhiteHover : lighten( @darkWhite, 3);
@facebookHoverColor : lighten( @facebookColor, 3);@twitterHoverColor : lighten( @twitterColor, 3);@googlePlusHoverColor : lighten( @googlePlusColor, 3);@linkedInHoverColor : lighten( @linkedInColor, 3);@youtubeHoverColor : lighten( @youtubeColor, 3);@instagramHoverColor : lighten( @instagramColor, 3);@pinterestHoverColor : lighten( @pinterestColor, 3);@vkHoverColor : lighten( @vkColor, 3);
/*------------------- Down (:active)--------------------*/
/*--- Colors ---*/@primaryColorDown : darken(@primaryColor, 5);@secondaryColorDown : darken(@secondaryColor, 5);
@blueDown : darken(@blue, 5);@greenDown : darken(@green, 5);@orangeDown : darken(@orange, 5);@pinkDown : darken(@pink, 5);@purpleDown : darken(@purple, 5);@redDown : darken(@red, 5);@tealDown : darken(@teal, 5);@yellowDown : darken(@yellow, 5);
@lightBlueDown : darken(@lightBlue, 5);@lightGreenDown : darken(@lightGreen, 5);@lightOrangeDown : darken(@lightOrange, 5);@lightPinkDown : darken(@lightPink, 5);@lightPurpleDown : darken(@lightPurple, 5);@lightRedDown : darken(@lightRed, 5);@lightTealDown : darken(@lightTeal, 5);@lightYellowDown : darken(@lightYellow, 5);
/*--- Emotive ---*/@positiveColorDown : darken(@positiveColor, 5);@negativeColorDown : darken(@negativeColor, 5);
/*--- Neutrals ---*/@fullBlackDown : darken(@fullBlack, 5);@blackDown : darken(@black, 5);@lightBlackDown : darken(@lightBlack, 5);
@lightGreyDown : darken(@lightGrey, 5);@greyDown : darken(@grey, 5);@darkGreyDown : darken(@darkGrey, 5);
@whiteDown : darken(@white, 5);@offWhiteDown : darken(@offWhite, 5);@darkWhiteDown : darken(@darkWhite, 5);
@facebookDownColor : darken(@facebookColor, 5);@twitterDownColor : darken(@twitterColor, 5);@googlePlusDownColor : darken(@googlePlusColor, 5);@linkedInDownColor : darken(@linkedInColor, 5);@youtubeDownColor : darken(@youtubeColor, 5);@instagramDownColor : darken(@instagramColor, 5);@pinterestDownColor : darken(@pinterestColor, 5);@vkDownColor : darken(@vkColor, 5);
/*------------------- Active--------------------*/
/*--- Standard ---*/@primaryColorActive : darken(@primaryColor, 3);@secondaryColorActive : darken(@secondaryColor, 3);
@blueActive : darken(@blue, 3);@greenActive : darken(@green, 3);@orangeActive : darken(@orange, 3);@pinkActive : darken(@pink, 3);@purpleActive : darken(@purple, 3);@redActive : darken(@red, 3);@tealActive : darken(@teal, 3);@yellowActive : darken(@yellow, 3);
@lightBlueActive : darken(@lightBlue, 3);@lightGreenActive : darken(@lightGreen, 3);@lightOrangeActive : darken(@lightOrange, 3);@lightPinkActive : darken(@lightPink, 3);@lightPurpleActive : darken(@lightPurple, 3);@lightRedActive : darken(@lightRed, 3);@lightTealActive : darken(@lightTeal, 3);@lightYellowActive : darken(@lightYellow, 3);
/*--- Emotive ---*/@positiveColorActive : darken(@positiveColor, 3);@negativeColorActive : darken(@negativeColor, 3);
/*--- Neutrals ---*/@fullBlackActive : darken(@fullBlack, 3);@blackActive : darken(@black, 3);@lightBlackActive : darken(@lightBlack, 3);
@lightGreyActive : darken(@lightGrey, 3);@greyActive : darken(@grey, 3);@darkGreyActive : darken(@darkGrey, 3);
@whiteActive : darken(@white, 3);@offWhiteActive : darken(@offWhite, 3);@darkWhiteActive : darken(@darkWhite, 3);
@facebookActiveColor : darken(@facebookColor, 3);@twitterActiveColor : darken(@twitterColor, 3);@googlePlusActiveColor : darken(@googlePlusColor, 3);@linkedInActiveColor : darken(@linkedInColor, 3);@youtubeActiveColor : darken(@youtubeColor, 3);@instagramActiveColor : darken(@instagramColor, 3);@pinterestActiveColor : darken(@pinterestColor, 3);@vkActiveColor : darken(@vkColor, 3);
|
