From cf015692152c0f765b110fad1d2e97cd470cb6ba Mon Sep 17 00:00:00 2001 From: alex Date: Fri, 12 Feb 2016 12:37:04 +0300 Subject: [PATCH] refactor(colors): apply new colors --- .../trafficChart/TrafficChartCtrl.js | 10 +-- src/app/theme/theme.constants.js | 73 +++++++++++-------- src/sass/app/_email.scss | 2 +- src/sass/theme/_buttons.scss | 30 ++++---- src/sass/theme/_table.scss | 10 +-- src/sass/theme/conf/_variables.scss | 46 ++++++------ src/sass/theme/dashboard/_trafficChart.scss | 10 +-- 7 files changed, 96 insertions(+), 85 deletions(-) diff --git a/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js b/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js index eebf864..fac0566 100644 --- a/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js +++ b/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js @@ -19,25 +19,25 @@ }, { value: 1500, - color: layoutColors.primary, - highlight: layoutColors.primaryBg, + color: layoutColors.primaryCharts, + highlight: layoutColors.primaryLight, label: 'Search engines' }, { value: 1000, - color: layoutColors.success, + color: layoutColors.successCharts, highlight: layoutColors.successBg, label: 'Direct Traffic' }, { value: 1200, - color: layoutColors.info, + color: layoutColors.infoCharts, highlight: layoutColors.infoBg, label: 'Referral Traffic' }, { value: 400, - color: layoutColors.warning, + color: layoutColors.warningCharts, highlight: layoutColors.warningBg, label: 'Other' } diff --git a/src/app/theme/theme.constants.js b/src/app/theme/theme.constants.js index fa21e58..c56c81f 100644 --- a/src/app/theme/theme.constants.js +++ b/src/app/theme/theme.constants.js @@ -8,39 +8,48 @@ var IMAGES_ROOT = 'assets/img/'; angular.module('BlurAdmin.theme') - .constant('layoutColors', { - primary: '#005562', - info: '#6eba8c', - success: '#0e8174', - warning: '#b9f2a1', - danger: '#ffa76d', - default: '#ffffff', - successLight: '#85BA54', - primaryLight: '#5FBCBB', - warningLight: '#c5d36a', - primaryDark: '#003e4b', - dangerDark: '#c37350', - successDark: '#18524b', - warningDark: '#8adc68', + .constant('layoutColors', { + primary: '#209e91', + info: '#2dacd1', + success: '#90b900', + warning: '#dfb81c', + danger: '#e85656', + default: '#ffffff', + successLight: '#85BA54', + primaryLight: '#5FBCBB', + warningLight: '#c5d36a', - primaryBg: '#0d8da2', - successBg: '#02b6a2', - dangerBg: '#ffcd92', - infoBg: '#a8e6b3', - warningBg: '#e4fbd3', + primaryDark: '#17857a', + dangerDark: '#c24848', + successDark: '#7b9e00', + warningDark: '#c6a315', + infoDark: '#258ead', - defaultText: '#ffffff' - }) - .constant('layoutSizes', { - resWidthCollapseSidebar: 1200, - resWidthHideSidebar: 500 - }) - .constant('layoutPaths', { - images: { - root: IMAGES_ROOT, - profile: IMAGES_ROOT + 'app/profile/', - amChart: 'bower_components/ammap/dist/ammap/images/' - } - }); + primaryBg: '#63cec3', + infoBg: '#5abfdd', + successBg: '#b5d448', + warningBg: '#e8ca52', + dangerBg: '#f67171', + + primaryCharts: '#218d9d', + successCharts: '#c2eb70', + infoCharts: '#59c3b8', + warningCharts: '#f9d673', + dangerCharts: '#faad74', + defaultCharts: '#ffffff', + + defaultText: '#ffffff' + }) + .constant('layoutSizes', { + resWidthCollapseSidebar: 1200, + resWidthHideSidebar: 500 + }) + .constant('layoutPaths', { + images: { + root: IMAGES_ROOT, + profile: IMAGES_ROOT + 'app/profile/', + amChart: 'bower_components/ammap/dist/ammap/images/' + } + }); })(); diff --git a/src/sass/app/_email.scss b/src/sass/app/_email.scss index 690ac0d..25c605b 100644 --- a/src/sass/app/_email.scss +++ b/src/sass/app/_email.scss @@ -248,7 +248,7 @@ } &.study { - background-color: $warning-btn; + background-color: $warning; } &.family { diff --git a/src/sass/theme/_buttons.scss b/src/sass/theme/_buttons.scss index 193a4e2..2a64af7 100644 --- a/src/sass/theme/_buttons.scss +++ b/src/sass/theme/_buttons.scss @@ -36,22 +36,22 @@ $hover: 24; .open > .dropdown-toggle { &.btn-primary { - @include styleButton($primary-btn, $primary-btn - $hover); + @include styleButton($primary, $primary - $hover); } &.btn-default { @include styleButton(transparent, $default); } &.btn-success { - @include styleButton($success-btn, $success-btn - $hover); + @include styleButton($success, $success - $hover); } &.btn-info { - @include styleButton($info-btn, $info-btn - $hover); + @include styleButton($info, $info - $hover); } &.btn-warning { - @include styleButton($warning-btn, $warning-btn - $hover); + @include styleButton($warning, $warning - $hover); } &.btn-danger { - @include styleButton($danger-btn, $danger-btn - $hover); + @include styleButton($danger, $danger - $hover); } } @@ -60,7 +60,7 @@ $hover: 24; } .btn-primary { - @include buttonColor($primary-btn, $primary-btn); + @include buttonColor($primary, $primary); } .btn-default { @@ -69,19 +69,19 @@ $hover: 24; } .btn-success { - @include buttonColor($success-btn, $success-btn); + @include buttonColor($success, $success); } .btn-info { - @include buttonColor($info-btn, $info-btn); + @include buttonColor($info, $info); } .btn-warning { - @include buttonColor($warning-btn, $warning-btn); + @include buttonColor($warning, $warning); } .btn-danger { - @include buttonColor($danger-btn, $danger-btn); + @include buttonColor($danger, $danger); } .btn-with-icon { @@ -154,7 +154,7 @@ $hover: 24; } &.btn-primary { - @include progressButtonColor($primary-btn); + @include progressButtonColor($primary); } &.btn-default { @@ -162,19 +162,19 @@ $hover: 24; } &.btn-success { - @include progressButtonColor($success-btn); + @include progressButtonColor($success); } &.btn-info { - @include progressButtonColor($info-btn); + @include progressButtonColor($info); } &.btn-warning { - @include progressButtonColor($warning-btn); + @include progressButtonColor($warning); } &.btn-danger { - @include progressButtonColor($danger-btn); + @include progressButtonColor($danger); } } diff --git a/src/sass/theme/_table.scss b/src/sass/theme/_table.scss index 03f43c9..e715625 100644 --- a/src/sass/theme/_table.scss +++ b/src/sass/theme/_table.scss @@ -210,18 +210,18 @@ body.badmin-transparent { background-color: rgba(0, 0, 0, 0.25); } .table > tbody > tr.primary > td{ - background-color: $primary-btn; + background-color: $primary; } .table > tbody > tr.success > td{ - background-color: $success-btn; + background-color: $success; } .table > tbody > tr.warning > td{ - background-color: $warning-btn; + background-color: $warning; } .table > tbody > tr.danger > td{ - background-color: $danger-btn; + background-color: $danger; } .table > tbody > tr.info > td{ - background-color: $info-btn; + background-color: $info; } } \ No newline at end of file diff --git a/src/sass/theme/conf/_variables.scss b/src/sass/theme/conf/_variables.scss index 6eb2928..fc8f562 100644 --- a/src/sass/theme/conf/_variables.scss +++ b/src/sass/theme/conf/_variables.scss @@ -1,32 +1,34 @@ $font-family: 'Roboto', sans-serif; -$primary: #005562 !default; -$info: #6eba8c !default; -$success: #0e8174 !default; -$warning: #b9f2a1 !default; -$danger: #ffa76d !default; $default: #ffffff !default; - -$primary-dark: #003e4b; -$danger-dark: #c37350; -$success-dark: #18524b; -$warning-dark: #8adc68; - -$primary-bg: #0d8da2; -$success-bg: #02b6a2; -$danger-bg: #ffcd92; -$info-bg: #a8e6b3; -$warning-bg: #e4fbd3; +$primary: #209e91 !default; +$info: #2dacd1 !default; +$success: #90b900 !default; +$warning: #dfb81c !default; +$danger: #e85656 !default; $primary-light: #5FBCBB; $success-light: #85BA54; -$primary-btn: #209e91; -$info-btn: #2dacd1; -$success-btn: #90b900; -$primary-btn: #209e91; -$warning-btn: #dfb81c; -$danger-btn: #e85656; +$primary-dark: #17857a; +$info-dark: #258ead; +$success-dark: #7b9e00; +$warning-dark: #c6a315; +$danger-dark: #c24848; + +$primary-bg: #63cec3; +$info-bg: #5abfdd; +$success-bg: #b5d448; +$warning-bg: #e8ca52; +$danger-bg: #f67171; + +$primary-charts :#218d9d; +$success-charts :#c2eb70; +$info-charts :#59c3b8; +$warning-charts :#f9d673; +$danger-charts :#faad74; +$default-charts :#ffffff; + $accent: #E3FF53; $activelink: #D6FF8A; diff --git a/src/sass/theme/dashboard/_trafficChart.scss b/src/sass/theme/dashboard/_trafficChart.scss index 2b9b4a6..803dcbf 100644 --- a/src/sass/theme/dashboard/_trafficChart.scss +++ b/src/sass/theme/dashboard/_trafficChart.scss @@ -117,22 +117,22 @@ border-radius: 15px; left: -45px; &.info{ - background-color: $info; + background-color: $info-charts; } &.success{ - background-color: $success; + background-color: $success-charts; } &.danger{ - background-color: $danger; + background-color: $danger-charts; } &.default{ background-color: $default; } &.warning{ - background-color: $warning; + background-color: $warning-charts; } &.primary{ - background-color: $primary; + background-color: $primary-charts; } }