Refactor all Less to manage import order itself

awx/ui/Gruntfile.js

@@ -30,7 +30,13 @@ module.exports = function(grunt) {
         'clean:tmp',
         'clean:static',
         'concurrent:dev',
-        'sync',
+        'copy:icons',
+        'copy:fonts',
+        'concat:css',
+        'cssmin:vendor',
+        'less:dev',
+        'cssmin:source',
+        'sync'
     ]);
 
     grunt.registerTask('devNoSync', [
@@ -45,5 +51,4 @@ module.exports = function(grunt) {
         'webpack:prod',
         'concurrent:prod',
     ]);
-
 };

awx/ui/client/legacy-styles/angular-scheduler.less

@@ -9,8 +9,6 @@
     #schedules-form-container -inventory group add/edit dialog
  */
 
- @import './client/src/shared/branding/colors.less';
-
 #schedules-tab {
     position: relative;
     top: 0;

awx/ui/client/legacy-styles/ansible-ui.less

@@ -21,31 +21,6 @@
     src: url(/static/assets/OpenSans-Bold.ttf);
 }
 
-@import "./client/src/shared/branding/colors.less";
-@import "fonts.less";
-@import "main-layout.less";
-@import "animations.less";
-@import "jquery-ui-overrides.less";
-@import "codemirror.less";
-@import "angular-scheduler.less";
-@import "log-viewer.less";
-@import "event-viewer.less";
-@import "job-details.less";
-@import "jobs.less";
-@import "inventory-edit.less";
-@import "breadcrumbs.less";
-@import "stdout.less";
-@import "lists.less";
-@import "forms.less";
-@import "dashboard.less";
-@import "jPushMenu.less";
-@import "survey-maker.less";
-@import "text-label.less";
-@import "./bootstrap-datepicker.less";
-@import "./client/src/shared/branding/colors.default.less";
-@import "./client/assets/variables.less";
-// Bootstrap default overrides
-@import "./client/src/shared/bootstrap-settings.less";
 /* Bootstrap fix that's causing a right margin to appear
    whenver a modal is opened */
 body.modal-open {

awx/ui/client/legacy-styles/breadcrumbs.less

@@ -9,8 +9,6 @@
  *
  */
 
-@import "./client/src/shared/branding/colors.less";
-
 .ansible-breadcrumb {
     list-style: none;
     overflow: hidden;

awx/ui/client/legacy-styles/codemirror.less

@@ -5,8 +5,6 @@
  *
  */
 
- @import "./client/src/shared/branding/colors.default.less";
-
 .CodeMirror {
     height: auto;
     overflow-x: auto;

awx/ui/client/legacy-styles/dashboard.less

@@ -7,9 +7,6 @@
  *
  */
 
-@import "./client/src/shared/branding/colors.less";
-
-
 .graph-wrapper {
   width: 100%;
 }

awx/ui/client/legacy-styles/forms.less

@@ -7,8 +7,6 @@
  *
  */
 
-@import "./client/src/shared/branding/colors.default.less";
-
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none;   /* Chrome/Safari/Opera */

awx/ui/client/legacy-styles/jPushMenu.less

@@ -7,8 +7,6 @@
  *
  */
 
-@import "./client/src/shared/branding/colors.less";
-
 .cbp-spmenu {
     background: #E8E8E8;
     position: fixed;

awx/ui/client/legacy-styles/job-details.less

@@ -7,8 +7,6 @@
  *
  */
 
-@import "./client/src/shared/branding/colors.less";
-
 
 @failed-hosts-color:        @red;
 @successful-hosts-color:    @green;

awx/ui/client/legacy-styles/jobs.less

@@ -7,9 +7,6 @@
  *
  */
 
-@import "./client/src/shared/branding/colors.less";
-
-
 #jobs-page {
 
     .jobs-list-container {

awx/ui/client/legacy-styles/jquery-ui-overrides.less

@@ -7,10 +7,6 @@
  *  look closer to Twitter Bootstrap
  *
  */
-
-@import "./client/src/shared/branding/colors.less";
-@import "./client/src/shared/branding/colors.default.less";
-
 table.ui-datepicker-calendar {
     background-color: @well;
 }

awx/ui/client/legacy-styles/lists.less

@@ -7,9 +7,6 @@
  *
  */
 
- @import "./client/src/shared/branding/colors.default.less";
-
-
 table, tbody {
     border-collapse: collapse;
 }

awx/ui/client/legacy-styles/main-layout.less

@@ -7,9 +7,6 @@
  *
  */
 
-@import "./client/src/shared/branding/colors.less";
-@import "./client/src/shared/branding/colors.default.less";
-
 html { height: 100%; }
 
 body {

awx/ui/client/legacy-styles/stdout.less

@@ -5,9 +5,6 @@
  *
  */
 
- @import "./client/src/shared/branding/colors.default.less";
- @import "./client/src/shared/branding/colors.less";
-
  #jobs-stdout {
     margin-bottom: 0px;
 

awx/ui/client/legacy-styles/text-label.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .host-disabled-label {
   &:after {
     display: inline-block;

awx/ui/client/lib/theme/index.less

@@ -1,16 +1,179 @@
-// App-wide styles 
+// Dependency Variables
+@import '../../../node_modules/components-font-awesome/less/variables';
+
+// App-specific Legacy Variables
+@import '../../src/shared/branding/colors.default.less';
+@import '../../src/shared/branding/colors';
+
+/**
+ * Override Variables
+ *
+ * NOTE: Used in conditional build scenarios and will need to persist after any refactoring effort.
+ */
+@import '../../assets/variables';
+
+/**
+ * Legacy Styles
+ *
+ * NOTE: Styles below are a mix of 3rd-party dependencies and in-house code. For the 3rd-party
+ * stuff, we'd be better off managing them via npm where possible.
+ */
+@import '../../legacy-styles/fonts';
+@import '../../legacy-styles/main-layout';
+@import '../../legacy-styles/animations';
+@import '../../legacy-styles/jquery-ui-overrides';
+@import '../../legacy-styles/codemirror';
+@import '../../legacy-styles/angular-scheduler';
+@import '../../legacy-styles/log-viewer';
+@import '../../legacy-styles/event-viewer';
+@import '../../legacy-styles/job-details';
+@import '../../legacy-styles/jobs';
+@import '../../legacy-styles/inventory-edit';
+@import '../../legacy-styles/breadcrumbs';
+@import '../../legacy-styles/stdout';
+@import '../../legacy-styles/lists';
+@import '../../legacy-styles/forms';
+@import '../../legacy-styles/dashboard';
+@import '../../legacy-styles/jPushMenu';
+@import '../../legacy-styles/survey-maker';
+@import '../../legacy-styles/text-label';
+@import '../../legacy-styles/bootstrap-datepicker';
+@import '../../legacy-styles/ansible-ui';
+
+// Dependency Style Overrides
+@import '../../src/shared/bootstrap-settings';
+
+// Legacy Utilities
+@import '../../src/shared/utilities/alerts';
+@import '../../src/shared/utilities/hidden';
+@import '../../src/shared/utilities/icons';
+@import '../../src/shared/utilities/layer';
+@import '../../src/shared/utilities/truncated-text';
+@import '../../src/shared/utilities/unbold';
+@import '../../src/shared/utilities/wordwrap';
+
+// Legacy Layout
+@import '../../src/shared/layouts/one-plus-one';
+@import '../../src/shared/layouts/one-plus-two';
+
+/**
+ * Legacy Features
+ *
+ * NOTE: "dot" namespacing interferes with Less' ability to infer the .less suffix, so it's
+ * explicitly added to the import statements below.
+ */
+@import '../../src/about/about.block.less';
+@import '../../src/access/rbac-role-column/roleList.block.less';
+@import '../../src/access/add-rbac.block.less';
+@import '../../src/activity-stream/streamDetailModal/streamDetailModal.block.less';
+@import '../../src/activity-stream/activitystream.block.less';
+@import '../../src/bread-crumb/bread-crumb.block.less';
+@import '../../src/configuration/configuration.block.less';
+@import '../../src/credentials/ownerList.block.less';
+@import '../../src/footer/footer.block.less';
+@import '../../src/home/dashboard/counts/dashboard-counts.block.less';
+@import '../../src/home/dashboard/graphs/dashboard-graphs.block.less';
+@import '../../src/home/dashboard/lists/dashboard-list.block.less';
+@import '../../src/home/dashboard/dashboard.block.less';
+@import '../../src/instance-groups/capacity-bar/capacity-bar.block.less';
+@import '../../src/instance-groups/instance-group.block.less';
+@import '../../src/inventories-hosts/inventories/insights/insights.block.less';
+@import '../../src/inventories-hosts/inventories/list/host-summary-popover/host-summary-popover.block.less';
+@import '../../src/inventories-hosts/inventories/related/hosts/related-groups-labels/relatedGroupsLabelsList.block.less';
+@import '../../src/inventories-hosts/inventories/smart-inventory/smart-inventory-host-filter/host-filter-modal/host-filter-modal.block.less';
+@import '../../src/inventories-hosts/inventories/inventories.block.less';
+@import '../../src/inventories-hosts/shared/associate-groups/associate-groups.block.less';
+@import '../../src/inventories-hosts/shared/associate-hosts/associate-hosts.block.less';
+@import '../../src/job-results/host-event/host-event.block.less';
+@import '../../src/job-results/host-status-bar/host-status-bar.block.less';
+@import '../../src/job-results/job-results-stdout/job-results-stdout.block.less';
+@import '../../src/job-results/job-results.block.less';
+@import '../../src/job-submission/job-submission.block.less';
+@import '../../src/license/license.block.less';
+@import '../../src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less';
+@import '../../src/login/loginModal/loginModal.block.less';
+@import '../../src/login/loginModal/loginModalNotice.block.less';
+@import '../../src/main-menu/main-menu.block.less';
+@import '../../src/management-jobs/card/mgmtcards.block.less';
+@import '../../src/notifications/notifications.block.less';
+@import '../../src/organizations/linkout/addUsers/addUsers.block.less';
+@import '../../src/organizations/orgcards.block.less';
+@import '../../src/portal-mode/portal-mode.block.less';
+@import '../../src/scheduler/repeatFrequencyOptions.block.less';
+@import '../../src/scheduler/schedulerForm.block.less';
+@import '../../src/scheduler/schedulerFormDetail.block.less';
+@import '../../src/scheduler/schedulertime.block.less';
+@import '../../src/scheduler/scheduleToggle.block.less';
+@import '../../src/scheduler/spinnerInput.block.less';
+@import '../../src/setup-menu/hover-icon.block.less';
+@import '../../src/setup-menu/setup-extra.block.less';
+@import '../../src/setup-menu/setup-item.block.less';
+@import '../../src/setup-menu/setup-menu.block.less';
+@import '../../src/shared/container/container.block.less';
+@import '../../src/shared/detail-nav/detail-nav.block.less';
+@import '../../src/shared/icon/icon.block.less';
+@import '../../src/shared/instance-groups-multiselect/instance-groups.block.less';
+@import '../../src/shared/lookup/lookup-modal.block.less';
+@import '../../src/shared/modal/modal';
+@import '../../src/shared/multi-select-preview/multi-select-preview.block.less';
+@import '../../src/shared/paginate/paginate.block.less';
+@import '../../src/shared/prompt/prompt';
+@import '../../src/shared/smart-search/smart-search.block.less';
+@import '../../src/shared/button.block.less';
+@import '../../src/shared/download-standard-out.block.less';
+@import '../../src/shared/media-object.block.less';
+@import '../../src/shared/text-label';
+@import '../../src/smart-status/smart-status.block.less';
+@import '../../src/standard-out/standard-out.block.less';
+@import '../../src/system-tracking/date-picker/date-picker.block.less';
+@import '../../src/system-tracking/fact-data-table/fact-data-table.block.less';
+@import '../../src/system-tracking/fact-module-filter.block.less';
+@import '../../src/system-tracking/fact-module-pickers.block.less';
+@import '../../src/system-tracking/system-tracking-container.block.less';
+@import '../../src/templates/job_templates/multi-credential/multi-credential.block.less';
+@import '../../src/templates/labels/labelsList.block.less';
+@import '../../src/templates/survey-maker/survey-maker.block.less';
+@import '../../src/templates/survey-maker/survey-maker.block.less';
+@import '../../src/templates/survey-maker/shared/survey-controls.block.less';
+@import '../../src/templates/survey-maker/survey-maker.block.less';
+@import '../../src/templates/workflows/workflow-chart/workflow-chart.block.less';
+@import '../../src/templates/workflows/workflow-controls/workflow-controls.block.less';
+@import '../../src/templates/workflows/workflow-maker/workflow-maker.block.less';
+@import '../../src/tooltip/tooltip.block.less';
+@import '../../src/workflow-results/workflow-status-bar/workflow-status-bar.block.less';
+@import '../../src/workflow-results/workflow-results.block.less';
+
+
+/**
+ * App-wide style 
+ *
+ * NOTE: Variables, mixins, and classes below are useful in more than one place across the
+ * application. When working with Less, if the need for a variable, mixin, class, etc exists in 
+ * more than one location, take a moment to move it to this more general location for easy reuse
+ * and to avoid duplication.
+ */
 @import '_base-variables';
-@import '_contextual-variables';
+@import '_variables';
 @import '_mixins';
 @import '_utility';
 @import '_global';
 
-// Aggregated component and feature specific styles
+/**
+ * Component and Feature style
+ *
+ * NOTE: These index files are aggregation points for components and features. To view the more
+ * granular imports, view the contents of these files. Variables, classes, etc defined within 
+ * these specific files ought to have no use elsewhere. As we shift to leverage components, very 
+ * few feature-specific styles will exist.
+ */
 @import '../components/_index';
 @import '../../features/_index';
 
 /*
- * Temporary overrides used only during the transition away from old style
+ * Resets
- * structure to new style structure. Overrides unwanted/uneeded rules.
+ *
+ * NOTE: In some cases, the legacy classes override dependency styles explicitly. In those cases,
+ * it's necessary to override the overrides. This particular file will only be relevant during
+ * the transition.
  */
-@import '_temporary-overrides';
+@import '_resets';

awx/ui/client/src/about/about.block.less

@@ -1,7 +1,4 @@
 /** @define About */
-@import "./client/src/shared/branding/colors.default.less";
-@import "./client/assets/variables.less";
-
 .About-ansibleVersion,
 .About-cowsayCode {
 		font-family: Monaco, Menlo, Consolas, "Courier New", monospace;

awx/ui/client/src/access/add-rbac.block.less

@@ -1,5 +1,3 @@
-@import "../shared/branding/colors.default.less";
-
 /** @define AddPermissions */
 
 .AddPermissions-backDrop {

awx/ui/client/src/access/rbac-role-column/roleList.block.less

@@ -1,5 +1,4 @@
 /** @define RoleList */
-@import "../../shared/branding/colors.default.less";
 
 .RoleList {
     display: flex;

awx/ui/client/src/activity-stream/streamDetailModal/streamDetailModal.block.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .StreamDetail-actionButton {
     padding: 4px 25px!important;
 }

awx/ui/client/src/bread-crumb/bread-crumb.block.less

@@ -1,5 +1,3 @@
-@import "../shared/branding/colors.default.less";
-
 /** @define BreadCrumb */
 
 .BreadCrumb {

awx/ui/client/src/configuration/configuration.block.less

@@ -1,6 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-@import "../shared/branding/colors.less";
-
 .Form-resetValue, .Form-resetAll {
     text-transform: uppercase;
     font-weight: normal;

awx/ui/client/src/credentials/ownerList.block.less

@@ -1,6 +1,3 @@
-/** @define OwnerList */
-@import "./client/src/shared/branding/colors.default.less";
-
 .OwnerList {
     display: flex;
     flex-wrap: wrap;

awx/ui/client/src/footer/footer.block.less

@@ -1,5 +1,4 @@
 /** @define DashboardCounts */
-@import "./client/src/shared/branding/colors.default.less";
 
 .Footer {
     height: 40px;

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

@@ -1,5 +1,3 @@
-@import "../../../shared/branding/colors.default.less";
-
 /** @define DashboardCounts */
 
 .DashboardCounts {

awx/ui/client/src/home/dashboard/dashboard.block.less

@@ -1,5 +1,4 @@
 /** @define Dashboard */
-@import "../../shared/branding/colors.default.less";
 
 .Dashboard {
     display: flex;

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

@@ -1,7 +1,5 @@
 /** @define DashboardGraphs */
 
-@import "../../../shared/branding/colors.default.less";
-
 .DashboardGraphs {
     margin-top: 20px;
     border: solid 1px @db-panel-border;

awx/ui/client/src/home/dashboard/lists/dashboard-list.block.less

@@ -1,7 +1,5 @@
 /** @define DashboardList */
 
-@import "../../../shared/branding/colors.default.less";
-
 .DashboardList {
     flex: 1;
 }

awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less

@@ -1,5 +1,3 @@
-@import "../../shared/branding/colors.default.less";
-
 capacity-bar {
 
     width: 50%;

awx/ui/client/src/instance-groups/instance-group.block.less

@@ -1,5 +1,3 @@
-@import "../shared/branding/colors.default.less";
-
 .InstanceGroups {
 
     .BreadCrumb-menuLinkImage:hover {

awx/ui/client/src/inventories-hosts/inventories/insights/insights.block.less

@@ -1,5 +1,3 @@
-@import "../../../shared/branding/colors.default.less";
-
 .InsightsLastCheck{
     display: flex;
     justify-content: flex-end;

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory-host-filter/host-filter-modal/host-filter-modal.block.less

@@ -1,5 +1,3 @@
-@import "../../../../../shared/branding/colors.default.less";
-
 .HostFilterModal-tableRow:hover {
     background-color: @default-bg;
 }

awx/ui/client/src/inventories-hosts/shared/associate-groups/associate-groups.block.less

@@ -1,5 +1,3 @@
-@import "../../../shared/branding/colors.default.less";
-
 .AssociateGroups-modalBody {
     padding-top: 0px;
 }

awx/ui/client/src/inventories-hosts/shared/associate-hosts/associate-hosts.block.less

@@ -1,5 +1,3 @@
-@import "../../../shared/branding/colors.default.less";
-
 .AssociateHosts-modalBody {
     padding-top: 0px;
 }

awx/ui/client/src/job-results/host-event/host-event.block.less

@@ -1,7 +1,3 @@
-@import "./client/src/shared/branding/colors.less";
-@import "./client/src/shared/branding/colors.default.less";
-@import "./client/src/shared/layouts/one-plus-two.less";
-
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none;   /* Chrome/Safari/Opera */

awx/ui/client/src/job-results/host-status-bar/host-status-bar.block.less

@@ -1,5 +1,3 @@
-@import '../../shared/branding/colors.default.less';
-
 .HostStatusBar {
     display: flex;
     flex: 0 0 auto;

awx/ui/client/src/job-results/job-results-stdout/job-results-stdout.block.less

@@ -1,5 +1,3 @@
-@import '../../shared/branding/colors.default.less';
-
 @breakpoint-md: 1200px;
 
 .JobResultsStdOut {

awx/ui/client/src/job-results/job-results.block.less

@@ -1,7 +1,3 @@
-@import '../shared/branding/colors.less';
-@import '../shared/branding/colors.default.less';
-@import '../shared/layouts/one-plus-two.less';
-
 @breakpoint-md: 1200px;
 
 .JobResults {

awx/ui/client/src/job-submission/job-submission.block.less

@@ -1,6 +1,3 @@
-@import '../shared/branding/colors.less';
-@import '../shared/branding/colors.default.less';
-
 .JobSubmission {
     padding: 20px!important;
     display: none;

awx/ui/client/src/license/license.block.less

@@ -3,9 +3,6 @@
 * .ModuleName-component-subComponent
 * Naming describes components of the view
 */
-@import "./client/src/shared/branding/colors.default.less";
-@import "./client/src/shared/layouts/one-plus-two.less";
-
 .License-container{
 	.OnePlusTwo-container;
 }

awx/ui/client/src/login/loginModal/loginModal.block.less

@@ -1,6 +1,3 @@
-@import "../../shared/branding/colors.default.less";
-@import "./client/assets/variables.less";
-
 /** @define LoginModal */
 .LoginModal-backDrop {
     width: 100vw;

awx/ui/client/src/login/loginModal/loginModalNotice.block.less

@@ -1,5 +1,3 @@
-@import "../../shared/branding/colors.default.less";
-
 /** @define LoginModalNotice */
 .LoginModalNotice {
     font-size: 12px;

awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less

@@ -1,5 +1,3 @@
-@import "../../../shared/branding/colors.default.less";
-
 /** @define ThirdPartySignOn */
 
 .ThirdPartySignOn {

awx/ui/client/src/main-menu/main-menu.block.less

@@ -1,6 +1,3 @@
-@import "../shared/branding/colors.default.less";
-@import "./client/assets/variables.less";
-
 /** @define MainMenu */
 
 .MainMenu {

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

@@ -1,6 +1,3 @@
-/** @define MgmtCards */
-@import './client/src/shared/branding/colors.default.less';
-
 .MgmtCards {
     display: flex;
     flex-flow: row wrap;

awx/ui/client/src/notifications/notifications.block.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .NotificationsForm-typeSelect{
     flex: none;
 }

awx/ui/client/src/organizations/linkout/addUsers/addUsers.block.less

@@ -1,5 +1,3 @@
-@import "../../../shared/branding/colors.default.less";
-
 /** @define AddUsers */
 
 .AddUsers-backDrop {

awx/ui/client/src/organizations/orgcards.block.less

@@ -1,5 +1,4 @@
 /** @define OrgCards */
-@import '../shared/branding/colors.default.less';
 
 .OrgCards {
     display: flex;

awx/ui/client/src/portal-mode/portal-mode.block.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/layouts/one-plus-one.less";
-
 .PortalMode-container{
 	display: flex;
 	flex-direction: row;

awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less

@@ -1,7 +1,5 @@
 /** @define RepeatFrequencyOptions */
 
-@import "./client/src/shared/branding/colors.default.less";
-
 .RepeatFrequencyOptions {
     width: ~"calc(100% + 21px)";
     padding: 20px;

awx/ui/client/src/scheduler/scheduleToggle.block.less

@@ -1,7 +1,5 @@
 /** @define ScheduleToggle */
 
-@import "./client/src/shared/branding/colors.default.less";
-
 .ScheduleToggle {
     border-radius: 5px;
     border: 1px solid @default-link;

awx/ui/client/src/scheduler/schedulerForm.block.less

@@ -1,7 +1,5 @@
 /** @define SchedulerForm */
 
-@import "./client/src/shared/branding/colors.default.less";
-
 .SchedulerForm-formGroup {
     padding-right: 0px;
 }

awx/ui/client/src/scheduler/schedulerFormDetail.block.less

@@ -1,7 +1,5 @@
 /** @define SchedulerFormDetail */
 
-@import "./client/src/shared/branding/colors.default.less";
-
 .SchedulerFormDetail-container {
     padding: 15px;
     border: 1px solid @default-border;

awx/ui/client/src/scheduler/schedulertime.block.less

@@ -1,7 +1,5 @@
 /** @define SchedulerTime */
 
-@import "./client/src/shared/branding/colors.default.less";
-
 .SchedulerTime {
     display: flex;
     flex-wrap: wrap;

awx/ui/client/src/scheduler/spinnerInput.block.less

@@ -1,7 +1,5 @@
 /** @define SpinnerInput */
 
-@import "./client/src/shared/branding/colors.default.less";
-
 .SpinnerInput {
     width: ~"calc(100% - 26px)";
 }

awx/ui/client/src/setup-menu/hover-icon.block.less

@@ -1,7 +1,5 @@
 /** @define HoverIcon */
 
-@import '../shared/branding/colors.less';
-
 .HoverIcon {
   @media screen and (max-width: 571px) {
     &--onlyLarge {

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

@@ -1,8 +1,5 @@
 /** @define SetupItem */
 
-@import '../shared/branding/colors.less';
-@import '../shared/branding/colors.default.less';
-
 .SetupItem {
     background-color: @panel-bg;
     border-radius: 5px;

awx/ui/client/src/setup-menu/setup-menu.block.less

@@ -1,6 +1,5 @@
 /** @define SetupMenu */
 
-@import "../shared/branding/colors.less";
 @menu-breakpoint: 710px;
 
 .SetupMenu {

awx/ui/client/src/shared/bootstrap-settings.less

@@ -1,4 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
 .btn-success{
 	background: @default-succ;
 	border-color: transparent;

awx/ui/client/src/shared/branding/colors.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 @active-color: #EDF2F2;   // #c6e5e5;
 @black:        #171717;
 @blue:         #1778c3;   /* logo blue */

awx/ui/client/src/shared/button.block.less

@@ -1,7 +1,5 @@
 /** @define Button */
 
-@import '../shared/branding/colors.less';
-
 .Button {
     &--pseudo {
         // Make pseudo button

awx/ui/client/src/shared/download-standard-out.block.less

@@ -1,5 +1,4 @@
 /** @define DownloadStandardOut */
-@import "./client/src/shared/branding/colors.default.less";
 
 .DownloadStandardOut {
     color: @default-bg !important;

awx/ui/client/src/shared/instance-groups-multiselect/instance-groups.block.less

@@ -1,5 +1,3 @@
-@import "../../shared/branding/colors.default.less";
-
 #instance-groups-panel {
     table {
         overflow: hidden;

awx/ui/client/src/shared/modal/modal.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .Modal-content {
     display:flex;
     flex-wrap:wrap;

awx/ui/client/src/shared/multi-select-preview/multi-select-preview.block.less

@@ -1,5 +1,3 @@
-@import '../branding/colors.default.less';
-
 .MultiSelectPreview {
     display: flex;
     flex: 1 0 auto;

awx/ui/client/src/shared/paginate/paginate.block.less

@@ -1,8 +1,5 @@
- @import "./client/src/shared/branding/colors.default.less";
- @import "./client/src/shared/branding/colors.less";
  // @todo cleanup these messy overrides for styles in ansible-ui.min.css
 
-
 .Paginate-controls--first a,
 .Paginate-controls--previous a{
      border-radius: 4px 0 0 4px;

awx/ui/client/src/shared/prompt/prompt.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .Prompt-bodyQuery {
     margin-bottom: 20px;
     color: @default-interface-txt;

awx/ui/client/src/shared/utilities/icons.less

@@ -1,5 +1,3 @@
-@import "./node_modules/components-font-awesome/less/variables.less";
-
 /* not bem */
 
 .icon(@icon-var) {

awx/ui/client/src/smart-status/smart-status.block.less

@@ -1,6 +1,4 @@
 /** @define SmartStatus */
-@import "./client/legacy-styles/animations.less";
-@import "./client/src/shared/branding/colors.default.less";
 
 .SmartStatus-container{
     max-width: 165px;

awx/ui/client/src/standard-out/standard-out.block.less

@@ -1,6 +1,3 @@
-@import "../shared/branding/colors.default.less";
-@import "../shared/layouts/one-plus-one.less";
-
 /** @define StandardOut */
 
 @breakpoint-md: 1180px;

awx/ui/client/src/system-tracking/date-picker/date-picker.block.less

@@ -1,6 +1,3 @@
-/** @define DatePicker */
-@import "./client/src/shared/branding/colors.default.less";
-
 .DatePicker {
     flex: 1 0 auto;
     display: flex;

awx/ui/client/src/system-tracking/fact-data-table/fact-data-table.block.less

@@ -1,5 +1,4 @@
 /** @define FactDataTable */
-@import "../../shared/branding/colors.default.less";
 
 .FactDataTable {
     &-row, &-headingRow, &-groupHeadingRow {

awx/ui/client/src/system-tracking/fact-module-filter.block.less

@@ -1,9 +1,5 @@
 /** @define FactModuleFilter */
 
-@import "./client/src/shared/branding/colors.less";
-@import "./client/src/shared/branding/colors.default.less";
-
-
 .FactModuleFilter {
     width: 100%;
     display: flex;

awx/ui/client/src/system-tracking/fact-module-pickers.block.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .FactModulePickers-label {
     padding-right: 0;
     text-align: right;

awx/ui/client/src/system-tracking/system-tracking-container.block.less

@@ -1,4 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
 .SystemTrackingContainer {
     display: flex;
     flex-direction: column;

awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less

@@ -1,5 +1,3 @@
-@import "../../../shared/branding/colors.default.less";
-
 .MultiCredential-selectedBar {
   display: flex;
   padding: 5px 10px;

awx/ui/client/src/templates/labels/labelsList.block.less

@@ -1,5 +1,4 @@
 /** @define LabelList */
-@import "./client/src/shared/branding/colors.default.less";
 
 .LabelList {
     display: flex;

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

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .link circle, .link .linkCross, .node .addCircle, .node .removeCircle, .node .WorkflowChart-hoverPath {
     opacity: 0;
 }

awx/ui/client/src/templates/workflows/workflow-controls/workflow-controls.block.less

@@ -1,5 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
 .WorkflowControls {
     display: flex;
 }

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

@@ -1,6 +1,3 @@
-@import "./client/src/shared/branding/colors.default.less";
-
-
 .WorkflowMaker-dialog {
     padding: 0px;
     margin-bottom: 20px;
@@ -9,6 +6,7 @@
         display:none;
     }
 }
+
 .WorkflowMaker-header {
     display: flex;
     height: 34px;

awx/ui/client/src/tooltip/tooltip.block.less

@@ -1,6 +1,5 @@
 /** @define Tooltip */
 
-@import "../shared/branding/colors.less";
 .Tooltip-inner {
     white-space: pre-wrap;
     word-break: break-word;

awx/ui/client/src/workflow-results/workflow-results.block.less

@@ -1,7 +1,3 @@
-@import '../shared/branding/colors.less';
-@import '../shared/branding/colors.default.less';
-@import '../shared/layouts/one-plus-two.less';
-
 @breakpoint-md: 1200px;
 @breakpoint-sm: 623px;
 

awx/ui/client/src/workflow-results/workflow-status-bar/workflow-status-bar.block.less

@@ -1,5 +1,3 @@
-@import '../../shared/branding/colors.default.less';
-
 .WorkflowStatusBar {
     display: flex;
     flex: 0 0 auto;

awx/ui/grunt-tasks/concat.js

@@ -0,0 +1,17 @@
+module.exports = {
+    css: { 
+        src: [
+            'static/assets/custom-theme/jquery-ui-1.10.3.custom.min.css',
+            'static/assets/ansible-bootstrap.min.css',
+            'static/assets/fontcustom/fontcustom.css',
+            'static/lib/components-font-awesome/css/font-awesome.min.css',
+            'static/lib/select2/dist/css/select2.css',
+            'static/lib/codemirror/lib/codemirror.css',
+            'static/lib/codemirror/theme/elegant.css',
+            'static/lib/codemirror/addon/lint/lint.css',
+            'static/lib/nvd3/build/nv.d3.css',
+            'static/lib/ng-toast/dist/ngToast.min.css'
+        ],
+        dest: 'static/css/tower.vendor.css'
+    }
+};

awx/ui/grunt-tasks/concurrent.js

@@ -1,6 +1,6 @@
 module.exports = {
     dev: {
-        tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:views', 'copy:languages', 'copy:config', 'less:dev'],
+        tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:views', 'copy:languages', 'copy:config'],
     },
     // This concurrent target is intended for development ui builds that do not require raising browser-sync or filesystem polling
     devNoSync: {

awx/ui/grunt-tasks/copy.js

@@ -14,6 +14,33 @@ var staticFiles = ['angular-tz-extensions/tz/data/*',
 ];
 
 module.exports = {
+    fonts: {
+        files: [{
+            cwd: 'client/',
+            expand: true,
+            flatten: true,
+            filter: 'isFile',
+            src: [
+                'assets/fontcustom/fontcustom_3dfbafd778b214fc5df2a64fe14fbfb3.woff',
+                'assets/fontcustom/fontcustom_3dfbafd778b214fc5df2a64fe14fbfb3.ttf'
+            ],
+            dest: 'static/css/'
+        }]
+    },
+    icons: {
+        files: [{
+            cwd: 'node_modules/',
+            expand: true,
+            flatten: true,
+            filter: 'isFile',
+            src: [
+                'components-font-awesome/fonts/fontawesome-webfont.ttf',
+                'components-font-awesome/fonts/fontawesome-webfont.woff',
+                'components-font-awesome/fonts/fontawesome-webfont.woff2'
+            ],
+            dest: 'static/fonts/'
+        }]
+    },
     assets: {
         files: [{
             cwd: 'client/',

awx/ui/grunt-tasks/cssmin.js

@@ -0,0 +1,22 @@
+module.exports = {
+    vendor: { 
+        files: [
+            {
+                expand: true,
+                src: 'static/css/tower.vendor.css',
+                dest: '.',
+                ext: '.vendor.min.css'
+            }
+        ]
+    },
+    source: { 
+        files: [
+            {
+                expand: true,
+                src: 'static/css/tower.css',
+                dest: '.',
+                ext: '.min.css'
+            }
+        ]
+    }
+};

awx/ui/grunt-tasks/less.js

@@ -1,32 +1,27 @@
+var AutoPrefixer = require('less-plugin-autoprefix');
+
+var autoPrefixer = new AutoPrefixer({
+    browsers: [ 'last 2 versions' ]
+});
+
 module.exports = {
-    options: {
-      options : {
-        plugins : [ new (require('less-plugin-autoprefix'))({browsers : [ "last 2 versions" ]}) ]
-      }
-    },
     dev: {
-        files: [{
+        files: {
-            dest: 'static/tower.min.css',
+            'static/css/tower.css': 'client/lib/theme/index.less'
-            src: [
+        },
-                'client/legacy-styles/*.less',
-                'client/src/**/*.less',
-                'client/lib/theme/index.less'
-            ]
-        }],
         options: {
-            sourceMap: true
+            sourceMap: true,
+            plugins: [ autoPrefixer ]
         }
     },
     prod: {
         files: {
-            'static/tower.min.css': [
+            'static/css/tower.css': 'client/lib/theme/index.less'
-                'client/legacy-styles/*.less',
-                'client/src/**/*.less',
-                'client/lib/theme/index.less'
-            ]
         },
         options: {
             compress: true,
+            sourceMap: false,
+            plugins: [ autoPrefixer ]
         }
     }
 };

awx/ui/npm-shrinkwrap.json

@@ -1141,6 +1141,20 @@
       "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.1.tgz",
       "dev": true
     },
+    "clean-css": {
+      "version": "4.1.7",
+      "from": "clean-css@>=4.1.1 <4.2.0",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
+      "dev": true,
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "from": "source-map@>=0.5.0 <0.6.0",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "dev": true
+        }
+      }
+    },
     "cli": {
       "version": "1.0.1",
       "from": "cli@>=1.0.0 <1.1.0",
@@ -1575,6 +1589,12 @@
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.4.3.tgz",
       "dev": true
     },
+    "duplexer": {
+      "version": "0.1.1",
+      "from": "duplexer@>=0.1.1 <0.2.0",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "dev": true
+    },
     "duplexify": {
       "version": "3.5.0",
       "from": "duplexify@>=3.1.2 <4.0.0",
@@ -2524,6 +2544,12 @@
       "resolved": "https://registry.npmjs.org/grunt-contrib-copy/-/grunt-contrib-copy-1.0.0.tgz",
       "dev": true
     },
+    "grunt-contrib-cssmin": {
+      "version": "2.2.0",
+      "from": "grunt-contrib-cssmin@latest",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-cssmin/-/grunt-contrib-cssmin-2.2.0.tgz",
+      "dev": true
+    },
     "grunt-contrib-jshint": {
       "version": "1.1.0",
       "from": "grunt-contrib-jshint@>=1.0.0 <2.0.0",
@@ -2638,6 +2664,12 @@
         }
       }
     },
+    "gzip-size": {
+      "version": "3.0.0",
+      "from": "gzip-size@>=3.0.0 <4.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
+      "dev": true
+    },
     "handlebars": {
       "version": "4.0.10",
       "from": "handlebars@>=4.0.0 <4.1.0",
@@ -3950,6 +3982,12 @@
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "dev": true
     },
+    "maxmin": {
+      "version": "2.1.0",
+      "from": "maxmin@>=2.1.0 <3.0.0",
+      "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-2.1.0.tgz",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "from": "media-typer@0.3.0",
@@ -4494,6 +4532,12 @@
       "from": "preserve@>=0.2.0 <0.3.0",
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz"
     },
+    "pretty-bytes": {
+      "version": "3.0.1",
+      "from": "pretty-bytes@>=3.0.0 <4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-3.0.1.tgz",
+      "dev": true
+    },
     "pretty-ms": {
       "version": "2.1.0",
       "from": "pretty-ms@>=2.1.0 <3.0.0",

awx/ui/package.json

@@ -53,6 +53,7 @@
     "grunt-contrib-clean": "^1.0.0",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "^2.2.0",
     "grunt-contrib-jshint": "^1.0.0",
     "grunt-contrib-less": "^1.3.0",
     "grunt-extract-sourcemap": "^0.1.18",

awx/ui/templates/ui/index.html

@@ -7,17 +7,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title ng-bind="tabTitle"></title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="{{ STATIC_URL }}assets/custom-theme/jquery-ui-1.10.3.custom.min.css" />
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/tower.vendor.min.css?v={{version}}" type="text/css">
-    <link rel="stylesheet" href="{{ STATIC_URL }}assets/ansible-bootstrap.min.css" />
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/tower.min.css?v={{version}}" type="text/css">
-    <link rel="stylesheet" href="{{ STATIC_URL }}assets/fontcustom/fontcustom.css" type="text/css">
-    <link rel="stylesheet" href="{{ STATIC_URL }}lib/components-font-awesome/css/font-awesome.min.css" />
-    <link rel="stylesheet" href="{{ STATIC_URL }}lib/select2/dist/css/select2.css" />
-    <link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/lib/codemirror.css" />
-    <link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/theme/elegant.css" />
-    <link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/addon/lint/lint.css" />
-    <link rel="stylesheet" href="{{ STATIC_URL }}lib/nvd3/build/nv.d3.css" type="text/css">
-    <link rel="stylesheet" href="{{ STATIC_URL }}lib/ng-toast/dist/ngToast.min.css" type="text/css">
-    <link rel="stylesheet" href="{{ STATIC_URL }}tower.min.css?v={{version}}" type="text/css">
     <link rel="shortcut icon" href="{{ STATIC_URL }}assets/favicon.ico?v={{version}}" />
     <script>
     var $basePath = "{{ STATIC_URL }}";