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.
379 lines
10 KiB
379 lines
10 KiB
/*******************************
|
|
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 : "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
@pageFont : "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
|
|
/*-------------------
|
|
Icons
|
|
--------------------*/
|
|
|
|
/* Max Width of Icon */
|
|
@iconWidth : 1.23em;
|
|
|
|
/*-------------------
|
|
Easing
|
|
--------------------*/
|
|
|
|
@defaultEasing: 'ease';
|
|
|
|
|
|
/*******************************
|
|
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
|
|
*******************************/
|
|
|
|
/*--- 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;
|
|
|
|
/*--- Neutrals ---*/
|
|
@darkBlack : #232323;
|
|
@black : #555555;
|
|
@lightBlack : #999999;
|
|
|
|
@darkGrey : #AAAAAA;
|
|
@grey : #CCCCCC;
|
|
@lightGrey : #DCDDDE;
|
|
|
|
@white : #FFFFFF;
|
|
@offWhite : #FAFAFA;
|
|
@darkWhite : #F0F0F0;
|
|
|
|
/*--- Text Colors ---*/
|
|
|
|
/* Preserve */
|
|
@blueTextColor : @blue;
|
|
@greenTextColor : @green;
|
|
@orangeTextColor : @orange;
|
|
@pinkTextColor : @pink;
|
|
@purpleTextColor : @purple;
|
|
@redTextColor : @red;
|
|
@tealTextColor : @teal;
|
|
|
|
/* Adjust for Legibility */
|
|
@yellowTextColor : #EAB600;
|
|
|
|
/*--- Backgrounds ---*/
|
|
@blueBackground : #D3E4F3;
|
|
@greenBackground : #DEF2E0;
|
|
@orangeBackground : #F7E5D6;
|
|
@pinkBackground : #F9CEE6;
|
|
@purpleBackground : #E0DDF5;
|
|
@redBackground : #F8D5D3;
|
|
@tealBackground : #D2F5F5;
|
|
@yellowBackground : #FCF5D8;
|
|
|
|
/*-------------------
|
|
Emotive Colors
|
|
--------------------*/
|
|
|
|
/* Positive / Negative */
|
|
@positiveBackgroundColor : #DFF0D8;
|
|
@negativeBackgroundColor : #F2DEDE;
|
|
|
|
@positiveBorderColor : #D6E9C6;
|
|
@negativeBorderColor : #DA9797;
|
|
|
|
@positiveColor : @green;
|
|
@negativeColor : @red;
|
|
|
|
@positiveTextColor : #3C763D;
|
|
@negativeTextColor : #A94442;
|
|
|
|
/* Messages */
|
|
@infoBackgroundColor : #D9EDF7;
|
|
@warningBackgroundColor : #FCF8E3;
|
|
@successBackgroundColor : @positiveBackgroundColor;
|
|
@errorBackgroundColor : @negativeBackgroundColor;
|
|
|
|
@infoBorderColor : #BCE8F1;
|
|
@warningBorderColor : #FAEBCC;
|
|
@successBorderColor : @positiveBorderColor;
|
|
@errorBorderColor : @negativeBorderColor;
|
|
|
|
@infoTextColor : #31708F;
|
|
@warningTextColor : #8A6D3B;
|
|
@successTextColor : @positiveTextColor;
|
|
@errorTextColor : @negativeTextColor;
|
|
|
|
|
|
/*-------------------
|
|
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);
|
|
|
|
/*--- 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);
|