Open-ILS/src/eg2/src/app/share/grid/grid.component.css

   1
   2 .eg-grid {
   3     width: 100%;
   4     color: rgba(0,0,0,.87);
   5 }
   6
   7 .eg-grid-row {
   8     display: flex;
   9     border-bottom: 1px solid rgba(0,0,0,.12);
  10     padding-left: 10px;
  11     padding-right: 10px;
  12 }
  13
  14 .eg-grid-header-row {
  15   /* matches bootstrap card-header css */
  16   background-color: rgba(0,0,0,.03);
  17   border-bottom: 1px solid rgba(0,0,0,.125);
  18 }
  19
  20 .eg-grid-body {
  21     outline: none; /* for keyboard events */
  22 }
  23
  24 .eg-grid-body-row {
  25 }
  26
  27 .eg-grid-body-row.selected,
  28 .eg-grid-column-config-dialog .visible {
  29   color: #004085;
  30   background-color: #cce5ff;
  31   border-color: #b8daff;
  32 }
  33
  34 .eg-grid-header-cell {
  35     font-weight: bold;
  36 }
  37
  38 .eg-grid-header-cell.dragover {
  39     background-color: #cce5ff;
  40     border-color: #b8daff;
  41 }
  42
  43 .eg-grid-header-cell-sort-label {
  44   cursor: pointer;
  45   text-decoration: underline;
  46 }
  47
  48 .eg-grid-header-cell-sort-arrow {
  49   font-size: 14px;
  50 }
  51
  52 .eg-grid-cell {
  53     flex: 2; /* applied per column */
  54     padding: 6px;
  55     white-space: nowrap;
  56     text-overflow: ellipsis;
  57     overflow: hidden;
  58 }
  59
  60 /* allow tooltips to be wider than the default 200px */
  61 .eg-grid-cell .tooltip-inner {
  62   max-width: 400px;
  63 }
  64
  65 /* in overflow mode, allow white space to wrap so the
  66  * full contents of the cell can be seen inline.  leaving
  67  * text-overflow and overlow as-is means long strings with
  68  * no space will still be truncated with ellipses to avoid
  69  * inconsistent grid column widths
  70  */
  71 .eg-grid-cell-overflow {
  72     white-space: normal;
  73 }
  74
  75 .eg-grid-body-cell {
  76 }
  77
  78 .eg-grid-toolbar {
  79   display: flex;
  80 }
  81
  82 .eg-grid-toolbar .material-icons {
  83   font-size: 20px;
  84 }
  85
  86 .eg-grid-toolbar .form-check-label:nth-child(even) {
  87   padding-left: 5px;
  88   padding-right: 5px;
  89   margin-left: 3px;
  90   margin-right: 3px;
  91   border-radius: 5px;
  92   background-color: rgba(0,0,0,.03);
  93   border: 1px solid rgba(0,0,0,.125);
  94 }
  95
  96 /* Kind of hacky -- only way to get a toolbar button with no
  97  * mat icon to line up horizontally with mat icon buttons */
  98 .eg-grid-toolbar .text-button {
  99   padding-top: 11px;
 100   padding-bottom: 11px;
 101 }
 102
 103 .eg-grid-cell-skinny {
 104   width: 2.2em;
 105   text-align: center;
 106   flex: none;
 107 }
 108
 109 .eg-grid-flair-cell {
 110   /* mat icons currently 22px, unclear why it needs this much space */
 111   width: 34px;
 112   text-align: center;
 113   flex: none;
 114 }
 115
 116 /* depends on width of .eg-grid-cell-skinny */
 117 .eg-grid-column-width-header {
 118   width: 4.4em;
 119   text-align: center;
 120   flex: none;
 121   display: inline-flex;
 122   vertical-align: middle;
 123   align-items: center;
 124 }
 125
 126 .eg-grid-column-width-config .eg-grid-cell {
 127     border-left: 2px dashed grey;
 128 }
 129
 130 .eg-grid-column-width-icon {
 131   cursor: pointer;
 132   font-size: 18px;
 133   color: #007bff;
 134 }
 135
 136 .eg-grid-column-config-dialog {
 137   height: auto;
 138   max-height: 400px;
 139   overflow: auto;
 140   box-shadow: none;
 141 }
 142