External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-10 19:07:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #593 from jlmitch5/rebrandDashboard

Browse Source 
rebrand dashboard
This commit is contained in:
jlmitch5
2016-01-07 14:14:58 -05:00
parent 366dc9dad2 78924f41a2
commit 5695741052
18 changed files with 352 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
awx/ui/client/src/bread-crumb/bread-crumb.block.less
View File

@@ -1,26 +1,28 @@
@import "../shared/branding/colors.default.less";
/** @define BreadCrumb */ /** @define BreadCrumb */
.BreadCrumb { .BreadCrumb {
padding: 0; padding: 0;
display: flex; display: flex;
background-color: #FFFFFF; background-color: @bc-bg;
width: 100%; width: 100%;
z-index: 1039; z-index: 1039;
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
top: 50px; top: 60px;
height: 40px; height: 40px;
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid @bc-border;
} }
.BreadCrumb.is-loggedOut { .BreadCrumb.is-loggedOut {
opacity: 0; opacity: 0;
} }
.BreadCrumb-menuLink { .BreadCrumb-menuLink {
width: 58px; width: 58px;
border-left: 1px solid #e1e1e1; border-left: 1px solid @bc-link-side;
margin-left: auto; margin-left: auto;
color: #d7d7d7; color: @bc-link-icon;
flex: initial; flex: initial;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -28,11 +30,11 @@
cursor: pointer; cursor: pointer;
} }
.BreadCrumb-menuLink:hover { .BreadCrumb-menuLink:hover {
background-color: #f6f6f6; background-color: @bc-link-bg-hov;
color: #d7d7d7; color: @bc-link-icon;
} }
.BreadCrumb-menuLink.BreadCrumb-menuLinkActive { .BreadCrumb-menuLink.BreadCrumb-menuLinkActive {
color: #1678c4; color: @bc-link-icon-focus;
} }
.BreadCrumb-menuLinkImage { .BreadCrumb-menuLinkImage {
font-size: 18px; font-size: 18px;

22
awx/ui/client/src/dashboard/counts/dashboard-counts.block.less
View File

@@ -1,3 +1,5 @@
@import "../../shared/branding/colors.default.less";
/** @define DashboardCounts */ /** @define DashboardCounts */
.DashboardCounts { .DashboardCounts {
@@ -18,8 +20,8 @@
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: @db-panel-bg;
border: 1px solid #e1e1e1; border: 1px solid @db-panel-border;
flex: 1 0 auto; flex: 1 0 auto;
max-width: ~"calc(16.6% - 15px)"; max-width: ~"calc(16.6% - 15px)";
flex-basis: ~"calc(16.6% - 15px)"; flex-basis: ~"calc(16.6% - 15px)";
@@ -41,22 +43,22 @@
} }
.DashboardCounts-buttonStyle:hover { .DashboardCounts-buttonStyle:hover {
background-color: #1778c3; background-color: @db-count-succ;
border-color: #1778c3; border-color: @db-count-succ;
.DashboardCounts-number, .DashboardCounts-number,
.DashboardCounts-label { .DashboardCounts-label {
color: #fff; color: @db-count-label-hov;
} }
} }
.DashboardCounts-buttonStyle.is-failure:hover { .DashboardCounts-buttonStyle.is-failure:hover {
background-color: #ff5850; background-color: @db-count-fail;
border-color: #ff5850; border-color: @db-count-fail;
.DashboardCounts-number, .DashboardCounts-number,
.DashboardCounts-label { .DashboardCounts-label {
color: #fff; color: @db-count-label-hov;
} }
} }
@@ -68,13 +70,13 @@
} }
.DashboardCounts-number.is-failure { .DashboardCounts-number.is-failure {
color: #ff5850; color: @db-count-fail;
} }
.DashboardCounts-label { .DashboardCounts-label {
flex: 1; flex: 1;
margin-bottom: 0px; margin-bottom: 0px;
color: #848992; color: @db-count-label;
text-transform: uppercase; text-transform: uppercase;
transition: color 0.2s; transition: color 0.2s;
} }

65
awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less
View File

