IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): colors refactoring

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-19 14:21:57 +01:00
parent 6590e6fae8
commit 4a062b6d00
9 changed files with 72 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/datasources/partials/edit.html
View File

@@ -44,7 +44,7 @@
<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)"> <button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection Test Connection
</button> </button>
<a class="btn-text" href="datasources">Cancel</a> <a class="btn btn-link" href="datasources">Cancel</a>
</div> </div>
</form> </form>
</div> </div>

34
public/sass/_variables.dark.scss
View File

@@ -117,26 +117,25 @@ $table-border: $dark-3; // table and cell border
$btn-primary-bg: $brand-primary; $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btnInfoBackground: lighten($purple, 3%); $btn-info-bg: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%); $btn-info-bg-hl: darken($purple, 3%);
$btnSuccessBackgroundHighlight: darken($green, 3%); $btn-success-bg-hl: darken($green, 3%);
$btnSuccessBackground: lighten($green, 3%); $btn-success-bg: lighten($green, 3%);
$btnWarningBackground: $brand-warning; $btn-warning-bg: $brand-warning;
$btnWarningBackgroundHighlight: lighten($brand-warning, 8%); $btn-warning-bg-hl: lighten($brand-warning, 8%);
$btnDangerBackground: lighten($red, 3%); $btn-danger-bg: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%); $btn-danger-bg-hl: darken($red, 3%);
$btnInverseBackground: $dark-3; $btn-inverse-bg: $dark-3;
$btnInverseBackgroundHighlight: lighten($dark-3, 1%); $btn-inverse-bg-hl: lighten($dark-3, 1%);
$btnInverseText: $link-color; $btn-inverse-text-color: $link-color;
$btnInverseBorder: #333;
$btnText: $gray-3; $btn-link-color: $gray-3;
$iconContainerBackground: $black; $iconContainerBackground: $black;
// Forms // Forms
// ------------------------- // -------------------------
@@ -151,7 +150,6 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default; $input-color-placeholder: #999 !default;
$input-label-bg: $dark-3; $input-label-bg: $dark-3;
// Search // Search
$searchShadow: 0 0 35px 0 $body-bg; $searchShadow: 0 0 35px 0 $body-bg;
@@ -222,13 +220,13 @@ $state-warning-text: darken(#c09853, 10%);
$state-warning-bg: $brand-warning; $state-warning-bg: $brand-warning;
$errorText: #b94a48; $errorText: #b94a48;
$errorBackground: $btnDangerBackground; $errorBackground: $btn-danger-bg;
$successText: #468847; $successText: #468847;
$successBackground: $btnSuccessBackground; $successBackground: $btn-success-bg;
$infoText: $blue-dark; $infoText: $blue-dark;
$infoBackground: $btnInfoBackground; $infoBackground: $btn-info-bg;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------

68
public/sass/_variables.light.scss
View File

@@ -62,22 +62,22 @@ $text-color: $gray-1;
// Links // Links
// ------------------------- // -------------------------
$link-color: $gray-1; $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%); $link-hover-color: darken($link-color, 20%);
// Typography // Typography
// ------------------------- // -------------------------
$headings-color: $text-color; $headings-color: $text-color;
$abbr-border-color: $gray-2 !default; $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-small-color: $gray-2 !default;
$blockquote-border-color: $gray-3 !default; $blockquote-border-color: $gray-3 !default;
$hr-border-color: rgba(0,0,0,.1) !default; $hr-border-color: $dark-3 !default;
// Components // Components
$component-active-color: #fff !default; $component-active-color: $white !default;
$component-active-bg: $brand-primary !default; $component-active-bg: $brand-primary !default;
// Panel // Panel
@@ -96,58 +96,52 @@ $tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6; $tight-form-func-highlight-bg: $gray-6;
$modal-background: $body-bg; $modal-background: $body-bg;
$code-tag-bg: #ddd; $code-tag-bg: $dark-5;
// Lists // Lists
$grafanaListBackground: darken($gray-3,5%); $grafanaListBackground: $gray-6;
$grafanaListAccent: darken($gray-3,8%); $grafanaListAccent: $gray-5;
$grafanaListBorderTop: #eee; $grafanaListBorderTop: $gray-3;
$grafanaListBorderBottom: #eee; $grafanaListBorderBottom: $gray-3;
$grafanaListHighlight: darken($gray-3,10%); $grafanaListHighlight: $gray-5;
$grafanaListHighlightContrast: #ddd;
$grafanaListMainLinkColor: $text-color; $grafanaListMainLinkColor: $text-color;
// Tables // Tables
// ------------------------- // -------------------------
$table-bg: transparent; // overall background-color $table-bg: transparent; // overall background-color
$table-bg-accent: #f9f9f9; // for striping $table-bg-accent: $gray-5; // for striping
$table-bg-hover: #E8F8FD; // for hover $table-bg-hover: $gray-5; // for hover
$table-bg-active: $table-bg-hover !default; $table-bg-active: $table-bg-hover !default;
$table-border: #ddd; // table and cell border $table-border: $gray-3; // table and cell border
// Scrollbars // Scrollbars
$scrollbarBackground: $gray-3; $scrollbarBackground: $gray-5;
$scrollbarBackground2: $gray-3; $scrollbarBackground2: $gray-5;
$scrollbarBorder: $gray-2; $scrollbarBorder: $gray-4;
// Buttons // Buttons
// ------------------------- // -------------------------
$btnBackground: $gray-3; $btn-primary-bg: $brand-primary;
$btnBackgroundHighlight: darken($gray-3, 15%); $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btnBorder: #bbb;
$btn-primary-bg: $brand-primary; $btn-info-bg: lighten($purple, 3%);
$btn-primary-bg-hl: lighten($brand-primary, 10%); $btn-info-bg-hl: darken($purple, 3%);
$btnInfoBackground: lighten($purple, 3%); $btn-success-bg: lighten($green, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%); $btn-success-bg-hl: darken($green, 3%);
$btnSuccessBackground: lighten($green, 3%); $btn-warning-bg: lighten($orange, 3%);
$btnSuccessBackgroundHighlight: darken($green, 3%); $btn-warning-bg-hl: darken($orange, 3%);
$btnWarningBackground: lighten($orange, 3%); $btn-danger-bg: lighten($red, 3%);
$btnWarningBackgroundHighlight: darken($orange, 3%); $btn-danger-bg-hl: darken($red, 3%);
$btnDangerBackground: lighten($red, 3%); $btn-inverse-bg: $gray-5;
$btnDangerBackgroundHighlight: darken($red, 3%); $btn-inverse-bg-hl: darken($gray-5, 5%);
$btn-inverse-text-color: $dark-4;
$btnInverseBackground: $gray-5; $btn-link-color: $gray-1;
$btnInverseBackgroundHighlight: darken($gray-5, 5%);
$btnInverseText: $dark-4;
$btnText: $gray-3;
$iconContainerBackground: $white; $iconContainerBackground: $white;

