LP#1831788: add result filtering and other improvements to the Angular eg-grid
[Evergreen.git] / 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
143 .eg-grid-filter-control-cell {
144     overflow: visible !important;
145 }
146 .eg-grid-col-is-filtered {
147     background: lightblue;
148 }
149 .eg-grid-filter-menu {
150   min-width: 17rem;
151 }
152
153 .eg-grid-sticky-header {
154   position: sticky;
155   top: 50px;
156   background: white;
157   z-index: 1;
158 }
159
160 .eg-grid-filter-operator {
161   font-style: italic;
162 }
163
164 /* override the dropdown menu effects for the filter menus */
165 .eg-grid-filter-menu .dropdown-item:active {
166   color: #212529;
167   background-color: transparent;
168 }
169 .eg-grid-filter-menu .dropdown-item:hover {
170   background-color: transparent;
171 }