energylink/public/less/variables.light.scss

// Cosmo 2.3.2
// Variables
// --------------------------------------------------


// Global values
// --------------------------------------------------


// Grays
// -------------------------
$black:                 #000;
$grayDarker:            lighten(#000, 11.5%); // #222
$grayDark:              lighten(#000, 20%);   // #333
$gray:                  lighten(#000, 33.5%); // #555
$grayLight:             lighten(#000, 60%);   // #999
$grayLighter:           lighten(#000, 97.5%); // #eee
$white:                 #fff;


// Accent colors
// -------------------------
$blueOrig:              #007FFF;
$blue:             	   	#2AB2E4;
$blueDark:              #75CAEB;
$green:                 #28B62C;
$red:                   #FF4136;
$yellow:                #FF851B;
$orange:                #FF7518;
$pink:                  #E671B8;
$purple:                #9954BB;
$variable:              #2AB2E4;

// Status colors
// -------------------------
$online:                #01A64F;
$warn:                  #F79520;
$critical:              #EC2128;

// grafana Variables
// -------------------------
$grafanaPanelBackground: 	$grayLighter;
$grafanaPanelBorder: 	  	solid 1px #ddd;
$grafanaTriggerBorder:		solid 1px $grayLight;

// Scaffolding
// -------------------------
$bodyBackground:      #EFEFEF;
$pageBackground:  	  $white;
$textColor:           $gray;

// Submenu
$submenuBackground:     rgb(218, 217, 217);
$submenuBorder:         $white;

// Graphite Target Editor
$grafanaTargetBorder:         #ddd;
$grafanaTargetBackground:     #efefef;
$grafanaTargetColor:          $textColor;
$grafanaTargetColorHide:      lighten($textColor, 25%);
$grafanaTargetSegmentBorder:  #ddd;

$grafanaTargetFuncBackground: darken($grafanaTargetBackground, 5%);
$grafanaTargetFuncHightlight: darken($grafanaTargetBackground, 10%);

$grafanaSelectBackground: $grafanaTargetFuncBackground;

$modalBackground: $bodyBackground;
$codeTagBackground: #ddd;

// Links
// -------------------------
$linkColor:             $gray;
$linkColorDisabled:     lighten($linkColor,30%);
$linkColorHover:        darken($linkColor, 20%);

// Typography
// -------------------------
$sansFontFamily:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;

$baseFontSize:          14px;
$baseFontWeight:		    400;
$fontWeightSemi:		    600;
$baseFontFamily:        $sansFontFamily;
$baseLineHeight:        20px;
$altFontFamily:         $serifFontFamily;

$headingsFontFamily:    inherit; // inherit. empty to use BS default, $baseFontFamily
$headingsFontWeight:    normal;    // instead of browser default, bold
$headingsFontStyle:    	normal;
$headingsColor:         $textColor; // empty to use BS default, $textColor


// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
$fontSizeMini:          $baseFontSize * 0.75; // ~11px

$paddingLarge:          22px 30px; // 66px
$paddingSmall:          2px 10px;  // 26px
$paddingMini:           2px 6px;   // 24px

$baseBorderRadius:      3px;
$borderRadiusLarge:     4px;
$borderRadiusSmall:     2px;

// Lists
$grafanaListBackground:  	     darken($grayLighter,5%);
$grafanaListAccent:            darken($grayLighter,8%);
$grafanaListBorderTop:         #eee;
$grafanaListBorderBottom:      #eee;
$grafanaListHighlight:         darken($grayLighter,10%);
$grafanaListHighlightContrast: #ddd;
$grafanaListMainLinkColor:     $textColor;


// Tables
// -------------------------
$tableBackground:                   transparent; // overall background-color
$tableBackgroundAccent:             #f9f9f9; // for striping
$tableBackgroundHover:              #E8F8FD; // for hover
$tableBorder:                       #ddd; // table and cell border

// Scrollbars
$scrollbarBackground: $grayLighter;
$scrollbarBackground2: $grayLighter;
$scrollbarBorder: $grayLight;

// Buttons
// -------------------------
$btnBackground:                     $grayLighter;
$btnBackgroundHighlight:            darken($grayLighter, 15%);
$btnBorder:                         #bbb;

$btnPrimaryBackground:              lighten($blue, 3%);
$btnPrimaryBackgroundHighlight:     darken($blue, 3%);

$btnInfoBackground:                 lighten($purple, 3%);
$btnInfoBackgroundHighlight:        darken($purple, 3%);

$btnSuccessBackground:              lighten($green, 3%);
$btnSuccessBackgroundHighlight:     darken($green, 3%);

$btnWarningBackground:              lighten($orange, 3%);
$btnWarningBackgroundHighlight:     darken($orange, 3%);

$btnDangerBackground:               lighten($red, 3%);
$btnDangerBackgroundHighlight:      darken($red, 3%);

$btnInverseBackground:              $grayLighter;
$btnInverseBackgroundHighlight:     darken($grayLighter, 5%);
$btnInverseText:                    $black;
$btnInverseBorder:                  $grayLight;

$btnText:              				$grayLighter;

$iconContainerBackground:			      $white;
$iconContainerBackgroundHighlight:	lighten($white, 5%);
$iconContainerBorder:				        1px solid rgba(0,0,0, 0.05);
$iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);


// Forms
// -------------------------
$inputBackground:               $white;
$inputBorder:                   $grayLighter;
$inputBorderRadius:             $baseBorderRadius;
$inputDisabledBackground:       $grayLighter;
$formActionsBackground:         #f5f5f5;
$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
$inputText:                     #020202;
$labelBackground:				#f8f8f8;


// Sidemenu
// -------------------------
$sideMenuBackground:            $grafanaPanelBackground;
$sideMenuBackgroundHighlight:   darken($sideMenuBackground, 4%);

// search
$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%);

// Dropdowns
// -------------------------
$dropdownBackground:            $white;
$dropdownBorder:                $grafanaTargetBorder;
$dropdownDividerTop:            #e5e5e5;
$dropdownDividerBottom:         $white;
$dropdownDivider:               $dropdownDividerTop;
$dropdownTitle:                 #333;

$dropdownLinkColor:             $grayDark;
$dropdownLinkColorHover:        $white;
$dropdownLinkColorActive:       $white;

$dropdownLinkBackgroundActive:  $blue;
$dropdownLinkBackgroundHover:   $blue;


// COMPONENT VARIABLES
// --------------------------------------------------


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown:          1000;
$zindexPopover:           1010;
$zindexTooltip:           1030;
$zindexFixedNavbar:       1030;
$zindexModalBackdrop:     1040;
$zindexModal:             1050;


// Input placeholder text color
// -------------------------
$placeholderText:         $grayLight;


// Hr border color
// -------------------------
$hrBorder:                $grayLighter;


// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset:       180px;


// Wells
// -------------------------
$wellBackground:                  $grayLighter;


// Navbar
// -------------------------

$navbarHeight:                    52px;
$navbarBackgroundHighlight:       #f8f8f8;
$navbarBackground:                #f8f8f8;
$navbarBorder:                    1px solid $grafanaTargetBorder;

$navbarText:                      #666;
$navbarLinkColor:                 #666;
$navbarLinkColorHover:            #333;
$navbarLinkColorActive:           #555;
$navbarLinkBackgroundHover:       transparent;
$navbarLinkBackgroundActive:      darken($navbarBackground, 6.5%);
$navbarDropdownShadow:            inset 0px 4px 7px -4px darken($bodyBackground, 20%);

$navbarBrandColor:                $navbarLinkColor;

$navbarButtonBackground:          lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);


// Pagination
// -------------------------
$paginationBackground:                $grayLight;
$paginationBorder:                    transparent;
$paginationActiveBackground:          $blue;


// Hero unit
// -------------------------
$heroUnitBackground:              $grayLighter;
$heroUnitHeadingColor:            inherit;
$heroUnitLeadColor:               inherit;


// Form states and alerts
// -------------------------
$warningText:             lighten($orange, 10%);
$warningBackground:       $orange;
$warningBorder:           transparent;

$errorText:               lighten($red, 10%);
$errorBackground:         $red;
$errorBorder:             transparent;

$successText:             lighten($green, 10%);
$successBackground:       $green;
$successBorder:           transparent;

$infoText:                lighten($purple,10%);
$infoBackground:          $purple;
$infoBorder:              transparent;


// Tooltips and popovers
// -------------------------
$tooltipColor:            $white;
$tooltipBackground:       $grayDark;
$tooltipArrowWidth:       5px;
$tooltipArrowColor:       $tooltipBackground;
$tooltipLinkColor:        darken($white,11%);

$popoverBackground:       $white;
$popoverArrowWidth:       15px;
$popoverArrowColor:       $white;
$popoverTitleBackground:  $white;

// Special enhancement for popovers
$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
$popoverArrowOuterColor:  rgba(0,0,0,.25);

// images
$checkboxImageUrl: '../img/checkbox_white.png';

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------
$gridColumns:             12;
$gridColumnWidth:         60px;
$gridGutterWidth:         20px;
$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));

// 1200px min
$gridColumnWidth1200:     70px;
$gridGutterWidth1200:     30px;
$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));

// 768px-979px
$gridColumnWidth768:      42px;
$gridGutterWidth768:      20px;
$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));


// Fluid grid
// -------------------------
$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);

// 1200px min
$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);

// 768px-979px
$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);