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