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 2df005a..b7e9c78 100644 (file)
--- 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 b239168..9825799 100644 (file)
--- 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 72bac37..ed6d5d5 100644 (file)
--- 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;}