|
|
/******************************* Site *******************************/
/*------------------- Page --------------------*/
@bodyColor : #FCFCFC; @fontSize : 15px;
/*------------------- Fonts --------------------*/
@headerFont : 'Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;'; @pageFont : 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;';
/******************************* Colors *******************************/
/*------------------- Background --------------------*/
/*--- Colors ---*/ @primaryColor : #D95C5C; @secondaryColor : #00B5AD; @tertiaryColor : #00B5AD;
@blue : #6ECFF5; @gold : #FFCB08; @green : #5BBD72; @orange : #E96633; @pink : #D9499A; @purple : #564F8A; @red : #F00000; @teal : #00B5AD; @white : #FFFFFF; @yellow : #F6F3D5;
/*--- Emotive ---*/ @positiveColor : #5BBD72; @negativeColor : #D95C5C;
@infoColor : #E6F4F9; @warningColor : #96904D; @errorColor : #D95C5C;
/*--- Neutrals ---*/ @darkGrey : #231F20; @midGrey : #5C6166; @grey : #9DA6AB; @lightGrey : #DCDDDE;
@neutral : #CCCCCC;
@white : #FFFFFF; @offWhite : #FAFAFA; @darkWhite : #F0F0F0;
/*------------------- Text Colors --------------------*/
@darkTextColor : rgba(0, 0, 0, 0.85); @textColor : rgba(0, 0, 0, 0.7); @lightTextColor : rgba(0, 0, 0, 0.4);
@disabledTextColor : rgba(0, 0, 0, 0.2);
/*------------------- Borders --------------------*/
@borderColor : rgba(0, 0, 0, 0.1); @solidBorderColor : #DDDDDD;
/*------------------- Sizes --------------------*/
@mini : 0.7; @tiny : 0.8; @small : 0.875; @medium : 1; @large : 1.125; @big : 1.25; @huge : 1.375; @massive : 1.5;
/*------------------- Transitions --------------------*/
@transitionDuration : 0.25s; @transitionEasing : ease;
/******************************* States *******************************/
/*------------------- Hover --------------------*/
/*--- Colors ---*/ @primaryColorHover : lighten( saturate(@primaryColor, 10), 10); @secondaryColorHover : lighten( saturate(@secondaryColor, 10), 10); @tertiaryColorHover : lighten( saturate(@tertiaryColor, 10), 10);
@blueHover : lighten( saturate(@blue, 10), 10); @goldHover : lighten( saturate(@gold, 10), 10); @greenHover : lighten( saturate(@green, 10), 10); @orangeHover : lighten( saturate(@orange, 10), 10); @pinkHover : lighten( saturate(@pink, 10), 10); @purpleHover : lighten( saturate(@purple, 10), 10); @redHover : lighten( saturate(@red, 10), 10); @tealHover : lighten( saturate(@teal, 10), 10); @whiteHover : lighten( saturate(@white, 10), 10); @yellowHover : lighten( saturate(@yellow, 10), 10);
/*--- Emotive ---*/ @positiveColorHover : lighten( saturate(@positiveColor, 10), 10); @negativeColorHover : lighten( saturate(@negativeColor, 10), 10);
@infoColorHover : lighten( saturate(@infoColor, 10), 10); @warningColorHover : lighten( saturate(@warningColor, 10), 10); @errorColorHover : lighten( saturate(@errorColor, 10), 10);
/*--- Neutrals ---*/ @darkGreyHover : lighten( saturate(@darkGrey, 10), 10); @midGreyHover : lighten( saturate(@midGrey, 10), 10); @greyHover : lighten( saturate(@grey, 10), 10); @lightGreyHover : lighten( saturate(@lightGrey, 10), 10);
@neutralHover : lighten( saturate(@neutral, 10), 10);
@whiteHover : lighten( saturate(@white, 10), 10); @offWhiteHover : lighten( saturate(@offWhite, 10), 10); @darkWhiteHover : lighten( saturate(@darkWhite, 10), 10);
/*------------------- Down (:active) --------------------*/
/*--- Colors ---*/ @primaryColorDown : darken(@primaryColor, 10); @secondaryColorDown : darken(@secondaryColor, 10); @tertiaryColorDown : darken(@tertiaryColor, 10);
@blueDown : darken(@blue, 10); @goldDown : darken(@gold, 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); @whiteDown : darken(@white, 10); @yellowDown : darken(@yellow, 10);
/*--- Emotive ---*/ @positiveColorDown : darken(@positiveColor, 10); @negativeColorDown : darken(@negativeColor, 10);
@infoColorDown : darken(@infoColor, 10); @warningColorDown : darken(@warningColor, 10); @errorColorDown : darken(@errorColor, 10);
/*--- Neutrals ---*/ @darkGreyDown : darken(@darkGrey, 10); @midGreyDown : darken(@midGrey, 10); @greyDown : darken(@grey, 10); @lightGreyDown : darken(@lightGrey, 10);
@neutralDown : darken(@neutral, 10);
@whiteDown : darken(@white, 10); @offWhiteDown : darken(@offWhite, 10); @darkWhiteDown : darken(@darkWhite, 10);
/*------------------- Active --------------------*/
/*--- Standard ---*/ @primaryColorActive : lighten(@primaryColor, 10); @secondaryColorActive : lighten(@secondaryColor, 10); @tertiaryColorActive : lighten(@tertiaryColor, 10);
@blueActive : lighten(@blue, 10); @goldActive : lighten(@gold, 10); @greenActive : lighten(@green, 10); @orangeActive : lighten(@orange, 10); @pinkActive : lighten(@pink, 10); @purpleActive : lighten(@purple, 10); @redActive : lighten(@red, 10); @tealActive : lighten(@teal, 10); @whiteActive : lighten(@white, 10); @yellowActive : lighten(@yellow, 10);
/*--- Emotive ---*/ @positiveColorActive : lighten(@positiveColor, 10); @negativeColorActive : lighten(@negativeColor, 10);
@infoColorActive : lighten(@infoColor, 10); @warningColorActive : lighten(@warningColor, 10); @errorColorActive : lighten(@errorColor, 10);
/*--- Neutrals ---*/ @darkGreyActive : lighten(@darkGrey, 10); @midGreyActive : lighten(@midGrey, 10); @greyActive : lighten(@grey, 10); @lightGreyActive : lighten(@lightGrey, 10);
@neutralActive : lighten(@neutral, 10);
@whiteActive : lighten(@white, 10); @offWhiteActive : lighten(@offWhite, 10); @darkWhiteActive : lighten(@darkWhite, 10);
|