/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
@fontName : 'Source Sans Pro';
@fontSmoothing : antialiased;
@headerFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@googleFontName : @fontName;
@importGoogleFonts : true;
@googleFontSizes : '400,700,400italic,700italic';
@googleSubset : 'latin';
@googleProtocol : 'https://';
@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
@emSize : 14px;
/* The size of page text */
@fontSize : 1.2rem;
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of @px variables
*/
@relativeBorderRadius: @relative4px;
@absoluteBorderRadius: @4px;
@defaultBorderRadius: @absoluteBorderRadius;
/*-------------------
Brand Colors
--------------------*/
@primaryColor : #698f73;
@secondaryColor : #9db02e;
@lightPrimaryColor : lighten(@primaryColor, 10);
@lightSecondaryColor : lighten(@secondaryColor, 10);
@darkSecondaryColor : #1e2307;
/*--------------
Page Heading
---------------*/
@headerFontWeight : bold;
@headerLineHeight : 1.1em;
@h1 : 2.3rem;
@h2 : 1.8rem;
@h3 : 1.5rem;
@h4 : 1.3rem;
@h5 : 1.2rem;
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
@inputBackground : @white;
@inputVerticalPadding : @relative11px;
@inputHorizontalPadding : @relative14px;
@inputPadding : @inputVerticalPadding @inputHorizontalPadding;
/* Line Height Default For Inputs in Browser */
@inputLineHeight: 1.2142em;
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
@focusedFormBorderColor: #85B7D9;
/* Used on dropdowns, other larger blocks */
@focusedFormMutedBorderColor: #96C8DA;
/*-------------------
Page
--------------------*/
@pageBackground : #FFFFFF;
@pageOverflowX : hidden;
@lineHeight : 1.4285em;
@textColor : rgba(0, 0, 0, 0.87);
/*-------------------
Paragraph
--------------------*/
@paragraphMargin : 0em 0em 1.2em;
@paragraphLineHeight : @lineHeight;
/*-------------------
Links
--------------------*/
@linkColor : @primaryColor;
@linkUnderline : none;
@linkHoverColor : darken(saturate(@linkColor, 20), 15, relative);
@linkHoverUnderline : @linkUnderline;
/*-------------------
Highlighted Text
--------------------*/
@highlightBackground : #CCE2FF;
@highlightColor : @textColor;
@inputHighlightBackground : rgba(100, 100, 100, 0.4);
@inputHighlightColor : @textColor;
/*-------------------
Grid
--------------------*/
@columnCount: 16;
/*-------------------
Transitions
--------------------*/
@defaultDuration : 0.1s;
@defaultEasing : ease;
/*-------------------
Breakpoints
--------------------*/
@mobileBreakpoint : 360px;
@tabletBreakpoint : 768px;
@computerBreakpoint : 992px;
@largeMonitorBreakpoint : 1300px;
@widescreenMonitorBreakpoint : 1920px;
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
@red : #DB2828;
@orange : #F2711C;
@yellow : #FBBD08;
@olive : #B5CC18;
@green : #21BA45;
@teal : #00B5AD;
@blue : #2185D0;
@violet : #6435C9;
@purple : #A333C8;
@pink : #E03997;
@brown : #A5673F;
@grey : #767676;
@black : #1B1C1D;
/*--- Light Colors ---*/
@lightRed : #FF695E;
@lightOrange : #FF851B;
@lightYellow : #FFE21F;
@lightOlive : #D9E778;
@lightGreen : #2ECC40;
@lightTeal : #6DFFFF;
@lightBlue : #54C8FF;
@lightViolet : #A291FB;
@lightPurple : #DC73FF;
@lightPink : #FF8EDF;
@lightBrown : #D67C1C;
@lightGrey : #DCDDDE;
@lightBlack : #545454;
/*--- Neutrals ---*/
@fullBlack : #000000;
@offWhite : #F9FAFB;
@darkWhite : #F3F4F5;
@midWhite : #DCDDDE;
@white : #FFFFFF;
/*--- Colored Backgrounds ---*/
@redBackground : #FFE8E6;
@orangeBackground : #FFEDDE;
@yellowBackground : #FFF8DB;
@oliveBackground : #FBFDEF;
@greenBackground : #E5F9E7;
@tealBackground : #E1F7F7;
@blueBackground : #DFF0FF;
@violetBackground : #EAE7FF;
@purpleBackground : #F6E7FF;
@pinkBackground : #FFE3FB;
@brownBackground : #F1E2D3;
/*--- Colored Headers ---*/
@redHeaderColor : darken(@redTextColor, 5);
@oliveHeaderColor : darken(@oliveTextColor, 5);
@greenHeaderColor : darken(@greenTextColor, 5);
@yellowHeaderColor : darken(@yellowTextColor, 5);
@blueHeaderColor : darken(@blueTextColor, 5);
@tealHeaderColor : darken(@tealTextColor, 5);
@pinkHeaderColor : darken(@pinkTextColor, 5);
@violetHeaderColor : darken(@violetTextColor, 5);
@purpleHeaderColor : darken(@purpleTextColor, 5);
@orangeHeaderColor : darken(@orangeTextColor, 5);
@brownHeaderColor : darken(@brownTextColor, 5);
/*--- Colored Text ---*/
@redTextColor : @red;
@orangeTextColor : @orange;
@yellowTextColor : #B58105; // Yellow text is difficult to read
@oliveTextColor : #8ABC1E; // Olive is difficult to read
@greenTextColor : #1EBC30; // Green is difficult to read
@tealTextColor : #10A3A3; // Teal text is difficult to read
@blueTextColor : @blue;
@violetTextColor : @violet;
@purpleTextColor : @purple;
@pinkTextColor : @pink;
@brownTextColor : @brown;
/*-------------------
Alpha Colors
--------------------*/
@subtleTransparentBlack : rgba(0, 0, 0, 0.03);
@transparentBlack : rgba(0, 0, 0, 0.05);
@strongTransparentBlack : rgba(0, 0, 0, 0.10);
@veryStrongTransparentBlack : rgba(0, 0, 0, 0.15);
@subtleTransparentWhite : rgba(255, 255, 255, 0.02);
@transparentWhite : rgba(255, 255, 255, 0.08);
@strongTransparentWhite : rgba(255, 255, 255, 0.15);
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
@subtleGradient: linear-gradient(transparent, @transparentBlack);
/* Differentiating Layers */
@subtleShadow:
0px 1px 2px 0 @borderColor
;
@floatingShadow:
0px 2px 4px 0px rgba(34, 36, 38, 0.12),
0px 2px 10px 0px rgba(34, 36, 38, 0.08)
;
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
@positiveColor : @green;
@positiveBackgroundColor : #FCFFF5;
@positiveBorderColor : #A3C293;
@positiveHeaderColor : #1A531B;
@positiveTextColor : #2C662D;
/* Negative */
@negativeColor : @red;
@negativeBackgroundColor : #FFF6F6;
@negativeBorderColor : #E0B4B4;
@negativeHeaderColor : #912D2B;
@negativeTextColor : #9F3A38;
/* Info */
@infoColor : #31CCEC;
@infoBackgroundColor : #F8FFFF;
@infoBorderColor : #A9D5DE;
@infoHeaderColor : #0E566C;
@infoTextColor : #276F86;
/* Warning */
@warningColor : #F2C037;
@warningBorderColor : #C9BA9B;
@warningBackgroundColor : #FFFAF3;
@warningHeaderColor : #794B02;
@warningTextColor : #573A08;
/*-------------------
Paths
--------------------*/
/* For source only. Modified in gulp for dist */
@imagePath : '../../themes/default/assets/images';
@fontPath : '../../themes/default/assets/fonts';
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
@iconWidth : 1.18em;
/*-------------------
Neutral Text
--------------------*/
@darkTextColor : rgba(0, 0, 0, 0.85);
@mutedTextColor : rgba(0, 0, 0, 0.6);
@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.9);
@selectedTextColor : rgba(0, 0, 0, 0.95);
@disabledTextColor : rgba(0, 0, 0, 0.2);
@invertedTextColor : rgba(255, 255, 255, 0.9);
@invertedMutedTextColor : rgba(255, 255, 255, 0.8);
@invertedLightTextColor : rgba(255, 255, 255, 0.7);
@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 : #3B5998;
@twitterColor : #0084B4;
@googlePlusColor : #DC4A38;
@linkedInColor : #1F88BE;
@youtubeColor : #CC181E;
@instagramColor : #49769C;
@pinterestColor : #00ACED;
@vkColor : #4D7198;
/*-------------------
Borders
--------------------*/
@circularRadius : 500rem;
@borderColor : rgba(34, 36, 38, 0.15);
@strongBorderColor : rgba(34, 36, 38, 0.22);
@internalBorderColor : rgba(34, 36, 38, 0.1);
@selectedBorderColor : rgba(34, 36, 38, 0.35);
@strongSelectedBorderColor : rgba(34, 36, 38, 0.5);
@disabledBorderColor : rgba(34, 36, 38, 0.5);
@solidInternalBorderColor : #FAFAFA;
@solidBorderColor : #D4D4D5;
@solidSelectedBorderColor : #BCBDBD;
@whiteBorderColor : rgba(255, 255, 255, 0.1);
@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
@solidWhiteBorderColor : #555555;
@selectedSolidWhiteBorderColor : #999999;
/*-------------------
Derived Values
--------------------*/
/* Header Spacing */
@headerTopMargin : ~"calc(2rem - "@headerLineHeightOffset~")";
@headerBottomMargin : 1.2rem;
@headerMargin : @headerTopMargin 0em @headerBottomMargin;
/* Minimum Mobile Width */
@pageMinWidth : 320px;
/* Positive / Negative Dupes */
@successBackgroundColor : @positiveBackgroundColor;
@successColor : @positiveColor;
@successBorderColor : @positiveBorderColor;
@successHeaderColor : @positiveHeaderColor;
@successTextColor : @positiveTextColor;
@errorBackgroundColor : @negativeBackgroundColor;
@errorColor : @negativeColor;
@errorBorderColor : @negativeBorderColor;
@errorHeaderColor : @negativeHeaderColor;
@errorTextColor : @negativeTextColor;