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