Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
/**
2 
* Reportbuilder.
3 
*/
4 
 
5 
/* Table */
6 
#page-admin-reportbuilder-edit {
7 
    background-color: $container-bg;
8 
 
9 
    &.theme-dark {
10 
        background-color: $dm-container-bg;
11 
    }
12 
 
13 
    .page-popup-wrapper {
14 
        margin-top: 65px;
15 
        padding: 0;
16 
    }
17 
}
18 
 
19 
.reportbuilder-table {
20 
    td {
21 
        @extend .align-middle;
22 
    }
23 
}
24 
 
25 
/* Filters */
26 
.reportbuilder-wrapper {
27 
    .filters-dropdown {
28 
        //width: 27rem;
29 
        width: max-content;
30 
        padding: 0;
31 
 
32 
        @include media-breakpoint-between(xs, sm) {
33 
            width: 100%;
34 
        }
35 
 
36 
        .custom-select {
37 
            margin-top: 0!important;
38 
            height: 36px;
39 
            padding-top: 8px;
40 
            padding-bottom: 8px;
41 
            padding-left: 1rem;
42 
 
43 
            font-size: $font-size-xs;
44 
 
45 
            color: $dm-custom-select-color;
46 
            background: $dm-custom-select-bg $dm-custom-select-background;
47 
            border-color: $dm-custom-select-border-color;
48 
        }
49 
 
50 
        .filter {
51 
            padding: 0 16px 10px;
52 
            margin: 0 -16px 13px!important;
53 
        }
54 
 
55 
        .btn {
56 
            padding: 8px 14px;
57 
            font-size: $font-size-xs;
58 
        }
59 
 
60 
        .btn-link {
61 
            color: $dropdown-link-color;
62 
 
63 
            .theme-dark & {
64 
                color: $dm-dropdown-link-color;
65 
            }
66 
 
67 
            &:hover {
68 
                color: $dropdown-link-hover-color;
69 
 
70 
                .theme-dark & {
71 
                    color: $dm-dropdown-link-hover-color;
72 
                }
73 
            }
74 
        }
75 
    }
76 
 
77 
    .reportbuilder-filters-wrapper,
78 
    .reportbuilder-conditions-list {
79 
        .mform {
80 
            &.full-width-labels {
81 
                .fitem.row {
82 
 
83 
                    >.col-md-3,
84 
                    >.col-md-9 {
85 
                        flex: 0 0 100%;
86 
                        max-width: 100%;
87 
                    }
88 
 
89 
                    .fdate_selector {
90 
                        flex-wrap: wrap;
91 
                    }
92 
                }
93 
            }
94 
 
95 
            .form-group {
96 
                margin-bottom: 0!important;
97 
                max-width: 100%;
98 
 
99 
                >span {
100 
                    max-width: 100%;
101 
                }
102 
            }
103 
        }
104 
 
105 
        .filter {
106 
            .filter-header {
107 
                font-size: $font-size-xs;
108 
 
109 
                .filter-name {
110 
                    white-space: nowrap;
111 
                    overflow: hidden;
112 
                    text-overflow: ellipsis;
113 
                    padding-right: 1rem;
114 
                }
115 
 
116 
                .filter-name:hover {
117 
                    white-space: normal;
118 
                    text-overflow: clip;
119 
                    word-break: break-all;
120 
                }
121 
            }
122 
        }
123 
    }
124 
}
125 
 
126 
/**
127 
* Styled scrollbar with left padding for webkit browsers.
128 
*/
129 
@mixin reportbuilder-scrollbar() {
130 
    $inner-scrollbar-thumb: $secondary;
131 
    $inner-scrollbar-track: lighten($secondary, 40%);
132 
 
133 
    &::-webkit-scrollbar {
134 
        -webkit-appearance: none;
135 
        appearance: none;
136 
    }
137 
 
138 
    &::-webkit-scrollbar-thumb {
139 
        background-color: $inner-scrollbar-thumb;
140 
        border-left: 5px solid $white;
141 
    }
142 
 
143 
    &::-webkit-scrollbar-track {
144 
        background-color: $inner-scrollbar-track;
145 
        border-left: 5px solid $white;
146 
    }
147 
}
148 
 
