mirror of
				https://github.com/grafana/grafana.git
				synced 2025-02-25 18:55:37 -06:00 
			
		
		
		
	ux(sass): variable renaming
This commit is contained in:
		@@ -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;
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user