1 /* You can add global styles to this file, and also import other style files */
3 /* bootstrap CSS only -- JS bits come from ng-bootstrap */
4 @import '~bootstrap-css-only/css/bootstrap.min.css';
6 /* Locally served material icon fonts.
7 * Note when I first tested these after installing the fonts
8 * via: npm install --save material-design-icons
9 * some of the icons exhibited odd behavior, adding a lot of
10 * excess space to the left or right. It only affected certain
11 * icons. More research needed.
14 @import '~material-design-icons/iconfont/material-icons.css';
17 /** BS default fonts are huge */
18 body, .form-control, .btn, .input-group-text {
19 /* This more or less matches the font size of the angularjs client.
20 * The default BS4 font of 1rem is comically large.
24 h2 {font-size: 1.25rem}
25 h3 {font-size: 1.15rem}
26 h4 {font-size: 1.05rem}
27 h5 {font-size: .95rem}
29 .small-text-1 {font-size: 85%}
32 /** Ang5 routes on clicks to href's with no values, so we can't have
33 * bare href's to force anchor styling. Use this for anchors w/ no href.
34 * TODO: should we style all of them? a:not([href]) ....
42 /** BS has flex utility classes, but none for specifying flex widths.
43 * BS class="col" is roughly equivelent to flex-1, but col-2 is not
44 * equivalent to flex-2, since col-2 really means 2/12 width. */
52 /* usefuf for mat-icon buttons without any background or borders */
53 .material-icon-button {
54 /* Transparent background */
56 background-color: rgba(0, 0, 0, 0.0);
58 padding-right: .25rem; /* default .5rem */
66 /** default is 24px which is pretty chunky */
70 /* allow spans/labels to vertically orient with material icons */
71 .label-with-material-icon {
73 vertical-align: middle;
77 /* dropdown menu link/button with no downward carrot icon */
78 .no-dropdown-caret::after {
82 /* Default .card padding is extreme */
83 .tight-card .card-body,
84 .tight-card .list-group-item {
87 .tight-card .card-header {
91 @media all and (min-width: 800px) {
92 /* scrollable typeahead menus for full-size screens */
93 ngb-typeahead-window {
100 /* --------------------------------------------------------------------------
101 /* Form Validation CSS - https://angular.io/guide/form-validation
102 * TODO: these colors don't fit the EG color scheme
103 * Required valid fields are left-border styled in green-ish.
104 * Invalid fields are left-border styled in red-ish.
106 .form-validated .ng-valid[required], .form-validated .ng-valid.required {
107 border-left: 5px solid #78FA89;
109 .form-validated .ng-invalid:not(form) {
110 border-left: 5px solid #FA787E;
114 * Brings font size down 5% to squeeze a bit more in.
116 * Fixes some bootstrap margin funkiness with checkboxes for
117 * better vertical alignment.
118 * Optional faint odd or even row striping.
132 .common-form.striped-even .row:nth-child(even) {
133 background-color: rgba(0,0,0,.03);
134 border-top: 1px solid rgba(0,0,0,.125);
135 border-bottom: 1px solid rgba(0,0,0,.125);
137 .common-form.striped-odd .row:nth-child(odd) {
138 background-color: rgba(0,0,0,.03);
139 border-top: 1px solid rgba(0,0,0,.125);
140 border-bottom: 1px solid rgba(0,0,0,.125);
145 * Only display the print container when printing
147 #eg-print-container {
151 head {display: none} /* just to be safe */
152 body div:not([id="eg-print-container"]) {display: none}
154 #eg-print-container {display: block}
155 #eg-print-container div {display: block}
156 #eg-print-container pre {border: none}