LP#1846042: take advantage of ngbDropdown container="body"
[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-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-header-cell {
61   font-weight: bold;
62   white-space: normal;
63 }
64
65 .eg-grid-header-cell.dragover {
66     background-color: #cce5ff;
67     border-color: #b8daff;
68 }
69
70 .eg-grid-header-cell-sort-label {
71   cursor: pointer;
72   text-decoration: underline;
73 }
74
75 .eg-grid-header-cell-sort-arrow {
76   font-size: 14px;
77 }
78
79 .eg-grid-toolbar {
80   display: flex;
81 }
82
83 .eg-grid-toolbar .material-icons {
84   font-size: 20px;
85 }
86
87 .eg-grid-toolbar .form-check-label:nth-child(even) {
88   padding-left: 5px;
89   padding-right: 5px;
90   margin-left: 3px;
91   margin-right: 3px;
92   border-radius: 5px;
93   background-color: rgba(0,0,0,.03);
94   border: 1px solid rgba(0,0,0,.125);
95 }
96
97 /* Kind of hacky -- only way to get a toolbar button with no 
98  * mat icon to line up horizontally with mat icon buttons */
99 .eg-grid-toolbar .text-button {
100   padding-top: 11px;
101   padding-bottom: 11px;
102 }
103
104 .eg-grid-cell-skinny {
105   width: 2.2em;
106   text-align: center;
107   flex: none;
108 }
109
110 .eg-grid-flair-cell {
111   /* mat icons currently 22px, unclear why it needs this much space */
112   width: 34px; 
113   text-align: center;
114   flex: none;
115 }
116
117 /* depends on width of .eg-grid-cell-skinny */
118 .eg-grid-column-width-header {
119   width: 4.4em;
120   text-align: center;
121   flex: none;
122   display: inline-flex;
123   vertical-align: middle;
124   align-items: center;
125 }
126
127 .eg-grid-column-width-config .eg-grid-cell {
128     border-left: 2px dashed grey;
129 }
130
131 .eg-grid-column-width-icon {
132   cursor: pointer;
133   font-size: 18px;
134   color: #007bff;
135 }
136
137 .eg-grid-column-config-dialog {
138   height: auto;
139   max-height: 400px;
140   overflow: auto;
141   box-shadow: none;
142 }
143
144 .eg-grid-filter-control-cell {
145   white-space: normal;
146 }
147 .eg-grid-col-is-filtered {
148     background: lightblue;
149 }
150 .eg-grid-filter-menu {
151   min-width: 17rem;
152 }
153
154 .eg-grid-sticky-header {
155   position: sticky;
156   top: 50px;
157   background: white;
158   z-index: 1;
159 }
160
161 .eg-grid-filter-operator {
162   font-style: italic;
163 }
164
165 /* override the dropdown menu effects for the filter menus */
166 .eg-grid-filter-menu .dropdown-item:active {
167   color: #212529;
168   background-color: transparent;
169 }
170 .eg-grid-filter-menu .dropdown-item:hover {
171   background-color: transparent;
172 }
173
174 /* Popovers have a too-narrow max-width.  Override it */
175 .popover {
176     max-width: initial;
177 }