From bfc7adc5a1ef114231da9587e4e3768599ffe668 Mon Sep 17 00:00:00 2001
From: spartanicus <arlen@dogenmedia.com>
Date: Fri, 22 Oct 2021 13:57:07 -0400
Subject: [PATCH] Improve sortable table header styles; improve active filter
 styles; fix a color variable (CO-2133)

---
 app/templates/element/search.php |  3 +-
 app/webroot/css/co-base.css      | 50 +++++++++++++++-----------------
 app/webroot/css/co-color.css     |  2 +-
 3 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/app/templates/element/search.php b/app/templates/element/search.php
index b797c9501..eae33b0ad 100644
--- a/app/templates/element/search.php
+++ b/app/templates/element/search.php
@@ -71,7 +71,8 @@
             // We have active filters - not just a sort.
             $hasActiveFilters = true;
           ?>
-          <button class="top-search-active-filter deletebutton spin" type="button" aria-controls="<?php print $aria_controls; ?>" title="<?= __('match.op.clear.filters',[1]);?>">
+          <button class="top-search-active-filter deletebutton spin btn btn-default btn-sm" type="button" aria-controls="<?php print $aria_controls; ?>" title="<?= __('match.op.clear.filters',[1]);?>">
+             <em class="material-icons">cancel</em>
              <span class="top-search-active-filter-title">
                <?= $vv_searchable_attributes[$key]['label']; ?>
              </span>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 0dd1de50d..bed15781c 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -511,17 +511,15 @@ body.logged-in #top-menu {
   padding: 0;
   border: 1px solid var(--cmg-color-lightgray-005);
 }
-.top-search legend .material-icons {
-  vertical-align: middle;
-}
-.top-search legend button.cm-toggle {
+#content .top-search legend button.cm-toggle {
   position: absolute;
   right: 0.5em;
   border: none;
   background-color: transparent;
 }
 #content .top-search legend .material-icons {
-  font-size: 20px;
+  font-size: 1.4em;
+  vertical-align: top;
 }
 #content .top-search legend button.cm-toggle .material-icons {
   font-size: 34px;
@@ -601,7 +599,7 @@ body.logged-in #top-menu {
   width: auto;
   height: auto;
   line-height: unset;
-  margin: 0;
+  margin: -6px 0 0;
   padding: 0 1em;
 }
 .top-search .filter-clear-all-button:hover {
@@ -612,13 +610,20 @@ body.logged-in #top-menu {
   display: none;
 }
 #top-search-active-filters {
-  margin-left: 1em;
+  margin-left: 0.25em;
   padding: 0.5em 0;
 }
-.top-search-active-filter {
-  margin: 0 0.25em 0 0;
+.top-search-active-filter.btn.btn-sm {
+  padding: 0.2em 0.4em;
   white-space: nowrap;
-  font-style: italic;
+  box-shadow: none;
+  text-transform: none;
+  font-size: 0.8em;
+  border: 1px solid var(--cmg-color-lightgray-007);
+}
+.top-search-active-filter.btn.btn-sm:hover {
+  background-color: var(--cmg-color-lightgray-006);
+  color: black !important;
 }
 .top-search-active-filter-title::after {
   content: ": ";
@@ -1066,20 +1071,20 @@ p { /* MDL override */
 .warn-level-b td {
   background-color: var(--cmg-color-yellow-001);
 }
-.asc, .desc {
-  font-style: italic;
-  text-decoration: none;
+.asc, 
+.desc {
+  color: black;
 }
-a.asc::before, a.desc::before {
+a.asc::after, 
+a.desc::after {
   position: relative;
-  left: -2px;
+  right: -2px;
   font-style: normal;
 }
-a.asc::before {
+a.asc::after {
   content: "▲"; /*\25b2 in escaped hex*/
-  top: -2px;
 }
-a.desc::before {
+a.desc::after {
   content: "▼"; /*\25bc in escaped hex*/
 }
 .co-grid {
@@ -1123,20 +1128,11 @@ table {
 th, td {
   padding: 0.75em;
   text-align: left;
-  font-weight: normal;
 }
 th {
   background-color: var(--cmg-color-lightgray-005);
   color: var(--cmg-color-black);
 }
-th a {
-  color: var(--cmg-color-black);
-  text-decoration: underline;
-}
-th a:hover {
-  color: var(--cmg-color-gray-002) !important;
-  text-decoration: none !important;
-}
 td {
   border-bottom: 1px solid var(--cmg-color-lightgray-005);
 }
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index 1e513d28d..9dc47cf1c 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -49,7 +49,7 @@
   --cmg-color-lightgray-007: #ccc;    /* border color */
   --cmg-color-lightgray-008: #bbb;    /* icon color */
   --cmg-color-lightgray-009: #ededed; /* data-list background color */
-  --cmg-color-lightgray-011: #e8e8e8; /* co-grid background color */
+  --cmg-color-lightgray-010: #e8e8e8; /* co-grid background color */
 
   --cmg-color-green-001: #2a2;       /* banner */
   --cmg-color-green-002: #0b6623;    /* infobox icon color */