From ffcb8ec65db64a5cc6f74601cb0ede33dfafb9b3 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Tue, 16 Feb 2016 14:30:11 +0000 Subject: [PATCH] update less to improve color default --- awx/ui/client/legacy-styles/ansible-ui.less | 35 ++++++++++--------- awx/ui/client/legacy-styles/forms.less | 4 +-- .../repeatFrequencyOptions.block.less | 14 ++++---- .../src/scheduler/scheduleToggle.block.less | 22 ++++++------ .../src/scheduler/schedulerForm.block.less | 2 ++ .../scheduler/schedulerFormDetail.block.less | 14 ++++---- .../src/scheduler/schedulertime.block.less | 2 ++ .../src/scheduler/spinnerInput.block.less | 2 ++ .../src/shared/branding/colors.default.less | 18 ++++++---- 9 files changed, 65 insertions(+), 48 deletions(-) diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less index 47eacf7f81..ec58ca474f 100644 --- a/awx/ui/client/legacy-styles/ansible-ui.less +++ b/awx/ui/client/legacy-styles/ansible-ui.less @@ -43,6 +43,7 @@ @import "portal.less"; @import "text-label.less"; @import "./bootstrap-datepicker.less"; +@import "awx/ui/client/src/shared/branding/colors.default.less"; /* Bootstrap fix that's causing a right margin to appear whenver a modal is opened */ @@ -107,7 +108,7 @@ a:focus { } .btn-grey:hover { - background-color: #FFF; + background-color: @default-bg; } #cowsay { @@ -317,7 +318,7 @@ i:active, #home_groups_table .actions .cancel { padding-right: 3px; } .success-badge { - color: #ffffff; + color: @default-bg; background-color: #5cb85c; } @@ -631,12 +632,12 @@ dd { } .form-control.ng-dirty.ng-pristine { - border-color: #e1e1e1; + border-color: @default-second-border; box-shadow: none; } .form-control.ng-dirty.ng-pristine:focus { - border-color: #1678c4; + border-color: @default-link; } /* For some reason TB 3 RC1 does not provide an input-mini */ @@ -712,7 +713,7 @@ legend { padding-bottom: 0; } .pagination > .active > a { - background-color: #fff; + background-color: @default-bg; color: #428bca; border-color: none; border: 1px solid #428bca; @@ -945,7 +946,7 @@ input[type="checkbox"].checkbox-no-label { .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { - background-color: #fff; + background-color: @default-bg; } .table-hover-inverse tbody tr:hover > td, @@ -1169,12 +1170,12 @@ input[type="checkbox"].checkbox-no-label { /* Inventory job status badge */ .failures-true { background-color: @red; - color: #fff; + color: @default-bg; } .failures-false { background-color: @green; - color: #fff; + color: @default-bg; } /* Cloud inventory status. i.e. inventory_source.status values */ @@ -1357,8 +1358,8 @@ input[type="checkbox"].checkbox-no-label { } .free-button { - background-color: #ff5850; - border: 1px solid #ff5850; + background-color: @default-err; + border: 1px solid @default-err; color: @white; } .free-button:hover { @@ -1947,20 +1948,20 @@ button.dropdown-toggle, } .tooltip.bottom .tooltip-arrow { - border-bottom-color: #848992; + border-bottom-color: @default-interface-txt; } .tooltip.top .tooltip-arrow { - border-top-color: #848992; + border-top-color: @default-interface-txt; } .tooltip.left .tooltip-arrow { - border-left-color: #848992; + border-left-color: @default-interface-txt; } .tooltip.right .tooltip-arrow { - border-right-color: #848992; + border-right-color: @default-interface-txt; } .tooltip.Tooltip.fade.bottom.in { @@ -1973,7 +1974,7 @@ button.dropdown-toggle, } .tooltip-inner { - background-color: #848992; + background-color: @default-interface-txt; } .tooltip-inner--logOut { @@ -1994,9 +1995,9 @@ button.dropdown-toggle, } .form-control { - border-color: #e1e1e1; + border-color: @default-second-border; background-color: #f6f6f6; - color: #161b1f; + color: @default-data-txt; transition: border-color 0.3s; box-shadow: none; } diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less index bc2c6fe284..0556f7e1cd 100644 --- a/awx/ui/client/legacy-styles/forms.less +++ b/awx/ui/client/legacy-styles/forms.less @@ -192,8 +192,8 @@ } .Form-inputButton { - border-color: #e1e1e1; - color: #b7b7b7; + border-color: @default-second-border; + color: @default-data-txt; } .Form-numberInputButton{ diff --git a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less index 703b1d719d..60051d07ab 100644 --- a/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less +++ b/awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less @@ -1,9 +1,11 @@ /** @define RepeatFrequencyOptions */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .RepeatFrequencyOptions { width: ~"calc(100% + 21px)"; padding: 20px; - border-left: 5px solid #e8e8e8; + border-left: 5px solid @default-border; margin-left: -20px; padding-left: 17px; padding-right: 0px; @@ -60,10 +62,10 @@ margin-top: -2px; text-transform: uppercase; font-weight: bold; - color: #848992; + color: @default-interface-txt; font-size: 13px; margin-left: -20px; - border-left: 5px solid #e8e8e8; + border-left: 5px solid @default-border; padding-left: 15px; padding-bottom: 15px; } @@ -94,7 +96,7 @@ .RepeatFrequencyOptions-inlineLabel { font-weight: normal; - color: #848992; + color: @default-interface-txt; text-transform: uppercase; flex: initial; width: 54px; @@ -123,7 +125,7 @@ .RepeatFrequencyOptions-subFormBorderFixer { height: 25px; width: 5px; - background: #ffffff; + background: @default-bg; margin-left: -20px; margin-top: -25px; margin-right: 50px; @@ -140,7 +142,7 @@ } .RepeatFrequencyOptions-nameBorderErrorFix { - border-color: #ff5850 !important; + border-color: @default-err !important; } .RepeatFrequencyOptions-inputGroup { diff --git a/awx/ui/client/src/scheduler/scheduleToggle.block.less b/awx/ui/client/src/scheduler/scheduleToggle.block.less index f7015f4dc1..d83a7a0569 100644 --- a/awx/ui/client/src/scheduler/scheduleToggle.block.less +++ b/awx/ui/client/src/scheduler/scheduleToggle.block.less @@ -1,19 +1,21 @@ /** @define ScheduleToggle */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .ScheduleToggle { border-radius: 5px; - border: 1px solid #b7b7b7; - background-color: #b7b7b7; + border: 1px solid @default-icon; + background-color: @default-icon; width: 40px; margin-top: 2px; cursor: pointer; } .ScheduleToggle-switch { - color: #848992; - background-color: #fff; + color: @default-interface-txt; + background-color: @default-bg; margin-left: 4px; - border-left: 1px solid #b7b7b7; + border-left: 1px solid @default-icon; margin-right: 0px; text-align: center; text-transform: uppercase; @@ -30,8 +32,8 @@ .ScheduleToggle-switch.is-on { margin-right: 5px; margin-left: 0px; - background-color: #1678c4; - color: #fff; + background-color: @default-link; + color: @default-bg; border-left: 0; border-top-right-radius: 0px; border-bottom-right-radius: 0px; @@ -40,13 +42,13 @@ } .ScheduleToggle-switch:hover { - background-color: #fafafa; + background-color: @default-tertiary-bg; } .ScheduleToggle.is-on:hover { - border-color: #4498DA; + border-color: @default-link-hov; } .ScheduleToggle-switch.is-on:hover { - background-color: #4498DA; + background-color: @default-link-hov; } diff --git a/awx/ui/client/src/scheduler/schedulerForm.block.less b/awx/ui/client/src/scheduler/schedulerForm.block.less index 9cba269e75..d29bae3f4a 100644 --- a/awx/ui/client/src/scheduler/schedulerForm.block.less +++ b/awx/ui/client/src/scheduler/schedulerForm.block.less @@ -1,5 +1,7 @@ /** @define SchedulerForm */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .SchedulerForm-formGroup { padding-right: 0px; } diff --git a/awx/ui/client/src/scheduler/schedulerFormDetail.block.less b/awx/ui/client/src/scheduler/schedulerFormDetail.block.less index 27b4dc88e7..b607b250f6 100644 --- a/awx/ui/client/src/scheduler/schedulerFormDetail.block.less +++ b/awx/ui/client/src/scheduler/schedulerFormDetail.block.less @@ -1,14 +1,16 @@ /** @define SchedulerFormDetail */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .SchedulerFormDetail-container { padding: 15px; - border: 1px solid #e8e8e8; + border: 1px solid @default-border; border-radius: 5px; margin-bottom: 20px; } .SchedulerFormDetail-container--error { - border-color: #ff5850; + border-color: @default-err; } .SchedulerFormDetail-errorText { @@ -19,7 +21,7 @@ .SchedulerFormDetail-label { text-transform: uppercase; - color: #848992; + color: @default-interface-txt; margin-bottom: 15px; } @@ -47,7 +49,7 @@ .SchedulerFormDetail-dateFormats { text-transform: uppercase; font-size: 13px; - color: #848992; + color: @default-interface-txt; } .SchedulerFormDetail-dateFormatsLabel { @@ -57,12 +59,12 @@ .SchedulerFormDetail-radioLabel { margin-top: -3px !important; - color: #161B1F !important; + color: @default-data-txt !important; } .SchedulerFormDetail-radioButton { margin-top: 2px !important; - color: #848992 !important; + color: @default-interface-txt !important; } .SchedulerFormDetail-occurrenceList { diff --git a/awx/ui/client/src/scheduler/schedulertime.block.less b/awx/ui/client/src/scheduler/schedulertime.block.less index 4843da5f16..a40c018249 100644 --- a/awx/ui/client/src/scheduler/schedulertime.block.less +++ b/awx/ui/client/src/scheduler/schedulertime.block.less @@ -1,5 +1,7 @@ /** @define SchedulerTime */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .SchedulerTime { display: flex; flex-wrap: wrap; diff --git a/awx/ui/client/src/scheduler/spinnerInput.block.less b/awx/ui/client/src/scheduler/spinnerInput.block.less index 1f9a44437c..ec0970cbd4 100644 --- a/awx/ui/client/src/scheduler/spinnerInput.block.less +++ b/awx/ui/client/src/scheduler/spinnerInput.block.less @@ -1,5 +1,7 @@ /** @define SpinnerInput */ +@import "awx/ui/client/src/shared/branding/colors.default.less"; + .SpinnerInput { width: ~"calc(100% - 26px)"; } diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index eb68c22873..fbde1449ac 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -15,6 +15,10 @@ @default-link: #1678C4; @default-link-hov: #4498DA; @default-button-hov: #F2F2F2; +@default-list-header-bg:#EBEBEB; +@default-no-items-bord: #F6F6F6; +@default-as-detail-txt: #707070; +@default-dark: #000000; // layout @page-bg: @default-secondary-bg; @@ -31,7 +35,7 @@ // lists @list-empty-txt: @default-interface-txt; @list-header-bord: @default-bg; -@list-header-bg: #EBEBEB; +@list-header-bg: @default-list-header-bg; @list-header-txt: @default-interface-txt; @list-header-icon: @default-icon; @list-item: @default-data-txt; @@ -64,7 +68,7 @@ @list-srch-btn-bg: @default-bg; @list-srch-btn-hov-bg: @default-tertiary-bg; @list-no-items-txt: @default-icon; -@list-no-items-bord: #F6F6F6; +@list-no-items-bord: @default-no-items-bord; @list-no-items-bg: @default-secondary-bg; // tooltups @@ -73,7 +77,7 @@ // login modal @login-alert: @default-interface-txt; -@login-backdrop: #000000; +@login-backdrop: @default-dark; @login-bg: @default-bg; @login-header-bg: @default-bg; @login-alert-error: @default-err; @@ -82,7 +86,7 @@ @login-notice-title: @default-interface-txt; @login-notice-bg: @default-secondary-bg; @login-notice-border: @default-secondary-bg; -@login-notice-text: #707070; +@login-notice-text: @default-as-detail-txt; // login modal third party auth @third-party-label: @default-interface-txt; @@ -157,8 +161,8 @@ @db-graph-axis-label: @default-interface-txt; // panel -@panel-bg: @default-bg; -@panel-border: @default-border; +@panel-bg: @default-bg; +@panel-border: @default-border; // activity stream details modal -@as-detail-changes-txt: #707070; +@as-detail-changes-txt: @default-as-detail-txt;