grafana/public/sass/_variables.light.scss
2016-02-15 18:17:06 +01:00

349 lines
11 KiB
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);