From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Mon, 12 Dec 2022 15:34:21 +0000 (-0600)
Subject: LP1999408 Less intense icons
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fsleary%2Flp1999408-not-so-loud-icons;p=working%2FEvergreen.git

LP1999408 Less intense icons

This patch sets icons to a size relative to the surrounding text and
adds a small margin to set them slightly apart. It also sets the opacity
to 65%, making them less visually "loud."

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
---

diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.css b/Open-ILS/src/eg2/src/app/staff/nav.component.css
index 2df005a88a..b7e9c78aa8 100644
--- a/Open-ILS/src/eg2/src/app/staff/nav.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/nav.component.css
@@ -19,6 +19,13 @@
   padding: 4px;
 }
 
+/* override less intense icon styles used elsewhere */
+#staff-navbar .nav-item:first-child .material-icons {
+    font-size: 22px;
+    margin-right: 0;
+    opacity: 1;
+}
+
 /* align top of dropdown w/ bottom of nav */
 #staff-navbar .dropdown-menu {
     margin-top: 7px;
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index b2391688d5..9825799c17 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -125,7 +125,18 @@ a {
 
 .material-icons {
   /** default is 24px which is pretty chunky */
+  font-size: 1rem;
+  opacity: .65;
+  margin-right: .35em;
+  vertical-align: text-bottom;
+}
+
+.label-with-material-icon .material-icons,
+button .material-icons {
   font-size: 22px;
+  opacity: 1;
+  margin-right: 0;
+  vertical-align: baseline;
 }
 
 /* allow spans/labels to vertically orient with material icons */
diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index 72bac37913..ed6d5d5250 100644
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -208,6 +208,12 @@ table.list tr.selected td { /* deprecated? */
   border-color: #fff;
 }
 
+/* less intense glyphicons */
+.glyphicon {
+  opacity: .65;
+  margin-right: .35em;
+}
+
 /* bootstrap alerts are heavily padded.  use this to reduce */
 .alert-less-pad {padding: 5px;}