149 
/**
150 
* Custom Reports.
151 
*/
152 
 
153 
$rb-left-sidebar-width: 250px;
154 
$rb-right-sidebar-width: 350px;
155 
 
156 
.reportbuilder-report-container {
157 
    min-width: 0;
158 
}
159 
 
160 
// Allow horizontal scroll in editor table.
161 
.reportbuilder-editor-table-container {
162 
    overflow-x: auto;
163 
}
164 
 
165 
/* Custom table headers */
166 
.reportbuilder-table th {
167 
 
168 
    button[data-action="report-remove-column"],
169 
    span[data-drag-type="move"] {
170 
        .icon {
171 
            width: 18px;
172 
            height: 18px;
173 
            vertical-align: text-top;
174 
            color: $body-color;
175 
        }
176 
    }
177 
 
178 
    button[data-action="report-remove-column"] .icon {
179 
        margin-right: 0;
180 
    }
181 
}
182 
 
183 
/* Sidebar menu */
184 
.reportbuilder-sidebar-menu {
185 
    @include media-breakpoint-up(lg) {
186 
        width: $rb-left-sidebar-width;
187 
        flex-shrink: 0;
188 
    }
189 
 
190 
    .card-body .list-group-item-action {
191 
        border: 1px solid $border-color;
192 
        border-radius: $btn-border-radius;
193 
 
194 
        width: calc(100% - 4px);
195 
        margin: 1px 2px;
196 
        padding: 4px 4px 4px 11px !important;
197 
 
198 
        &.text-muted {
199 
            margin-top: 10px;
200 
            border: 0;
201 
        }
202 
 
203 
        .theme-dark & {
204 
            border-color: $dm-border-color;
205 
        }
206 
 
207 
        .icon {
208 
            width: 18px;
209 
            height: 18px;
210 
        }
211 
    }
212 
}
213 
 
214 
.reportbuilder-sidebar-menu-cards {
215 
    overflow-y: auto;
216 
    @include thin-scrolls($scroll-bg-track);
217 
 
218 
    .theme-dark & {
219 
        @include thin-scrolls($dm-drawer-scroll-bg-track);
220 
    }
221 
}
222 
 
223 
/* Settings sidebar */
224 
.reportbuilder-sidebar-settings {
225 
    overflow-y: auto;
226 
    @include thin-scrolls($scroll-bg-track);
227 
 
228 
    .theme-dark & {
229 
        @include thin-scrolls($dm-drawer-scroll-bg-track);
230 
    }
231 
 
232 
    @include media-breakpoint-up(lg) {
233 
        width: $rb-right-sidebar-width;
234 
        flex-shrink: 0;
235 
    }
236 
 
237 
    .list-group-item {
238 
        padding: .3rem .75rem;
239 
 
240 
        .icon {
241 
            width: 18px;
242 
            height: 18px;
243 
 
244 
            color: $body-color;
245 
        }
246 
 
247 
        button[data-action="report-remove-filter"],
248 
        button[data-action="report-remove-condition"] {
249 
            .icon {
250 
                margin-right: 0;
251 
                vertical-align: text-top;
252 
            }
253 
        }
254 
 
255 
        span[data-drag-type="move"] .icon {
256 
            vertical-align: text-top;
257 
        }
258 
    }
259 
 
260 
    div[data-region="settings-sorting"] .list-group-item span[data-drag-type="move"] .icon {
261 
        vertical-align: middle;
262 
    }
263 
 
264 
    div[data-region="settings-cardview"] form {
265 
 
266 
        .col-md-3,
267 
        .col-md-9 {
268 
            flex: 1 1;
269 
            max-width: initial;
270 
        }
271 
 
272 
        div[data-fieldtype="submit"] {
273 
            flex-basis: auto;
274 
        }
275 
    }
276 
 
277 
    .inplaceeditable.inplaceeditingon input {
278 
        width: 100%;
279 
    }
280 
}
281 
 
