Skip to content

N
nexpie-grafana-theme
Commit 1cd39859 by Torkel Ödegaard
Options

ux(sass): variable renaming

parent 058c9054
Showing with 46 additions and 44 deletions
public/sass/_variables.dark.scss
......@@ -6,17 +6,17 @@
// -------------------------
$black: #000;
$gray: #bbb;
$gray-dark: #262626;
$gray-darker: #1f1f1f;
$gray-dark: #262626;
$gray-darker: #1f1f1f;
$gray-light: #ADAFAE;
$gray-lighter: #BBBFC2;
$gray-light: #ADAFAE;
$gray-lighter: #BBBFC2;
$white: #fff;
// Accent colors
// -------------------------
$blue: #33B5E5;
$blue-dark: #005f81;
$blue-dark: #005f81;
$green: #669900;
$red: #CC3900;
$yellow: #ECBB13;
......@@ -33,9 +33,10 @@ $critical: #ed2e18;
// grafana Variables
// -------------------------
$grafanaPanelBackground: $gray-darker;
$grafanaPanelBorder: solid 1px $gray-dark;
$grafanaTriggerBorder: solid 1px #555;
$panel-bg: $gray-darker;
$panel-border: solid 1px $gray-dark;
$divider-border-color: #555;
// Graphite Target Editor
$grafanaTargetBorder: $black;
......
public/sass/_variables.light.scss
......@@ -10,11 +10,11 @@
// Grays
// -------------------------
$black: #000;
$gray-darker: lighten(#000, 11.5%); // #222
$gray-dark: lighten(#000, 20%); // #333
$gray-darker: lighten(#000, 11.5%); // #222
$gray-dark: lighten(#000, 20%); // #333
$gray: lighten(#000, 33.5%); // #555
$gray-light: lighten(#000, 60%); // #999
$gray-lighter: lighten(#000, 97.5%); // #eee
$gray-light: lighten(#000, 60%); // #999
$gray-lighter: lighten(#000, 97.5%); // #eee
$white: #fff;
......@@ -38,9 +38,10 @@ $critical: #EC2128;
// grafana Variables
// -------------------------
$grafanaPanelBackground: $gray-lighter;
$grafanaPanelBorder: solid 1px #ddd;
$grafanaTriggerBorder: solid 1px $gray-light;
$panel-bg: $gray-lighter;
$panel-border: solid 1px #ddd;
$divider-border-color: $gray-light;
// Scaffolding
// -------------------------
......@@ -178,7 +179,7 @@ $labelBackground: #f8f8f8;
// Sidemenu
// -------------------------
$sideMenuBackground: $grafanaPanelBackground;
$sideMenuBackground: $panel-bg;
$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%);
// search
......
public/sass/components/_dashboard.scss
......@@ -47,7 +47,7 @@
.row-close {
padding: 0px;
margin: 0px;
background: $grafanaPanelBackground;
background: $panel-bg;
text-align: center;
}
......@@ -116,9 +116,9 @@ div.flot-text {
}
.panel-container {
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
position: relative;
border: $grafanaPanelBorder;
border: $panel-border;
&:hover {
.panel-actions {
display: block;
......@@ -185,7 +185,7 @@ div.flot-text {
position: absolute;
border-left: 31px solid transparent;
border-right: 30px solid transparent;
border-bottom: 27px solid $grafanaPanelBackground;
border-bottom: 27px solid $panel-bg;
left: 0;
bottom: 0;
}
......
public/sass/components/_filter-list.scss
......@@ -16,7 +16,7 @@
.filter-list > li {
padding: 10px;
margin-bottom: 2px;
background: $grafanaPanelBackground;
background: $panel-bg;
&:last-child {
margin: 0;
......
public/sass/components/_filter-table.scss
......@@ -49,7 +49,7 @@
}
.filter-table .expanded {
border-color: $grafanaPanelBackground;
border-color: $panel-bg;
}
.filter-table .expanded > td {
......
public/sass/components/_gfbox.scss
.gf-box {
margin: 10px 5px;
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
position: relative;
border: 1px solid $grafanaTargetFuncBackground;
}
......
public/sass/components/_modals.scss
......@@ -23,7 +23,7 @@
position: fixed;
z-index: $zindexModal;
width: 100%;
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
@include background-clip(padding-box);
outline: none;
......@@ -38,7 +38,7 @@
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid $grafanaPanelBackground;
border-bottom: 1px solid $panel-bg;
}
// Body (where all modal content resides)
......@@ -55,8 +55,8 @@
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
border-top: 1px solid $grafanaPanelBackground;
background-color: $grafanaPanelBackground;
border-top: 1px solid $panel-bg;
background-color: $panel-bg;
text-align: right; // right align buttons
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
}
......
public/sass/components/_search.scss
......@@ -7,8 +7,8 @@
width: 700px;
box-shadow: $searchShadow;
padding: 10px;
background-color: $grafanaPanelBackground;
border: $grafanaPanelBorder;
background-color: $panel-bg;
border: $panel-border;
.label-tag {
margin-left: 6px;
......
public/sass/components/_submenu.scss
......@@ -18,8 +18,8 @@
margin-right: 20px;
display: inline-block;
border-radius: 3px;
background-color: $grafanaPanelBackground;
border: $grafanaPanelBorder;
background-color: $panel-bg;
border: $panel-border;
margin-right: 10px;
display: inline-block;
......
public/sass/components/_tables_lists.scss
......@@ -4,14 +4,14 @@
th {
text-align: left;
padding: 5px 10px;
border-bottom: 4px solid $grafanaPanelBackground;
border-bottom: 4px solid $panel-bg;
}
tr td {
background-color: $grafanaListBackground;
padding: 5px 10px;
white-space: nowrap;
border-bottom: 4px solid $grafanaPanelBackground;
border-bottom: 4px solid $panel-bg;
&.nobg {
background-color: transparent;
}
......
public/sass/components/_tabs.scss
.nav-tabs-alt {
border-bottom: $grafanaTriggerBorder;
border-bottom: 1px solid $divider-border-color;
padding-left: 10px;
margin: 0 0 10px 0;
......@@ -16,9 +16,9 @@
li.active > a:focus,
li.active > a:hover {
@include border-radius(3px);
border: $grafanaTriggerBorder;
border: 1px solid $divider-border-color;
background-color: transparent;
border-bottom: 1px solid $grafanaPanelBackground;
border-bottom: 1px solid $panel-bg;
color: $linkColor;
}
......@@ -33,7 +33,7 @@
.tab-content {
padding: 10px;
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
}
}
......
public/sass/components/_timepicker.scss
......@@ -16,14 +16,14 @@
margin: -5px -10px 10px 5px;
padding: 10px 20px;
float: right;
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
@include box-shadow($navbarDropdownShadow);
}
.gf-timepicker-absolute-section {
width: 300px;
float: left;
border-right: $grafanaTriggerBorder;
border-right: 1px solid $divider-border-color;
padding: 0 0 0 20px;
select {
width: 183px;
......
public/sass/pages/_apps.scss
.app-edit-logo-box {
padding: 1.2rem;
background: $grafanaPanelBackground;
background: $panel-bg;
text-align: center;
img {
max-width: 7rem;
......@@ -14,7 +14,7 @@
margin: 0 0 0 2rem;
li {
background: $grafanaPanelBackground;
background: $panel-bg;
margin-top: 4px;
padding: 0.2rem 1rem;
}
......
public/sass/pages/_login.scss
......@@ -27,7 +27,7 @@
}
.login-inner-box {
background: $grafanaPanelBackground;
background: $panel-bg;
}
.login-tab-header {
......@@ -144,7 +144,7 @@
.invite-box {
text-align: center;
border: 1px solid $grafanaTargetFuncBackground;
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
width: 800px;
margin-left: auto;
margin-right: auto;
......
public/sass/pages/_playlist.scss
......@@ -4,7 +4,7 @@
position: relative;
width: 700px;
box-shadow: 0px 0px 55px 0px black;
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
.label-tag {
margin-left: 6px;
......
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