LP1816475: Booking module refresh
[working/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 {
17   font-size: 1.25rem;
18   font-weight: 550;
19   color: #129a78; /* official color of the Evergreen logo */
20   text-decoration: underline #129a78;
21 }
22 h2.card-header {
23   text-decoration: none;
24 }
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 /** BS deprecated the well, but it's replacement is not quite the same.
52  * Define our own version and expand it to a full "table".
53  * */
54 .well-row {
55   display: flex;
56 }
57 .well-table .well-label {
58   flex: 1;
59   display: flex;
60   align-items: center;
61   margin: 4px;
62   padding: 4px;
63   min-height: 40px;
64 }
65
66 .well-table .well-value {
67   flex: 1;
68   display: flex;
69   align-items: center;
70   background-color: #f5f5f5;
71   border-radius: 5px;
72   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
73   padding: 4px;
74   margin: 4px;
75   min-height: 40px;
76 }
77
78
79 /* usefuf for mat-icon buttons without any background or borders */
80 .material-icon-button {
81   /* Transparent background */
82   border: none;
83   background-color: rgba(0, 0, 0, 0.0);
84   padding-left: .25rem;
85   padding-right: .25rem; /* default .5rem */
86 }
87
88 .mat-icon-in-button {
89     line-height: inherit;
90 }
91
92 .input-group .mat-icon-in-button {
93     font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
94 }
95
96 .material-icons {
97   /** default is 24px which is pretty chunky */
98   font-size: 22px;
99 }
100
101 /* allow spans/labels to vertically orient with material icons */
102 .label-with-material-icon {
103     display: inline-flex;
104     vertical-align: middle;
105     align-items: center;
106 }
107
108 /* dropdown menu link/button with no downward carrot icon */
109 .no-dropdown-caret::after {
110     display: none;
111 }
112
113 /* Default .card padding is extreme */
114 .tight-card .card-body,
115 .tight-card .list-group-item {
116   padding: .25rem;
117 }
118 .tight-card .card-header {
119   padding: .5rem;
120 }
121
122 @media all and (min-width: 800px) {
123     /* scrollable typeahead menus for full-size screens */
124     ngb-typeahead-window {
125         height: auto;
126         max-height: 200px;
127         overflow-x: hidden;
128     }
129 }
130
131 /* Limit size of dropdown menus and allow for scrolling */
132 .scrollable-menu {
133   height: auto;
134   max-height: 300px;
135   overflow-y: auto;
136   font-size: 99%;
137 }
138
139 /* --------------------------------------------------------------------------
140 /* Form Validation CSS - https://angular.io/guide/form-validation
141  * TODO: these colors don't fit the EG color scheme
142  * Required valid fields are left-border styled in green-ish.
143  * Invalid fields are left-border styled in red-ish.
144  */
145 .form-validated .ng-valid[required], .form-validated .ng-valid.required, input[formcontrolname].ng-valid {
146   border-left: 5px solid #78FA89;
147 }
148 .form-validated .ng-invalid:not(form), input[formcontrolname].ng-invalid {
149   border-left: 5px solid #FA787E;
150 }
151
152 /* Typical form CSS.
153  * Brings font size down 5% to squeeze a bit more in.
154  * Bold labels
155  * Fixes some bootstrap margin funkiness with checkboxes for
156  * better vertical alignment.
157  * Optional faint odd or even row striping.
158  */
159 .common-form {
160   font-size: 95%;
161 }
162 .common-form .row {
163   margin: 5px;
164   padding: 3px;
165 }
166
167 .common-form label {
168   font-weight: bold;
169 }
170
171 .common-form.striped-even .row:nth-child(even) {
172   background-color: rgba(0,0,0,.03);
173   border-top: 1px solid rgba(0,0,0,.125);
174   border-bottom: 1px solid rgba(0,0,0,.125);
175 }
176 .common-form.striped-odd .row:nth-child(odd) {
177   background-color: rgba(0,0,0,.03);
178   border-top: 1px solid rgba(0,0,0,.125);
179   border-bottom: 1px solid rgba(0,0,0,.125);
180 }
181
182
183 /**
184  * Only display the print container when printing
185  */
186 #eg-print-container {
187     display: none;
188 }
189 @media print {
190   head {display: none} /* just to be safe */
191   body div:not([id="eg-print-container"]) {display: none}
192   div {display: none}
193   #eg-print-container {display: block}
194   #eg-print-container div {display: block}
195   #eg-print-container pre {border: none}
196 }
197
198 /**
199  * Make sure that comboboxes (including org select
200  * are visible, even in nested modals.
201  *
202  * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
203  * for the upstream issue that necessitates this.
204  */
205 body>.dropdown-menu {z-index: 2100;}
206
207 /* Styles for eg-daterange-select that don't work
208  * in the component's CSS file.
209  */
210 .ngb-dp-day:not(.disabled) .daterange-day.focused {
211   background-color: #e6e6e6;
212 }
213 .ngb-dp-day:not(.disabled) .daterange-day.range, .ngb-dp-day:not(.disabled) .daterange-day:hover {
214   background-color: #129a78;
215   color: white;
216   font-size: 1.4em;
217 }
218 .ngb-dp-day:not(.disabled) .daterange-day.faded {
219   background-color: #c9efe4;
220   color: black;
221 }