282 
/* Add button styles when a toggle button is active. */
283 
// .reportbuilder-wrapper {
284 
//     button.btn-outline-secondary[data-toggle="collapse"]:not(.collapsed),
285 
//     .dropdown.show button.btn-outline-secondary[data-toggle="dropdown"] {
286 
//         color: color-yiq($gray-600);
287 
//         background-color: $gray-600;
288 
//         border-color: $gray-600;
289 
//     }
290 
// }
291 
 
292 
/* Drag&drop styles. */
293 
.reportbuilder-sortable-list li,
294 
.reportbuilder-table th,
295 
.reportbuilder-conditions-list .condition {
296 
    &.sortable-list-current-position {
297 
        background-color: lighten($primary, 40%);
298 
    }
299 
 
300 
    &.sortable-list-is-dragged {
301 
        background-color: $white;
302 
        opacity: 0.85;
303 
    }
304 
}
305 
 
306 
/* Reportbuilder full page styles. */
307 
@include media-breakpoint-up(lg) {
308 
    $tabs-height: 60px;
309 
    $sidebar-margin-top: $navbar-height + $tabs-height + 20px;
310 
 
311 
    .path-admin-reportbuilder.pagelayout-popup {
312 
 
313 
        // Fix for behat-site defined in theme/alpha/scss/moodle/debug.scss:7 is not needed. Override it.
314 
        &.behat-site .fixed-top {
315 
            position: fixed;
316 
        }
317 
 
318 
        #region-main {
319 
            border: none;
320 
            padding: 0;
321 
        }
322 
 
323 
        #maincontent {
324 
            visibility: hidden;
325 
        }
326 
 
327 
        .dynamictabs .nav-tabs {
328 
            background-color: $gray-100;
329 
            position: fixed;
330 
            top: 70px;
331 
            z-index: $zindex-fixed;
332 
            max-width: calc(100% - 40px);
333 
            width: max-content;
334 
            border-radius: $btn-border-radius;
335 
            padding-top: 0;
336 
            margin-bottom: 0 !important;
337 
        }
338 
 
339 
        .dynamictabs .tab-content {
340 
            padding-top: $tabs-height + 20px;
341 
        }
342 
 
