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-cell {
  35     flex: 2; /* applied per column */
  36     padding: 6px;
  37     white-space: nowrap;
  38     text-overflow: ellipsis;
  39     overflow: hidden;
  40 }
  41
  42 /* allow tooltips to be wider than the default 200px */
  43 .eg-grid-cell .tooltip-inner {
  44   max-width: 400px;
  45 }
  46
  47 /* in overflow mode, allow white space to wrap so the
  48  * full contents of the cell can be seen inline.  leaving
  49  * text-overflow and overlow as-is means long strings with
  50  * no space will still be truncated with ellipses to avoid
  51  * inconsistent grid column widths
  52  */
  53 .eg-grid-cell-overflow {
  54     white-space: normal;
  55 }
  56
  57 .eg-grid-body-cell {
  58 }
  59
  60 .eg-grid-body-cell a[href] {
  61     text-decoration: underline !important;
  62 }
  63
  64 .eg-grid-header-cell {
  65   font-weight: bold;
  66   white-space: normal;
  67 }
  68
  69 .eg-grid-header-cell.dragover {
  70     background-color: #cce5ff;
  71     border-color: #b8daff;
  72 }
  73
  74 .eg-grid-header-cell-sort-label {
  75   cursor: pointer;
  76   text-decoration: underline;
  77   font-weight: bold;
  78 }
  79
  80 .eg-grid-header-cell-sort-arrow {
  81   font-size: 14px;
  82 }
  83
  84 .eg-grid-toolbar {
  85   display: flex;
  86 }
  87
  88 .eg-grid-toolbar .material-icons {
  89   font-size: 20px;
  90 }
  91
  92 /* Kind of hacky -- only way to get a toolbar button with no
  93  * mat icon to line up horizontally with mat icon buttons */
  94 .eg-grid-toolbar .text-button {
  95   padding-top: 11px;
  96   padding-bottom: 11px;
  97 }
  98
  99 /* make buttons and links match when focused */
 100 .eg-grid-toolbar .dropdown-item:focus,
 101 .eg-grid-toolbar .dropdown-item:hover,
 102 .eg-grid-column-config-dialog button:focus,
 103 .eg-grid-column-width-config button:focus {
 104   outline: 2px solid var(--primary);
 105 }
 106
 107 .button-adjacent-label {
 108     vertical-align: inherit;
 109     cursor: auto;
 110 }
 111
 112 .button-adjacent-label.disabled {
 113     opacity: .65;
 114 }
 115
 116 .eg-grid-cell-skinny {
 117   width: 2em;
 118   text-align: center;
 119   flex: none;
 120 }
 121
 122 .eg-grid-cell-skinny-2 {
 123   width: 2.6em;
 124   flex: none;
 125 }
 126
 127 .eg-grid-flair-cell {
 128   /* mat icons currently 22px, unclear why it needs this much space */
 129   width: 34px;
 130   text-align: center;
 131   flex: none;
 132 }
 133
 134 /* depends on width of .eg-grid-cell-skinny */
 135 .eg-grid-column-width-header {
 136   width: 4.6em;
 137   text-align: center;
 138   flex: none;
 139   display: inline-flex;
 140   vertical-align: middle;
 141   align-items: center;
 142 }
 143
 144 .eg-grid-column-width-config .eg-grid-cell {
 145     border-left: 2px dashed grey;
 146 }
 147
 148 .eg-grid-column-width-icon {
 149   cursor: pointer;
 150   font-size: 18px;
 151   color: #007bff;
 152 }
 153
 154 .eg-grid-column-config-dialog {
 155   height: auto;
 156   max-height: 400px;
 157   overflow: auto;
 158   box-shadow: none;
 159 }
 160
 161 .eg-grid-filter-control-cell {
 162   white-space: normal;
 163 }
 164 .eg-grid-col-is-filtered {
 165     background: lightblue;
 166 }
 167 .eg-grid-filter-menu {
 168   min-width: 17rem;
 169 }
 170
 171 .eg-grid-sticky-header {
 172   position: sticky;
 173   top: 50px;
 174   background: white;
 175   z-index: 1;
 176 }
 177
 178 .eg-grid-filter-operator {
 179   font-style: italic;
 180 }
 181
 182 /* override the dropdown menu effects for the filter menus */
 183 .eg-grid-filter-menu .dropdown-item:active {
 184   color: #212529;
 185   background-color: transparent;
 186 }
 187 .eg-grid-filter-menu .dropdown-item:hover {
 188   background-color: transparent;
 189 }
 190
 191 /* Popovers have a too-narrow max-width.  Override it */
 192 .popover {
 193     max-width: initial;
 194 }