mirror of
https://github.com/grafana/grafana.git
synced 2025-02-10 15:45:43 -06:00
349 lines
11 KiB
SCSS
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);
|