apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux(saas): variable renaming

Browse Source
pull/4072/head
Torkel Ödegaard 9 years ago
parent 1cd3985913
commit febad7b1d7
29 changed files with 216 additions and 201 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 117
      public/sass/_variables.dark.scss
  2. 80
      public/sass/_variables.light.scss
  3. 8
      public/sass/base/_base.scss
  4. 6
      public/sass/base/_code.scss
  5. 4
      public/sass/base/_type.scss
  6. 4
      public/sass/components/_buttons.scss
  7. 4
      public/sass/components/_dashboard.scss
  8. 2
      public/sass/components/_dropdown.scss
  9. 2
      public/sass/components/_filter-table.scss
  10. 12
      public/sass/components/_gfbox.scss
  11. 4
      public/sass/components/_infobox.scss
  12. 4
      public/sass/components/_modals.scss
  13. 12
      public/sass/components/_navbar.scss
  14. 12
      public/sass/components/_navs.scss
  15. 2
      public/sass/components/_pagination.scss
  16. 6
      public/sass/components/_panel_dashlist.scss
  17. 6
      public/sass/components/_panel_graph.scss
  18. 10
      public/sass/components/_panel_table.scss
  19. 16
      public/sass/components/_sidemenu.scss
  20. 10
      public/sass/components/_submenu.scss
  21. 2
      public/sass/components/_tables_lists.scss
  22. 6
      public/sass/components/_tabs.scss
  23. 2
      public/sass/components/_tagsinput.scss
  24. 44
      public/sass/components/_tightform.scss
  25. 6
      public/sass/components/_timepicker.scss
  26. 6
      public/sass/layout/_page.scss
  27. 6
      public/sass/mixins/_buttons.scss
  28. 10
      public/sass/mixins/_mixins.scss
  29. 14
      public/sass/pages/_login.scss

117
public/sass/_variables.dark.scss
Unescape View File

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

80
public/sass/_variables.light.scss
Unescape View File

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

8
public/sass/base/_base.scss
Unescape View File

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

6
public/sass/base/_code.scss
Unescape View File

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

4
public/sass/base/_type.scss
Unescape View File

@ -244,12 +244,12 @@ a.external-link {
.link {
color: $linkColor;
color: $link-color;
cursor: pointer;
}
.link:hover {
color: $linkColorHover;
color: $link-color-hover;
}
.pointer {

4
public/sass/components/_buttons.scss
Unescape View File

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

4
public/sass/components/_dashboard.scss
Unescape View File

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

2
public/sass/components/_dropdown.scss
Unescape View File

@ -79,7 +79,7 @@
i {
padding-right: 5px;
color: $linkColorDisabled;
color: $link-color-disabled;
}
}
}

2
public/sass/components/_filter-table.scss
Unescape View File

@ -19,7 +19,7 @@
.filter-table tr {
background: $grafanaListBackground;
border-bottom: 2px solid $pageBackground;
border-bottom: 2px solid $page-bg;
}
.filter-table th {

12
public/sass/components/_gfbox.scss
Unescape View File

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

4
public/sass/components/_infobox.scss
Unescape View File

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

4
public/sass/components/_modals.scss
Unescape View File

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

12
public/sass/components/_navbar.scss
Unescape View File

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

12
public/sass/components/_navs.scss
Unescape View File

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

2
public/sass/components/_pagination.scss
Unescape View File

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

6
public/sass/components/_panel_dashlist.scss
Unescape View File

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

6
public/sass/components/_panel_graph.scss
Unescape View File

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

10
public/sass/components/_panel_table.scss
Unescape View File

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

16
public/sass/components/_sidemenu.scss
Unescape View File

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

10
public/sass/components/_submenu.scss
Unescape View File

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

2
public/sass/components/_tables_lists.scss
Unescape View File

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

6
public/sass/components/_tabs.scss
Unescape View File

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

2
public/sass/components/_tagsinput.scss
Unescape View File

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

44
public/sass/components/_tightform.scss
Unescape View File

@ -1,11 +1,11 @@
.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,14 +111,8 @@
}
.tight-form-func {
background: $grafanaTargetFuncBackground;
> a {
color: $grafanaTargetColor;
}
> a:hover {
color: $linkColor;
}
background: $tight-form-func-bg;
&.show-function-controls {
padding-top: 5px;
min-width: 100px;
@ -134,10 +131,9 @@ input[type=text].tight-form-clear-input {
padding: 8px 7px;
border: none;
margin: 0px;
background: transparent;
color: $grafanaTargetColor;
background: transparent;
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;

6
public/sass/components/_timepicker.scss
Unescape View File

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

6
public/sass/layout/_page.scss
Unescape View File

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

6
public/sass/mixins/_buttons.scss
Unescape View File

@ -1,15 +1,15 @@
// 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%);
}

10
public/sass/mixins/_mixins.scss
Unescape View File

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

14
public/sass/pages/_login.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save