change style of all tags fixes #1805

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

@@ -2118,3 +2118,37 @@ a:hover {
    fill: @db-graph-axis-label !important; //rgb(169, 178, 189);
    font-family: 'Open Sans' !important;
 }
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding-left: 0px;
+    border-left-width: 0px;
+    border-bottom-width: 0px;
+    border-top-width: 0px;
+    padding-right: 10px;
+    border-right-width: 0px;
+    background-color: @default-link;
+    color: @default-bg;
+    border-radius: 5px;
+    line-height: 21px;
+    font-size: 13px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 8px !important;
+    padding: 0 6px;
+    color: @default-bg !important;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    background-color: @default-link;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+    background-color: @default-err;
+}

awx/ui/client/src/access/roleList.block.less

@@ -5,6 +5,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
+    padding-left: 15px;
 }
 
 .RoleList-tagContainer {
@@ -16,11 +17,10 @@
     border-radius: 5px;
     padding: 2px 10px;
     margin: 4px 0px;
-    border: 1px solid @d7grey;
     font-size: 12px;
-    color: @default-interface-txt;
+    color: @default-bg;
     text-transform: uppercase;
-    background-color: @default-bg;
+    background-color: @default-link;
     margin-right: 5px;
     max-width: 100%;
     white-space: nowrap;
@@ -30,21 +30,20 @@
 
 .RoleList-tag--deletable {
     margin-right: 0px;
-    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
-    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
     border-right: 0;
     max-wdith: ~"calc(100% - 23px)";
+    margin-right: 5px;
 }
 
 .RoleList-deleteContainer {
-    border: 1px solid @d7grey;
+    background-color: @default-link;
-    border-left-color: @default-bg;
+    border-top-left-radius: 5px;
-    background-color: @default-bg;
+    border-bottom-left-radius: 5px;
-    border-top-right-radius: 5px;
+    color: @default-bg;
-    border-bottom-right-radius: 5px;
     padding: 0 5px;
     margin: 4px 0px;
-    margin-right: 5px;
     align-items: center;
     display: flex;
     cursor: pointer;
@@ -52,7 +51,7 @@
 
 .RoleList-tagDelete {
     font-size: 13px;
-    color: @default-icon;
+    color: @default-bg;
 }
 
 .RoleList-name {

awx/ui/client/src/access/roleList.partial.html

@@ -1,13 +1,13 @@
 <div class="RoleList-tagContainer"
     ng-repeat="role in roles">
-    <div class="RoleList-tag"
-        ng-class="{'RoleList-tag--deletable': role.explicit}">
-        <span class="RoleList-name">{{ role.name }}</span>
-    </div>
     <div class="RoleList-deleteContainer"
         ng-if="role.explicit"
         ng-click="deletePermission(permission.id, role.roleId, permission.username, role.name, role.resourceName)">
         <i ng-if="role.explicit"
             class="fa fa-times RoleList-tagDelete"></i>
     </div>
+    <div class="RoleList-tag"
+        ng-class="{'RoleList-tag--deletable': role.explicit}">
+        <span class="RoleList-name">{{ role.name }}</span>
+    </div>
 </div>

awx/ui/client/src/search/tagSearch.block.less

@@ -187,23 +187,23 @@
 
 .TagSearch-tag--deletable {
     margin-right: 0px;
-    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
-    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
     border-right: 0;
     max-wdith: ~"calc(100% - 23px)";
     background-color: @default-link;
-    color: white;
+    color: @default-bg;
+    margin-right: 5px;
 }
 
 .TagSearch-deleteContainer {
     background-color: @default-link!important;
     color: white;
     background-color: @default-bg;
-    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
-    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
     padding: 0 5px;
     margin: 4px 0px;
-    margin-right: 5px;
     align-items: center;
     display: flex;
     cursor: pointer;

awx/ui/client/src/search/tagSearch.partial.html

@@ -63,15 +63,15 @@
             <div class="TagSearch-flexContainer">
                 <div class="TagSearch-tagContainer"
                     ng-repeat="tag in currentSearchFilters track by $index">
+                    <div class="TagSearch-deleteContainer"
+                        ng-click="deleteTag(tag)">
+                        <i class="fa fa-times TagSearch-tagDelete"></i>
+                    </div>
                     <div class="TagSearch-tag TagSearch-tag--deletable"
                         <span class="TagSearch-name">
                             {{ tag.name }}
                         </span>
                     </div>
-                    <div class="TagSearch-deleteContainer"
-                        ng-click="deleteTag(tag)">
-                        <i class="fa fa-times TagSearch-tagDelete"></i>
-                    </div>
                 </div>
             </div>
         </div>