@@ -1,12 +1,13 @@
/** @define DashboardGraphs */ /** @define DashboardGraphs */
@import "../../shared/branding/colors.less"; @import "../../shared/branding/colors.less";
@import "../../shared/branding/colors.default.less";
.DashboardGraphs { .DashboardGraphs {
margin-top: 20px; margin-top: 20px;
border: solid 1px #e1e1e1; border: solid 1px @db-panel-border;
border-radius: 5px; border-radius: 5px;
background-color: #ffffff; background-color: @db-panel-bg;
padding-top:20px; padding-top:20px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@@ -22,10 +23,10 @@
} }
.DashboardGraphs-tab { .DashboardGraphs-tab {
color: #b7b7b7; color: @btn-txt;
background-color: #ffffff; background-color: @btn-bg;
font-size: 12px; font-size: 12px;
border: 1px solid #e1e1e1; border: 1px solid @btn-bord;
height: 30px; height: 30px;
border-radius: 5px; border-radius: 5px;
margin-right: 20px; margin-right: 20px;
@@ -49,30 +50,32 @@
} }
.DashboardGraphs-tab:hover { .DashboardGraphs-tab:hover {
color: #b7b7b7; color: @btn-txt;
background-color: #f6f6f6; background-color: @btn-bg-hov;
cursor: pointer; cursor: pointer;
} }
.DashboardGraphs-tab:active { .DashboardGraphs-tab:active {
color: #b7b7b7; color: @btn-txt-sel;
background-color: #d7d7d7; background-color: @btn-bg-sel;
cursor: pointer; cursor: pointer;
} }
.DashboardGraphs-tab:focus { .DashboardGraphs-tab:focus {
color: #b7b7b7; color: @btn-txt-sel;
} }
.DashboardGraphs-tab.is-selected { .DashboardGraphs-tab.is-selected {
color: #ffffff; color: @btn-txt-sel;
background-color: #d7d7d7; background-color: @btn-bg-sel;
border-color: @btn-bord-sel;
} }
.DashboardGraphs-graphSection { .DashboardGraphs-graphSection {
display: block; display: block;
flex: 1; flex: 1;
padding-top:20px; padding-top:20px;
margin-bottom: -20px;
} }
.DashboardGraphs-graphContainer { .DashboardGraphs-graphContainer {
@@ -86,13 +89,13 @@
} }
.DashboardGraphs-filterLabelIcon{ .DashboardGraphs-filterLabelIcon{
color: #d7d7d7; color: @db-graph-per-dd-icon;
font-size: 14px; font-size: 14px;
padding-top: 5px; padding-top: 5px;
} }
.DashboardGraphs-filterLabel{ .DashboardGraphs-filterLabel{
color: #d7d7d7; color: @db-graph-per-dd-txt;
font-size: 12px; font-size: 12px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
@@ -110,12 +113,12 @@
.nv-axislabel { .nv-axislabel {
font-weight: bold !important; font-weight: bold !important;
fill: #b7b7b7 !important; fill: @db-graph-axis-label !important;
font-family: 'Open Sans' !important; font-family: 'Open Sans' !important;
} }
.nv-axis text { .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; font-family: 'Open Sans' !important;
} }
@@ -125,28 +128,33 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.DashboardGraphs-filterDropdownText,
.DashboardGraphs-filterDropdownText:hover,
.DashboardGraphs-filterDropdownText:focus,
.DashboardGraphs-filterDropdownText:active {
color: @db-graph-per-dd-txt;
}
.DashboardGraphs-filterDropdownText { .DashboardGraphs-filterDropdownText {
flex: initial; flex: initial;
color: #b7b7b7; background-color: @db-graph-per-dd-bg;
background-color: #ffffff;
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
height: 20px; height: 20px;
border: 1px solid #e1e1e1; border: 1px solid @db-graph-per-dd-bord;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.DashboardGraphs-filterDropdownText:hover { .DashboardGraphs-filterDropdownText:hover {
color: #b7b7b7; background-color: @db-graph-per-dd-bg-hov;
background-color: #f6f6f6;
} }
.DashboardGraphs-filterIcon{ .DashboardGraphs-filterIcon{
color: #d7d7d7; color: @db-graph-per-dd-icon;
font-size: 14px; font-size: 14px;
width: 20px; width: 20px;
padding-left:10px; padding-left:10px;
@@ -183,14 +191,14 @@
} }
.DashboardGraphs-statusFilter{ .DashboardGraphs-statusFilter{
color: #b7b7b7; color: @btn-txt;
background-color: #ffffff; background-color: @btn-bg;
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
height: 20px; height: 20px;
border: 1px solid #e1e1e1; border: 1px solid @btn-bord;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.2s; transition: background-color 0.2s;
margin-left: 10px; margin-left: 10px;
@@ -199,12 +207,13 @@
.DashboardGraphs-statusFilter:hover{ .DashboardGraphs-statusFilter:hover{
cursor: pointer; cursor: pointer;
background-color: #f6f6f6; background-color: @btn-bg-hov;
} }
.DashboardGraphs-statusFilter.is-selected { .DashboardGraphs-statusFilter.is-selected {
color: #ffffff; color: @btn-txt-sel;
background-color: #d7d7d7; background-color: @btn-bg-sel;
border-color: @btn-bord-sel;
} }
.DashboardGraphs-hostStatusLabel--successful{ .DashboardGraphs-hostStatusLabel--successful{

1
awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html
View File

@@ -11,7 +11,6 @@
Host Status Host Status
</div> </div>
<div class="DashboardGraphs-graphToolbar" ng-show="!hostStatusSelected"> <div class="DashboardGraphs-graphToolbar" ng-show="!hostStatusSelected">
<i class="fa fa-filter DashboardGraphs-filterLabelIcon"></i>
<div class="DashboardGraphs-filterLabel">Period</div> <div class="DashboardGraphs-filterLabel">Period</div>
<div class="DashboardGraphs-periodDropdown"> <div class="DashboardGraphs-periodDropdown">
<a id="period-dropdown" role="button" <a id="period-dropdown" role="button"

10
awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js
View File

@@ -59,10 +59,10 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) {
if(scope.status === "successful"){ if(scope.status === "successful"){
data = [ data = [
{ "label": "SUCCESSFUL", { "label": "SUCCESSFUL",
"color": "#5bbdbf", "color": "#3CB878",
"value" : scope.data.hosts.total - scope.data.hosts.failed "value" : scope.data.hosts.total - scope.data.hosts.failed
}]; }];
colors = ['#5bbdbf']; colors = ['#3cb878'];
} }
else if (scope.status === "failed"){ else if (scope.status === "failed"){
data = [{ "label": "FAILED", data = [{ "label": "FAILED",
@@ -74,7 +74,7 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) {
else { else {
data = [ data = [
{ "label": "SUCCESSFUL", { "label": "SUCCESSFUL",
"color": "#5bbdbf", "color": "#3CB878",
"value" : scope.data.hosts.total - scope.data.hosts.failed "value" : scope.data.hosts.total - scope.data.hosts.failed
} , } ,
{ "label": "FAILED", { "label": "FAILED",
@@ -82,7 +82,7 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) {
"value" : scope.data.hosts.failed "value" : scope.data.hosts.failed
} }
]; ];
colors = ['#5bbdbf', '#ff5850']; colors = ['#3cb878', '#ff5850'];
} }
host_pie_chart = nv.models.pieChart() host_pie_chart = nv.models.pieChart()
@@ -114,7 +114,7 @@ function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) {
color = "#ff5850"; color = "#ff5850";
} }
else{ else{
color = "#5bbdbf"; color = "#3CB878";
} }
d3.select(element.find(".nv-label text")[0]) d3.select(element.find(".nv-label text")[0])

2
awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js
View File

@@ -58,7 +58,7 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG
scope.status = status; scope.status = status;
var timeFormat, graphData = [ var timeFormat, graphData = [
{ "color": "#5bbdbf", { "color": "#3CB878",
"key": "SUCCESSFUL", "key": "SUCCESSFUL",
"values": data.jobs.successful "values": data.jobs.successful
}, },

87
awx/ui/client/src/dashboard/lists/dashboard-list.block.less
View File

@@ -1,15 +1,17 @@
/** @define DashboardList */ /** @define DashboardList */
@import "../../shared/branding/colors.default.less";
.DashboardList { .DashboardList {
flex: 1; flex: 1;
} }
.DashboardList--noJobTemplates { .DashboardList--noJobTemplates {
color: #8d8d8d; color: @list-empty-txt;
} }
.DashboardList-header { .DashboardList-header {
display: flex; display: flex;
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid @list-header-bord;
height: 50px; height: 50px;
} }
@@ -18,17 +20,22 @@
margin: 0px; margin: 0px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #b7b7b7; color: @list-header-txt;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
white-space: nowrap; white-space: nowrap;
padding-left: 20px; padding-left: 20px;
} }
.DashboardList-tableHeaderIcon {
color: @list-header-icon;
}
.DashboardList-viewAll { .DashboardList-viewAll {
color: #b7b7b7; color: @btn-txt;
background-color: #ffffff; background-color: @btn-bg;
font-size: 12px; font-size: 12px;
border: 1px solid #e1e1e1; border: 1px solid @btn-bord;
border-radius: 5px; border-radius: 5px;
margin-right: 15px; margin-right: 15px;
margin-top: 10px; margin-top: 10px;
@@ -41,12 +48,12 @@
} }
.DashboardList-viewAll:hover { .DashboardList-viewAll:hover {
color: #b7b7b7; color: @btn-txt;
background-color: #f6f6f6; background-color: @btn-bg-hov;
} }
.DashboardList-viewAll:focus { .DashboardList-viewAll:focus {
color: #b7b7b7; color: @btn-txt;
} }
.DashboardList-container { .DashboardList-container {
@@ -55,31 +62,31 @@
padding: 20px; padding: 20px;
} }
.DashboardList-table{ .DashboardList-table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
} }
.DashboardList-tableHeader{ .DashboardList-tableHeader {
height: 30px; height: 30px;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
color: #ffffff; color: @list-header-txt;
background-color: #d7d7d7; background-color: @list-header-bg;
} }
.DashboardList-tableHeader--name{ .DashboardList-tableHeader--name {
border-top-left-radius: 5px; border-top-left-radius: 5px;
padding-left: 15px; padding-left: 15px;
} }
.DashboardList-tableHeader--activity{ .DashboardList-tableHeader--activity {
width: 205px; width: 205px;
padding-left:20px padding-left:20px
} }
.DashboardList-tableHeader--time{ .DashboardList-tableHeader--time {
width: 190px; width: 190px;
padding-left:20px; padding-left:20px;
padding-right: 15px; padding-right: 15px;
@@ -87,21 +94,21 @@
text-align: right; text-align: right;
} }
.DashboardList-tableHeader--actions{ .DashboardList-tableHeader--actions {
border-top-right-radius: 5px; border-top-right-radius: 5px;
width: 90px; width: 90px;
padding-right: 15px; padding-right: 15px;
text-align: right; text-align: right;
} }
.DashboardList-tableRow{ .DashboardList-tableRow {
height: 50px; height: 50px;
font-size: 14px; font-size: 14px;
color: #161b1f; color: @list-item;
} }
.DashboardList-tableRow--evenRow{ .DashboardList-tableRow--evenRow {
background-color: #f6f6f6; background-color: @list-alt-item-bg;
} }
.DashboardList-status{ .DashboardList-status{
@@ -109,11 +116,11 @@
} }
.DashboardList-status--success{ .DashboardList-status--success{
color: #5bbdbf; color: @default-succ;
} }
.DashboardList-status--failed{ .DashboardList-status--failed{
color: #ff5850; color: @default-err;
} }
.DashboardList-nameCell { .DashboardList-nameCell {
@@ -125,10 +132,10 @@
} }
.DashboardList-nameContainer { .DashboardList-nameContainer {
color: #1678c4; color: @default-link;
} }
.DashboardList-activityCell{ .DashboardList-activityCell {
padding-right: 20px; padding-right: 20px;
padding-left: 20px; padding-left: 20px;
} }
@@ -141,31 +148,37 @@
} }
.DashboardList-nameContainer:hover { .DashboardList-nameContainer:hover {
color: #5ca6db; color: @default-link-hov;
cursor: pointer; cursor: pointer;
} }
.DashboardList-actionButtonCell{ .DashboardList-actionButtonCell {
padding-top:10px; padding-top:10px;
padding-right: 15px; padding-right: 15px;
display:flex; display:flex;
justify-content: flex-end; justify-content: flex-end;
} }
.DashboardList-actionButton{ .DashboardList-actionButton {
font-size: 16px; font-size: 16px;
height: 30px; height: 30px;
width: 30px; width: 30px;
color: #b7b7b7; color: @list-action-icon;
background-color: #ffffff; background-color: @list-actn-bg;
border: 1px solid #e1e1e1; border: 1px solid @list-actn-bord;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, border-color 0.2s;; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
} }
.DashboardList-actionButton:hover{ .DashboardList-tableRow--evenRow > .DashboardList-actionButtonCell > .DashboardList-actionButton {
background-color: #1678c4; background-color: @list-actn-alt-bg;
color: #ffffff; border: 1px solid @list-actn-alt-bord;
}
.DashboardList-actionButton:hover {
background-color: @list-actn-bg-hov !important;
border: 1px solid @list-actn-bord-hov !important;
color: @list-actn-icn-hov;
border: none; border: none;
} }
@@ -179,6 +192,6 @@
border: 1px solid #1678c4; border: 1px solid #1678c4;
} }
.DashboardList-noJobs{ .DashboardList-noJobs {
color: #b7b7b7; color: @list-empty-txt;
} }

2
awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html
View File

@@ -13,7 +13,7 @@
<th class="DashboardList-tableHeader DashboardList-tableHeader--name" <th class="DashboardList-tableHeader DashboardList-tableHeader--name"
ng-click="sort('job_templates','name')"> ng-click="sort('job_templates','name')">
Title Title
<i class="fa fa-sort-up"></i> <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i>
</th> </th>
<th class="DashboardList-tableHeader DashboardList-tableHeader--activity"> <th class="DashboardList-tableHeader DashboardList-tableHeader--activity">
Activity Activity

2
awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
View File

@@ -10,7 +10,7 @@
<div class="DashboardList-container"> <div class="DashboardList-container">
<table class="DashboardList-table"> <table class="DashboardList-table">
<tr> <tr>
<th class="DashboardList-tableHeader DashboardList-tableHeader--name" ng-click="sort('job_templates','name')">Title <i class="fa fa-sort-up"></i></th> <th class="DashboardList-tableHeader DashboardList-tableHeader--name" ng-click="sort('job_templates','name')">Title <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i></th>
<th class="DashboardList-tableHeader DashboardList-tableHeader--time">Time</th> <th class="DashboardList-tableHeader DashboardList-tableHeader--time">Time</th>
</tr> </tr>
<tr class="DashboardList-tableRow" <tr class="DashboardList-tableRow"

28
awx/ui/client/src/login/loginModal/loginModal.block.less
View File

@@ -1,3 +1,5 @@
@import "../../shared/branding/colors.default.less";
/** @define LoginModal */ /** @define LoginModal */
.LoginModal-backDrop { .LoginModal-backDrop {
width: 100vw; width: 100vw;
@@ -8,7 +10,7 @@
z-index: 1041; z-index: 1041;
opacity: 0; opacity: 0;
transition: 0.5s opacity; transition: 0.5s opacity;
background: #000; background: @login-backdrop;
} }
.LoginModal-backDrop.is-loggedOut { .LoginModal-backDrop.is-loggedOut {
@@ -26,7 +28,7 @@
margin-right: auto; margin-right: auto;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
background-color: #fff; background-color: @login-bg;
border-radius: 4px; border-radius: 4px;
opacity: 0; opacity: 0;
transition: opacity 0.5s; transition: opacity 0.5s;
@@ -41,7 +43,7 @@
.LoginModal-header { .LoginModal-header {
text-align: center; text-align: center;
background-color: #167ec4; background-color: @login-header-bg;
border-bottom: 0; border-bottom: 0;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
@@ -68,12 +70,12 @@
margin-bottom: 15px; margin-bottom: 15px;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
color: #161b1f; color: @login-alert;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.LoginModal-alert--error { .LoginModal-alert--error {
color: #ff5850; color: @login-alert-error;
padding-bottom: 4px; padding-bottom: 4px;
} }
@@ -110,10 +112,16 @@
} }
.LoginModal-label { .LoginModal-label {
color: #b7b7b7; color: @field-label;
font-weight: 400; font-weight: 400;
} }
.LoginModal-field {
color: @field-input-text;
background-color: @field-bg;
border: 1px solid @field-border;
}
.LoginModal-footer { .LoginModal-footer {
display: flex; display: flex;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
@@ -138,12 +146,12 @@
.LoginModal-signInButton { .LoginModal-signInButton {
transition: background-color 0.2s; transition: background-color 0.2s;
background-color: #5bbdbf; background-color: @submit-button-bg;
color: #fff; color: @submit-button-text;
} }
.LoginModal-signInButton:hover, .LoginModal-signInButton:hover,
.LoginModal-signInButton:focus { .LoginModal-signInButton:focus {
color: #fff; color: @submit-button-text;
background-color: #7bced0; background-color: @submit-button-bg-hov;
} }

4
awx/ui/client/src/login/loginModal/loginModal.partial.html
View File

@@ -35,7 +35,7 @@
</label> </label>
<div class="col-md-12"> <div class="col-md-12">
<input type="text" name="login_username" <input type="text" name="login_username"
class="form-control" class="form-control LoginModal-field"
ng-model="login_username" ng-model="login_username"
id="login-username" id="login-username"
autocomplete="off" required> autocomplete="off" required>
@@ -56,7 +56,7 @@
<input type="password" <input type="password"
name="login_password" name="login_password"
id="login-password" id="login-password"
class="form-control" class="form-control LoginModal-field"
ng-model="login_password" required ng-model="login_password" required
autocomplete="off"> autocomplete="off">
<div class="error" <div class="error"

10
awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
View File

@@ -1,3 +1,5 @@
@import "../../shared/branding/colors.default.less";
/** @define LoginModalNotice */ /** @define LoginModalNotice */
.LoginModalNotice { .LoginModalNotice {
font-size: 12px; font-size: 12px;
@@ -7,15 +9,15 @@
padding-top: 10px; padding-top: 10px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e1e1e1; border: 1px solid @login-notice-border;
background-color: #fff; background-color: @login-notice-bg;
color: #848992; color: @login-notice-text;
overflow-y: scroll; overflow-y: scroll;
overflow-x: visible; overflow-x: visible;
} }
.LoginModalNotice-title { .LoginModalNotice-title {
color: #b7b7b7; color: @login-notice-title;
font-weight: bold; font-weight: bold;
padding-bottom: 4px; padding-bottom: 4px;
font-size: 14px; font-size: 14px;

14
awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
View File

@@ -1,3 +1,5 @@
@import "../../../shared/branding/colors.default.less";
/** @define ThirdPartySignOn */ /** @define ThirdPartySignOn */
.ThirdPartySignOn { .ThirdPartySignOn {
@@ -7,7 +9,7 @@
.ThirdPartySignOn-label { .ThirdPartySignOn-label {
flex: initial; flex: initial;
color: #b7b7b7; color: @third-party-label;
} }
.ThirdPartySignOn-item { .ThirdPartySignOn-item {
@@ -20,22 +22,22 @@
height: 30px; height: 30px;
width: 30px; width: 30px;
border-radius: 50%; border-radius: 50%;
color: #ccc; color: @third-party-btn-text;
background-color: #fff; background-color: @third-party-btn-bg;
border: 0; border: 0;
padding: 0; padding: 0;
} }
.ThirdPartySignOn-button--error { .ThirdPartySignOn-button--error {
color: #ff5850; color: @third-party-error;
} }
.ThirdPartySignOn-button:hover { .ThirdPartySignOn-button:hover {
color: #e1e1e1; color: @third-party-btn-hov;
} }
.ThirdPartySignOn-button--error:hover { .ThirdPartySignOn-button--error:hover {
color: #FF1105; color: @third-party-error-hov;
} }
.ThirdPartySignOn-icon { .ThirdPartySignOn-icon {

91
awx/ui/client/src/main-menu/main-menu.block.less
View File

@@ -1,21 +1,26 @@
@import "../shared/branding/colors.default.less";
/** @define MainMenu */ /** @define MainMenu */
.MainMenu { .MainMenu {
padding: 0; padding: 0;
display: flex; display: flex;
background-color: #167ec4; background-color: @menu-bg;
border-bottom: 1px solid @menu-btm;
width: 100%; width: 100%;
z-index: 1040; z-index: 1040;
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
top: 0; top: 0;
height: 60px;
align-items: stretch;
} }
.MainMenu-logo, .MainMenu-logo,
.MainMenu-item { .MainMenu-item {
color: #fff; color: @menu-link;
background-color: #167ec4; background-color: @menu-link-bg;
} }
.MainMenu-logoImage { .MainMenu-logoImage {
@@ -32,10 +37,14 @@
flex: initial; flex: initial;
} }
.MainMenu-itemImage {
color: @menu-link-icon;
}
.MainMenu-socket { .MainMenu-socket {
transition: background-color 0.2s, color 0.2s, border-bottom 0.1s, padding-top 0.1s; transition: background-color 0.2s, color 0.2s, border-bottom 0.1s, padding-top 0.1s;
color: #fff; color: @menu-link-icon;
background: url(assets/socket_background.png) #167ec4; background: url(assets/socket_background.png) @menu-bg;
background-size: 55px 52px; background-size: 55px 52px;
background-repeat: no-repeat; background-repeat: no-repeat;
order: 0; order: 0;
@@ -46,7 +55,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border: 0; border: 0;
border-left: 1px solid #509ad3; border-left: 1px solid @menu-link-sides;
cursor: default; cursor: default;
} }
@@ -68,19 +77,14 @@
display: none; display: none;
} }
.MainMenu {
height: 50px;
align-items: stretch;
}
.MainMenu-logo { .MainMenu-logo {
flex: initial; flex: initial;
padding: 0; padding: 0;
display: flex; display: flex;
align-items: center; align-items: center;
border: 0; border: 0;
border-bottom: 0px solid #fff; border-bottom: 0;
border-right: 1px solid #509ad3; border-right: 1px solid @menu-link-sides;
} }
.MainMenu-item { .MainMenu-item {
@@ -88,14 +92,14 @@
flex: initial; flex: initial;
padding-top: 0px; padding-top: 0px;
border: 0; border: 0;
border-bottom: 0px solid #fff; border-bottom: 0px solid @menu-link-btm-hov;
display: flex; display: flex;
align-items: center; align-items: center;
} }
// Set up elements based on if their layout in the menu bar // Set up elements based on if their layout in the menu bar
.MainMenu-item--left { .MainMenu-item--left {
border-right: 1px solid #509ad3; border-right: 1px solid @menu-link-sides;
} }
.MainMenu-item--left:hover, .MainMenu-item--left:hover,
@@ -111,7 +115,7 @@
} }
.MainMenu-item--right { .MainMenu-item--right {
border-left: 1px solid #509ad3; border-left: 1px solid @menu-link-sides;
order: 1; order: 1;
} }
@@ -126,29 +130,47 @@
.MainMenu-item:hover, .MainMenu-item:hover,
.MainMenu-item.is-currentRoute { .MainMenu-item.is-currentRoute {
padding-top: 5px; padding-top: 5px;
border-bottom: 5px solid #fff; border-bottom: 5px solid @menu-link-btm-hov;
} }
.MainMenu-itemText--username { .MainMenu-itemText--username {
padding-left: 13px; padding-left: 13px;
margin-top: -4px;
} }
.MainMenu-itemImage { .MainMenu-itemImage {
font-size: 20px; font-size: 20px;
} }
.MainMenu-itemImage--settings {
margin-top: -1px;
}
.MainMenu-itemImage--user { .MainMenu-itemImage--user {
font-size: 21px; font-size: 21px;
margin-right: -5px; margin-right: -5px;
margin-top: -1px;
} }
.MainMenu-itemImage--docs { .MainMenu-itemImage--docs {
font-size: 21px; font-size: 21px;
margin-top: -2px; margin-top: -2px;
} }
.MainMenu-item.is-currentRoute {
background-color: @menu-link-bg-hov;
}
} }
@media screen and (max-width: @menu-breakpoint) { @media screen and (max-width: @menu-breakpoint) {
.MainMenu-logo {
height: 60px;
}
.MainMenu-logoImage {
margin-top: 5px;
}
.MainMenu-item--notMobile { .MainMenu-item--notMobile {
display: none; display: none;
} }
@@ -160,7 +182,7 @@
.MainMenu-logo { .MainMenu-logo {
flex: 1; flex: 1;
border-bottom: 1px solid #509ad3; border-bottom: 1px solid @menu-link-btm;
order: 0; order: 0;
} }
@@ -189,13 +211,22 @@
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
order: 1; order: 1;
border-bottom: 1px solid #509ad3; border-bottom: 1px solid @menu-link-btm;
}
.MainMenu-item.is-currentRoute {
font-weight: bold;
background-color: @menu-link-bg;
}
.MainMenu-item:hover {
background-color: @menu-link-bg-hov;
} }
.MainMenu-toggle { .MainMenu-toggle {
transition: background-color 0.2s; transition: background-color 0.2s;
color: #fff; color: @menu-link-icon;
background-color: #167ec4; background-color: @menu-link-bg;
order: 0; order: 0;
flex: initial; flex: initial;
padding-top: 3px; padding-top: 3px;
@@ -205,12 +236,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
border: 0; border: 0;
border-left: 1px solid #509ad3; border-left: 1px solid @menu-link-btm;
border-bottom: 1px solid #509ad3; border-bottom: 1px solid @menu-link-btm;
} }
.MainMenu-socket { .MainMenu-socket {
border-bottom: 1px solid #509ad3; border-bottom: 1px solid @menu-link-btm;
} }
.MainMenu-toggleImage { .MainMenu-toggleImage {
@@ -225,17 +256,7 @@
.MainMenu-item:hover, .MainMenu-item:hover,
.MainMenu-logo:hover, .MainMenu-logo:hover,
.MainMenu-item.is-currentRoute { .MainMenu-item.is-currentRoute {
color: #fff; color: @menu-link;
}
.MainMenu-item.is-currentRoute {
background-color: #509ad3;
}
.MainMenu-toggle:hover,
.MainMenu-item:hover,
.MainMenu-logo:hover {
background-color: #5bbdbf;
} }
// item on // item on

2
awx/ui/client/src/main-menu/main-menu.partial.html
View File

@@ -133,7 +133,7 @@
data-placement="bottom" data-placement="bottom"
data-trigger="hover" data-trigger="hover"
data-container="body"> data-container="body">
<i class="MainMenu-itemImage fa fa-cog" <i class="MainMenu-itemImage MainMenu-itemImage--settings fa fa-cog"
alt="Settings"> alt="Settings">
</i> </i>
</a> </a>

126
awx/ui/client/src/shared/branding/colors.default.less Normal file
View File

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

2
awx/ui/client/src/shared/branding/colors.less
View File

@@ -26,7 +26,7 @@
@tip-background: #0088CC; @tip-background: #0088CC;
@tip-color: #fff; @tip-color: #fff;
@green: #5bbdbf; @green: #3cb878;
@red: #ff5850; @red: #ff5850;
@red-hover: #FA8C87; @red-hover: #FA8C87;
@red-focus: #FF1105; @red-focus: #FF1105;

33
awx/ui/client/src/smart-status/smart-status.block.less
View File

@@ -1,5 +1,6 @@
/** @define SmartStatus */ /** @define SmartStatus */
@import "awx/ui/client/legacy-styles/animations.less"; @import "awx/ui/client/legacy-styles/animations.less";
@import "../shared/branding/colors.default.less";
.SmartStatus-container{ .SmartStatus-container{
max-width: 165px; max-width: 165px;
@@ -12,19 +13,19 @@
} }
.SmartStatus--success{ .SmartStatus--success{
color: #5bbdbf; color: @default-succ;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0px; padding: 0px;
} }
.SmartStatus--failed{ .SmartStatus--failed{
color: #ff5850; color: @default-err;
margin-top: 20px; margin-top: 20px;
padding: 0px; padding: 0px;
} }
.SmartStatus--running{ .SmartStatus--running{
color: #b7b7b7; color: @default-icon;
margin-top: 10px; margin-top: 10px;
padding: 0px; padding: 0px;
.pulsate(); .pulsate();
@@ -37,14 +38,14 @@
} }
.SmartStatus-tooltip--success{ .SmartStatus-tooltip--success{
color: #5bbdbf; color: #3cb878;
padding-left: 5px; padding-left: 5px;
padding-right: 0px; padding-right: 0px;
text-shadow: text-shadow:
-1px -1px 0 #fff, -1px -1px 0 @default-bg,
1px -1px 0 #fff, 1px -1px 0 @default-bg,
-1px 1px 0 #fff, -1px 1px 0 @default-bg,
1px 1px 0 #fff; 1px 1px 0 @default-bg;
} }
@@ -53,10 +54,10 @@
padding-left: 5px; padding-left: 5px;
padding-right: 0px; padding-right: 0px;
text-shadow: text-shadow:
-1px -1px 0 #fff, -1px -1px 0 @default-bg,
1px -1px 0 #fff, 1px -1px 0 @default-bg,
-1px 1px 0 #fff, -1px 1px 0 @default-bg,
1px 1px 0 #fff; 1px 1px 0 @default-bg;
} }
.SmartStatus-tooltip--running{ .SmartStatus-tooltip--running{
@@ -64,9 +65,9 @@
padding-left: 5px; padding-left: 5px;
padding-right: 0px; padding-right: 0px;
text-shadow: text-shadow:
-1px -1px 0 #fff, -1px -1px 0 @default-bg,
1px -1px 0 #fff, 1px -1px 0 @default-bg,
-1px 1px 0 #fff, -1px 1px 0 @default-bg,
1px 1px 0 #fff; 1px 1px 0 @default-bg;
.pulsate(); .pulsate();
} }