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.
236 lines
6.3 KiB
236 lines
6.3 KiB
|
|
/*******************************
|
|
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);
|