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
}