mirror of
https://github.com/grafana/grafana.git
synced 2024-11-26 10:50:37 -06:00
ux(sass): variable renaming
This commit is contained in:
parent
058c905432
commit
1cd3985913
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -16,7 +16,7 @@
|
||||
.filter-list > li {
|
||||
padding: 10px;
|
||||
margin-bottom: 2px;
|
||||
background: $grafanaPanelBackground;
|
||||
background: $panel-bg;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
|
@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.filter-table .expanded {
|
||||
border-color: $grafanaPanelBackground;
|
||||
border-color: $panel-bg;
|
||||
}
|
||||
|
||||
.filter-table .expanded > td {
|
||||
|
@ -1,6 +1,6 @@
|
||||
.gf-box {
|
||||
margin: 10px 5px;
|
||||
background-color: $grafanaPanelBackground;
|
||||
background-color: $panel-bg;
|
||||
position: relative;
|
||||
border: 1px solid $grafanaTargetFuncBackground;
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -1,7 +1,7 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user