|
|
/******************************* 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;
@useGoogleFonts : 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 : #E9BD16;
@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);
@pageMinWidth : (320px - (@fontSize * 2));
@headerMargin : 1em 0em 1rem;@paragraphMargin : 0em 0em 1em;
@linkColor : #009FDA;@linkUnderline : none;@linkHoverColor : lighten( @linkColor, 5);
@highlightBackground : #FFFFCC;@highlightColor : @textColor;
/* Used to match floats with text */@lineHeightOffset : ((@lineHeight - 1em) / 2);
/*------------------- 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.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 1px 2px 0 rgba(0, 0, 0, 0.05);
/*------------------- Grid--------------------*/
@columnCount: 16;
/*------------------- Breakpoints--------------------*/
@mobileBreakpoint : 320px;@tabletBreakpoint : 768px;@computerBreakpoint : 992px;@largeMonitorBreakpoint : 1400px;@widescreenMonitorBreakpoint : 1920px;
@largestMobileScreen : (@tabletBreakpoint - 1px);@largestTabletScreen : (@computerBreakpoint - 1px);
/******************************* 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 */@positiveBackgroundColor : #E4F5DD;@negativeBackgroundColor : #FAE8E8;
@positiveBorderColor : #B7CAA7;@negativeBorderColor : #DBB1B1;
/* Solid Background Color */@positiveColor : @green;@negativeColor : @red;
@positiveTextColor : #3C763D;@negativeTextColor : #A94442;
/* Status */@infoBackgroundColor : #E5F6FB;@warningBackgroundColor : #FCF8E3;@successBackgroundColor : @positiveBackgroundColor;@errorBackgroundColor : @negativeBackgroundColor;
@infoBorderColor : #AAD6DF;@warningBorderColor : #D3C4A5;@successBorderColor : @positiveBorderColor;@errorBorderColor : @negativeBorderColor;
@infoTextColor : #337B92;@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);
@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;
/*------------------- 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, 7);@secondaryColorHover : lighten( @secondaryColor, 7);
@blueHover : lighten( @blue, 7);@greenHover : lighten( @green, 7);@orangeHover : lighten( @orange, 7);@pinkHover : lighten( @pink, 7);@purpleHover : lighten( @purple, 7);@redHover : lighten( @red, 7);@tealHover : lighten( @teal, 7);@yellowHover : lighten( @yellow, 7);
@lightBlueHover : lighten( @lightBlue, 7);@lightGreenHover : lighten( @lightGreen, 7);@lightOrangeHover : lighten( @lightOrange, 7);@lightPinkHover : lighten( @lightPink, 7);@lightPurpleHover : lighten( @lightPurple, 7);@lightRedHover : lighten( @lightRed, 7);@lightTealHover : lighten( @lightTeal, 7);@lightYellowHover : lighten( @lightYellow, 7);
/*--- Emotive ---*/@positiveColorHover : lighten( @positiveColor, 7);@negativeColorHover : lighten( @negativeColor, 7);
/*--- Neutrals ---*/@fullBlackHover : lighten( @fullBlack, 7);@blackHover : lighten( @black, 7);@lightBlackHover : lighten( @lightBlack, 7);
@lightGreyHover : lighten( @lightGrey, 7);@greyHover : lighten( @grey, 7);@darkGreyHover : lighten( @darkGrey, 7);
@whiteHover : lighten( @white, 7);@offWhiteHover : lighten( @offWhite, 7);@darkWhiteHover : lighten( @darkWhite, 7);
@facebookHoverColor : lighten( @facebookColor, 7);@twitterHoverColor : lighten( @twitterColor, 7);@googlePlusHoverColor : lighten( @googlePlusColor, 7);@linkedInHoverColor : lighten( @linkedInColor, 7);@youtubeHoverColor : lighten( @youtubeColor, 7);@instagramHoverColor : lighten( @instagramColor, 7);@pinterestHoverColor : lighten( @pinterestColor, 7);@vkHoverColor : lighten( @vkColor, 7);
/*------------------- Down (:active)--------------------*/
/*--- Colors ---*/@primaryColorDown : darken(@primaryColor, 10);@secondaryColorDown : darken(@secondaryColor, 10);
@blueDown : darken(@blue, 10);@greenDown : darken(@green, 10);@orangeDown : darken(@orange, 10);@pinkDown : darken(@pink, 10);@purpleDown : darken(@purple, 10);@redDown : darken(@red, 10);@tealDown : darken(@teal, 10);@yellowDown : darken(@yellow, 10);
@lightBlueDown : darken(@lightBlue, 10);@lightGreenDown : darken(@lightGreen, 10);@lightOrangeDown : darken(@lightOrange, 10);@lightPinkDown : darken(@lightPink, 10);@lightPurpleDown : darken(@lightPurple, 10);@lightRedDown : darken(@lightRed, 10);@lightTealDown : darken(@lightTeal, 10);@lightYellowDown : darken(@lightYellow, 10);
/*--- Emotive ---*/@positiveColorDown : darken(@positiveColor, 10);@negativeColorDown : darken(@negativeColor, 10);
/*--- Neutrals ---*/@fullBlackDown : darken(@fullBlack, 10);@blackDown : darken(@black, 10);@lightBlackDown : darken(@lightBlack, 10);
@lightGreyDown : darken(@lightGrey, 10);@greyDown : darken(@grey, 10);@darkGreyDown : darken(@darkGrey, 10);
@whiteDown : darken(@white, 10);@offWhiteDown : darken(@offWhite, 10);@darkWhiteDown : darken(@darkWhite, 10);
@facebookDownColor : darken(@facebookColor, 10);@twitterDownColor : darken(@twitterColor, 10);@googlePlusDownColor : darken(@googlePlusColor, 10);@linkedInDownColor : darken(@linkedInColor, 10);@youtubeDownColor : darken(@youtubeColor, 10);@instagramDownColor : darken(@instagramColor, 10);@pinterestDownColor : darken(@pinterestColor, 10);@vkDownColor : darken(@vkColor, 10);
/*------------------- Active--------------------*/
/*--- Standard ---*/@primaryColorActive : darken(@primaryColor, 7);@secondaryColorActive : darken(@secondaryColor, 7);
@blueActive : darken(@blue, 7);@greenActive : darken(@green, 7);@orangeActive : darken(@orange, 7);@pinkActive : darken(@pink, 7);@purpleActive : darken(@purple, 7);@redActive : darken(@red, 7);@tealActive : darken(@teal, 7);@yellowActive : darken(@yellow, 7);
@lightBlueActive : darken(@lightBlue, 7);@lightGreenActive : darken(@lightGreen, 7);@lightOrangeActive : darken(@lightOrange, 7);@lightPinkActive : darken(@lightPink, 7);@lightPurpleActive : darken(@lightPurple, 7);@lightRedActive : darken(@lightRed, 7);@lightTealActive : darken(@lightTeal, 7);@lightYellowActive : darken(@lightYellow, 7);
/*--- Emotive ---*/@positiveColorActive : darken(@positiveColor, 7);@negativeColorActive : darken(@negativeColor, 7);
/*--- Neutrals ---*/@fullBlackActive : darken(@fullBlack, 7);@blackActive : darken(@black, 7);@lightBlackActive : darken(@lightBlack, 7);
@lightGreyActive : darken(@lightGrey, 7);@greyActive : darken(@grey, 7);@darkGreyActive : darken(@darkGrey, 7);
@whiteActive : darken(@white, 7);@offWhiteActive : darken(@offWhite, 7);@darkWhiteActive : darken(@darkWhite, 7);
@facebookActiveColor : darken(@facebookColor, 7);@twitterActiveColor : darken(@twitterColor, 7);@googlePlusActiveColor : darken(@googlePlusColor, 7);@linkedInActiveColor : darken(@linkedInColor, 7);@youtubeActiveColor : darken(@youtubeColor, 7);@instagramActiveColor : darken(@instagramColor, 7);@pinterestActiveColor : darken(@pinterestColor, 7);@vkActiveColor : darken(@vkColor, 7);
|
