]>
Commit | Line | Data |
---|---|---|
f67539c2 TL |
1 | @use './src/styles/vendor/variables' as vv; |
2 | @use './src/styles/defaults/mixins'; | |
e306af50 TL |
3 | |
4 | @mixin row-details-icon { | |
f67539c2 | 5 | color: vv.$gray-900; |
e306af50 TL |
6 | font-family: 'ForkAwesome', sans-serif; |
7 | font-size: 1rem; | |
e306af50 TL |
8 | line-height: 1; |
9 | } | |
11fdf7f2 TL |
10 | |
11 | .dataTables_wrapper { | |
12 | margin-bottom: 25px; | |
20effc67 TL |
13 | // after bootstrap 8.0 the details table started to |
14 | // have an issue where the columns keep expanding to | |
15 | // infinity. | |
16 | // https://github.com/ceph/ceph/pull/40618#pullrequestreview-629010639 | |
17 | // making the max-width to 99.9% solves the issue as a temporary fix | |
18 | // until we get a conclusive fix, this needs to be kept. | |
19 | max-width: 99.9%; | |
f67539c2 | 20 | |
11fdf7f2 | 21 | .separator { |
f67539c2 TL |
22 | border-left: 1px solid vv.$datatable-divider-color; |
23 | display: inline-block; | |
11fdf7f2 | 24 | height: 30px; |
11fdf7f2 | 25 | margin-left: 5px; |
f67539c2 | 26 | padding-left: 5px; |
11fdf7f2 TL |
27 | vertical-align: middle; |
28 | } | |
9f95a23c | 29 | |
11fdf7f2 | 30 | .widget-toolbar { |
f67539c2 | 31 | border-left: 1px solid vv.$datatable-divider-color; |
11fdf7f2 | 32 | float: right; |
11fdf7f2 | 33 | padding: 0 8px; |
9f95a23c TL |
34 | |
35 | .form-check { | |
36 | padding-left: 0; | |
37 | } | |
11fdf7f2 | 38 | } |
9f95a23c | 39 | |
11fdf7f2 TL |
40 | .dataTables_length > input { |
41 | line-height: 25px; | |
42 | text-align: right; | |
43 | } | |
44 | } | |
f67539c2 | 45 | |
11fdf7f2 | 46 | .dataTables_header { |
f67539c2 TL |
47 | background-color: vv.$gray-100; |
48 | border: 1px solid vv.$gray-400; | |
49 | border-bottom: 0; | |
11fdf7f2 TL |
50 | padding: 5px; |
51 | position: relative; | |
f67539c2 | 52 | |
9f95a23c | 53 | .cd-datatable-actions { |
11fdf7f2 TL |
54 | float: left; |
55 | } | |
f67539c2 | 56 | |
11fdf7f2 TL |
57 | .form-group { |
58 | padding-left: 8px; | |
59 | } | |
f67539c2 | 60 | |
11fdf7f2 | 61 | .input-group { |
f67539c2 | 62 | border-left: 1px solid vv.$datatable-divider-color; |
11fdf7f2 | 63 | float: right; |
f67539c2 | 64 | max-width: 250px; |
11fdf7f2 TL |
65 | padding-left: 8px; |
66 | padding-right: 8px; | |
67 | width: 40%; | |
f67539c2 | 68 | |
11fdf7f2 TL |
69 | .form-control { |
70 | height: 30px; | |
71 | } | |
11fdf7f2 | 72 | } |
f67539c2 | 73 | |
11fdf7f2 | 74 | .input-group.dataTables_paginate { |
11fdf7f2 TL |
75 | min-width: 85px; |
76 | padding-right: 8px; | |
f67539c2 | 77 | width: 8%; |
11fdf7f2 | 78 | } |
f67539c2 | 79 | |
9f95a23c TL |
80 | .filter-chips { |
81 | float: right; | |
82 | padding: 0 8px; | |
f67539c2 TL |
83 | |
84 | .badge-remove { | |
85 | color: vv.$white; | |
86 | } | |
9f95a23c | 87 | } |
11fdf7f2 TL |
88 | } |
89 | ||
f67539c2 TL |
90 | ::ng-deep cd-table .cd-datatable { |
91 | border: 1px solid vv.$gray-400; | |
11fdf7f2 TL |
92 | margin-bottom: 0; |
93 | max-width: none !important; | |
9f95a23c | 94 | |
11fdf7f2 TL |
95 | .progress-linear { |
96 | display: block; | |
11fdf7f2 | 97 | height: 5px; |
11fdf7f2 | 98 | margin: 0; |
f67539c2 TL |
99 | padding: 0; |
100 | position: relative; | |
101 | width: 100%; | |
9f95a23c | 102 | |
11fdf7f2 | 103 | .container { |
f67539c2 | 104 | background-color: vv.$primary; |
9f95a23c | 105 | |
11fdf7f2 | 106 | .bar { |
f67539c2 | 107 | background-color: vv.$primary; |
11fdf7f2 | 108 | height: 100%; |
f67539c2 | 109 | left: 0; |
11fdf7f2 | 110 | overflow: hidden; |
f67539c2 TL |
111 | position: absolute; |
112 | width: 100%; | |
11fdf7f2 | 113 | } |
9f95a23c | 114 | |
f67539c2 TL |
115 | .bar::before { |
116 | animation: progress-loading 3s linear infinite; | |
117 | background-color: vv.$primary; | |
11fdf7f2 | 118 | content: ''; |
f67539c2 TL |
119 | display: block; |
120 | height: 100%; | |
11fdf7f2 | 121 | left: -200px; |
f67539c2 | 122 | position: absolute; |
11fdf7f2 | 123 | width: 200px; |
11fdf7f2 TL |
124 | } |
125 | } | |
126 | } | |
9f95a23c | 127 | |
11fdf7f2 TL |
128 | .datatable-header { |
129 | background-clip: padding-box; | |
f67539c2 TL |
130 | background-color: vv.$gray-100; |
131 | background-image: linear-gradient(to bottom, vv.$gray-100 0, vv.$gray-200 100%); | |
11fdf7f2 TL |
132 | background-repeat: repeat-x; |
133 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0); | |
9f95a23c | 134 | |
11fdf7f2 TL |
135 | .sort-asc, |
136 | .sort-desc { | |
f67539c2 | 137 | color: vv.$primary; |
11fdf7f2 | 138 | } |
9f95a23c | 139 | |
11fdf7f2 | 140 | .datatable-header-cell { |
f67539c2 | 141 | @include mixins.table-cell; |
9f95a23c | 142 | |
11fdf7f2 | 143 | font-weight: bold; |
f67539c2 | 144 | text-align: left; |
9f95a23c | 145 | |
11fdf7f2 | 146 | .datatable-header-cell-label { |
f67539c2 | 147 | &::after { |
11fdf7f2 TL |
148 | font-family: ForkAwesome; |
149 | font-weight: 400; | |
150 | height: 9px; | |
151 | left: 10px; | |
152 | line-height: 12px; | |
153 | position: relative; | |
154 | vertical-align: baseline; | |
155 | width: 12px; | |
156 | } | |
157 | } | |
9f95a23c | 158 | |
11fdf7f2 | 159 | &.sortable { |
f67539c2 | 160 | .datatable-header-cell-label::after { |
11fdf7f2 TL |
161 | content: ' \f0dc'; |
162 | } | |
9f95a23c | 163 | |
11fdf7f2 | 164 | &.sort-active { |
f67539c2 | 165 | &.sort-asc .datatable-header-cell-label::after { |
11fdf7f2 TL |
166 | content: ' \f160'; |
167 | } | |
9f95a23c | 168 | |
f67539c2 | 169 | &.sort-desc .datatable-header-cell-label::after { |
11fdf7f2 TL |
170 | content: ' \f161'; |
171 | } | |
172 | } | |
173 | } | |
9f95a23c | 174 | |
11fdf7f2 | 175 | &:first-child { |
f67539c2 | 176 | border-left: 0; |
11fdf7f2 TL |
177 | } |
178 | } | |
179 | } | |
f67539c2 | 180 | |
11fdf7f2 | 181 | .datatable-body { |
9f95a23c TL |
182 | margin-bottom: -6px; |
183 | ||
11fdf7f2 | 184 | .empty-row { |
f67539c2 | 185 | background-color: lighten(vv.$primary, 45%); |
11fdf7f2 | 186 | font-style: italic; |
f67539c2 | 187 | font-weight: bold; |
11fdf7f2 | 188 | padding-bottom: 5px; |
f67539c2 TL |
189 | padding-top: 5px; |
190 | text-align: center; | |
11fdf7f2 | 191 | } |
f67539c2 | 192 | |
11fdf7f2 | 193 | .datatable-body-row { |
11fdf7f2 | 194 | &.clickable:hover .datatable-row-group { |
f67539c2 | 195 | background-color: lighten(vv.$primary, 45%); |
11fdf7f2 | 196 | transition-duration: 0.3s; |
f67539c2 | 197 | transition-property: background; |
11fdf7f2 TL |
198 | transition-timing-function: linear; |
199 | } | |
f67539c2 | 200 | |
11fdf7f2 | 201 | &.datatable-row-even { |
f67539c2 | 202 | background-color: vv.$white; |
11fdf7f2 | 203 | } |
f67539c2 | 204 | |
11fdf7f2 | 205 | &.datatable-row-odd { |
39ae355f | 206 | background-color: vv.$white; |
11fdf7f2 | 207 | } |
f67539c2 | 208 | |
11fdf7f2 TL |
209 | &.active, |
210 | &.active:hover { | |
f67539c2 | 211 | background-color: lighten(vv.$primary, 35%); |
11fdf7f2 | 212 | } |
f67539c2 | 213 | |
11fdf7f2 | 214 | .datatable-body-cell { |
f67539c2 TL |
215 | @include mixins.table-cell; |
216 | ||
11fdf7f2 | 217 | &:first-child { |
f67539c2 | 218 | border-left: 0; |
11fdf7f2 | 219 | } |
f67539c2 | 220 | |
11fdf7f2 TL |
221 | .datatable-body-cell-label { |
222 | display: block; | |
e306af50 | 223 | height: 100%; |
11fdf7f2 TL |
224 | } |
225 | } | |
226 | } | |
f67539c2 | 227 | |
e306af50 | 228 | .datatable-row-detail { |
f67539c2 | 229 | border-bottom: 2px solid vv.$gray-400; |
f6b5b4d7 | 230 | overflow-y: visible !important; |
f67539c2 | 231 | padding: 20px; |
e306af50 | 232 | } |
f67539c2 | 233 | |
e306af50 TL |
234 | .expand-collapse-icon { |
235 | display: block; | |
236 | height: 100%; | |
237 | text-align: center; | |
f67539c2 | 238 | |
e306af50 TL |
239 | &:hover { |
240 | text-decoration: none; | |
241 | } | |
242 | } | |
f67539c2 TL |
243 | |
244 | .expand-collapse-icon-right::before { | |
e306af50 TL |
245 | @include row-details-icon; |
246 | content: '\f105'; | |
247 | } | |
f67539c2 TL |
248 | |
249 | .expand-collapse-icon-down::before { | |
e306af50 TL |
250 | @include row-details-icon; |
251 | content: '\f107'; | |
252 | } | |
11fdf7f2 | 253 | } |
f67539c2 | 254 | |
11fdf7f2 TL |
255 | .datatable-footer { |
256 | .selected-count, | |
257 | .page-count { | |
258 | font-style: italic; | |
f67539c2 TL |
259 | min-height: 2rem; |
260 | padding-left: 0.3rem; | |
261 | padding-top: 0.3rem; | |
11fdf7f2 | 262 | } |
11fdf7f2 | 263 | } |
9f95a23c TL |
264 | |
265 | .cd-datatable-checkbox { | |
266 | text-align: center; | |
39ae355f TL |
267 | |
268 | &:checked { | |
269 | accent-color: vv.$primary; | |
270 | } | |
9f95a23c | 271 | } |
11fdf7f2 TL |
272 | } |
273 | ||
274 | @keyframes progress-loading { | |
275 | from { | |
276 | left: -200px; | |
277 | width: 15%; | |
278 | } | |
f67539c2 | 279 | |
11fdf7f2 TL |
280 | 50% { |
281 | width: 30%; | |
282 | } | |
f67539c2 | 283 | |
11fdf7f2 TL |
284 | 70% { |
285 | width: 70%; | |
286 | } | |
f67539c2 | 287 | |
11fdf7f2 TL |
288 | 80% { |
289 | left: 50%; | |
290 | } | |
f67539c2 | 291 | |
11fdf7f2 TL |
292 | 95% { |
293 | left: 120%; | |
294 | } | |
f67539c2 | 295 | |
11fdf7f2 TL |
296 | to { |
297 | left: 100%; | |
298 | } | |
299 | } |