343 
        .reportbuilder-sidebar-menu {
344 
            position: absolute;
345 
 
346 
            .reportbuilder-sidebar-menu-cards {
347 
                max-height: calc(100vh - #{$sidebar-margin-top} - 52px); // 52px corresponds to "search" input size.
348 
            }
349 
        }
350 
 
351 
        .reportbuilder-sidebar-settings {
352 
            position: absolute;
353 
            right: 30px;
354 
            max-height: calc(100vh - #{$sidebar-margin-top});
355 
        }
356 
 
357 
        .reportbuilder-report[data-editing] .reportbuilder-report-container {
358 
            max-height: calc(100vh - #{$sidebar-margin-top});
359 
            overflow-y: auto;
360 
            @include thin-scrolls($scroll-bg-track);
361 
 
362 
            .theme-dark & {
363 
                @include thin-scrolls($dm-drawer-scroll-bg-track);
364 
            }
365 
 
366 
            margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
367 
            margin-right: calc(#{$rb-right-sidebar-width} + 1rem);
368 
        }
369 
 
370 
        .reportbuilder-audiences-container {
371 
            margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
372 
        }
373 
    }
374 
}
375 
 
376 
.theme-dark.path-admin-reportbuilder .nav-tabs {
377 
    background-color: $dm-gray-100!important;
378 
}
379 
 
380 
/* Toggle cards. */
381 
.reportbuilder-toggle-card {
382 
    .card-header {
383 
        border-bottom: none;
384 
    }
385 
 
386 
    .card-body {
387 
        border-top: $card-border-width solid $card-border-color;
388 
 
389 
        .theme-dark & {
390 
            border-color: $dm-border-color;
391 
        }
392 
    }
393 
 
394 
    .toggle-card-button {
395 
        i.toggle-card-icon {
396 
            color: $gray-600;
397 
            font-size: 1.5em;
398 
            font-weight: 700;
399 
        }
400 
 
401 
        // Toggle icons using standard bootstrap collapse.
402 
        .collapsed-icon-container {
403 
            display: none;
404 
        }
405 
 
406 
        .expanded-icon-container {
407 
            display: inline-block;
408 
        }
409 
 
410 
        &.collapsed {
411 
            .collapsed-icon-container {
412 
                display: inline-block;
413 
            }
414 
 
415 
            .expanded-icon-container {
416 
                display: none;
417 
            }
418 
        }
419 
    }
420 
}
421 
 
422 
/**
423 
* Audiences.
424 
*/
425 
 
426 
.reportbuilder-audiences-container {
427 
 
428 
    /* 'OR' separator. */
429 
    .audience-separator {
430 
        text-transform: uppercase;
431 
 
432 
        &::before,
433 
        &::after {
434 
            content: '';
435 
            flex: 1;
436 
            border-bottom: 1px solid rgba(0, 0, 0, .125);
437 
        }
438 
 
439 
        &:not(:empty)::before {
440 
            margin-right: 1rem;
441 
        }
442 
 
443 
        &:not(:empty)::after {
444 
            margin-left: 1rem;
445 
        }
446 
    }
447 
 
448 
    /* Card action icons. */
449 
    .instance-card {
450 
        .card-header {
451 
            i.icon {
452 
                margin-right: 0;
453 
            }
454 
        }
455 
    }
456 
}
457 
 
458 
/* Report table card view styles */
459 
@mixin table-cards {
460 
    table.reportbuilder-table {
461 
        thead {
462 
            display: none;
463 
        }
464 
 
465 
        tr {
466 
            display: flex;
467 
            flex-direction: column;
468 
            margin: .5rem 0;
469 
            padding: .25rem .5rem 0 .5rem;
470 
            background-color: $card-bg !important;
471 
            /* stylelint-disable-line declaration-no-important */
472 
            word-wrap: break-word;
473 
            background-clip: border-box;
474 
            border: $card-border-width solid $card-border-color;
475 
            @include border-radius($card-border-radius);
476 
 
477 
            &:hover {
478 
                background-color: $card-bg !important;
479 
                /* stylelint-disable-line declaration-no-important */
480 
            }
481 
 
482 
            &.emptyrow {
483 
                display: none;
484 
            }
485 
 
486 
            &:not(.show) {
487 
                td[data-cardviewhidden] {
488 
                    display: none;
489 
                }
490 
            }
491 
 
492 
            td {
493 
                display: block;
494 
                min-height: 3.6rem;
495 
                padding: .5rem .25rem;
496 
                border: none;
497 
 
498 
                &::before {
499 
                    content: attr(data-cardtitle);
500 
                    display: block;
501 
                    text-transform: uppercase;
502 
                    font-size: 70%;
503 
                    color: $gray-800;
504 
                }
505 
 
506 
                &:not([data-cardtitle]) {
507 
                    min-height: 3rem;
508 
                }
509 
 
510 
                &:not(:first-child):not(.card-toggle) {
511 
                    border-top: $card-border-width solid $card-border-color;
512 
                }
513 
 
514 
                &:first-child {
515 
                    padding-right: 2rem;
516 
                }
517 
            }
518 
 
519 
            td.card-toggle {
520 
                display: block !important;
521 
                /* stylelint-disable-line declaration-no-important */
522 
                position: absolute;
523 
                right: 10px;
524 
 
525 
                button {
526 
                    padding: 0 .5rem;
527 
                    color: $gray-600;
528 
 
529 
                    i {
530 
                        font-size: 1.5em;
531 
                        font-weight: bold;
532 
                    }
533 
                }
534 
            }
535 
        }
536 
    }
537 
}
538 
 
539 
/* Report table card view for small screens */
540 
.reportbuilder-report[data-report-type="0"]:not([data-editing]) {
541 
    @include media-breakpoint-down(xs) {
542 
        @include table-cards;
543 
    }
544 
}