External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 02:19:58 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #57 from jlmitch5/colorAudit32End

Browse Source 
Color audit
This commit is contained in:
jlmitch5 2017-07-26 09:06:41 -04:00 committed by GitHub
commit 8bfe0bbef0
18 changed files with 124 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
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,17 @@ 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;
}
.ui-dialog .ui-dialog-content {
background: @default-bg;
}

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 {

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

@ -17,26 +17,26 @@
not supported by any browser */
}
.Form{
.Form {
display:flex;
flex-wrap:wrap;
flex-direction: row;
}
.Form-header--fields{
.Form-header--fields {
flex: 1 1 auto;
}
.Form-header-field{
.Form-header-field {
margin-left: 10px;
flex: 1 1 auto;
}
.Form-header{
.Form-header {
display: flex;
}
.Form-title{
.Form-title {
flex: 0 1 auto;
color: @list-header-txt;
font-size: 14px;
@ -51,7 +51,7 @@
text-transform: uppercase;
}
.Form-secondaryTitle{
.Form-secondaryTitle {
color: @default-icon;
padding-bottom: 20px;
min-height: 40px;
@ -61,7 +61,7 @@
.Form-title--is_superuser,
.Form-title--is_system_auditor,
.Form-title--is_ldap_user,
.Form-title--is_external_account{
.Form-title--is_external_account {
height:15px;
color: @default-interface-txt;
background-color: @default-list-header-bg;
@ -77,12 +77,12 @@
height: 16px;
}
.Form-exitHolder{
.Form-exitHolder {
justify-content: flex-end;
display:flex;
}
.Form-exit{
.Form-exit {
cursor:pointer;
padding:0px;
border: none;
@ -94,11 +94,11 @@
line-height:1;
}
.Form-exit:hover{
.Form-exit:hover {
color:@default-icon;
}
.Form-tabHolder{
.Form-tabHolder {
display: flex;
min-height: 30px;
flex-wrap:wrap;
@ -156,7 +156,7 @@
}
.Form-tab--disabled {
opacity: 0.4;
opacity: 0.65;
}
.Form-tab--disabled:hover {
@ -165,12 +165,12 @@
cursor:not-allowed!important;
}
.Form-tabSection{
.Form-tabSection {
display: none;
width: 0%;
}
.Form-tabSection.is-selected{
.Form-tabSection.is-selected {
width: 100%;
display: block;
}
@ -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%;
}
@ -261,7 +261,7 @@
margin-bottom: 10px;
}
.Form-textAreaLabel{
.Form-textAreaLabel {
width:100%;
order: 1;
}
@ -270,7 +270,7 @@
max-width: 100%;
}
.Form-textArea{
.Form-textArea {
border-radius: 5px;
color: @field-input-text;
background-color: @field-secondary-bg;
@ -285,11 +285,11 @@
color: @field-input-text;
}
.Form-textInput:active{
.Form-textInput:active {
border:1px solid @field-border-sel;
}
.Form-monospace{
.Form-monospace {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace!important;
}
@ -316,30 +316,30 @@
border: 1px solid @default-link-hov;
}
.ui-spinner{
.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;
width:100%
}
.ui-spinner-input{
.ui-spinner-input {
color: @field-input-text;
background-color: @field-secondary-bg;
background-color: @f2grey;
}
.ui-spinner-input:focus{
.ui-spinner-input:focus {
outline: none;
}
.ui-spinner-button{
.ui-spinner-button {
border-left:1px solid @field-border!important;
background-color: @field-button-bg !important;
}
.ui-spinner-button:hover{
.ui-spinner-button:hover {
background-color:@field-button-hov !important;
cursor: pointer!important;
}
@ -349,7 +349,7 @@
color: @default-data-txt;
}
.Form-numberInputButton{
.Form-numberInputButton {
color: @default-icon!important;
font-size: 14px;
@ -362,36 +362,35 @@
color: @field-input-text!important;
}
.select2-selection__arrow{
.select2-selection__arrow {
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{
.select2-results__option {
color: @field-label !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: @field-button-hov !important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: @default-white-button-bord !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: @field-dropdown-icon transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent @field-dropdown-icon transparent!important;
}
@ -400,7 +399,7 @@
border-bottom-right-radius: 0 !important;
}
.select2-dropdown{
.select2-dropdown {
border:1px solid @field-border;
}
@ -410,33 +409,33 @@
border-top: 1px solid @field-border;
}
.Form-dropDown:focus{
.Form-dropDown:focus {
outline: none!important;
}
.Form-dropDown--scmType{
.Form-dropDown--scmType {
width: 100%;
}
.Form-passwordButton{
.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;
}
.Form-passwordButton:focus{
.Form-passwordButton:focus {
border: 1px solid @field-border;
background-color: @field-lookup-btn-hov-bg;
}
@ -471,13 +470,13 @@
border-right: 0px;
}
.CodeMirror{
.CodeMirror {
border-radius: 5px;
font-style: normal;
color: @field-input-text;
}
.CodeMirror-gutters{
.CodeMirror-gutters {
background-color:@code-mirror-gutter !important;
}
@ -563,7 +562,7 @@ input[type='radio']:checked:before {
display: inline-block !important;
}
.Form-inputLabel{
.Form-inputLabel {
text-transform: uppercase;
color: @default-interface-txt;
font-weight: normal;
@ -583,7 +582,7 @@ input[type='radio']:checked:before {
.noselect;
}
.Form-buttons{
.Form-buttons {
height: 30px;
display: flex;
justify-content: flex-end;
@ -593,7 +592,7 @@ input[type='radio']:checked:before {
}
}
.Form-button{
.Form-button {
margin-left: 4px;
}
@ -603,7 +602,7 @@ input[type='radio']:checked:before {
border-color: @default-border;
}
.Form-saveButton, .Form-launchButton{
.Form-saveButton, .Form-launchButton {
background-color: @submit-button-bg;
color: @submit-button-text;
text-transform: uppercase;
@ -612,11 +611,11 @@ input[type='radio']:checked:before {
padding-right: 15px;
}
.Form-saveButton:disabled, .Form-launchButton:disabled{
.Form-saveButton:disabled, .Form-launchButton:disabled {
background-color: @submit-button-bg-dis;
}
.Form-saveButton:hover, .Form-launchButton:hover{
.Form-saveButton:hover, .Form-launchButton:hover {
background-color: @submit-button-bg-hov;
color: @submit-button-text;
}
@ -633,7 +632,7 @@ input[type='radio']:checked:before {
margin-left: 20px;
}
.Form-cancelButton:hover{
.Form-cancelButton:hover {
background-color: @btn-bg-hov;
color: @btn-txt;
}
@ -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%;

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;

24
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,8 @@
@f7grey: #F7F7F7;
@insights-yellow: #dedc4f;
@f2grey: #f2f2f2;
@f6grey: #f6f6f6;
@ebgrey: #ebebeb;
@default-warning: #F0AD4E;
@ -42,9 +44,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 +133,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 +181,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>`;

2
awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.block.less
View File

@ -69,7 +69,7 @@
}
.WorkflowResults-rightSide .WorkflowChart-svg {
background-color: @default-secondary-bg;
background-color: @f6grey;
border: 1px solid @d7grey;
border-top: 0px;
border-bottom-right-radius: 5px;

10
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
View File

@ -43,7 +43,7 @@
}
.WorkflowMaker-contentHolder {
display: flex;
border: 1px solid @d7grey;
border: 1px solid @b7grey;
border-radius: 5px;
height: ~"calc(100% - 85px)";
}
@ -54,7 +54,8 @@
}
.WorkflowMaker-contentRight {
flex: 0 0 400px;
border-left: 1px solid @d7grey;
border-left: 1px solid @b7grey;
background: @default-bg;
padding: 20px;
height: 100%;
overflow-y: scroll;
@ -157,7 +158,8 @@
height: 40px;
line-height: 40px;
color: @default-interface-txt;
border-bottom: 1px solid @d7grey;
background: @default-bg;
border-bottom: 1px solid @b7grey;
}
.WorkflowLegend-maker--left {
flex: 1 0 auto;
@ -246,7 +248,7 @@
width: 293px;
background-color: @default-bg;
display: flex;
border: 1px solid @d7grey;
border: 1px solid @b7grey;
border-top: 0px;
border-bottom-left-radius: 5px;
margin-left: -1px;