LP1984007 Acq warning/stop percentage styles

Styles the background and font color of warning and stop percentages and
adds an icon prefix, in both the dropdown options and the PO summary
table. These colors are in keeping with the less intense badges in my
branch for bug 1999282.

The margin/padding styles for the dropdown buttons are not ideal; it
would be better to have the warning/stop classes applied to the parent
button rather than the inner span. We should revisit this when the CSS
:has() selector has full support in Firefox.

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

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css
index ca6cb05..3065883 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/copy-attrs.component.css
@@ -1,7 +1,46 @@
-.fund-balance-state-stop {
-    color: #c00;
-    font-weight: bold;
+button.dropdown-item {
+    padding: 0;
 }
-.fund-balance-state-warning {
-    color: #c93;
+
+button.dropdown-item span {
+    display: block;
+    padding: .25rem 1.5rem;
+}
+
+button.dropdown-item .fund-balance-state-stop {
+    background: #f8d7da;
+    color: #58151c;
+    font-weight: 600;
+    padding-left: .2rem;
+}
+
+button.dropdown-item.active .fund-balance-state-stop {
+    background-color: #F1AFB5;
+}
+
+/* show octagon/stop ! ("report") icon */
+.fund-balance-state-stop::before {
+    content: "\e160";
+    font-family: "Material Icons";
+    font-weight: normal;
+    margin-right: .3ch;
+}
+
+button.dropdown-item .fund-balance-state-warning {
+    background-color: #ffe69c;
+    color: #723809;
+    font-weight: 600;
+    padding-left: .2rem;
+}
+
+button.dropdown-item.active .fund-balance-state-warning {
+    background-color: #FFDA6A;
+}
+
+/* show triangle ! ("warning") icon */
+.fund-balance-state-warning::before {
+    content: "\e002";
+    font-family: "Material Icons";
+    font-weight: normal;
+    margin-right: .3ch;
 }

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
new file mode 100644 (file)
index 0000000..363536b
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.css
@@ -0,0 +1,26 @@
+.text-danger {
+  background-color: #f8d7da;
+  color: #58151c !important;
+  font-weight: 600;
+  padding: 0 .25rem;
+}
+
+.text-danger::before {
+  content: "\e160";
+  font-family: "Material Icons";
+  font-weight: normal;
+  vertical-align: sub;
+}
+
+.bg-warning {
+  background-color: #ffe69c !important;
+  color: #723809;
+  font-weight: 600;
+}
+
+.bg-warning::before {
+  content: "\e002";
+  font-family: "Material Icons";
+  font-weight: normal;
+  vertical-align: sub;
+}

diff --git a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts
index 8484cf0..db1e66c 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/acq/po/summary.component.ts
@@ -23,6 +23,7 @@ const PO_ACTIVATION_WARNINGS = [
 
 @Component({
   templateUrl: 'summary.component.html',
+  styleUrls: ['./summary.component.css'],
   selector: 'eg-acq-po-summary'
 })
 export class PoSummaryComponent implements OnInit, OnDestroy {