start adding form validation to receipt template editor
[working/Evergreen.git] / Open-ILS / src / templates / staff / css / style.css.tt2
1 /* --------------------------------------------------------------------------
2  * Simple default navbar style adjustements to apply the Evergreen color.
3  * TODO: style other components to match EG color scheme
4  */
5 #top-navbar.navbar-default {
6     background: -webkit-linear-gradient(#00593d, #007a54);
7     background-color: #007a54;
8     color: #fff;
9 }
10 #top-navbar.navbar-default .navbar-nav>li>a {
11     color: #fff;
12 }
13 #top-navbar.navbar-default .navbar-nav>li>a:hover {
14     color: #ddd;
15 }
16 #top-navbar.navbar-default .navbar-nav>.dropdown>a .caret {
17     border-top-color: #fff;
18     border-bottom-color: #fff;
19 }
20 #top-navbar.navbar-default .navbar-nav>.dropdown>a:hover .caret {
21     border-top-color: #ddd;
22     border-bottom-color: #ddd;
23 }
24
25 /* status bar along the bottom of the page ------------------------ */
26 /* decrease padding to decrease overall height */
27
28 /** TODO:move status bar items into navbar config entry (top-right)
29  * to avoid body padding weirdness.  Or if we want a permenently
30  * visible status bar, maybe put it just below the navbar.. */
31
32 /* bottom padding ensures no body content is hidden behind the status
33  * bar.  When content reaches the status bar a scroll bar appears */
34 /*body { padding-bottom: 26px; }*/
35
36 #status-bar {
37   min-height:1.8em !important;
38 }
39 #status-bar > ul {
40   margin-right:6px; 
41 }
42 #status-bar li {
43   padding-left: 10px;
44 }
45 #status-bar > li > a {
46   padding-top:5px !important; 
47   padding-bottom:5px !important;
48 }
49 .status-bar-connected {
50   color: rgb(92, 184, 92); /* success */
51 }
52
53 /* --------------------------------------------------------------------------
54  * Structural modifications
55  */
56
57 #top-content-container {
58     /* allow the primary container to occupy most of the page,
59      * but leave some narrow gutters along the side, much 
60      * narrower than the default Bootstrapp container gutters.
61      */
62     width: 95%;
63     padding-top: 70px;
64 }
65
66
67 /* --------------------------------------------------------------------------
68  * Temporaray local CSS required to make angular-ui-bootstrap
69  * version 0.6.0 look right with Bootstrap CSS 3.0
70  */
71 .nav, .pagination, .carousel a { cursor: pointer; }
72 /*
73 .modal {
74     display: block;
75     height: 0;
76     overflow: visible;
77 }
78 .modal-body:before,
79 .modal-body:after {
80     display: table;
81     content: " ";
82 }
83 .modal-header:before,
84 .modal-header:after {
85     display: table;
86     content: " ";
87 }
88 */
89
90 /* --------------------------------------------------------------------------
91 /* Form Validation CSS - http://docs.angularjs.org/guide/forms
92  * TODO: these colors are harsh and don't fit the EG color scheme
93  */
94 .form-validated input.ng-invalid.ng-dirty {
95   background-color: #FA787E;
96 }
97 .form-validated input.ng-valid.ng-dirty {
98   background-color: #78FA89;
99 }
100 .form-validated textarea.ng-invalid.ng-dirty {
101   background-color: #FA787E;
102 }
103 .form-validated textarea.ng-valid.ng-dirty {
104   background-color: #78FA89;
105 }
106
107 /* --------------------------------------------------------------------------
108  * Local style
109  */
110
111 /* no bootstrap way to directly disable a link.  */
112 a.disabled {
113   pointer-events: none;
114   cursor: default;
115   color: #888;
116 }
117
118 #splash-nav .panel-body div {
119     padding-bottom: 10px;
120 }
121
122 table.list tr.selected td { /* deprecated? */
123     color: #2a6496;
124     background-color: #F5F5F5;
125 }
126
127 .pad-horiz {padding : 0px 10px 0px 10px; }
128 .pad-vert {padding : 20px 0px 10px 0px;}
129 .pad-left {padding-left: 10px;}
130 .pad-right {padding-right: 10px;}
131 .pad-all-min {padding : 5px; }
132 .pad-all-min2 {padding : 2px; }
133 .pad-all {padding : 10px; }
134
135 #print-div { display: none; }
136
137 /* by default, give all tab panes some top padding */
138 .tab-pane { padding-top: 20px; }
139
140 .nav-pills-like-tabs {
141     border-bottom:1px solid #CCC;
142 }
143
144 .btn-pad {
145   /* sometimes you don't want buttons scrunched together -- add some margin */
146   margin-left: 10px;
147 }
148
149 /* button styling by Cory LaViska from
150    http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
151 */
152 .btn-file {
153     position: relative;
154     overflow: hidden;
155 }
156 .btn-file input[type=file] {
157     position: absolute;
158     top: 0;
159     right: 0;
160     min-width: 100%;
161     min-height: 100%;
162     font-size: 100px;
163     text-align: right;
164     filter: alpha(opacity=0);
165     opacity: 0;
166     outline: none;
167     background: white;
168     cursor: inherit;
169     display: block;
170 }
171
172 .strong-text {
173   font-weight: bold;
174 }
175 .strong-text-1 {
176   font-size: 110%;
177   font-weight: bold;
178 }
179 .strong-text-2 {
180   font-size: 120%;
181   font-weight: bold;
182 }
183 .strong-text-3 {
184   font-size: 130%;
185   font-weight: bold;
186 }
187 .strong-text-4 {
188   font-size: 140%;
189   font-weight: bold;
190 }
191
192 .currency-input {
193   width: 8em;
194 }
195
196 /* barcode inputs are everywhere.  Let's have a consistent style. */
197 .barcode { width: 16em !important; }
198
199 /* bootstrap alerts are heavily padded.  use this to reduce */
200 .alert-less-pad {padding: 5px;}
201
202 /* text displayed inside a <progressbar>, typically the max/progress values */
203 .progressbar-text {
204   color:black;
205   white-space:nowrap;
206 }
207
208 /* embedded UI iframe */
209 .eg-embed-frame {
210   width: 100%;
211 }
212 .eg-embed-frame iframe {
213   width: 100%;
214   border: none;
215   margin: 0px;
216   padding: 0px;
217 }
218
219 /* ----------------------------------------------------------------------
220  * Grid
221  * ---------------------------------------------------------------------- */
222
223 .eg-grid-primary-label {
224   font-weight: bold;
225   font-size: 120%;
226   margin-right: 2em;
227 }
228
229 /* odd/even row styling */
230 .eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) {
231   background-color: rgb(248, 248, 248);
232 }
233
234 .eg-grid-row {
235   width: 100%;
236   display: flex;
237   border: 1px solid #ccc;
238 }
239
240 .eg-grid-row:not(.eg-grid-header-row):not(.eg-grid-conf-row) {
241   /* TODO: remove, pretty sure this is no longer needed w/ nowrap */
242   /*height: 1.8em;*/
243 }
244
245 .eg-grid-action-row {
246   border: none;
247   /* margin should not have to be this large; something's up */
248   margin-bottom: 12px;
249 }
250
251 .eg-grid-header-row { 
252   font-weight: bold; 
253 }
254
255 .eg-grid-header-row > .eg-grid-cell {
256   border-right: 1px solid #CCC;
257   text-align: center;
258
259   /* vertically align header cell text by treating 
260      each header cell as a vertical flex container */
261   display:flex;
262   flex-direction:column;
263   justify-content:flex-end;
264 }
265
266 .eg-grid-cell {
267   /* avoid text flowing into adjacent cells */
268   white-space: nowrap;
269   text-overflow: ellipsis;
270   overflow: hidden;
271 }
272
273 /* in config display, make cells more obvious */
274 .eg-grid-as-conf .eg-grid-row {
275   border: 1px solid #777;
276 }
277 .eg-grid-as-conf .eg-grid-cell {
278   border-right: 1px solid #777;
279 }
280
281 /* stock columns need fixed-width controls */
282 .eg-grid-cell-stock {
283   width: 2.2em;
284   text-align: center;
285 }
286
287 /* the conf header must be twice the stock flex */
288 .eg-grid-cell-conf-header {
289   width: 4.4em;
290   font-weight: bold;
291 }
292
293 .eg-grid-row-selected {
294   color: rgb(51, 51, 51);
295   background-color: rgb(201, 221, 225);
296   border-bottom: 1px solid #888;
297 }
298
299 /* Improve ::selection styling by only allowing selection on text
300  * content cells within the main body of the grid.  Otherwise, the browser 
301  * styles row background and text (all dark blue?) when shift-click or 
302  * click-drag is used.
303  */
304 .eg-grid-content-body .eg-grid-row {
305   user-select:none;
306   -moz-user-select: none;
307   -webkit-user-select: none;
308 }
309 .eg-grid-content-body .eg-grid-cell-content {
310   user-select:text;
311   -moz-user-select: text;
312   -webkit-user-select: text;
313 }
314 .eg-grid-cell-content::-moz-selection {
315   color: rgb(51, 51, 51);
316   background: rgb(201, 221, 225);
317   border-bottom: 1px solid #888;
318 }
319 .eg-grid-cell-content::selection {
320   color: rgb(51, 51, 51);
321   background: rgb(201, 221, 225);
322   border-bottom: 1px solid #888;
323 }
324
325 .eg-grid-conf-cell-entry {
326   width:98%;
327   text-align:center;
328   padding: 3px;
329 }
330
331 .eg-grid-conf-cell-entry:not(:first-child) {
332   border-top:1px solid #ccc;
333 }
334
335 .eg-grid-conf-row {
336   background-color: #dff0d8;
337   border-color: #d6e9c6;
338 }
339
340 .eg-grid-conf-row:first-child {
341   /* alignment fix; account for one missing border */
342   padding-right: 1px;
343 }
344
345 .eg-grid-column-move-handle:hover {
346   cursor: move;
347 }
348
349 .eg-grid-column-move-handle-active,
350 .eg-grid-column-move-handle-active:active {
351   /* similar to label-primary, sans padding */
352   background-color: rgb(66, 139, 202);
353   color: #fff;
354 }
355
356 .eg-grid-col-hover {
357   /* similar to label-success, sans padding */
358   background-color: rgb(92, 184, 92);
359   color: #fff;
360 }
361
362 .eg-grid-column-resize-handle {
363   height: 100%;
364 }
365 .eg-grid-column-resize-handle:hover {
366   cursor: col-resize;
367 }
368
369 /* for these to be useful, they would have to be applied 
370  * to the dragover targets.  not yet done */
371 .eg-grid-column-resize-handle-west {
372   cursor: w-resize;
373 }
374 .eg-grid-column-resize-handle-east {
375   cursor: e-resize;
376 }
377
378 .eg-grid-menu-item {
379   margin-right: 10px;
380 }
381
382
383 /* hack to make the header columns line up with the content columns
384    when the scroll bar is visible along the right side of the content
385    columns. TODO: if this varies enough by browser, we'll need to
386    calculate the width instead. */
387 /*
388 .eg-grid-scroll > .eg-grid-header-row, 
389 .eg-grid-scroll > .eg-grid-conf-row { 
390   padding-right: 15px;
391 }
392 .eg-grid-scroll > .eg-grid-content-body {
393   overflow-y:scroll; 
394   height: 600px; 
395 }
396 */
397 .eg-grid-column-picker {
398   height: auto;
399   max-height: 400px;
400   overflow: auto;
401   box-shadow: none;
402 }
403
404
405 /* ----------------------------------------------------------------------
406  * /Grid
407  * ---------------------------------------------------------------------- */
408
409
410 /* simple flex container for consistent-width cell-based structures */
411 .flex-container-striped > .flex-row:nth-child(odd) {
412   background-color: #f5f5f5;
413 }
414 .flex-container-bordered .flex-cell {
415   border-bottom: 1px solid #ddd;
416 }
417 .flex-row {
418   display: flex;
419 }
420 .flex-row.padded div {
421   padding: 5px;
422 }
423 .flex-row.left-anchored > div {
424   margin-right: 10px;
425 }
426 .flex-cell {
427   flex: 1;
428   padding: 4px; /* bootstrap default is much bigger */
429 }
430 .flex-cell.well {
431   min-height: 2.5em; /* don't let empty wells scrunch down */
432   margin-bottom: 5px; /* bootstrap default is 20px */
433 }
434 .flex-2 { /* meh, convience */
435   flex: 2;
436 }
437 .flex-3 { /* meh, convience */
438   flex: 3;
439 }
440 .flex-4 { /* meh, convience */
441   flex: 4;
442 }
443
444 /* TODO: match media size to Bootstrap "md" col resizing */
445 @media all and (max-width: 800px) {
446   .flex-row {
447     flex-direction: column;
448   }
449   .eg-grid-row {
450     flex-direction: column;
451   }
452 }
453
454 /* optional class to make 'lg' Bootstrap modals even wider */
455 @media (min-width: 768px) {
456   .eg-wide-modal .modal-lg {
457     width: 95%;
458   }
459 }
460
461 @media all and (min-width: 800px) {
462     /* scrollable menus for full-size screens */
463     .scrollable-menu {
464         height: auto;
465         max-height: 200px;
466         overflow-x: hidden;
467     }
468 }
469
470 [%# 
471 vim: ft=css 
472 %]