1 | @import "../global/variables.css";
|
2 |
|
3 | @value unit from "../global/global.css";
|
4 | @value height: calc(4 * unit);
|
5 | @value compensate: 2px;
|
6 | @value compensated: calc(height - compensate);
|
7 |
|
8 | .tableWrapper {
|
9 | position: relative;
|
10 | }
|
11 |
|
12 | .table {
|
13 | width: 100%;
|
14 |
|
15 | border-spacing: 0;
|
16 | }
|
17 |
|
18 | .userSelectNone {
|
19 | user-select: none;
|
20 | }
|
21 |
|
22 | .headerCell {
|
23 | & {
|
24 | composes: font-smaller-lower from "../global/global.css";
|
25 |
|
26 | box-sizing: border-box;
|
27 | height: calc(unit * 3);
|
28 | padding-right: calc(unit * 5);
|
29 |
|
30 | text-align: left;
|
31 | white-space: nowrap;
|
32 |
|
33 | color: var(--ring-secondary-color);
|
34 |
|
35 | font-weight: 200;
|
36 | }
|
37 |
|
38 | &:first-child {
|
39 | padding-left: calc(unit * 4);
|
40 | }
|
41 |
|
42 | &:last-child {
|
43 | width: 100%;
|
44 | padding-right: calc(unit * 4);
|
45 | }
|
46 |
|
47 | &:first-child:only-child {
|
48 | width: initial;
|
49 | max-width: none;
|
50 | }
|
51 |
|
52 | &.headerCellSorted {
|
53 | font-weight: 500;
|
54 | }
|
55 |
|
56 | &.headerCellSortable {
|
57 | cursor: pointer;
|
58 | }
|
59 |
|
60 | & .sorter {
|
61 | position: absolute;
|
62 |
|
63 | display: none;
|
64 |
|
65 | margin-left: 6px;
|
66 |
|
67 | user-select: none;
|
68 | }
|
69 |
|
70 | &.headerCellSortable .sorter {
|
71 | display: inline-block;
|
72 | }
|
73 | }
|
74 |
|
75 | .sortedUp .icon {
|
76 | transform: rotate(180deg);
|
77 | transform-origin: center 53%;
|
78 | }
|
79 |
|
80 | .caption {
|
81 | padding-top: unit;
|
82 | padding-bottom: 6px;
|
83 |
|
84 | text-transform: capitalize;
|
85 |
|
86 | color: var(--ring-text-color);
|
87 | border-bottom: none;
|
88 |
|
89 | font-size: var(--ring-font-size);
|
90 | font-weight: bold;
|
91 | line-height: var(--ring-line-height-lower);
|
92 | }
|
93 |
|
94 | .tableHead {
|
95 | &::after {
|
96 | position: absolute;
|
97 |
|
98 | width: 100%;
|
99 |
|
100 | height: 1px;
|
101 |
|
102 | content: "";
|
103 |
|
104 | background-color: var(--ring-line-color);
|
105 | }
|
106 | }
|
107 |
|
108 | .subHeaderFixed {
|
109 | &::after {
|
110 | position: absolute;
|
111 | top: 24px;
|
112 |
|
113 | height: 1px;
|
114 |
|
115 | content: "";
|
116 |
|
117 | background-color: var(--ring-line-color);
|
118 | }
|
119 | }
|
120 |
|
121 | .subHeader {
|
122 | &::after {
|
123 | right: calc(unit * 4);
|
124 | left: calc(unit * 4);
|
125 | }
|
126 | }
|
127 |
|
128 | .subHeaderFixed {
|
129 | position: fixed;
|
130 | z-index: var(--ring-fixed-z-index);
|
131 | top: 0;
|
132 |
|
133 | opacity: 0.9;
|
134 | background-color: var(--ring-content-background-color);
|
135 |
|
136 | &::after {
|
137 | right: 0;
|
138 | left: 0;
|
139 | }
|
140 | }
|
141 |
|
142 | .row {
|
143 | & {
|
144 | outline: none;
|
145 |
|
146 | line-height: compensated;
|
147 | }
|
148 |
|
149 | @nest .table:not(.disabledHover) &:hover {
|
150 | background-color: var(--ring-hover-background-color);
|
151 | }
|
152 | }
|
153 |
|
154 | .rowSelected {
|
155 | background-color: var(--ring-selected-background-color);
|
156 | }
|
157 |
|
158 | .rowFocused {
|
159 | background-color: var(--ring-hover-background-color);
|
160 |
|
161 |
|
162 | & .cell:nth-child(1) {
|
163 | box-shadow: inset 2px 0 var(--ring-main-color);
|
164 | }
|
165 | }
|
166 |
|
167 | .loadingOverlay {
|
168 | position: absolute;
|
169 | top: 0;
|
170 | right: 0;
|
171 | bottom: 0;
|
172 | left: 0;
|
173 |
|
174 | display: flex;
|
175 | align-items: center;
|
176 | justify-content: center;
|
177 |
|
178 | background-color: rgba(255, 255, 255, 0.5);
|
179 | }
|
180 |
|
181 | .cell {
|
182 | & {
|
183 | composes: ellipsis from "../global/global.css";
|
184 |
|
185 | box-sizing: content-box;
|
186 |
|
187 | min-width: 0;
|
188 |
|
189 | height: height;
|
190 | padding: 0;
|
191 | padding-right: calc(unit * 5);
|
192 |
|
193 | color: var(--ring-text-color);
|
194 | }
|
195 |
|
196 | &:first-child {
|
197 | padding-left: calc(unit * 4);
|
198 | }
|
199 |
|
200 | &:last-child {
|
201 | width: 100%;
|
202 |
|
203 |
|
204 |
|
205 | max-width: 0;
|
206 | padding-right: calc(unit * 4);
|
207 | }
|
208 |
|
209 | &:first-child {
|
210 | min-width: calc(unit * 37);
|
211 | max-width: calc(unit * 77);
|
212 | }
|
213 |
|
214 | &:first-child:only-child {
|
215 | width: initial;
|
216 | max-width: none;
|
217 | }
|
218 | }
|
219 |
|
220 | .cellUnlimited {
|
221 | width: 100%;
|
222 | }
|
223 |
|
224 | .cellRight {
|
225 | text-align: right;
|
226 | }
|
227 |
|
228 | .metaColumn {
|
229 | position: relative;
|
230 |
|
231 | float: left;
|
232 |
|
233 | height: 16px;
|
234 | padding-right: compensate;
|
235 |
|
236 | &.headerMetaColumn {
|
237 | padding-top: 1px;
|
238 | }
|
239 | }
|
240 |
|
241 | @value top: -3px;
|
242 |
|
243 | .dragHandle {
|
244 | top: top;
|
245 | left: calc(-2 * unit);
|
246 |
|
247 | cursor: grab;
|
248 |
|
249 | opacity: 0;
|
250 | }
|
251 |
|
252 |
|
253 | .dragHandle.dragHandle {
|
254 | position: absolute;
|
255 |
|
256 | height: calc(height - top);
|
257 | padding: 0;
|
258 | }
|
259 |
|
260 | .dragHandle.visibleDragHandle,
|
261 | .row:hover .dragHandle {
|
262 | opacity: 1;
|
263 | }
|
264 |
|
265 | .rowCollapseExpandButton {
|
266 | padding-right: calc(unit / 2);
|
267 | padding-left: 7px;
|
268 | }
|
269 |
|
270 | .draggingRow {
|
271 | z-index: var(--ring-overlay-z-index);
|
272 |
|
273 | background-color: var(--ring-hover-background-color);
|
274 |
|
275 | & .dragHandle {
|
276 | cursor: grabbing;
|
277 |
|
278 | opacity: 1;
|
279 |
|
280 | & svg {
|
281 | color: var(--ring-main-color);
|
282 | }
|
283 | }
|
284 | }
|