LP1819179 PCRUD selector fleshing handles maps
[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  * 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.
12  * /
13 /*
14 @import '~material-design-icons/iconfont/material-icons.css'; 
15 */
16
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. 
21    */
22   font-size: .88rem;
23 }
24 h2 {font-size: 1.25rem}
25 h3 {font-size: 1.15rem}
26 h4 {font-size: 1.05rem}
27 h5 {font-size: .95rem}
28
29 .small-text-1 {font-size: 85%}
30
31
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]) ....
35  * */
36 .no-href {
37   cursor: pointer;
38   color: #007bff;
39 }
40
41
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. */
45 .flex-1 {flex: 1}
46 .flex-2 {flex: 2}
47 .flex-3 {flex: 3}
48 .flex-4 {flex: 4}
49 .flex-5 {flex: 5}
50
51
52 /* usefuf for mat-icon buttons without any background or borders */
53 .material-icon-button {
54   /* Transparent background */
55   border: none;
56   background-color: rgba(0, 0, 0, 0.0);
57   padding-left: .25rem;
58   padding-right: .25rem; /* default .5rem */
59 }
60
61 .mat-icon-in-button {
62     line-height: inherit;
63 }
64
65 .material-icons {
66   /** default is 24px which is pretty chunky */
67   font-size: 22px;
68 }
69
70 /* allow spans/labels to vertically orient with material icons */
71 .label-with-material-icon {
72     display: inline-flex;
73     vertical-align: middle;
74     align-items: center;
75 }
76
77 /* dropdown menu link/button with no downward carrot icon */
78 .no-dropdown-caret::after {
79     display: none;
80 }
81
82 /* Default .card padding is extreme */
83 .tight-card .card-body,
84 .tight-card .list-group-item {
85   padding: .25rem;
86 }
87 .tight-card .card-header {
88   padding: .5rem;
89 }
90
91 @media all and (min-width: 800px) {                                            
92     /* scrollable typeahead menus for full-size screens */                               
93     ngb-typeahead-window {
94         height: auto;                                                          
95         max-height: 200px;                                                     
96         overflow-x: hidden;                                                    
97     }
98 }
99
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.
105  */
106 .form-validated .ng-valid[required], .form-validated .ng-valid.required {
107   border-left: 5px solid #78FA89;
108 }
109 .form-validated .ng-invalid:not(form) {
110   border-left: 5px solid #FA787E;
111 }
112
113 /* Typical form CSS.
114  * Brings font size down 5% to squeeze a bit more in.
115  * Bold labels
116  * Fixes some bootstrap margin funkiness with checkboxes for
117  * better vertical alignment.
118  * Optional faint odd or even row striping.
119  */
120 .common-form {
121   font-size: 95%;
122 }
123 .common-form .row {
124   margin: 5px;
125   padding: 3px;
126 }
127
128 .common-form label {
129   font-weight: bold;
130 }
131
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);
136 }
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);
141 }
142
143
144 /**
145  * Only display the print container when printing 
146  */
147 #eg-print-container {
148     display: none;
149 }
150 @media print {
151   head {display: none} /* just to be safe */
152   body div:not([id="eg-print-container"]) {display: none}
153   div {display: none}
154   #eg-print-container {display: block}
155   #eg-print-container div {display: block}
156   #eg-print-container pre {border: none}
157 }
158