8
public/sass/_variables.scss
View File

@@ -91,10 +91,10 @@ $form-sizes: (
// Typography // Typography
// ------------------------- // -------------------------
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif !default; $font-family-base: $font-family-sans-serif !default;
$font-size-root: 14px !default; $font-size-root: 14px !default;

30
public/sass/components/_buttons.scss
View File

@@ -64,6 +64,10 @@
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius); @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 // Set the backgrounds
// ------------------------- // -------------------------
.btn-primary { .btn-primary {
@@ -71,23 +75,23 @@
} }
// Warning appears are orange // Warning appears are orange
.btn-warning { .btn-warning {
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); @include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
} }
// Info appears as a neutral blue // Info appears as a neutral blue
.btn-info { .btn-info {
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); @include buttonBackground($btn-info-bg, $btn-info-bg-hl);
} }
// Inverse appears as dark gray // Inverse appears as dark gray
.btn-inverse { .btn-inverse {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText); @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
box-shadow: none; box-shadow: none;
border: 1px solid $tight-form-func-highlight-bg; border: 1px solid $tight-form-func-highlight-bg;
} }
@@ -96,23 +100,19 @@
@include button-outline-variant($btn-primary-bg); @include button-outline-variant($btn-primary-bg);
} }
.btn-outline-secondary { .btn-outline-secondary {
@include button-outline-variant($btnInverseBackground); @include button-outline-variant($btn-inverse-bg);
} }
.btn-outline-info { .btn-outline-info {
@include button-outline-variant($btnInfoBackground); @include button-outline-variant($btn-info-bg);
} }
.btn-outline-success { .btn-outline-success {
@include button-outline-variant($btnSuccessBackground); @include button-outline-variant($btn-success-bg);
} }
.btn-outline-warning { .btn-outline-warning {
@include button-outline-variant($btnWarningBackground); @include button-outline-variant($btn-warning-bg);
} }
.btn-outline-danger { .btn-outline-danger {
@include button-outline-variant($btnDangerBackground); @include button-outline-variant($btn-danger-bg);
} }
.btn-text {
color: $btnText;
margin: 0;
vertical-align: middle;
}

2
public/sass/components/_dashboard.scss
View File

@@ -22,7 +22,7 @@
text-align: center; text-align: center;
display: inline-block; display: inline-block;
line-height: 30px; line-height: 30px;
background: $btnSuccessBackground; background: $btn-success-bg;
color: rgba(255,255,255,.90); color: rgba(255,255,255,.90);
} }

4
public/sass/components/_navbar.scss
View File

@@ -142,8 +142,8 @@
} }
.dashboard-title { .dashboard-title {
padding: 0px 6px 5px 5px; padding: 0 0.4rem 0 0.5rem;
font-size: 17px; font-size: $font-size-lg;
} }
.top-nav-icon { .top-nav-icon {

2
public/sass/components/_timepicker.scss
View File

@@ -70,7 +70,7 @@
padding: 1px; padding: 1px;
} }
button.btn-sm { button.btn-sm {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
background-image: none; background-image: none;
border: none; border: none;
padding: 6px 10px; padding: 6px 10px;

2
public/sass/pages/_login.scss
View File

@@ -78,7 +78,7 @@
font-weight: bold; font-weight: bold;
min-width: 150px; min-width: 150px;
display: inline-block; display: inline-block;
border: 1px solid lighten($btnInverseBackground, 10%); border: 1px solid lighten($btn-inverse-bg, 10%);
} }
} }