You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
512 lines
15 KiB
512 lines
15 KiB
/*******************************
|
|
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);
|
|
|