External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-17 20:51:21 -03:30
Code Issues Packages Projects Releases Wiki Activity

3.2 hardening color audit

Browse Source
This commit is contained in:
John Mitchell 2017-07-25 16:44:34 -04:00
parent 808b386fea
commit 5a3466a3b6
17 changed files with 69 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
awx/ui/client/legacy-styles/ansible-ui.less
View File

@ -27,12 +27,6 @@ body.modal-open {
margin-right: 0;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
border-color: @b7grey;
}
/* Helper Classes */
.pad-right-sm { padding-right: 10px; }
.pad-left-md { padding-left: 30px; }
@ -607,13 +601,13 @@ dd {
.ui-widget-content a.help-link,
.ui-widget-content a.help-link:active,
.ui-widget-content a.help-link:visited {
color: @grey;
color: @default-icon;
text-decoration: none;
}
.help-link:hover,
.ui-widget-content a.help-link:hover {
color: @default-icon;
color: @default-interface-txt;
text-decoration: none;
}
@ -2085,8 +2079,8 @@ tr td button i {
}
.form-control {
border-color: @d7grey;
background-color: @default-no-items-bord;
border-color: @b7grey;
background-color: @f2grey;
color: @default-data-txt;
transition: border-color 0.3s;
box-shadow: none;
@ -2096,7 +2090,7 @@ tr td button i {
.form-control + .select2 .select2-selection {
border-color: @b7grey !important;
background-color: @default-bg !important;
background-color: @f2grey !important;
color: @default-data-txt !important;
transition: border-color 0.3s !important;
box-shadow: none !important;
@ -2108,7 +2102,7 @@ tr td button i {
}
.form-control + .select2-container--disabled .select2-selection {
background-color: @egrey !important;
background-color: @ebgrey !important;
}
.form-control:active, .form-control:focus {
@ -2146,7 +2140,7 @@ tr td button i {
.select2-container--disabled,.select2-container--disabled .select2-selection--single,.select2-container--disabled .select2-selection--multiple {
cursor: not-allowed;
opacity: 100;
background: @egrey;
background: @ebgrey;
border-radius: 5px;
}
@ -2311,7 +2305,7 @@ html input[disabled] {
.select2-container--disabled .select2-selection,
.select2-container--disabled .select2-arrow {
background: @egrey;
background: @ebgrey;
}
.btn.disabled,.btn[disabled],fieldset[disabled] .bt {
@ -2320,11 +2314,11 @@ html input[disabled] {
.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled {
opacity: 1;
background: @egrey;
background: @ebgrey;
}
input[disabled].ui-spinner-input {
background-color: @egrey;
background-color: @ebgrey;
}
.CodeMirror-scroll {
@ -2339,3 +2333,13 @@ input[disabled].ui-spinner-input {
.CodeMirror-lines {
margin-bottom: 20px;
}
.btn-default {
border-color: @b7grey;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
background-color: @f2grey;
border-color: @b7grey;
color: @default-interface-txt;
}

2
awx/ui/client/legacy-styles/codemirror.less
View File

@ -43,7 +43,7 @@ textarea[disabled="disabled"] + div[id*="-container"]{
.CodeMirror.cm-s-default,
.CodeMirror-line {
background-color: @egrey;
background-color: @ebgrey;
}
.CodeMirror-gutters {

26
awx/ui/client/legacy-styles/forms.less
View File

@ -156,7 +156,7 @@
}
.Form-tab--disabled {
opacity: 0.4;
opacity: 0.65;
}
.Form-tab--disabled:hover {
@ -200,7 +200,7 @@
.Form-formGroup {
input.form-control {
background-color: @default-secondary-bg;
background-color: @f2grey;
border-color: @b7grey;
border-radius: 5px;
height: 30px;
@ -247,7 +247,7 @@
left: -20px;
position: absolute;
width: 5px;
background-color: @default-border;
background-color: @b7grey;
height: 100%;
}
@ -318,7 +318,7 @@
.ui-spinner{
height: 30px;
background-color: @field-secondary-bg !important;
background-color: @f2grey !important;
border-radius: 5px;
border:1px solid @field-border !important;
color: @field-input-text;
@ -366,13 +366,12 @@
border-left:1px solid @field-border;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
background-color: @field-button-bg !important;
width: 30px!important;
height: 28px!important;
}
.select2-container--disabled .select2-selection__arrow {
background: @egrey !important;
background: @ebgrey !important;
}
.select2-results__option{
@ -420,19 +419,19 @@
.Form-passwordButton{
height: 30px;
color: @field-lookup-btn-icon!important;
color: @default-interface-txt;
text-transform: uppercase;
line-height: 1;
padding-left: 7px;
padding-right: 7px;
background-color: @field-lookup-btn-bg;
border:1px solid @field-border;
background-color: @default-bg;
border:1px solid @b7grey;
}
.Form-passwordButton:hover {
cursor: pointer;
background-color: @field-lookup-btn-hov-bg;
border: 1px solid @field-border;
background-color: @f2grey;
border: 1px solid @b7grey;
color: @field-lookup-btn-icon;
}
@ -754,3 +753,8 @@ input[type='radio']:checked:before {
:-moz-placeholder { /* Firefox 18- */
color: @b7grey;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
border-color: @b7grey;
background: @ebgrey;
}

2
awx/ui/client/legacy-styles/jquery-ui-overrides.less
View File

@ -223,5 +223,5 @@ table.ui-datepicker-calendar {
}
.ui-state-disabled.ui-widget-content {
background-color: @egrey;
background-color: @ebgrey !important;
}

2
awx/ui/client/lib/theme/_mixins.less
View File

@ -34,7 +34,7 @@
&, &:active, &:hover, &:focus {
color: @at-color-button-text-default;
border-color: @at-color-input-border;
background-color: @at-color-default;
background-color: @at-gray-light-2x;
cursor: pointer;
}
}

17
awx/ui/client/lib/theme/_variables.less
View File

@ -1,20 +1,20 @@
/**
* All variables used in the UI. Use these variables directly during the development of components
* and features. Be sure the context of the variable name applies to the work that's being done.
* For example, it wouldn't make sense to use `@at-input-height` to describe the height of a
* button. Either add an alias if it makes sense to use the same base variable, or add a new
* For example, it wouldn't make sense to use `@at-input-height` to describe the height of a
* button. Either add an alias if it makes sense to use the same base variable, or add a new
* base variable to reference.
*
* Keep in mind the goal is to be able to modify an item by referencing its context instead of
* an arbitrary variable name. For example, tt should be a simple change when an ask comes in to
* Keep in mind the goal is to be able to modify an item by referencing its context instead of
* an arbitrary variable name. For example, tt should be a simple change when an ask comes in to
* "increase the height of inputs"
*
* 1. Colors
* 2. Typography
* 3. Layout
* 4. Buttons
* 5. Misc
*
* 5. Misc
*
*/
// 1. Colors --------------------------------------------------------------------------------------
@ -68,11 +68,11 @@
@at-color-input-disabled: @at-gray-light-2x;
@at-color-icon-dismiss: @at-gray-dark;
@at-color-icon-popover: @at-gray-dark-3x;
@at-color-icon-popover: @at-gray-dark-4x;
@at-color-icon-hover: @at-gray-dark-5x;
@at-color-panel-heading: @at-gray-dark-5x;
@at-color-panel-border: @at-gray-dark;
@at-color-panel-border: @at-gray-dark-2x;
@at-color-search-key-active: @at-blue;
@ -140,4 +140,3 @@
@at-line-height-short: 0.9;
@at-line-height-tall: 2;
@at-line-height: 24px;

2
awx/ui/client/src/app.js
View File

@ -206,7 +206,7 @@ var awApp = angular.module('awApp', [
LoadConfig, Store, pendoService, Prompt, Rest, Wait,
ProcessErrors, $state, GetBasePath, ConfigService, FeaturesService,
$filter, SocketService, AppStrings) {
console.log("This works fine!");
$rootScope.$state = $state;
$rootScope.$state.matches = function(stateName) {
return $state.current.name.search(stateName) > 0;

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

@ -19,7 +19,7 @@
padding-right: 15px;
border-radius: 5px;
background-color: @db-panel-bg;
border: 1px solid @db-panel-border;
border: 1px solid @b7grey;
flex: 1 0 auto;
max-width: ~"calc(16.6% - 15px)";
flex-basis: ~"calc(16.6% - 15px)";

2
awx/ui/client/src/home/dashboard/dashboard.block.less
View File

@ -19,7 +19,7 @@
}
.Dashboard-list {
border: 1px solid @default-border;
border: 1px solid @b7grey;
border-radius: 5px;
margin-top: 20px;
width: 50%;

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

@ -1,4 +1,5 @@
<div class="Dashboard">
HEY!
<dashboard-counts class="Dashboard-counts" data="dashboardData"></dashboard-counts>
<dashboard-graphs class="Dashboard-graphs"></dashboard-graphs>
<job-templates-list class="Dashboard-list

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

@ -2,7 +2,7 @@
.DashboardGraphs {
margin-top: 20px;
border: solid 1px @db-panel-border;
border: solid 1px @b7grey;
border-radius: 5px;
background-color: @db-panel-bg;
padding-top:20px;

2
awx/ui/client/src/job-submission/job-submission.block.less
View File

@ -106,7 +106,7 @@
cursor: default!important;
}
.JobSubmission-step--disabled {
opacity: 0.4;
opacity: 0.65;
cursor: not-allowed!important;
}
.JobSubmission-formContainer {

2
awx/ui/client/src/management-jobs/card/mgmtcards.block.less
View File

@ -8,7 +8,7 @@
background-color: @default-bg;
padding: 20px;
border-radius: 5px;
border: 1px solid @default-border;
border: 1px solid @b7grey;
align-items: baseline;
margin-top: 20px;
width: 32%;

2
awx/ui/client/src/organizations/orgcards.block.less
View File

@ -33,7 +33,7 @@
padding: 20px;
padding-bottom: 0px;
border-radius: 5px;
border: 1px solid @default-border;
border: 1px solid @b7grey;
display: flex;
flex-wrap: wrap;
margin-top: 20px;

2
awx/ui/client/src/setup-menu/setup-item.block.less
View File

@ -3,7 +3,7 @@
.SetupItem {
background-color: @panel-bg;
border-radius: 5px;
border: 1px solid @btn-bord;
border: 1px solid @b7grey;
min-height: 120px;
padding: 20px;
margin-top: 20px;

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

@ -16,7 +16,7 @@
@default-link: #337AB7;
@default-link-hov: #286090;
@default-list-header-bg:#EBEBEB;
@default-no-items-bord: #F6F6F6; // also white button hovers
@default-no-items-bord: #F6F6F6;
@default-stdout-txt: #707070;
@default-dark: #000000;
@b7grey: #B7B7B7;
@ -25,6 +25,7 @@
@f7grey: #F7F7F7;
@insights-yellow: #dedc4f;
@f2grey: #f2f2f2;
@ebgrey: #ebebeb;
@default-warning: #F0AD4E;
@ -42,9 +43,9 @@
// buttons
@btn-bg: @default-bg;
@btn-bord: @d7grey;
@btn-bord: @b7grey;
@btn-txt: @default-interface-txt;
@btn-bg-hov: @default-tertiary-bg;
@btn-bg-hov: @f2grey;
@btn-bg-sel: @default-icon-hov;
@btn-bord-sel: @default-icon-hov;
@btn-txt-sel: @default-bg;
@ -131,35 +132,35 @@
@radio-bg: @default-interface-txt;
@field-lookup-btn-icon: @default-icon;
@field-lookup-btn-bg: @default-bg;
@field-lookup-btn-hov-bg:@default-tertiary-bg;
@field-lookup-btn-hov-bg:@f2grey;
// footer
@copyright-text: @default-interface-txt;
// main menu
@menu-bg: @default-bg;
@menu-btm: @default-border;
@menu-btm: @b7grey;
@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-btm: @b7grey;
@menu-link-btm-hov: @b7grey;
@menu-link-icon: @default-icon;
// breadcrumbs
@bc-bg: @default-bg;
@bc-text: @default-interface-txt;
@bc-border: @default-border;
@bc-border: @b7grey;
@bc-link-icon: @default-icon;
@bc-link-bg-hov: @default-tertiary-bg;
@bc-link-bg-hov: @f2grey;
@bc-link-icon-focus: @default-link;
@bc-link-side: @default-border;
// dashboard
@db-panel-bg: @default-bg;
@db-panel-border: @default-border;
@db-panel-border: @b7grey;
// dashboard counts
@db-count-succ: @default-link;
@ -179,7 +180,7 @@
// panel
@panel-bg: @default-bg;
@panel-border: @default-border;
@panel-border: @b7grey;
// activity stream details modal
@as-detail-changes-txt: @default-stdout-txt;

4
awx/ui/client/src/shared/form-generator.js
View File

@ -844,7 +844,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
if (field.genMD5) {
html += "<span class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-default Form-lookupButton\" ng-click=\"genMD5('" + fld + "')\" " +
html += "<span class=\"input-group-btn\"><button type=\"button\" class=\"btn Form-lookupButton\" ng-click=\"genMD5('" + fld + "')\" " +
"aw-tool-tip=\"Generate " + field.label + "\" data-placement=\"top\" id=\"" + this.form.name + "_" + fld + "_gen_btn\">" +
"<i class=\"fa fa-magic\"></i></button></span>\n</div>\n";
}
@ -1371,7 +1371,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += `<div class="input-group Form-mixedInputGroup">`;
html += "<span class=\"input-group-btn\">\n";
html += `<button type="button" class="Form-lookupButton btn btn-default" ng-click="${field.ngClick || defaultLookupNgClick}"
html += `<button type="button" class="Form-lookupButton btn" ng-click="${field.ngClick || defaultLookupNgClick}"
${field.readonly || field.showonly}
${this.attr(field, "ngDisabled")}
id="${fld}-lookup-btn"><i class="fa fa-search"></i></button>`;