LP1830912 Locally servered material icons
[Evergreen.git] / Open-ILS / src / eg2 / src / styles.css
1 /* You can add global styles to this file, and also import other style files */
2
3 /* bootstrap CSS only -- JS bits come from ng-bootstrap */
4 @import '~bootstrap-css-only/css/bootstrap.min.css';
5
6 /* Locally served material icon fonts  */
7 @import '~material-design-icons/iconfont/material-icons.css'; 
8
9 /** BS default fonts are huge */
10 body, .form-control, .btn, .input-group-text {
11   /* This more or less matches the font size of the angularjs client.
12    * The default BS4 font of 1rem is comically large.
13    */
14   font-size: .88rem;
15 }
16 h2 {font-size: 1.25rem}
17 h3 {font-size: 1.15rem}
18 h4 {font-size: 1.05rem}
19 h5 {font-size: .95rem}
20
21 .small-text-1 {font-size: 85%}
22
23
24 /** Ang5 routes on clicks to href's with no values, so we can't have
25  * bare href's to force anchor styling.  Use this for anchors w/ no href.
26  * TODO: should we style all of them?  a:not([href]) ....
27  * */
28 .no-href {
29   cursor: pointer;
30   color: #007bff;
31 }
32
33
34 /** BS has flex utility classes, but none for specifying flex widths.
35  *  BS class="col" is roughly equivelent to flex-1, but col-2 is not
36  *  equivalent to flex-2, since col-2 really means 2/12 width. */
37 .flex-1 {flex: 1}
38 .flex-2 {flex: 2}
39 .flex-3 {flex: 3}
40 .flex-4 {flex: 4}
41 .flex-5 {flex: 5}
42
43 /** BS deprecated the well, but it's replacement is not quite the same.
44  * Define our own version and expand it to a full "table".
45  * */
46 .well-row {
47   display: flex;
48 }
49 .well-table .well-label {
50   flex: 1;
51   display: flex;
52   align-items: center;
53   margin: 4px;
54   padding: 4px;
55   min-height: 40px;
56 }
57
58 .well-table .well-value {
59   flex: 1;
60   display: flex;
61   align-items: center;
62   background-color: #f5f5f5;
63   border-radius: 5px;
64   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
65   padding: 4px;
66   margin: 4px;
67   min-height: 40px;
68 }
69
70
71 /* usefuf for mat-icon buttons without any background or borders */
72 .material-icon-button {
73   /* Transparent background */
74   border: none;
75   background-color: rgba(0, 0, 0, 0.0);
76   padding-left: .25rem;
77   padding-right: .25rem; /* default .5rem */
78 }
79
80 .mat-icon-in-button {
81     line-height: inherit;
82 }
83
84 .input-group .mat-icon-in-button {
85     font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
86 }
87
88 .material-icons {
89   /** default is 24px which is pretty chunky */
90   font-size: 22px;
91 }
92
93 /* allow spans/labels to vertically orient with material icons */
94 .label-with-material-icon {
95     display: inline-flex;
96     vertical-align: middle;
97     align-items: center;
98 }
99
100 /* dropdown menu link/button with no downward carrot icon */
101 .no-dropdown-caret::after {
102     display: none;
103 }
104
105 /* Default .card padding is extreme */
106 .tight-card .card-body,
107 .tight-card .list-group-item {
108   padding: .25rem;
109 }
110 .tight-card .card-header {
111   padding: .5rem;
112 }
113
114 @media all and (min-width: 800px) {
115     /* scrollable typeahead menus for full-size screens */
116     ngb-typeahead-window {
117         height: auto;
118         max-height: 200px;
119         overflow-x: hidden;
120     }
121 }
122
123 /* Limit size of dropdown menus and allow for scrolling */
124 .scrollable-menu {
125   height: auto;
126   max-height: 300px;
127   overflow-y: auto;
128   font-size: 99%;
129 }
130
131 /* --------------------------------------------------------------------------
132 /* Form Validation CSS - https://angular.io/guide/form-validation
133  * TODO: these colors don't fit the EG color scheme
134  * Required valid fields are left-border styled in green-ish.
135  * Invalid fields are left-border styled in red-ish.
136  */
137 .form-validated .ng-valid[required], .form-validated .ng-valid.required {
138   border-left: 5px solid #78FA89;
139 }
140 .form-validated .ng-invalid:not(form) {
141   border-left: 5px solid #FA787E;
142 }
143
144 /* Typical form CSS.
145  * Brings font size down 5% to squeeze a bit more in.
146  * Bold labels
147  * Fixes some bootstrap margin funkiness with checkboxes for
148  * better vertical alignment.
149  * Optional faint odd or even row striping.
150  */
151 .common-form {
152   font-size: 95%;
153 }
154 .common-form .row {
155   margin: 5px;
156   padding: 3px;
157 }
158
159 .common-form label {
160   font-weight: bold;
161 }
162
163 .common-form.striped-even .row:nth-child(even) {
164   background-color: rgba(0,0,0,.03);
165   border-top: 1px solid rgba(0,0,0,.125);
166   border-bottom: 1px solid rgba(0,0,0,.125);
167 }
168 .common-form.striped-odd .row:nth-child(odd) {
169   background-color: rgba(0,0,0,.03);
170   border-top: 1px solid rgba(0,0,0,.125);
171   border-bottom: 1px solid rgba(0,0,0,.125);
172 }
173
174
175 /**
176  * Only display the print container when printing
177  */
178 #eg-print-container {
179     display: none;
180 }
181 @media print {
182   head {display: none} /* just to be safe */
183   body div:not([id="eg-print-container"]) {display: none}
184   div {display: none}
185   #eg-print-container {display: block}
186   #eg-print-container div {display: block}
187   #eg-print-container pre {border: none}
188 }
189
190 /**
191  * Make sure that comboboxes (including org select
192  * are visible, even in nested modals.
193  *
194  * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
195  * for the upstream issue that necessitates this.
196  */
197 body>.dropdown-menu {z-index: 2100;}