CRM-19769 - Add select2 widget to display tags in color

[civicrm-core.git] / css / civicrm.css

diff --git a/css/civicrm.css b/css/civicrm.css
index 955218bb292b20e038bc7eb29bee9ecb05ad81fd..716350ba6c0a0eed2b396d45391a207fc9f09c33 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3054,14 +3054,14 @@ div.m ul#civicrm-menu,
 }
 .crm-container .select2-results li,
 .crm-container .select2-results .crm-select2-row,
-.crm-container .select2-results .crm-select2-row .crm-select2-row-description p {
+.crm-container .select2-results .crm-select2-row-description p {
   padding: 0;
   margin: 0;
 }
 .crm-container .select2-results .crm-select2-row .crm-select2-row-label {
   font-size: 1.1em;
 }
-.crm-container .select2-results .crm-select2-row .crm-select2-row-description p {
+.crm-container .select2-results .crm-select2-row-description p {
   font-size: 0.8em;
   line-height: 1.5em;
   color: #696969;
@@ -3069,10 +3069,14 @@ div.m ul#civicrm-menu,
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-weight: normal;
 }
-.crm-container .select2-results .select2-highlighted .crm-select2-row .crm-select2-row-description p {
+.crm-container .select2-results .select2-highlighted > .select2-result-label .crm-select2-row-description p {
   color: #f0f0f0;
 }
+.select2-container .crm-select2-row-description {
+  display: none;
+}
 .crm-container .select2-results .crm-select2-icon {
   width: 20px;
   height: 100%;
@@ -3104,6 +3108,14 @@ div.m ul#civicrm-menu,
   box-sizing: border-box;
 }
 
+span.crm-select-item-color {
+  display: inline-block;
+  width: .8em;
+  height: .7em;
+  border-radius: 2px;
+  border: 1px solid grey;
+}
+
 /* jQuery UI styles */
 .crm-container .ui-progressbar-value {
   background-image: url("../packages/jquery/css/images/pbar-ani.gif");
@@ -3270,7 +3282,6 @@ div.m ul#civicrm-menu,
 
 /* in place edit  */
 .crm-container .crm-editable-enabled {
-  white-space: nowrap;
   padding-left: 2px;
   border: 2px dashed transparent;
 }
@@ -3812,3 +3823,10 @@ span.crm-status-icon {
 .crm-container .crm-grip {
   cursor: move;
 }
+
+.crm-tag-item {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: 3px;
+  border: 1px solid grey;
+}
\ No newline at end of file