Skip to content

N
nexpie-grafana-theme
Commit febad7b1 by Torkel Ödegaard
Options

ux(saas): variable renaming

parent 1cd39859
Showing with 214 additions and 199 deletions
public/sass/_variables.dark.scss
...@@ -31,66 +31,70 @@ $online: #10a345; ...@@ -31,66 +31,70 @@ $online: #10a345;
$warn: #ffc03c; $warn: #ffc03c;
$critical: #ed2e18; $critical: #ed2e18;
// grafana Variables // Scaffolding
// ------------------------- // -------------------------
$panel-bg: $gray-darker; $body-bg: rgb(20,20,20);
$panel-border: solid 1px $gray-dark; $page-bg: $gray-darker;
$text-color: $gray-lighter;
$divider-border-color: #555; // Links
// -------------------------
$link-color: darken($white,11%);
$link-color-disabled: darken($link-color,30%);
$link-color-hover: $white;
// Graphite Target Editor // Typography
$grafanaTargetBorder: $black; // -------------------------
$grafanaTargetBackground: $gray-dark;
$grafanaTargetColor: #c8c8c8;
$grafanaTargetColorHide: darken(#c8c8c8, 25%);
$grafanaTargetSegmentBorder: #050505;
$grafanaTargetFuncBackground: #333; $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$grafanaTargetFuncHightlight: #444; $font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif !default;
$grafanaSelectBackground: $grafanaTargetFuncBackground; $font-size-root: 14px !default;
$modalBackground: $black; $font-size-base: 1rem !default;
$codeTagBackground: #444; $font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
// Scaffolding $line-height-base: 1.5 !default;
// -------------------------
$bodyBackground: rgb(20,20,20);
$pageBackground: $gray-darker;
$textColor: $gray-lighter;
// Links $font-size-h1: 2.5rem !default;
// ------------------------- $font-size-h2: 2rem !default;
$linkColor: darken($white,11%); $font-size-h3: 1.75rem !default;
$linkColorDisabled: darken($linkColor,30%); $font-size-h4: 1.5rem !default;
$linkColorHover: $white; $font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
// Typography $display1-weight: 300 !default;
// ------------------------- $display2-weight: 300 !default;
$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $display3-weight: 300 !default;
$serifFontFamily: Georgia, "Times New Roman", Times, serif; $display4-weight: 300 !default;
$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
$baseFontSize: 14px; $baseFontSize: 14px;
$baseFontWeight: 400; $baseFontWeight: 400;
$baseFontFamily: $sansFontFamily; $baseFontFamily: $font-family-sans-serif;
$baseLineHeight: 20px; $baseLineHeight: 20px;
$altFontFamily: $serifFontFamily; $altFontFamily: $font-family-serif;
$fontWeightSemi: 600; $fontWeightSemi: 600;
$headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily
$headingsFontWeight: 400; // instead of browser default, bold $headingsFontWeight: 400; // instead of browser default, bold
$headingsFontStyle: normal; $headingsFontStyle: normal;
$headingsColor: darken($white,11%); // empty to use BS default, $textColor $headingsColor: darken($white,11%); // empty to use BS default, $text-color
$inputText: $gray-light; $inputText: $gray-light;
// Component sizing // Component sizing
// ------------------------- // -------------------------
// Based on 14px font-size and 20px line-height // Based on 14px font-size and 20px line-height
$fontSizeLarge: $baseFontSize * 1.25; // ~18px $font-size-lg: $baseFontSize * 1.25; // ~18px
$fontSizeSmall: $baseFontSize * 0.85; // ~12px $fontSizeSmall: $baseFontSize * 0.85; // ~12px
$fontSizeMini: $baseFontSize * 0.75; // ~11px $fontSizeMini: $baseFontSize * 0.75; // ~11px
...@@ -102,13 +106,32 @@ $baseBorderRadius: 3px; ...@@ -102,13 +106,32 @@ $baseBorderRadius: 3px;
$borderRadiusLarge: 4px; $borderRadiusLarge: 4px;
$borderRadiusSmall: 2px; $borderRadiusSmall: 2px;
// Panel
// -------------------------
$panel-bg: $gray-darker;
$panel-border: solid 1px $gray-dark;
$divider-border-color: #555;
// Graphite Target Editor
$tight-form-border: #050505;
$tight-form-bg: $gray-dark;
$tight-form-func-bg: #333;
$tight-form-func-highlight-bg: #444;
$modal-background: $black;
$code-tag-bg: #444;
// Lists // Lists
$grafanaListBackground: $gray-dark; $grafanaListBackground: $gray-dark;
$grafanaListAccent: lighten($gray-darker, 2%); $grafanaListAccent: lighten($gray-darker, 2%);
$grafanaListBorderTop: $gray-dark; $grafanaListBorderTop: $gray-dark;
$grafanaListBorderBottom: $black; $grafanaListBorderBottom: $black;
$grafanaListHighlight: #333; $grafanaListHighlight: #333;
$grafanaListMainLinkColor: $textColor; $grafanaListMainLinkColor: $text-color;
// Scrollbars // Scrollbars
$scrollbarBackground: #3a3a3a; $scrollbarBackground: #3a3a3a;
...@@ -146,7 +169,7 @@ $btnDangerBackgroundHighlight: darken($red, 3%); ...@@ -146,7 +169,7 @@ $btnDangerBackgroundHighlight: darken($red, 3%);
$btnInverseBackground: $gray-dark; $btnInverseBackground: $gray-dark;
$btnInverseBackgroundHighlight: lighten($gray-dark, 1%); $btnInverseBackgroundHighlight: lighten($gray-dark, 1%);
$btnInverseText: $textColor; $btnInverseText: $link-color;
$btnInverseBorder: #333; $btnInverseBorder: #333;
$btnText: $gray; $btnText: $gray;
...@@ -174,7 +197,7 @@ $labelBackground: $gray-dark; ...@@ -174,7 +197,7 @@ $labelBackground: $gray-dark;
// Search // Search
$searchShadow: 0 0 35px 0 $bodyBackground; $searchShadow: 0 0 35px 0 $body-bg;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
...@@ -183,9 +206,9 @@ $dropdownBorder: rgba(0,0,0,.2); ...@@ -183,9 +206,9 @@ $dropdownBorder: rgba(0,0,0,.2);
$dropdownDividerTop: transparent; $dropdownDividerTop: transparent;
$dropdownDividerBottom: #444; $dropdownDividerBottom: #444;
$dropdownDivider: $dropdownDividerBottom; $dropdownDivider: $dropdownDividerBottom;
$dropdownTitle: $linkColorDisabled; $dropdownTitle: $link-color-disabled;
$dropdownLinkColor: $textColor; $dropdownLinkColor: $text-color;
$dropdownLinkColorHover: $white; $dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white; $dropdownLinkColorActive: $white;
...@@ -209,7 +232,7 @@ $zindexModalBackdrop: 1040; ...@@ -209,7 +232,7 @@ $zindexModalBackdrop: 1040;
$zindexModal: 1050; $zindexModal: 1050;
// ------------------------- // -------------------------
$placeholderText: darken($textColor, 25%); $placeholderText: darken($text-color, 25%);
// Hr border color // Hr border color
...@@ -229,7 +252,7 @@ $wellBackground: #131517; ...@@ -229,7 +252,7 @@ $wellBackground: #131517;
$navbarHeight: 52px; $navbarHeight: 52px;
$navbarBackgroundHighlight: $gray-dark; $navbarBackgroundHighlight: $gray-dark;
$navbarBackground: $gray-dark; $navbarBackground: $gray-dark;
$navbarBorder: 1px solid $bodyBackground; $navbarBorder: 1px solid $body-bg;
$navbarText: $gray-light; $navbarText: $gray-light;
$navbarLinkColor: $gray-light; $navbarLinkColor: $gray-light;
...@@ -237,8 +260,8 @@ $navbarLinkColorHover: $white; ...@@ -237,8 +260,8 @@ $navbarLinkColorHover: $white;
$navbarLinkColorActive: $navbarLinkColorHover; $navbarLinkColorActive: $navbarLinkColorHover;
$navbarLinkBackgroundHover: transparent; $navbarLinkBackgroundHover: transparent;
$navbarLinkBackgroundActive: $navbarBackground; $navbarLinkBackgroundActive: $navbarBackground;
$navbarBrandColor: $linkColor; $navbarBrandColor: $link-color;
$navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground; $navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
$navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackground: lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
...@@ -248,11 +271,11 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); ...@@ -248,11 +271,11 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
$sideMenuTopShadow: $navbarDropdownShadow; $sideMenuTopShadow: $navbarDropdownShadow;
$sideMenuBackground: $gray-dark; $sideMenuBackground: $gray-dark;
$sideMenuBackgroundHighlight: lighten($gray-dark, 4%); $sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
$sideMenuShadow: 0 0 35px 0 $bodyBackground; $sideMenuShadow: 0 0 35px 0 $body-bg;
// Pagination // Pagination
// ------------------------- // -------------------------
$paginationBackground: $bodyBackground; $paginationBackground: $body-bg;
$paginationBorder: transparent; $paginationBorder: transparent;
$paginationActiveBackground: $blue; $paginationActiveBackground: $blue;
...@@ -276,7 +299,7 @@ $tooltipColor: $white; ...@@ -276,7 +299,7 @@ $tooltipColor: $white;
$tooltipBackground: rgb(58, 57, 57); $tooltipBackground: rgb(58, 57, 57);
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground; $tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: $linkColor; $tooltipLinkColor: $link-color;
$popoverBackground: $heroUnitBackground; $popoverBackground: $heroUnitBackground;
$popoverArrowWidth: 10px; $popoverArrowWidth: 10px;
......
public/sass/_variables.light.scss
...@@ -36,68 +36,64 @@ $online: #01A64F; ...@@ -36,68 +36,64 @@ $online: #01A64F;
$warn: #F79520; $warn: #F79520;
$critical: #EC2128; $critical: #EC2128;
// grafana Variables
// -------------------------
$panel-bg: $gray-lighter;
$panel-border: solid 1px #ddd;
$divider-border-color: $gray-light;
// Scaffolding // 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; $body-bg: rgb(20,20,20);
$codeTagBackground: #ddd; $page-bg: $gray-darker;
$text-color: $gray-lighter;
// Links // Links
// ------------------------- // -------------------------
$linkColor: $gray; $link-color: $gray;
$linkColorDisabled: lighten($linkColor,30%); $link-color-disabled: lighten($link-color,30%);
$linkColorHover: darken($linkColor, 20%); $link-color-hover: darken($link-color, 20%);
// Typography // Typography
// ------------------------- // -------------------------
$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$serifFontFamily: Georgia, "Times New Roman", Times, serif; $font-family-serif: Georgia, "Times New Roman", Times, serif;
$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$baseFontSize: 14px; $baseFontSize: 14px;
$baseFontWeight: 400; $baseFontWeight: 400;
$fontWeightSemi: 600; $fontWeightSemi: 600;
$baseFontFamily: $sansFontFamily; $baseFontFamily: $font-family-sans-serif;
$baseLineHeight: 20px; $baseLineHeight: 20px;
$altFontFamily: $serifFontFamily; $altFontFamily: $font-family-serif;
$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily $headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily
$headingsFontWeight: normal; // instead of browser default, bold $headingsFontWeight: normal; // instead of browser default, bold
$headingsFontStyle: normal; $headingsFontStyle: normal;
$headingsColor: $textColor; // empty to use BS default, $textColor $headingsColor: $text-color; // empty to use BS default, $text-color
// Panel
// -------------------------
$panel-bg: $gray-lighter;
$panel-border: solid 1px #ddd;
$divider-border-color: $gray-light;
// Submenu
$submenuBackground: rgb(218, 217, 217);
$submenuBorder: $white;
// Graphite Target Editor
$tight-form-border: #ddd;
$tight-form-bg: #efefef;
$tight-form-func-bg: darken($tight-form-bg, 5%);
$tight-form-func-highlight-bg: darken($tight-form-bg, 10%);
$modal-background: $body-bg;
$code-tag-bg: #ddd;
// Component sizing // Component sizing
// ------------------------- // -------------------------
// Based on 14px font-size and 20px line-height // Based on 14px font-size and 20px line-height
$fontSizeLarge: $baseFontSize * 1.25; // ~18px $font-size-lg: $baseFontSize * 1.25; // ~18px
$fontSizeSmall: $baseFontSize * 0.85; // ~12px $fontSizeSmall: $baseFontSize * 0.85; // ~12px
$fontSizeMini: $baseFontSize * 0.75; // ~11px $fontSizeMini: $baseFontSize * 0.75; // ~11px
...@@ -116,7 +112,7 @@ $grafanaListBorderTop: #eee; ...@@ -116,7 +112,7 @@ $grafanaListBorderTop: #eee;
$grafanaListBorderBottom: #eee; $grafanaListBorderBottom: #eee;
$grafanaListHighlight: darken($gray-lighter,10%); $grafanaListHighlight: darken($gray-lighter,10%);
$grafanaListHighlightContrast: #ddd; $grafanaListHighlightContrast: #ddd;
$grafanaListMainLinkColor: $textColor; $grafanaListMainLinkColor: $text-color;
// Tables // Tables
...@@ -188,7 +184,7 @@ $searchShadow: 0 5px 30px 0 lighten($gray-light, 30%); ...@@ -188,7 +184,7 @@ $searchShadow: 0 5px 30px 0 lighten($gray-light, 30%);
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: $white; $dropdownBackground: $white;
$dropdownBorder: $grafanaTargetBorder; $dropdownBorder: $tight-form-border;
$dropdownDividerTop: #e5e5e5; $dropdownDividerTop: #e5e5e5;
$dropdownDividerBottom: $white; $dropdownDividerBottom: $white;
$dropdownDivider: $dropdownDividerTop; $dropdownDivider: $dropdownDividerTop;
...@@ -244,7 +240,7 @@ $wellBackground: $gray-lighter; ...@@ -244,7 +240,7 @@ $wellBackground: $gray-lighter;
$navbarHeight: 52px; $navbarHeight: 52px;
$navbarBackgroundHighlight: #f8f8f8; $navbarBackgroundHighlight: #f8f8f8;
$navbarBackground: #f8f8f8; $navbarBackground: #f8f8f8;
$navbarBorder: 1px solid $grafanaTargetBorder; $navbarBorder: 1px solid $tight-form-border;
$navbarText: #666; $navbarText: #666;
$navbarLinkColor: #666; $navbarLinkColor: #666;
...@@ -252,7 +248,7 @@ $navbarLinkColorHover: #333; ...@@ -252,7 +248,7 @@ $navbarLinkColorHover: #333;
$navbarLinkColorActive: #555; $navbarLinkColorActive: #555;
$navbarLinkBackgroundHover: transparent; $navbarLinkBackgroundHover: transparent;
$navbarLinkBackgroundActive: darken($navbarBackground, 6.5%); $navbarLinkBackgroundActive: darken($navbarBackground, 6.5%);
$navbarDropdownShadow: inset 0px 4px 7px -4px darken($bodyBackground, 20%); $navbarDropdownShadow: inset 0px 4px 7px -4px darken($body-bg, 20%);
$navbarBrandColor: $navbarLinkColor; $navbarBrandColor: $navbarLinkColor;
......
public/sass/base/_base.scss
...@@ -8,8 +8,8 @@ body { ...@@ -8,8 +8,8 @@ body {
font-family: $baseFontFamily; font-family: $baseFontFamily;
font-size: $baseFontSize; font-size: $baseFontSize;
line-height: $baseLineHeight; line-height: $baseLineHeight;
color: $textColor; color: $text-color;
background-color: $bodyBackground; background-color: $body-bg;
} }
...@@ -17,12 +17,12 @@ body { ...@@ -17,12 +17,12 @@ body {
// ------------------------- // -------------------------
a { a {
color: $linkColor; color: $link-color;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
&:focus { &:focus {
color: $linkColorHover; color: $link-color-hover;
text-decoration: none; text-decoration: none;
} }
......
public/sass/base/_code.scss
...@@ -8,9 +8,9 @@ code, ...@@ -8,9 +8,9 @@ code,
pre { pre {
@include font-family-monospace(); @include font-family-monospace();
font-size: $baseFontSize - 2; font-size: $baseFontSize - 2;
background-color: $codeTagBackground; background-color: $code-tag-bg;
color: $textColor; color: $text-color;
border: 1px solid darken($codeTagBackground, 15%); border: 1px solid darken($code-tag-bg, 15%);
padding: 2px; padding: 2px;
} }
......
public/sass/base/_type.scss
...@@ -244,12 +244,12 @@ a.external-link { ...@@ -244,12 +244,12 @@ a.external-link {
.link { .link {
color: $linkColor; color: $link-color;
cursor: pointer; cursor: pointer;
} }
.link:hover { .link:hover {
color: $linkColorHover; color: $link-color-hover;
} }
.pointer { .pointer {
......
public/sass/components/_buttons.scss
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
// Large // Large
.btn-large { .btn-large {
padding: 6px 20px; padding: 6px 20px;
font-size: $fontSizeLarge; font-size: $font-size-lg;
} }
.btn-small { .btn-small {
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
.btn-inverse { .btn-inverse {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText); @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText);
box-shadow: none; box-shadow: none;
border: 1px solid $grafanaTargetFuncHightlight; border: 1px solid $tight-form-func-highlight-bg;
} }
.btn-text { .btn-text {
......
public/sass/components/_dashboard.scss
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
} }
div.flot-text { div.flot-text {
color: $textColor !important; color: $text-color !important;
} }
.panel { .panel {
...@@ -204,7 +204,7 @@ div.flot-text { ...@@ -204,7 +204,7 @@ div.flot-text {
.panel-menu { .panel-menu {
z-index: 500; z-index: 500;
position: absolute; position: absolute;
background: $grafanaTargetFuncBackground; background: $tight-form-func-bg;
border: 1px solid black; border: 1px solid black;
.panel-menu-row { .panel-menu-row {
......
public/sass/components/_dropdown.scss
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
i { i {
padding-right: 5px; padding-right: 5px;
color: $linkColorDisabled; color: $link-color-disabled;
} }
} }
} }
......
public/sass/components/_filter-table.scss
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.filter-table tr { .filter-table tr {
background: $grafanaListBackground; background: $grafanaListBackground;
border-bottom: 2px solid $pageBackground; border-bottom: 2px solid $page-bg;
} }
.filter-table th { .filter-table th {
......
public/sass/components/_gfbox.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
margin: 10px 5px; margin: 10px 5px;
background-color: $panel-bg; background-color: $panel-bg;
position: relative; position: relative;
border: 1px solid $grafanaTargetFuncBackground; border: 1px solid $tight-form-func-bg;
} }
.gf-box-no-margin { .gf-box-no-margin {
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
i { i {
font-size: 120%; font-size: 120%;
} }
color: $textColor; color: $text-color;
&:hover { &:hover {
color: $white; color: $white;
} }
...@@ -42,9 +42,9 @@ ...@@ -42,9 +42,9 @@
} }
.gf-box-header { .gf-box-header {
border-bottom: 1px solid $grafanaTargetFuncBackground; border-bottom: 1px solid $tight-form-func-bg;
overflow: hidden; overflow: hidden;
background-color: $grafanaTargetBackground; background-color: $tight-form-bg;
.tabs { .tabs {
float: left; float: left;
} }
...@@ -57,13 +57,13 @@ ...@@ -57,13 +57,13 @@
padding-right: 20px; padding-right: 20px;
padding-left: 10px; padding-left: 10px;
float: left; float: left;
color: $linkColor; color: $link-color;
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
line-height: 38px; line-height: 38px;
margin: 0; margin: 0;
.fa { .fa {
padding: 0 8px 0 5px; padding: 0 8px 0 5px;
color: $textColor; color: $text-color;
} }
} }
public/sass/components/_infobox.scss
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
.grafana-info-box { .grafana-info-box {
position: relative; position: relative;
padding: 5px 15px; padding: 5px 15px;
background-color: $grafanaTargetBackground; background-color: $tight-form-bg;
border: 1px solid $grafanaTargetBorder; border: 1px solid $tight-form-border;
h5 { h5 {
margin-top: 5px; margin-top: 5px;
} }
......
public/sass/components/_modals.scss
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
} }
.modal-no-header { .modal-no-header {
border: 1px solid $grafanaTargetFuncBackground; border: 1px solid $tight-form-func-bg;
text-align: center; text-align: center;
h3 { h3 {
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
.confirm-modal-title { .confirm-modal-title {
font-size: 18px; font-size: 18px;
color: $linkColor; color: $link-color;
margin-bottom: 15px; margin-bottom: 15px;
} }
......
public/sass/components/_navbar.scss
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
margin: 18px 0 6px 5px; margin: 18px 0 6px 5px;
float: left; float: left;
font-size: 120%; font-size: 120%;
color: $textColor; color: $text-color;
} }
.top-nav-btn { .top-nav-btn {
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
float: left; float: left;
margin: 0; margin: 0;
font-size: 1.4em; font-size: 1.4em;
border-right: 1px solid $grafanaTargetBorder; border-right: 1px solid $tight-form-border;
.fa-caret-down { .fa-caret-down {
font-size: 55%; font-size: 55%;
...@@ -86,12 +86,12 @@ ...@@ -86,12 +86,12 @@
} }
a { a {
color: darken($linkColor, 5%); color: darken($link-color, 5%);
background-color: $navbarButtonBackground; background-color: $navbarButtonBackground;
display: inline-block; display: inline-block;
&:hover { &:hover {
background: $navbarButtonBackgroundHighlight; background: $navbarButtonBackgroundHighlight;
color: $linkColor; color: $link-color;
// border-bottom: 1px solid $blue; // border-bottom: 1px solid $blue;
} }
} }
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
} }
.top-nav-logo-background { .top-nav-logo-background {
display: inline-block; display: inline-block;
border: 1px solid $bodyBackground; border: 1px solid $body-bg;
padding: 4px; padding: 4px;
border-radius: 50%; border-radius: 50%;
background: $iconContainerBackground; background: $iconContainerBackground;
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
float: left; float: left;
font-size: 17px; font-size: 17px;
padding: 18px 10px 10px 13px; padding: 18px 10px 10px 13px;
color: $linkColor; color: $link-color;
} }
public/sass/components/_navs.scss
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
.nav-list > .active > a:focus { .nav-list > .active > a:focus {
color: $white; color: $white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2); text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: $linkColor; background-color: $link-color;
} }
.nav-list [class^="icon-"], .nav-list [class^="icon-"],
.nav-list [class*=" icon-"] { .nav-list [class*=" icon-"] {
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
.nav-tabs > .active > a:hover, .nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus { .nav-tabs > .active > a:focus {
color: $gray; color: $gray;
background-color: $bodyBackground; background-color: $body-bg;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
...@@ -133,14 +133,14 @@ ...@@ -133,14 +133,14 @@
// ------------------------- // -------------------------
// Make carets use linkColor to start // Make carets use linkColor to start
.nav .dropdown-toggle .caret { .nav .dropdown-toggle .caret {
border-top-color: $linkColor; border-top-color: $link-color;
border-bottom-color: $linkColor; border-bottom-color: $link-color;
margin-top: 6px; margin-top: 6px;
} }
.nav .dropdown-toggle:hover .caret, .nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret { .nav .dropdown-toggle:focus .caret {
border-top-color: $linkColorHover; border-top-color: $link-color-hover;
border-bottom-color: $linkColorHover; border-bottom-color: $link-color-hover;
} }
/* move down carets for tabs */ /* move down carets for tabs */
.nav-tabs .dropdown-toggle .caret { .nav-tabs .dropdown-toggle .caret {
......
public/sass/components/_pagination.scss
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
ul > li > a, ul > li > a,
ul > li > span { ul > li > span {
padding: $paddingLarge; padding: $paddingLarge;
font-size: $fontSizeLarge; font-size: $font-size-lg;
} }
ul > li:first-child > a, ul > li:first-child > a,
ul > li:first-child > span { ul > li:first-child > span {
......
public/sass/components/_panel_dashlist.scss
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
display: block; display: block;
margin: 5px; margin: 5px;
padding: 7px; padding: 7px;
background-color: $grafanaTargetBackground; background-color: $tight-form-bg;
border: 1px solid $grafanaTargetBorder; border: 1px solid $tight-form-border;
.fa { .fa {
float: right; float: right;
padding-top: 3px; padding-top: 3px;
...@@ -17,6 +17,6 @@ ...@@ -17,6 +17,6 @@
} }
&:hover { &:hover {
background-color: $grafanaTargetFuncBackground; background-color: $tight-form-func-bg;
} }
} }
public/sass/components/_panel_graph.scss
...@@ -175,7 +175,7 @@ ...@@ -175,7 +175,7 @@
.graph-legend-series-hidden { .graph-legend-series-hidden {
a { a {
color: $linkColorDisabled; color: $link-color-disabled;
} }
} }
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
} }
.close { .close {
margin-right: 5px; margin-right: 5px;
color: $linkColor; color: $link-color;
opacity: 0.7; opacity: 0.7;
text-shadow: none; text-shadow: none;
} }
...@@ -286,7 +286,7 @@ ...@@ -286,7 +286,7 @@
} }
.axisLabel { .axisLabel {
color: $textColor; color: $text-color;
font-size: $fontSizeSmall; font-size: $fontSizeSmall;
position: absolute; position: absolute;
text-align: center; text-align: center;
......
public/sass/components/_panel_table.scss
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
border-left-width: 0; border-left-width: 0;
&:hover { &:hover {
background-color: $grafanaTargetFuncBackground; background-color: $tight-form-func-bg;
} }
&.active { &.active {
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
td { td {
padding: 0.45em 0 0.45em 1.1em; padding: 0.45em 0 0.45em 1.1em;
border-bottom: 2px solid $bodyBackground; border-bottom: 2px solid $body-bg;
border-right: 2px solid $bodyBackground; border-right: 2px solid $body-bg;
&:first-child { &:first-child {
padding-left: 15px; padding-left: 15px;
...@@ -77,8 +77,8 @@ ...@@ -77,8 +77,8 @@
.table-panel-header-bg { .table-panel-header-bg {
background: $grafanaListAccent; background: $grafanaListAccent;
border-top: 2px solid $bodyBackground; border-top: 2px solid $body-bg;
border-bottom: 2px solid $bodyBackground; border-bottom: 2px solid $body-bg;
height: 2.0em; height: 2.0em;
position: absolute; position: absolute;
top: 0; top: 0;
......
public/sass/components/_sidemenu.scss
...@@ -9,7 +9,7 @@ $sideMenuWidth: 220px; ...@@ -9,7 +9,7 @@ $sideMenuWidth: 220px;
top: 52px; top: 52px;
left: 0; left: 0;
width: $sideMenuWidth; width: $sideMenuWidth;
background-color: $bodyBackground; background-color: $body-bg;
z-index: 101; z-index: 101;
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
visibility: hidden; visibility: hidden;
...@@ -40,7 +40,7 @@ $sideMenuWidth: 220px; ...@@ -40,7 +40,7 @@ $sideMenuWidth: 220px;
} }
.top-nav-menu-btn { .top-nav-menu-btn {
a { a {
background-color: $pageBackground; background-color: $page-bg;
padding-right: 67px; padding-right: 67px;
padding-left: 22px; padding-left: 22px;
} }
...@@ -73,7 +73,7 @@ $sideMenuWidth: 220px; ...@@ -73,7 +73,7 @@ $sideMenuWidth: 220px;
display: block; display: block;
top: 0px; top: 0px;
left: $sideMenuWidth; left: $sideMenuWidth;
background-color: $bodyBackground; background-color: $body-bg;
} }
} }
} }
...@@ -97,7 +97,7 @@ $sideMenuWidth: 220px; ...@@ -97,7 +97,7 @@ $sideMenuWidth: 220px;
height: 40px; height: 40px;
display: inline-block; display: inline-block;
i { i {
color: $linkColor; color: $link-color;
opacity: .7; opacity: .7;
position: relative; position: relative;
left: 7px; left: 7px;
...@@ -111,7 +111,7 @@ $sideMenuWidth: 220px; ...@@ -111,7 +111,7 @@ $sideMenuWidth: 220px;
} }
.sidemenu-item { .sidemenu-item {
color: $linkColor; color: $link-color;
line-height: 47px; line-height: 47px;
padding: 0px 10px 0px 10px; padding: 0px 10px 0px 10px;
display: block; display: block;
...@@ -183,7 +183,7 @@ $sideMenuWidth: 220px; ...@@ -183,7 +183,7 @@ $sideMenuWidth: 220px;
top: 38%; top: 38%;
right: 25px; right: 25px;
font-size: 14px; font-size: 14px;
color: $linkColor; color: $link-color;
} }
.sidemenu-org-avatar, .sidemenu-org-avatar,
...@@ -205,13 +205,13 @@ $sideMenuWidth: 220px; ...@@ -205,13 +205,13 @@ $sideMenuWidth: 220px;
.sidemenu-org-details { .sidemenu-org-details {
padding-left: 10px; padding-left: 10px;
color: $linkColor; color: $link-color;
} }
.sidemenu-org-name { .sidemenu-org-name {
display: block; display: block;
font-size: 13px; font-size: 13px;
color: $linkColorDisabled; color: $link-color-disabled;
} }
.sidemenu-org-user { .sidemenu-org-user {
......
public/sass/components/_submenu.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
} }
.annotation-disabled, .annotation-disabled a { .annotation-disabled, .annotation-disabled a {
color: $linkColorDisabled; color: $link-color-disabled;
} }
.annotation-segment { .annotation-segment {
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
z-index: 1000; z-index: 1000;
font-size: $baseFontSize; font-size: $baseFontSize;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
border: 1px solid $grafanaTargetFuncBackground; border: 1px solid $tight-form-func-bg;
&.multi { &.multi {
.selected { .selected {
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
display: none; display: none;
} }
.selected { .selected {
background-color: $grafanaTargetFuncHightlight; background-color: $tight-form-func-highlight-bg;
} }
} }
} }
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
display: table-cell; display: table-cell;
line-height: 26px; line-height: 26px;
&:nth-child(2) { &:nth-child(2) {
border-left: 1px solid $grafanaTargetFuncBackground; border-left: 1px solid $tight-form-func-bg;
} }
} }
...@@ -129,5 +129,5 @@ ...@@ -129,5 +129,5 @@
.dash-nav-link { .dash-nav-link {
padding: 8px 7px; padding: 8px 7px;
display: inline-block; display: inline-block;
color: $textColor; color: $text-color;
} }
public/sass/components/_tables_lists.scss
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
display: block; display: block;
padding: 1px 10px; padding: 1px 10px;
line-height: 34px; line-height: 34px;
background-color: $grafanaTargetBackground; background-color: $tight-form-bg;
margin-bottom: 4px; margin-bottom: 4px;
cursor: pointer; cursor: pointer;
} }
public/sass/components/_tabs.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
margin: 0 0 10px 0; margin: 0 0 10px 0;
& > li > a { & > li > a {
color: darken($linkColor, 20%); color: darken($link-color, 20%);
} }
li > a:hover { li > a:hover {
...@@ -19,11 +19,11 @@ ...@@ -19,11 +19,11 @@
border: 1px solid $divider-border-color; border: 1px solid $divider-border-color;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid $panel-bg; border-bottom: 1px solid $panel-bg;
color: $linkColor; color: $link-color;
} }
li.disabled > a { li.disabled > a {
color: $textColor; color: $text-color;
} }
.open .dropdown-toggle { .open .dropdown-toggle {
......
public/sass/components/_tagsinput.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
input { input {
border: none; border: none;
border-right: 1px solid $grafanaTargetSegmentBorder; border-right: 1px solid $tight-form-border;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
padding: 8px 6px; padding: 8px 6px;
......
public/sass/components/_tightform.scss
.tight-form { .tight-form {
border-top: 1px solid $grafanaTargetBorder; border-top: 1px solid $tight-form-border;
border-left: 1px solid $grafanaTargetBorder; border-left: 1px solid $tight-form-border;
border-right: 1px solid $grafanaTargetBorder; border-right: 1px solid $tight-form-border;
background: $grafanaTargetBackground; background: $tight-form-bg;
&.last { &.last {
border-bottom: 1px solid $grafanaTargetBorder; border-bottom: 1px solid $tight-form-border;
} }
&.borderless { &.borderless {
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
.tight-form-container-no-item-borders { .tight-form-container-no-item-borders {
border: 1px solid $grafanaTargetBorder; border: 1px solid $tight-form-border;
border-bottom: none; border-bottom: none;
.tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input { .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input {
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
} }
.tight-form-container { .tight-form-container {
border-bottom: 1px solid $grafanaTargetBorder; border-bottom: 1px solid $tight-form-border;
} }
.tight-form-btn { .tight-form-btn {
...@@ -73,16 +73,19 @@ ...@@ -73,16 +73,19 @@
padding: 8px 7px; padding: 8px 7px;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
border-right: 1px solid $grafanaTargetSegmentBorder; border-right: 1px solid $tight-form-border;
color: $grafanaTargetColor;
display: inline-block; display: inline-block;
color: $text-color;
.has-open-function & { .has-open-function & {
padding-top: 25px; padding-top: 25px;
} }
.tight-form-disabled & { .tight-form-disabled & {
color: $grafanaTargetColorHide; color: $link-color-disabled;
a {
color: $link-color-disabled;
}
} }
&:hover, &:focus { &:hover, &:focus {
...@@ -90,7 +93,7 @@ ...@@ -90,7 +93,7 @@
} }
&a:hover { &a:hover {
background: $grafanaTargetFuncBackground; background: $tight-form-func-bg;
} }
&.last { &.last {
...@@ -108,13 +111,7 @@ ...@@ -108,13 +111,7 @@
} }
.tight-form-func { .tight-form-func {
background: $grafanaTargetFuncBackground; background: $tight-form-func-bg;
> a {
color: $grafanaTargetColor;
}
> a:hover {
color: $linkColor;
}
&.show-function-controls { &.show-function-controls {
padding-top: 5px; padding-top: 5px;
...@@ -135,9 +132,8 @@ input[type=text].tight-form-clear-input { ...@@ -135,9 +132,8 @@ input[type=text].tight-form-clear-input {
border: none; border: none;
margin: 0px; margin: 0px;
background: transparent; background: transparent;
color: $grafanaTargetColor;
border-radius: 0; border-radius: 0;
border-right: 1px solid $grafanaTargetSegmentBorder; border-right: 1px solid $tight-form-border;
} }
[type=text], [type=text],
...@@ -146,7 +142,7 @@ input[type=text].tight-form-clear-input { ...@@ -146,7 +142,7 @@ input[type=text].tight-form-clear-input {
[type=password] { [type=password] {
&.tight-form-input { &.tight-form-input {
border: none; border: none;
border-right: 1px solid $grafanaTargetSegmentBorder; border-right: 1px solid $tight-form-border;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
padding: 8px 6px; padding: 8px 6px;
...@@ -170,7 +166,7 @@ input[type=checkbox].tight-form-checkbox { ...@@ -170,7 +166,7 @@ input[type=checkbox].tight-form-checkbox {
select.tight-form-input { select.tight-form-input {
border: none; border: none;
border-right: 1px solid $grafanaTargetSegmentBorder; border-right: 1px solid $tight-form-border;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
height: 36px; height: 36px;
......
public/sass/components/_timepicker.scss
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
} }
.gf-timepicker-utc { .gf-timepicker-utc {
background-color: $grafanaTargetFuncBackground; background-color: $tight-form-func-bg;
color: $orange; color: $orange;
font-size: 75%; font-size: 75%;
padding: 3px; padding: 3px;
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
background-image: none; background-image: none;
border: none; border: none;
padding: 6px 9px; padding: 6px 9px;
color: $textColor; color: $text-color;
&.active span { &.active span {
color: $blue; color: $blue;
font-weight: bold; font-weight: bold;
...@@ -84,5 +84,5 @@ ...@@ -84,5 +84,5 @@
} }
.input-datetime-format { .input-datetime-format {
color: $linkColorDisabled color: $link-color-disabled
} }
public/sass/layout/_page.scss
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
} }
.page-container { .page-container {
background-color: $pageBackground; background-color: $page-bg;
position: relative; position: relative;
padding: 25px 56px 10px 56px; padding: 25px 56px 10px 56px;
max-width: 1060px; max-width: 1060px;
...@@ -61,8 +61,8 @@ ...@@ -61,8 +61,8 @@
h2 { h2 {
margin-left: 15px; margin-left: 15px;
margin-bottom: 0px; margin-bottom: 0px;
font-size: $fontSizeLarge; font-size: $font-size-lg;
color: $textColor; color: $text-color;
i { i {
padding-right: 6px; padding-right: 6px;
} }
......
public/sass/mixins/_buttons.scss
// Button backgrounds // Button backgrounds
// ------------------ // ------------------
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { @mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor, $textColor, $textShadow); @include gradientBar($startColor, $endColor, $text-color, $textShadow);
box-shadow: inset 0 -4px rgba(0,0,0,0.3); box-shadow: inset 0 -4px rgba(0,0,0,0.3);
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: $textColor; color: $text-color;
background-image: none; background-image: none;
background-color: darken($endColor, 2%); background-color: darken($endColor, 2%);
} }
......
public/sass/mixins/_mixins.scss
...@@ -78,15 +78,15 @@ ...@@ -78,15 +78,15 @@
// -------------------------------------------------- // --------------------------------------------------
@mixin font-family-serif() { @mixin font-family-serif() {
font-family: $serifFontFamily; font-family: $font-family-serif;
} }
@mixin font-family-sans-serif() { @mixin font-family-sans-serif() {
font-family: $sansFontFamily; font-family: $font-family-sans-serif;
} }
@mixin font-family-monospace() { @mixin font-family-monospace() {
font-family: $monoFontFamily; font-family: $font-family-monospace;
} }
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
...@@ -278,8 +278,8 @@ ...@@ -278,8 +278,8 @@
} }
// Gradient Bar Colors for buttons and alerts // Gradient Bar Colors for buttons and alerts
@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { @mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: $textColor; color: $text-color;
text-shadow: $textShadow; text-shadow: $textShadow;
@include gradient-vertical($primaryColor, $secondaryColor); @include gradient-vertical($primaryColor, $secondaryColor);
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
......
public/sass/pages/_login.scss
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
width: 125px; width: 125px;
} }
.icon-gf-grafana_wordmark { .icon-gf-grafana_wordmark {
color: $linkColor; color: $link-color;
position: relative; position: relative;
top: -90px; top: -90px;
font-size: 3rem; font-size: 3rem;
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
} }
.login-tab-header { .login-tab-header {
background: $grafanaTargetBackground; background: $tight-form-bg;
text-align: center; text-align: center;
} }
...@@ -42,14 +42,14 @@ ...@@ -42,14 +42,14 @@
padding: 10px 10px; padding: 10px 10px;
&.active { &.active {
background: darken($grafanaTargetBackground, 5%); background: darken($tight-form-bg, 5%);
color: $white; color: $white;
} }
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
width: 170px; width: 170px;
color: $textColor; color: $text-color;
} }
.password-strength { .password-strength {
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
overflow: visible; overflow: visible;
white-space: nowrap; white-space: nowrap;
padding-top: 3px; padding-top: 3px;
color: darken($textColor, 20%); color: darken($text-color, 20%);
border-top: 3px solid $red; border-top: 3px solid $red;
&.password-strength-ok { &.password-strength-ok {
width: 40%; width: 40%;
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
} }
.password-recovery { .password-recovery {
background: $grafanaTargetBackground; background: $tight-form-bg;
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
a { a {
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
.invite-box { .invite-box {
text-align: center; text-align: center;
border: 1px solid $grafanaTargetFuncBackground; border: 1px solid $tight-form-func-bg;
background-color: $panel-bg; background-color: $panel-bg;
width: 800px; width: 800px;
margin-left: auto; margin-left: auto;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment