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/dist/material-design-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 .flex-6 {flex: 6}
  51
  52 /** BS deprecated the well, but it's replacement is not quite the same.
  53  * Define our own version and expand it to a full "table".
  54  * */
  55 .well-row {
  56   display: flex;
  57 }
  58 .well-table .well-label {
  59   flex: 1;
  60   display: flex;
  61   align-items: center;
  62   margin: 4px;
  63   padding: 4px;
  64   min-height: 40px;
  65 }
  66
  67 .well-table .well-label-no-flex {
  68   display: flex;
  69   align-items: center;
  70   margin: 4px;
  71   padding: 4px;
  72   min-height: 40px;
  73 }
  74
  75 .well-table .well-value {
  76   flex: 1;
  77   display: flex;
  78   align-items: center;
  79   background-color: #f5f5f5;
  80   border-radius: 5px;
  81   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  82   padding: 4px;
  83   margin: 4px;
  84   min-height: 40px;
  85 }
  86
  87 .btn.disabled, .btn:disabled {
  88   cursor: not-allowed;
  89 }
  90
  91 /* usefuf for mat-icon buttons without any background or borders */
  92 .material-icon-button {
  93   /* Transparent background */
  94   border: none;
  95   background-color: rgba(0, 0, 0, 0.0);
  96   padding-left: .25rem;
  97   padding-right: .25rem; /* default .5rem */
  98 }
  99
 100 .mat-icon-in-button {
 101     line-height: inherit;
 102 }
 103
 104 .mat-icon-shrunk-in-button {
 105     line-height: inherit;
 106     font-size: 18px;
 107 }
 108
 109 .material-icons.small {
 110   font-size: 18px;
 111 }
 112
 113 .input-group .mat-icon-in-button {
 114     font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
 115 }
 116
 117 .material-icons {
 118   /** default is 24px which is pretty chunky */
 119   font-size: 22px;
 120 }
 121
 122 /* allow spans/labels to vertically orient with material icons */
 123 .label-with-material-icon {
 124     display: inline-flex;
 125     vertical-align: middle;
 126     align-items: center;
 127 }
 128
 129 /* dropdown menu link/button with no downward carrot icon */
 130 .no-dropdown-caret::after {
 131     display: none;
 132 }
 133
 134 /* Default .card padding is extreme */
 135 .tight-card .card-body,
 136 .tight-card .list-group-item {
 137   padding: .25rem;
 138 }
 139 .tight-card .card-header {
 140   padding: .5rem;
 141 }
 142
 143 @media all and (min-width: 800px) {
 144     /* scrollable typeahead menus for full-size screens */
 145     ngb-typeahead-window {
 146         height: auto;
 147         max-height: 200px;
 148         overflow-x: hidden;
 149     }
 150 }
 151
 152 /* Limit size of dropdown menus and allow for scrolling */
 153 .scrollable-menu {
 154   height: auto;
 155   max-height: 300px;
 156   overflow-y: auto;
 157   font-size: 99%;
 158 }
 159
 160 /* --------------------------------------------------------------------------
 161 /* Form Validation CSS - https://angular.io/guide/form-validation
 162  * TODO: these colors don't fit the EG color scheme
 163  * Required valid fields are left-border styled in green-ish.
 164  * Invalid fields are left-border styled in red-ish.
 165  */
 166 .form-validated .ng-valid[required], .form-validated .ng-valid.required, input[formcontrolname].ng-valid {
 167   border-left: 5px solid #78FA89;
 168 }
 169 .form-validated .ng-invalid:not(form), input[formcontrolname].ng-invalid {
 170   border-left: 5px solid #FA787E;
 171 }
 172
 173 .invalid {
 174   border-left: 5px solid #FA787E;
 175 }
 176
 177 /* Typical form CSS.
 178  * Brings font size down 5% to squeeze a bit more in.
 179  * Bold labels
 180  * Fixes some bootstrap margin funkiness with checkboxes for
 181  * better vertical alignment.
 182  * Optional faint odd or even row striping.
 183  */
 184 .common-form {
 185   font-size: 95%;
 186 }
 187 .common-form .row {
 188   margin: 5px;
 189   padding: 3px;
 190 }
 191
 192 .common-form label {
 193   font-weight: bold;
 194 }
 195
 196 .common-form.striped-even .row:nth-child(even) {
 197   background-color: rgba(0,0,0,.03);
 198   border-top: 1px solid rgba(0,0,0,.125);
 199   border-bottom: 1px solid rgba(0,0,0,.125);
 200 }
 201 .common-form.striped-odd .row:nth-child(odd) {
 202   background-color: rgba(0,0,0,.03);
 203   border-top: 1px solid rgba(0,0,0,.125);
 204   border-bottom: 1px solid rgba(0,0,0,.125);
 205 }
 206
 207
 208 /**
 209  * Only display the print container when printing
 210  */
 211 #eg-print-container {
 212     display: none;
 213 }
 214 @media print {
 215   head {display: none} /* just to be safe */
 216   body div:not([id="eg-print-container"]) {display: none}
 217   div {display: none}
 218   @page {size: auto} /* work around Bootrap 4's default
 219                         of A3; specifying any paper
 220                         size stops browsers from letting
 221                         the user choose portrait or
 222                         landscape. LP#1986725 */
 223   #eg-print-container {display: block}
 224   #eg-print-container div {display: block}
 225   #eg-print-container pre {border: none}
 226 }
 227
 228 /**
 229  * Make sure that comboboxes (including org select
 230  * are visible, even in nested modals.
 231  *
 232  * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
 233  * for the upstream issue that necessitates this.
 234  */
 235 body>.dropdown-menu {z-index: 2100;}
 236
 237 /* Styles for eg-daterange-select that don't work
 238  * in the component's CSS file.
 239  */
 240 .ngb-dp-day:not(.disabled) .daterange-day.focused {
 241   background-color: #e6e6e6;
 242 }
 243 .ngb-dp-day:not(.disabled) .daterange-day.range, .ngb-dp-day:not(.disabled) .daterange-day:hover {
 244   background-color: #129a78;
 245   color: white;
 246   font-size: 1.4em;
 247 }
 248 .ngb-dp-day:not(.disabled) .daterange-day.faded {
 249   background-color: #c9efe4;
 250   color: black;
 251 }
 252
 253 /* Washed out version of the Bootstrap 'info' background.
 254  * Useful for blocking out sections of a page/form without it
 255  * being so intensely colorful */
 256 .bg-faint {
 257   /*background-color: rgb(204, 229, 255, 0.3);*/
 258
 259   /* d9edf7 */
 260   /*background-color: rgb(217, 237, 247, 0.5);*/
 261
 262   background-color: rgba(0,0,0,.03);
 263 }
 264
 265 /* Allow for larger XL dialogs */
 266 @media (min-width: 1300px) { .modal-xl { max-width: 1200px; } }
 267 @media (min-width: 1600px) { .modal-xl { max-width: 1500px; } }
 268 @media (min-width: 1700px) { .modal-xl { max-width: 1600px; } }
 269
 270 /**
 271  * Make the acquisitions search form's navigation tabs match
 272  * those of the staff interface. This is a global rule because
 273  * various approaches to doing it local to the acq search component
 274  * don't work:
 275  *
 276  * 1. A rule bound to the container of the acq search tabset
 277  *    would make the entire background be grey.
 278  * 2. ":host ::ng-deep" for a local rule works, but depends on a
 279  *    mechanism that is deprecated.
 280  * 4. ng-tabset provides no hooks for custom styles for the nav-tab
 281  *    background.
 282  * 5. Turning off view encapsulation for the acq search component
 283  *    breaks a lot of styles.
 284  */
 285 #acq-search-page ngb-tabset .nav.nav-tabs {
 286   background-color: rgb(247, 247, 247);
 287 }
 288
 289 /* style for negative monetary values */
 290 .negative-money-amount {
 291     color: red;
 292 }
 293
 294 input.medium {
 295   width: 6em;
 296 }
 297
 298 input.small {
 299   width: 4em;
 300 }
 301