ux(sass): variable renaming

This commit is contained in:
Torkel Ödegaard 2016-02-16 08:30:37 +01:00
parent 058c905432
commit 1cd3985913
15 changed files with 46 additions and 44 deletions

View File

@ -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;

View File

@ -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

View File

@ -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;
}

View File

@ -16,7 +16,7 @@
.filter-list > li {
padding: 10px;
margin-bottom: 2px;
background: $grafanaPanelBackground;
background: $panel-bg;
&:last-child {
margin: 0;

View File

@ -49,7 +49,7 @@
}
.filter-table .expanded {
border-color: $grafanaPanelBackground;
border-color: $panel-bg;
}
.filter-table .expanded > td {

View File

@ -1,6 +1,6 @@
.gf-box {
margin: 10px 5px;
background-color: $grafanaPanelBackground;
background-color: $panel-bg;
position: relative;
border: 1px solid $grafanaTargetFuncBackground;
}

View File

@ -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
}

View File

@ -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;

View File

@ -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;

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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;