diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 53612650389..5c8a6492bb1 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -44,7 +44,7 @@ - Cancel + Cancel diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index f4a0bb9d0ef..fa185a27abf 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -117,26 +117,25 @@ $table-border: $dark-3; // table and cell border $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); -$btnInfoBackground: lighten($purple, 3%); -$btnInfoBackgroundHighlight: darken($purple, 3%); +$btn-info-bg: lighten($purple, 3%); +$btn-info-bg-hl: darken($purple, 3%); -$btnSuccessBackgroundHighlight: darken($green, 3%); -$btnSuccessBackground: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg: lighten($green, 3%); -$btnWarningBackground: $brand-warning; -$btnWarningBackgroundHighlight: lighten($brand-warning, 8%); +$btn-warning-bg: $brand-warning; +$btn-warning-bg-hl: lighten($brand-warning, 8%); -$btnDangerBackground: lighten($red, 3%); -$btnDangerBackgroundHighlight: darken($red, 3%); +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); -$btnInverseBackground: $dark-3; -$btnInverseBackgroundHighlight: lighten($dark-3, 1%); -$btnInverseText: $link-color; -$btnInverseBorder: #333; +$btn-inverse-bg: $dark-3; +$btn-inverse-bg-hl: lighten($dark-3, 1%); +$btn-inverse-text-color: $link-color; -$btnText: $gray-3; +$btn-link-color: $gray-3; -$iconContainerBackground: $black; +$iconContainerBackground: $black; // Forms // ------------------------- @@ -151,7 +150,6 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: #999 !default; $input-label-bg: $dark-3; - // Search $searchShadow: 0 0 35px 0 $body-bg; @@ -222,13 +220,13 @@ $state-warning-text: darken(#c09853, 10%); $state-warning-bg: $brand-warning; $errorText: #b94a48; -$errorBackground: $btnDangerBackground; +$errorBackground: $btn-danger-bg; $successText: #468847; -$successBackground: $btnSuccessBackground; +$successBackground: $btn-success-bg; $infoText: $blue-dark; -$infoBackground: $btnInfoBackground; +$infoBackground: $btn-info-bg; // Tooltips and popovers // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 2a779767356..16a85acdc7b 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -62,22 +62,22 @@ $text-color: $gray-1; // Links // ------------------------- $link-color: $gray-1; -$link-color-disabled: lighten($link-color,30%); +$link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); // Typography // ------------------------- -$headings-color: $text-color; +$headings-color: $text-color; $abbr-border-color: $gray-2 !default; -$text-muted: darken($link-color,30%); +$text-muted: darken($link-color,30%); $blockquote-small-color: $gray-2 !default; $blockquote-border-color: $gray-3 !default; -$hr-border-color: rgba(0,0,0,.1) !default; +$hr-border-color: $dark-3 !default; // Components -$component-active-color: #fff !default; +$component-active-color: $white !default; $component-active-bg: $brand-primary !default; // Panel @@ -96,58 +96,52 @@ $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; $modal-background: $body-bg; -$code-tag-bg: #ddd; +$code-tag-bg: $dark-5; // Lists -$grafanaListBackground: darken($gray-3,5%); -$grafanaListAccent: darken($gray-3,8%); -$grafanaListBorderTop: #eee; -$grafanaListBorderBottom: #eee; -$grafanaListHighlight: darken($gray-3,10%); -$grafanaListHighlightContrast: #ddd; +$grafanaListBackground: $gray-6; +$grafanaListAccent: $gray-5; +$grafanaListBorderTop: $gray-3; +$grafanaListBorderBottom: $gray-3; +$grafanaListHighlight: $gray-5; $grafanaListMainLinkColor: $text-color; // Tables // ------------------------- $table-bg: transparent; // overall background-color -$table-bg-accent: #f9f9f9; // for striping -$table-bg-hover: #E8F8FD; // for hover +$table-bg-accent: $gray-5; // for striping +$table-bg-hover: $gray-5; // for hover $table-bg-active: $table-bg-hover !default; -$table-border: #ddd; // table and cell border - +$table-border: $gray-3; // table and cell border // Scrollbars -$scrollbarBackground: $gray-3; -$scrollbarBackground2: $gray-3; -$scrollbarBorder: $gray-2; +$scrollbarBackground: $gray-5; +$scrollbarBackground2: $gray-5; +$scrollbarBorder: $gray-4; // Buttons // ------------------------- -$btnBackground: $gray-3; -$btnBackgroundHighlight: darken($gray-3, 15%); -$btnBorder: #bbb; +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 10%); +$btn-info-bg: lighten($purple, 3%); +$btn-info-bg-hl: darken($purple, 3%); -$btnInfoBackground: lighten($purple, 3%); -$btnInfoBackgroundHighlight: darken($purple, 3%); +$btn-success-bg: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); -$btnSuccessBackground: lighten($green, 3%); -$btnSuccessBackgroundHighlight: darken($green, 3%); +$btn-warning-bg: lighten($orange, 3%); +$btn-warning-bg-hl: darken($orange, 3%); -$btnWarningBackground: lighten($orange, 3%); -$btnWarningBackgroundHighlight: darken($orange, 3%); +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); -$btnDangerBackground: lighten($red, 3%); -$btnDangerBackgroundHighlight: darken($red, 3%); +$btn-inverse-bg: $gray-5; +$btn-inverse-bg-hl: darken($gray-5, 5%); +$btn-inverse-text-color: $dark-4; -$btnInverseBackground: $gray-5; -$btnInverseBackgroundHighlight: darken($gray-5, 5%); -$btnInverseText: $dark-4; - -$btnText: $gray-3; +$btn-link-color: $gray-1; $iconContainerBackground: $white; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index b6bb37db783..85e97fda5c6 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -91,10 +91,10 @@ $form-sizes: ( // Typography // ------------------------- -$font-family-sans-serif: "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; +$font-family-sans-serif: "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; $font-size-root: 14px !default; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 5a03350aeaa..4f71e2075bb 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -64,6 +64,10 @@ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius); } +.btn-link { + color: $btn-link-color; +} + // Set the backgrounds // ------------------------- .btn-primary { @@ -71,23 +75,23 @@ } // Warning appears are orange .btn-warning { - @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); + @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl); } // Danger and error appear as red .btn-danger { - @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); + @include buttonBackground($btn-danger-bg, $btn-danger-bg-hl); } // Success appears as green .btn-success { - @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); + @include buttonBackground($btn-success-bg, $btn-success-bg-hl); } // Info appears as a neutral blue .btn-info { - @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); + @include buttonBackground($btn-info-bg, $btn-info-bg-hl); } // Inverse appears as dark gray .btn-inverse { - @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText); + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); box-shadow: none; border: 1px solid $tight-form-func-highlight-bg; } @@ -96,23 +100,19 @@ @include button-outline-variant($btn-primary-bg); } .btn-outline-secondary { - @include button-outline-variant($btnInverseBackground); + @include button-outline-variant($btn-inverse-bg); } .btn-outline-info { - @include button-outline-variant($btnInfoBackground); + @include button-outline-variant($btn-info-bg); } .btn-outline-success { - @include button-outline-variant($btnSuccessBackground); + @include button-outline-variant($btn-success-bg); } .btn-outline-warning { - @include button-outline-variant($btnWarningBackground); + @include button-outline-variant($btn-warning-bg); } .btn-outline-danger { - @include button-outline-variant($btnDangerBackground); + @include button-outline-variant($btn-danger-bg); } -.btn-text { - color: $btnText; - margin: 0; - vertical-align: middle; -} + diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 777d364123f..9b23484bdb4 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -22,7 +22,7 @@ text-align: center; display: inline-block; line-height: 30px; - background: $btnSuccessBackground; + background: $btn-success-bg; color: rgba(255,255,255,.90); } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 0779b345576..44faa9d9112 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -142,8 +142,8 @@ } .dashboard-title { - padding: 0px 6px 5px 5px; - font-size: 17px; + padding: 0 0.4rem 0 0.5rem; + font-size: $font-size-lg; } .top-nav-icon { diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index 777730834ab..d4a2eb42e9b 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -70,7 +70,7 @@ padding: 1px; } button.btn-sm { - @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl); background-image: none; border: none; padding: 6px 10px; diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 0d17b3a53b0..3f3bb020263 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -78,7 +78,7 @@ font-weight: bold; min-width: 150px; display: inline-block; - border: 1px solid lighten($btnInverseBackground, 10%); + border: 1px solid lighten($btn-inverse-bg, 10%); } }