From b3fe8c9531fd0f46ef831b75e955ce0f32e74c5e Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Wed, 6 Jan 2016 22:56:16 -0500 Subject: [PATCH 1/2] rebrand dashboard --- .../src/bread-crumb/bread-crumb.block.less | 18 +-- .../counts/dashboard-counts.block.less | 22 +-- .../graphs/dashboard-graphs.block.less | 65 +++++---- .../graphs/dashboard-graphs.partial.html | 1 - .../dashboard/lists/dashboard-list.block.less | 87 +++++++----- .../job-templates-list.partial.html | 2 +- .../lists/jobs/jobs-list.partial.html | 2 +- .../login/loginModal/loginModal.block.less | 28 ++-- .../login/loginModal/loginModal.partial.html | 4 +- .../loginModal/loginMotalNotice.block.less | 10 +- .../thirdPartySignOn.block.less | 14 +- .../client/src/main-menu/main-menu.block.less | 91 ++++++++----- .../src/main-menu/main-menu.partial.html | 2 +- .../src/shared/branding/colors.default.less | 126 ++++++++++++++++++ 14 files changed, 328 insertions(+), 144 deletions(-) create mode 100644 awx/ui/client/src/shared/branding/colors.default.less diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less index 99edea97d5..77e4c3c2ef 100644 --- a/awx/ui/client/src/bread-crumb/bread-crumb.block.less +++ b/awx/ui/client/src/bread-crumb/bread-crumb.block.less @@ -1,26 +1,28 @@ +@import "../shared/branding/colors.default.less"; + /** @define BreadCrumb */ .BreadCrumb { padding: 0; display: flex; - background-color: #FFFFFF; + background-color: @bc-bg; width: 100%; z-index: 1039; position: fixed; right: 0; left: 0; - top: 50px; + top: 60px; height: 40px; - border-bottom: 1px solid #e1e1e1; + border-bottom: 1px solid @bc-border; } .BreadCrumb.is-loggedOut { opacity: 0; } .BreadCrumb-menuLink { width: 58px; - border-left: 1px solid #e1e1e1; + border-left: 1px solid @bc-link-side; margin-left: auto; - color: #d7d7d7; + color: @bc-link-icon; flex: initial; display: flex; align-items: center; @@ -28,11 +30,11 @@ cursor: pointer; } .BreadCrumb-menuLink:hover { - background-color: #f6f6f6; - color: #d7d7d7; + background-color: @bc-link-bg-hov; + color: @bc-link-icon; } .BreadCrumb-menuLink.BreadCrumb-menuLinkActive { - color: #1678c4; + color: @bc-link-icon-focus; } .BreadCrumb-menuLinkImage { font-size: 18px; diff --git a/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less b/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less index 1c854a30dc..a29476fd90 100644 --- a/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less +++ b/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less @@ -1,3 +1,5 @@ +@import "../../shared/branding/colors.default.less"; + /** @define DashboardCounts */ .DashboardCounts { @@ -18,8 +20,8 @@ padding-left: 15px; padding-right: 15px; border-radius: 5px; - background-color: #fff; - border: 1px solid #e1e1e1; + background-color: @db-panel-bg; + border: 1px solid @db-panel-border; flex: 1 0 auto; max-width: ~"calc(16.6% - 15px)"; flex-basis: ~"calc(16.6% - 15px)"; @@ -41,22 +43,22 @@ } .DashboardCounts-buttonStyle:hover { - background-color: #1778c3; - border-color: #1778c3; + background-color: @db-count-succ; + border-color: @db-count-succ; .DashboardCounts-number, .DashboardCounts-label { - color: #fff; + color: @db-count-label-hov; } } .DashboardCounts-buttonStyle.is-failure:hover { - background-color: #ff5850; - border-color: #ff5850; + background-color: @db-count-fail; + border-color: @db-count-fail; .DashboardCounts-number, .DashboardCounts-label { - color: #fff; + color: @db-count-label-hov; } } @@ -68,13 +70,13 @@ } .DashboardCounts-number.is-failure { - color: #ff5850; + color: @db-count-fail; } .DashboardCounts-label { flex: 1; margin-bottom: 0px; - color: #848992; + color: @db-count-label; text-transform: uppercase; transition: color 0.2s; } diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less index 8a5e49ab1a..12d6b1f39a 100644 --- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less +++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less @@ -1,12 +1,13 @@ /** @define DashboardGraphs */ @import "../../shared/branding/colors.less"; +@import "../../shared/branding/colors.default.less"; .DashboardGraphs { margin-top: 20px; - border: solid 1px #e1e1e1; + border: solid 1px @db-panel-border; border-radius: 5px; - background-color: #ffffff; + background-color: @db-panel-bg; padding-top:20px; padding-left: 20px; padding-right: 20px; @@ -22,10 +23,10 @@ } .DashboardGraphs-tab { - color: #b7b7b7; - background-color: #ffffff; + color: @btn-txt; + background-color: @btn-bg; font-size: 12px; - border: 1px solid #e1e1e1; + border: 1px solid @btn-bord; height: 30px; border-radius: 5px; margin-right: 20px; @@ -49,30 +50,32 @@ } .DashboardGraphs-tab:hover { - color: #b7b7b7; - background-color: #f6f6f6; + color: @btn-txt; + background-color: @btn-bg-hov; cursor: pointer; } .DashboardGraphs-tab:active { - color: #b7b7b7; - background-color: #d7d7d7; + color: @btn-txt-sel; + background-color: @btn-bg-sel; cursor: pointer; } .DashboardGraphs-tab:focus { - color: #b7b7b7; + color: @btn-txt-sel; } .DashboardGraphs-tab.is-selected { - color: #ffffff; - background-color: #d7d7d7; + color: @btn-txt-sel; + background-color: @btn-bg-sel; + border-color: @btn-bord-sel; } .DashboardGraphs-graphSection { display: block; flex: 1; padding-top:20px; + margin-bottom: -20px; } .DashboardGraphs-graphContainer { @@ -86,13 +89,13 @@ } .DashboardGraphs-filterLabelIcon{ - color: #d7d7d7; + color: @db-graph-per-dd-icon; font-size: 14px; padding-top: 5px; } .DashboardGraphs-filterLabel{ - color: #d7d7d7; + color: @db-graph-per-dd-txt; font-size: 12px; padding-right: 10px; padding-left: 10px; @@ -110,12 +113,12 @@ .nv-axislabel { font-weight: bold !important; - fill: #b7b7b7 !important; + fill: @db-graph-axis-label !important; font-family: 'Open Sans' !important; } .nv-axis text { - fill: #b7b7b7 !important; //rgb(169, 178, 189); + fill: @db-graph-axis-label !important; //rgb(169, 178, 189); font-family: 'Open Sans' !important; } @@ -125,28 +128,33 @@ flex-wrap: wrap; } +.DashboardGraphs-filterDropdownText, +.DashboardGraphs-filterDropdownText:hover, +.DashboardGraphs-filterDropdownText:focus, +.DashboardGraphs-filterDropdownText:active { + color: @db-graph-per-dd-txt; +} + .DashboardGraphs-filterDropdownText { flex: initial; - color: #b7b7b7; - background-color: #ffffff; + background-color: @db-graph-per-dd-bg; font-size: 12px; text-transform: uppercase; white-space: nowrap; padding-right: 10px; padding-left: 10px; height: 20px; - border: 1px solid #e1e1e1; + border: 1px solid @db-graph-per-dd-bord; border-radius: 5px; transition: background-color 0.2s; } .DashboardGraphs-filterDropdownText:hover { - color: #b7b7b7; - background-color: #f6f6f6; + background-color: @db-graph-per-dd-bg-hov; } .DashboardGraphs-filterIcon{ - color: #d7d7d7; + color: @db-graph-per-dd-icon; font-size: 14px; width: 20px; padding-left:10px; @@ -183,14 +191,14 @@ } .DashboardGraphs-statusFilter{ - color: #b7b7b7; - background-color: #ffffff; + color: @btn-txt; + background-color: @btn-bg; font-size: 12px; text-transform: uppercase; padding-right: 10px; padding-left: 10px; height: 20px; - border: 1px solid #e1e1e1; + border: 1px solid @btn-bord; border-radius: 5px; transition: background-color 0.2s; margin-left: 10px; @@ -199,12 +207,13 @@ .DashboardGraphs-statusFilter:hover{ cursor: pointer; - background-color: #f6f6f6; + background-color: @btn-bg-hov; } .DashboardGraphs-statusFilter.is-selected { - color: #ffffff; - background-color: #d7d7d7; + color: @btn-txt-sel; + background-color: @btn-bg-sel; + border-color: @btn-bord-sel; } .DashboardGraphs-hostStatusLabel--successful{ diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html index d8b7f49206..f7bb5bd7b7 100644 --- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html +++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html @@ -11,7 +11,6 @@ Host Status
-
Period
.DashboardList-actionButtonCell > .DashboardList-actionButton { + background-color: @db-list-actn-alt-bg; + border: 1px solid @db-list-actn-alt-bord; +} + +.DashboardList-actionButton:hover { + background-color: @db-list-actn-bg-hov !important; + border: 1px solid @db-list-actn-bord-hov !important; + color: @db-list-actn-icn-hov; border: none; } @@ -179,6 +192,6 @@ border: 1px solid #1678c4; } -.DashboardList-noJobs{ - color: #b7b7b7; +.DashboardList-noJobs { + color: @db-list-empty-txt; } diff --git a/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html b/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html index e445d43673..4c57f4b60c 100644 --- a/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html +++ b/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html @@ -13,7 +13,7 @@ Title - + Activity diff --git a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html index 9f39c9ca2e..4c4c770387 100644 --- a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html +++ b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html @@ -10,7 +10,7 @@
- +
@@ -56,7 +56,7 @@
- diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less new file mode 100644 index 0000000000..a006a2f021 --- /dev/null +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -0,0 +1,126 @@ +// default base colors +@default-interface-txt: #848992; +@default-data-txt: #161B1F; +@default-icon: #B7B7B7; +@default-icon-hov: #D7D7D7; // also selected button +@default-border: #E8E8E8; +@default-second-border: #E1E1E1; +@default-bg: #FFFFFF; // also slected btn txt +@default-secondary-bg: #FCFCFC; // page/input field bg, just adds depth +@default-tertiary-bg: #FAFAFA; // hover bg, alt-list +@default-err: #FF5850; +@default-err-hov: #FF1105; +@default-succ: #3CB878; +@default-succ-hov: #60D66F; +@default-link: #1678C4; +@default-link-hov: #4498DA; + +// layout +@page-bg: @default-secondary-bg; + +// buttons +@btn-bg: @default-bg; +@btn-bord: @default-border; +@btn-txt: @default-interface-txt; +@btn-bg-hov: @default-tertiary-bg; +@btn-bg-sel: @default-icon-hov; +@btn-bord-sel: @default-icon-hov; +@btn-txt-sel: @default-bg; + +// tooltups +@tooltip-bg: @default-interface-txt; +@tooltip-txt: @default-bg; + +// login modal +@login-alert: @default-interface-txt; +@login-backdrop: #000000; +@login-bg: @default-bg; +@login-header-bg: @default-bg; +@login-alert-error: @default-err; + +// login modal notice +@login-notice-title: @default-interface-txt; +@login-notice-bg: @default-secondary-bg; +@login-notice-border: @default-secondary-bg; +@login-notice-text: #707070; + +// login modal third party auth +@third-party-label: @default-interface-txt; +@third-party-btn-bg: @default-bg; +@third-party-btn-hov: @default-icon-hov; +@third-party-btn-text: @default-icon; +@third-party-error: @default-err; +@third-party-error-hov: @default-err-hov; + +// forms +@field-label: @default-interface-txt; +@field-input-text: @default-data-txt; +@field-bg: @default-tertiary-bg; +@field-border: @default-second-border; +@submit-button-text: @default-bg; +@submit-button-bg: @default-succ; +@submit-button-bg-hov: @default-succ-hov; + +// footer +@copyright-text: @default-interface-txt; + +// main menu +@menu-bg: @default-bg; +@menu-btm: @default-border; +@menu-link-bg: @default-bg; +@menu-link: @default-interface-txt; +@menu-link-sides: @default-bg; +@menu-link-bg-hov: @default-tertiary-bg; +@menu-link-sides-hov: @default-tertiary-bg; +@menu-link-btm: @default-border; +@menu-link-btm-hov: @default-border; +@menu-link-icon: @default-icon; + +// breadcrumbs +@bc-bg: @default-bg; +@bc-text: @default-interface-txt; +@bc-border: @default-border; +@bc-link-icon: @default-icon; +@bc-link-bg-hov: @default-tertiary-bg; +@bc-link-icon-focus: @default-link; +@bc-link-side: @default-border; + +// dashboard +@db-panel-bg: @default-bg; +@db-panel-border: @default-border; + +// dashboard counts +@db-count-succ: @default-link; +@db-count-fail: @default-err; +@db-count-label: @default-interface-txt; +@db-count-label-hov: @default-bg; + +// dashboard graphs +@db-graph-period-label: @default-interface-txt; +@db-graph-per-dd-txt: @default-interface-txt; +@db-graph-per-dd-icon: @default-icon; +@db-graph-per-dd-bord: @default-border; +@db-graph-per-dd-bg: @default-bg; +@db-graph-per-dd-bg-hov:@default-tertiary-bg; +@db-graph-axis: @default-border; +@db-graph-axis-label: @default-interface-txt; + +// dashboard lists +@db-list-empty-txt: @default-interface-txt; +@db-list-header-bord: @default-bg; +@db-list-header-bg: #EBEBEB; +@db-list-header-txt: @default-interface-txt; +@db-list-header-icon: @default-icon; +@db-list-item: @default-data-txt; +@db-list-item-link: @default-link; +@db-list-item-link-hov: @default-link-hov; +@db-list-item-bg: @default-bg; +@db-list-alt-item-bg: @default-tertiary-bg; +@db-list-action-icon: @default-icon; +@db-list-actn-bg: @default-bg; +@db-list-actn-bord: @default-bg; +@db-list-actn-alt-bg: @default-tertiary-bg; +@db-list-actn-alt-bord: @default-tertiary-bg; +@db-list-actn-icn-hov: @default-bg; +@db-list-actn-bg-hov: @default-link; +@db-list-actn-bord-hov: @default-link; From 78924f41a2bf1b2fd584ef885af6c89b714f763c Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Thu, 7 Jan 2016 14:00:31 -0500 Subject: [PATCH 2/2] updates to rebrand --- .../host-status-graph.directive.js | 10 ++--- .../job-status/job-status-graph.directive.js | 2 +- .../dashboard/lists/dashboard-list.block.less | 34 ++++++++-------- .../src/shared/branding/colors.default.less | 40 +++++++++---------- awx/ui/client/src/shared/branding/colors.less | 2 +- .../src/smart-status/smart-status.block.less | 33 +++++++-------- 6 files changed, 61 insertions(+), 60 deletions(-) diff --git a/awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js b/awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js index b6f5a8c5f6..87e2a82764 100644 --- a/awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js +++ b/awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js @@ -59,10 +59,10 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) { if(scope.status === "successful"){ data = [ { "label": "SUCCESSFUL", - "color": "#5bbdbf", + "color": "#3CB878", "value" : scope.data.hosts.total - scope.data.hosts.failed }]; - colors = ['#5bbdbf']; + colors = ['#3cb878']; } else if (scope.status === "failed"){ data = [{ "label": "FAILED", @@ -74,7 +74,7 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) { else { data = [ { "label": "SUCCESSFUL", - "color": "#5bbdbf", + "color": "#3CB878", "value" : scope.data.hosts.total - scope.data.hosts.failed } , { "label": "FAILED", @@ -82,7 +82,7 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) { "value" : scope.data.hosts.failed } ]; - colors = ['#5bbdbf', '#ff5850']; + colors = ['#3cb878', '#ff5850']; } host_pie_chart = nv.models.pieChart() @@ -114,7 +114,7 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) { color = "#ff5850"; } else{ - color = "#5bbdbf"; + color = "#3CB878"; } d3.select(element.find(".nv-label text")[0]) diff --git a/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js b/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js index c8297b6f48..f2fc2dae0b 100644 --- a/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js +++ b/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js @@ -58,7 +58,7 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG scope.status = status; var timeFormat, graphData = [ - { "color": "#5bbdbf", + { "color": "#3CB878", "key": "SUCCESSFUL", "values": data.jobs.successful }, diff --git a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less index aa02e5fb1c..35a5974a33 100644 --- a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less +++ b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less @@ -6,12 +6,12 @@ flex: 1; } .DashboardList--noJobTemplates { - color: @db-list-empty-txt; + color: @list-empty-txt; } .DashboardList-header { display: flex; - border-bottom: 1px solid @db-list-header-bord; + border-bottom: 1px solid @list-header-bord; height: 50px; } @@ -20,7 +20,7 @@ margin: 0px; font-size: 14px; font-weight: bold; - color: @db-list-header-txt; + color: @list-header-txt; height: 50px; line-height: 50px; white-space: nowrap; @@ -28,7 +28,7 @@ } .DashboardList-tableHeaderIcon { - color: @db-list-header-icon; + color: @list-header-icon; } .DashboardList-viewAll { @@ -72,8 +72,8 @@ font-size: 14px; font-weight: normal; text-transform: uppercase; - color: @db-list-header-txt; - background-color: @db-list-header-bg; + color: @list-header-txt; + background-color: @list-header-bg; } .DashboardList-tableHeader--name { @@ -104,11 +104,11 @@ .DashboardList-tableRow { height: 50px; font-size: 14px; - color: @db-list-item; + color: @list-item; } .DashboardList-tableRow--evenRow { - background-color: @db-list-alt-item-bg; + background-color: @list-alt-item-bg; } .DashboardList-status{ @@ -163,22 +163,22 @@ font-size: 16px; height: 30px; width: 30px; - color: @db-list-action-icon; - background-color: @db-list-actn-bg; - border: 1px solid @db-list-actn-bord; + color: @list-action-icon; + background-color: @list-actn-bg; + border: 1px solid @list-actn-bord; border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .DashboardList-tableRow--evenRow > .DashboardList-actionButtonCell > .DashboardList-actionButton { - background-color: @db-list-actn-alt-bg; - border: 1px solid @db-list-actn-alt-bord; + background-color: @list-actn-alt-bg; + border: 1px solid @list-actn-alt-bord; } .DashboardList-actionButton:hover { - background-color: @db-list-actn-bg-hov !important; - border: 1px solid @db-list-actn-bord-hov !important; - color: @db-list-actn-icn-hov; + background-color: @list-actn-bg-hov !important; + border: 1px solid @list-actn-bord-hov !important; + color: @list-actn-icn-hov; border: none; } @@ -193,5 +193,5 @@ } .DashboardList-noJobs { - color: @db-list-empty-txt; + color: @list-empty-txt; } diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index a006a2f021..07661c8b67 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -27,6 +27,26 @@ @btn-bord-sel: @default-icon-hov; @btn-txt-sel: @default-bg; +// lists +@list-empty-txt: @default-interface-txt; +@list-header-bord: @default-bg; +@list-header-bg: #EBEBEB; +@list-header-txt: @default-interface-txt; +@list-header-icon: @default-icon; +@list-item: @default-data-txt; +@list-item-link: @default-link; +@list-item-link-hov: @default-link-hov; +@list-item-bg: @default-bg; +@list-alt-item-bg: @default-tertiary-bg; +@list-action-icon: @default-icon; +@list-actn-bg: @default-bg; +@list-actn-bord: @default-bg; +@list-actn-alt-bg: @default-tertiary-bg; +@list-actn-alt-bord: @default-tertiary-bg; +@list-actn-icn-hov: @default-bg; +@list-actn-bg-hov: @default-link; +@list-actn-bord-hov: @default-link; + // tooltups @tooltip-bg: @default-interface-txt; @tooltip-txt: @default-bg; @@ -104,23 +124,3 @@ @db-graph-per-dd-bg-hov:@default-tertiary-bg; @db-graph-axis: @default-border; @db-graph-axis-label: @default-interface-txt; - -// dashboard lists -@db-list-empty-txt: @default-interface-txt; -@db-list-header-bord: @default-bg; -@db-list-header-bg: #EBEBEB; -@db-list-header-txt: @default-interface-txt; -@db-list-header-icon: @default-icon; -@db-list-item: @default-data-txt; -@db-list-item-link: @default-link; -@db-list-item-link-hov: @default-link-hov; -@db-list-item-bg: @default-bg; -@db-list-alt-item-bg: @default-tertiary-bg; -@db-list-action-icon: @default-icon; -@db-list-actn-bg: @default-bg; -@db-list-actn-bord: @default-bg; -@db-list-actn-alt-bg: @default-tertiary-bg; -@db-list-actn-alt-bord: @default-tertiary-bg; -@db-list-actn-icn-hov: @default-bg; -@db-list-actn-bg-hov: @default-link; -@db-list-actn-bord-hov: @default-link; diff --git a/awx/ui/client/src/shared/branding/colors.less b/awx/ui/client/src/shared/branding/colors.less index 36868068c4..4d9d801584 100644 --- a/awx/ui/client/src/shared/branding/colors.less +++ b/awx/ui/client/src/shared/branding/colors.less @@ -26,7 +26,7 @@ @tip-background: #0088CC; @tip-color: #fff; -@green: #5bbdbf; +@green: #3cb878; @red: #ff5850; @red-hover: #FA8C87; @red-focus: #FF1105; diff --git a/awx/ui/client/src/smart-status/smart-status.block.less b/awx/ui/client/src/smart-status/smart-status.block.less index d06feb41e7..248993b217 100644 --- a/awx/ui/client/src/smart-status/smart-status.block.less +++ b/awx/ui/client/src/smart-status/smart-status.block.less @@ -1,5 +1,6 @@ /** @define SmartStatus */ @import "awx/ui/client/legacy-styles/animations.less"; +@import "../shared/branding/colors.default.less"; .SmartStatus-container{ max-width: 165px; @@ -12,19 +13,19 @@ } .SmartStatus--success{ - color: #5bbdbf; + color: @default-succ; margin-bottom: 20px; padding: 0px; } .SmartStatus--failed{ - color: #ff5850; + color: @default-err; margin-top: 20px; padding: 0px; } .SmartStatus--running{ - color: #b7b7b7; + color: @default-icon; margin-top: 10px; padding: 0px; .pulsate(); @@ -37,14 +38,14 @@ } .SmartStatus-tooltip--success{ - color: #5bbdbf; + color: #3cb878; padding-left: 5px; padding-right: 0px; text-shadow: - -1px -1px 0 #fff, - 1px -1px 0 #fff, - -1px 1px 0 #fff, - 1px 1px 0 #fff; + -1px -1px 0 @default-bg, + 1px -1px 0 @default-bg, + -1px 1px 0 @default-bg, + 1px 1px 0 @default-bg; } @@ -53,10 +54,10 @@ padding-left: 5px; padding-right: 0px; text-shadow: - -1px -1px 0 #fff, - 1px -1px 0 #fff, - -1px 1px 0 #fff, - 1px 1px 0 #fff; + -1px -1px 0 @default-bg, + 1px -1px 0 @default-bg, + -1px 1px 0 @default-bg, + 1px 1px 0 @default-bg; } .SmartStatus-tooltip--running{ @@ -64,9 +65,9 @@ padding-left: 5px; padding-right: 0px; text-shadow: - -1px -1px 0 #fff, - 1px -1px 0 #fff, - -1px 1px 0 #fff, - 1px 1px 0 #fff; + -1px -1px 0 @default-bg, + 1px -1px 0 @default-bg, + -1px 1px 0 @default-bg, + 1px 1px 0 @default-bg; .pulsate(); }
Title Title Time