SemanSemantic-UItic-UI/rtl/packaged/themes/default/global.variables

/*******************************
        Global Variables
*******************************/

/*-------------------
        Paths
--------------------*/

@imagePath : "../themes/default/images";
@fontPath  : "../themes/default/fonts";

/*-------------------
        Page
--------------------*/

@bodyBackground      : #FCFCFC;
@fontSize            : 15px;
@textColor           : rgba(0, 0, 0, 0.7);

@paragraphMargin     : 1em 0em;

@linkColor           : #009FDA;
@linkUnderline       : none;
@linkHoverColor      : lighten( @linkColor, 5);

@highlightBackground : #FFFFCC;
@highlightColor      : @textColor;

/*-------------------
       Fonts
--------------------*/

@fontFamily : Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;

/*-------------------
       Icons
--------------------*/

/* Width of largest icon */
@iconWidth : 1.23em;

/*******************************
           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
*******************************/

/*-------------------
     Background
--------------------*/

/*---  Colors  ---*/
@blue           : #6ECFF5;
@green          : #5BBD72;
@orange         : #E96633;
@pink           : #D9499A;
@purple         : #564F8A;
@red            : #D95C5C;
@teal           : #00B5AD;
@yellow         : #FFCB08;

@primaryColor   : @teal;
@secondaryColor : @black;
@tertiaryColor  : @orange;

/*---  Emotive  ---*/
@positiveColor  : @green;
@negativeColor  : @red;

@infoColor      : #E6F4F9;
@warningColor   : #96904D;
@errorColor     : #D95C5C;

/*---  Neutrals  ---*/
@darkBlack      : #232323;
@black          : #555555;
@lightBlack     : #999999;

@darkGrey       : #AAAAAA;
@grey           : #CCCCCC;
@lightGrey      : #DCDDDE;

@white          : #FFFFFF;
@offWhite       : #FAFAFA;
@darkWhite      : #F0F0F0;

/*-------------------
     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(0, 0, 0, 0.2);

@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);

@infoColorHover       : lighten( @infoColor, 5);
@warningColorHover    : lighten( @warningColor, 5);
@errorColorHover      : lighten( @errorColor, 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);

@infoColorDown       : darken(@infoColor, 7);
@warningColorDown    : darken(@warningColor, 7);
@errorColorDown      : darken(@errorColor, 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);

@infoColorActive       : darken(@infoColor, 5);
@warningColorActive    : darken(@warningColor, 5);
@errorColorActive      : darken(@errorColor, 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);