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