Proyectos de Subversion Moodle

Rev

Rev 11 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 11 Rev 1441
Línea 1... Línea -...
1 
/* course.less */
 - 
 
2 
 
 - 
 
3 
/* COURSE CONTENT */
 - 
 
4 
 
 - 
 
5 
.block_tree .tree_item.branch {
 - 
 
6 
    margin-left: 8px;
 - 
 
7 
}
 - 
 
8 
 
 - 
 
9 
.section {
 - 
 
10 
    .side {
 - 
 
11 
        &.left {
 - 
 
12 
            float: left;
 - 
 
13 
        }
 - 
 
14 
 
 - 
 
15 
        &.right {
 - 
 
16 
            float: right;
 - 
 
17 
            clear: right;
 - 
 
18 
        }
 - 
 
19 
        margin-top: 0.5rem;
 - 
 
20 
    }
 - 
 
21 
 
 - 
 
22 
    .spinner {
 - 
 
23 
        height: 16px;
 - 
 
24 
        width: 16px;
 - 
 
25 
    }
 - 
 
26 
 
 - 
 
27 
    .activity {
 - 
 
28 
        .spinner {
 - 
 
29 
            left: 100%;
 - 
 
30 
            position: absolute;
 - 
 
31 
        }
 - 
 
32 
 
 - 
 
33 
        /* The command block for each activity */
 - 
 
34 
        .actions {
 - 
 
35 
            position: absolute;
 - 
 
36 
            right: 0;
 - 
 
37 
            top: 0;
 - 
 
38 
            display: flex;
 - 
 
39 
        }
 - 
 
40 
 
 - 
 
41 
        .contentwithoutlink,
 - 
 
42 
        .activityinstance {
 - 
 
43 
            min-width: 40%;
 - 
 
44 
 
 - 
 
45 
            > a {
 - 
 
46 
                display: inline-flex;
 - 
 
47 
                align-items: center;
 - 
 
48 
            }
 - 
 
49 
 
 - 
 
50 
            .dimmed {
 - 
 
51 
                .activityicon {
 - 
 
52 
                    opacity: .5;
 - 
 
53 
                }
 - 
 
54 
            }
 - 
 
55 
        }
 - 
 
56 
 
 - 
 
57 
        .stealth {
 - 
 
58 
            color: $text-muted;
 - 
 
59 
        }
 - 
 
60 
        a.stealth,
 - 
 
61 
        a.stealth:hover {
 - 
 
62 
            color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
 - 
 
63 
        }
 - 
 
64 
 
 - 
 
65 
        &.indented {
 - 
 
66 
            .activity-item {
 - 
 
67 
                margin-left: map-get($spacers, 3);
 - 
 
68 
            }
 - 
 
69 
        }
 - 
 
70 
    }
 - 
 
71 
 
 - 
 
72 
    .label {
 - 
 
73 
        .contentwithoutlink,
 - 
 
74 
        .activityinstance {
 - 
 
75 
            padding-right: 32px;
 - 
 
76 
            display: block;
 - 
 
77 
            height: inherit;
 - 
 
78 
        }
 - 
 
79 
        @include media-breakpoint-up(sm) {
 - 
 
80 
            .mod-indent-outer {
 - 
 
81 
                padding-left: 24px;
 - 
 
82 
                display: block;
 - 
 
83 
            }
 - 
 
84 
        }
 - 
 
85 
    }
 - 
 
86 
 
 - 
 
87 
    .filler {
 - 
 
88 
        // This must be sized like an icon to fill the space.
 - 
 
89 
        width: 16px;
 - 
 
90 
        height: 16px;
 - 
 
91 
        padding: 0;
 - 
 
92 
        margin: 0 ($spacer * 0.5);
 - 
 
93 
        display: inline-block;
 - 
 
94 
    }
 - 
 
95 
 
 - 
 
96 
    .activity.editor_displayed {
 - 
 
97 
        a.editing_title,
 - 
 
98 
        .moodle-actionmenu {
 - 
 
99 
            display: none;
 - 
 
100 
        }
 - 
 
101 
 
 - 
 
102 
        div.activityinstance {
 - 
 
103 
            padding-right: initial;
 - 
 
104 
 
 - 
 
105 
            input {
 - 
 
106 
                margin-bottom: initial;
 - 
 
107 
                padding-top: initial;
 - 
 
108 
                padding-bottom: initial;
 - 
 
109 
                vertical-align: text-bottom;
 - 
 
110 
            }
 - 
 
111 
        }
 - 
 
112 
    }
 - 
 
113 
}
 - 
 
114 
 
 - 
 
115 
.section .activity .activityinstance {
 - 
 
116 
    display: inline-flex;
 - 
 
117 
    align-items: center;
 - 
 
118 
    margin-bottom: 1rem;
 - 
 
119 
}
 - 
 
120 
 
 - 
 
121 
.editing {
 - 
 
122 
    .section {
 - 
 
123 
        .activity {
 - 
 
124 
            .contentwithoutlink,
 - 
 
125 
            .activityinstance {
 - 
 
126 
                padding-right: 200px;
 - 
 
127 
            }
 - 
 
128 
            .mod-indent-outer {
 - 
 
129 
                /**
 - 
 
130 
                 * Add appropriate padding such that nothing overlaps the
 - 
 
131 
                 * absolute positioned move icon.
 - 
 
132 
                 */
 - 
 
133 
                padding-left: 2rem;
 - 
 
134 
            }
 - 
 
135 
        }
 - 
 
136 
    }
 - 
 
137 
    // Remove old spinners if the reactive state is ready.
 - 
 
138 
    .course-content .stateready .section .spinner {
 - 
 
139 
        display: none;
 - 
 
140 
    }
 - 
 
141 
    // New editing in progress spinners.
 - 
 
142 
    .editinprogress {
 - 
 
143 
        position: relative;
 - 
 
144 
 
 - 
 
145 
        & > * {
 - 
 
146 
            opacity: .4;
 - 
 
147 
        }
 - 
 
148 
 
 - 
 
149 
        .corelightbox,
 - 
 
150 
        .lightbox {
 - 
 
151 
            display: none;
 - 
 
152 
        }
 - 
 
153 
 
 - 
 
154 
        &:after {
 - 
 
155 
            @extend .fa-solid;
 - 
 
156 
            position: absolute;
 - 
 
157 
            font-size: 20px;
 - 
 
158 
            color: $gray-600;
 - 
 
159 
            content: fa-content($fa-var-spinner);
 - 
 
160 
            display: flex;
 - 
 
161 
            justify-content: center;
 - 
 
162 
            align-items: center;
 - 
 
163 
            width: 30px;
 - 
 
164 
            height: 30px;
 - 
 
165 
            left: calc(50% - 15px);
 - 
 
166 
            top: calc(50% - 15px);
 - 
 
167 
            animation: editinprogress-rotation 2s infinite linear;
 - 
 
168 
        }
 - 
 
169 
 
 - 
 
170 
        // Prevent inner editingprogress.
 - 
 
171 
        .editinprogress {
 - 
 
172 
            &:after {
 - 
 
173 
                display: none;
 - 
 
174 
            }
 - 
 
175 
        }
 - 
 
176 
    }
 - 
 
177 
}
 - 
 
178 
 
 - 
 
179 
@keyframes editinprogress-rotation {
 - 
 
180 
    0% {
 - 
 
181 
        opacity: 0;
 - 
 
182 
        transform: rotate(0deg);
 - 
 
183 
    }
 - 
 
184 
    50% {
 - 
 
185 
        opacity: 1;
 - 
 
186 
    }
 - 
 
187 
    100% {
 - 
 
188 
        opacity: 0;
 - 
 
189 
        transform: rotate(359deg);
 - 
 
190 
    }
 - 
 
191 
}
 - 
 
192 
 
 - 
 
193 
.editing_show + .editing_assign,
 - 
 
194 
.editing_hide + .editing_assign {
 - 
 
195 
    // if roles icon missing, add space
 - 
 
196 
    margin-left: 20px;
 - 
 
197 
}
 - 
 
198 
 
 - 
 
199 
.section .activity .commands {
 - 
 
200 
    white-space: nowrap;
 - 
 
201 
    display: inline-block;
 - 
 
202 
}
 - 
 
203 
 
 - 
 
204 
.section .activity.modtype_label.label {
 - 
 
205 
    font-weight: normal;
 - 
 
206 
 
 - 
 
207 
    // Remove min-height for labels so top and bottom paddings can be displayed more consistently.
 - 
 
208 
    .contentwithoutlink {
 - 
 
209 
        min-height: 0;
 - 
 
210 
    }
 - 
 
211 
 
 - 
 
212 
    // When activity information is shown remove the bottom margin for the last p/i elements.
 - 
 
213 
    &.hasinfo {
 - 
 
214 
        p:last-child,
 - 
 
215 
        i:last-child {
 - 
 
216 
            margin-bottom: 0;
 - 
 
217 
        }
 - 
 
218 
    }
 - 
 
219 
}
 - 
 
220 
 
 - 
 
221 
// The activity-wrapper class ensures these styles are not used when the new activity styles
 - 
 
222 
// from MDL-71691 are not affected. As soons as MDL-72656 is integrated and these styles
 - 
 
223 
// are removed the core_courseformat/local/content/cm template no longer needs this class.
 - 
 
224 
.section li.activity:not(.activity-wrapper) {
 - 
 
225 
    padding: 0.2em;
 - 
 
226 
    clear: both;
 - 
 
227 
 
 - 
 
228 
    &.hasinfo {
 - 
 
229 
        border-bottom: $border-width solid $table-border-color;
 - 
 
230 
        padding-top: map-get($spacers, 3);
 - 
 
231 
        padding-bottom: map-get($spacers, 3);
 - 
 
232 
 
 - 
 
233 
        &:last-child {
 - 
 
234 
            border-bottom: 0;
 - 
 
235 
            padding-bottom: 0;
 - 
 
236 
        }
 - 
 
237 
    }
 - 
 
238 
}
 - 
 
239 
 
 - 
 
240 
// Compensate for the border widths when dropzones are displayed.
 - 
 
241 
.course-content .section.dropready {
 - 
 
242 
 
 - 
 
243 
    &.main.drop-down {
 - 
 
244 
        border-bottom: 1px solid $dropzone-border;
 - 
 
245 
    }
 - 
 
246 
 
 - 
 
247 
    .course-section-header.dropready.drop-zone {
 - 
 
248 
        margin-top: -2px;
 - 
 
249 
    }
 - 
 
250 
 
 - 
 
251 
    li.activity.dropready.drop-down {
 - 
 
252 
        border-bottom: 1px solid $dropzone-border;
 - 
 
253 
        margin-bottom: -1px;
 - 
 
254 
    }
 - 
 
255 
 
 - 
 
256 
    li.activity.dropready.drop-up {
 - 
 
257 
        border-top: 1px solid $dropzone-border;
 - 
 
258 
        margin-top: -1px;
 - 
 
259 
    }
 - 
 
260 
}
 - 
 
261 
 
 - 
 
262 
.section .activity .activityinstance .groupinglabel {
 - 
 
263 
    padding-left: 30px;
 - 
 
264 
}
 - 
 
265 
 
 - 
 
266 
.section.main:not(.course-section) .activity .availabilityinfo,
 - 
 
267 
.section.main:not(.course-section) .activity .contentafterlink {
 - 
 
268 
    margin-top: 0.5em;
 - 
 
269 
    margin-left: 30px;
 - 
 
270 
}
 - 
 
271 
 
 - 
 
272 
.section .activity .contentafterlink p {
 - 
 
273 
    margin: .5em 0;
 - 
 
274 
}
 - 
 
275 
 
 - 
 
276 
.editing .section.main:not(.course-section) {
 - 
 
277 
    .activity:hover,
 - 
 
278 
    .activity.action-menu-shown,
 - 
 
279 
    .sectionname:hover {
 - 
 
280 
        background-color: $table-accent-bg;
 - 
 
281 
    }
 - 
 
282 
}
 - 
 
283 
 
 - 
 
284 
.course-content .current {
 - 
 
285 
    position: relative;
 - 
 
286 
}
 - 
 
287 
 
 - 
 
288 
.course-content .current::before {
 - 
 
289 
    border-left: $primary 3px solid;
 - 
 
290 
    bottom: 0;
 - 
 
291 
    content: "";
 - 
 
292 
    left: -8px;
 - 
 
293 
    position: absolute;
 - 
 
294 
    top: 0;
 - 
 
295 
}
 - 
 
296 
 
 - 
 
297 
.course-content .single-section .section-navigation {
 - 
 
298 
    display: block;
 - 
 
299 
    padding: 0.5em;
 - 
 
300 
    margin-bottom: -0.5em;
 - 
 
301 
}
 - 
 
302 
 
 - 
 
303 
.course-content .single-section .section-navigation .title {
 - 
 
304 
    font-weight: bold;
 - 
 
305 
    font-size: 108%;
 - 
 
306 
    clear: both;
 - 
 
307 
}
 - 
 
308 
 
 - 
 
309 
.course-content .single-section .section-navigation .mdl-left {
 - 
 
310 
    font-weight: normal;
 - 
 
311 
    float: left;
 - 
 
312 
    margin-right: 1em;
 - 
 
313 
}
 - 
 
314 
 
 - 
 
315 
.course-content .single-section .section-navigation .mdl-left .larrow {
 - 
 
316 
    margin-right: 0.1em;
 - 
 
317 
}
 - 
 
318 
 
 - 
 
319 
.course-content .single-section .section-navigation .mdl-right {
 - 
 
320 
    font-weight: normal;
 - 
 
321 
    float: right;
 - 
 
322 
    margin-left: 1em;
 - 
 
323 
}
 - 
 
324 
 
 - 
 
325 
.course-content .single-section .section-navigation .mdl-right .rarrow {
 - 
 
326 
    margin-left: 0.1em;
 - 
 
327 
}
 - 
 
328 
 
 - 
 
329 
.course-content .single-section .section-navigation .mdl-bottom {
 - 
 
330 
    margin-top: 0;
 - 
 
331 
}
 - 
 
332 
 
 - 
 
333 
.course-content ul li.section.main:not(.course-section) {
 - 
 
334 
    border-bottom: $border-width solid $table-border-color;
 - 
 
335 
    margin-top: 0;
 - 
 
336 
 
 - 
 
337 
    &:last-child {
 - 
 
338 
        border-bottom: 0;
 - 
 
339 
    }
 - 
 
340 
}
 - 
 
341 
 
 - 
 
342 
.course-content ul li.section.hidden:not(.course-section) {
 - 
 
343 
    .sectionname > span,
 - 
 
344 
    .content > div.summary,
 - 
 
345 
    .activity .activityinstance {
 - 
 
346 
        color: $text-muted;
 - 
 
347 
    }
 - 
 
348 
}
 - 
 
349 
 
 - 
 
350 
.course-content ul.topics,
 - 
 
351 
.course-content ul.weeks {
 - 
 
352 
    padding: 0;
 - 
 
353 
    margin: 0;
 - 
 
354 
    list-style: none;
 - 
 
355 
 
 - 
 
356 
    li.section {
 - 
 
357 
        .content {
 - 
 
358 
            margin: 0;
 - 
 
359 
            padding: 0;
 - 
 
360 
        }
 - 
 
361 
 
 - 
 
362 
        @include media-breakpoint-up(sm) {
 - 
 
363 
            .summary,
 - 
 
364 
            .content > .availabilityinfo {
 - 
 
365 
                margin-left: 25px;
 - 
 
366 
            }
 - 
 
367 
        }
 - 
 
368 
 
 - 
 
369 
        .left,
 - 
 
370 
        .right {
 - 
 
371 
            padding: 0 6px 0;
 - 
 
372 
            text-align: right;
 - 
 
373 
            width: auto;
 - 
 
374 
        }
 - 
 
375 
    }
 - 
 
376 
}
 - 
 
377 
 
 - 
 
378 
.course-content .single-section ul.topics li.section,
 - 
 
379 
.course-content .single-section ul.weeks li.section {
 - 
 
380 
    padding-top: 0;
 - 
 
381 
}
 - 
 
382 
 
 - 
 
383 
@include media-breakpoint-down(sm) {
 - 
 
384 
    body:not(.editing) {
 - 
 
385 
        .course-content ul.topics,
 - 
 
386 
        .course-content ul.weeks {
 - 
 
387 
            li.section {
 - 
 
388 
                .left,
 - 
 
389 
                .right {
 - 
 
390 
                    display: none;
 - 
 
391 
                }
 - 
 
392 
            }
 - 
 
393 
        }
 - 
 
394 
    }
 - 
 
395 
}
 - 
 
396 
 
 - 
 
397 
.course-content {
 - 
 
398 
    margin-top: 0;
 - 
 
399 
}
 - 
 
400 
 
 - 
 
401 
.course-content .hidden {
 - 
 
402 
    display: none;
 - 
 
403 
}
 - 
 
404 
 
 - 
 
405 
.course-content li {
 - 
 
406 
    &.section:not(.course-section) {
 - 
 
407 
        @include media-breakpoint-down(sm) {
 - 
 
408 
            ul {
 - 
 
409 
                padding-left: 0;
 - 
 
410 
            }
 - 
 
411 
        }
 - 
 
412 
        ul {
 - 
 
413 
            list-style: disc;
 - 
 
414 
 
 - 
 
415 
            ul {
 - 
 
416 
                list-style: circle;
 - 
 
417 
 
 - 
 
418 
                ul {
 - 
 
419 
                    list-style: square;
 - 
 
420 
                }
 - 
 
421 
            }
 - 
 
422 
        }
 - 
 
423 
 
 - 
 
424 
        li {
 - 
 
425 
            &.activity {
 - 
 
426 
                ul {
 - 
 
427 
                    list-style: disc;
 - 
 
428 
 
 - 
 
429 
                    ul {
 - 
 
430 
                        list-style: circle;
 - 
 
431 
 
 - 
 
432 
                        ul {
 - 
 
433 
                            list-style: square;
 - 
 
434 
                        }
 - 
 
435 
                    }
 - 
 
436 
                }
 - 
 
437 
            }
 - 
 
438 
        }
 - 
 
439 
 
 - 
 
440 
        .right {
 - 
 
441 
            > .icon:first-child {
 - 
 
442 
                /* Remove the spacer icon. */
 - 
 
443 
                display: none;
 - 
 
444 
            }
 - 
 
445 
        }
 - 
 
446 
    }
 - 
 
447 
}
 - 
 
448 
 
 - 
 
449 
.path-course-view.editing #region-main > .card-block {
 - 
 
450 
    padding-bottom: 13rem;
 - 
 
451 
}
 - 
 
452 
 
 - 
 
453 
.path-course-view .completionprogress {
 - 
 
454 
    margin-left: 25px;
 - 
 
455 
}
 - 
 
456 
 
 - 
 
457 
.path-course-view .completionprogress {
 - 
 
458 
    display: block;
 - 
 
459 
    float: right;
 - 
 
460 
    height: 20px;
 - 
 
461 
    position: relative;
 - 
 
462 
}
 - 
 
463 
 
 - 
 
464 
#page-site-index .subscribelink {
 - 
 
465 
    text-align: right;
 - 
 
466 
}
 - 
 
467 
 
 - 
 
468 
#site-news-forum h2,
 - 
 
469 
#frontpage-course-list h2,
 - 
 
470 
#frontpage-category-names h2,
 - 
 
471 
#frontpage-category-combo h2 {
 - 
 
472 
    margin-bottom: 9px;
 - 
 
473 
}
 - 
 
474 
 
 - 
 
475 
.path-course-view a.reduce-sections {
 - 
 
476 
    padding-left: 0.2em;
 - 
 
477 
}
 - 
 
478 
 
 - 
 
479 
.path-course-view .subscribelink {
 - 
 
480 
    text-align: right;
 - 
 
481 
}
 - 
 
482 
 
 - 
 
483 
.path-course-view .unread {
 - 
 
484 
    margin-left: 30px;
 - 
 
485 
}
 - 
 
486 
 
 - 
 
487 
.path-course-view .block.drag .header {
 - 
 
488 
    cursor: move;
 - 
 
489 
}
 - 
 
490 
 
 - 
 
491 
.path-course-view .completionprogress {
 - 
 
492 
    text-align: right;
 - 
 
493 
}
 - 
 
494 
 
 - 
 
495 
.path-course-view .single-section .completionprogress {
 - 
 
496 
    margin-right: 5px;
 - 
 
497 
}
 - 
 
498 
 
 - 
 
499 
.path-course-view li.activity span.autocompletion img {
 - 
 
500 
    vertical-align: text-bottom;
 - 
 
501 
    margin-left: 0;
 - 
 
502 
}
 - 
 
503 
 
 - 
 
504 
.path-course-view {
 - 
 
505 
    &.editing {
 - 
 
506 
        li.activity span.autocompletion img {
 - 
 
507 
            /* Use the same spacing as the filler. */
 - 
 
508 
            margin-right: $spacer * 0.5;
 - 
 
509 
            margin-left: $spacer * 0.5;
 - 
 
510 
        }
 - 
 
511 
    }
 - 
 
512 
}
 - 
 
513 
 
 - 
 
514 
li.section.hidden span.commands a.editing_hide,
 - 
 
515 
li.section.hidden span.commands a.editing_show {
 - 
 
516 
    cursor: default;
 - 
 
517 
}
 - 
 
518 
 
 - 
 
519 
.single-section-page .header-action {
 - 
 
520 
    display: inline-block;
 - 
 
521 
}
 - 
 
522 
 
 - 
 
523 
input.titleeditor {
 - 
 
524 
    width: 330px;
 - 
 
525 
    vertical-align: text-bottom;
 - 
 
526 
}
 - 
 
527 
 
 - 
 
528 
span.editinstructions {
 - 
 
529 
    position: absolute;
 - 
 
530 
    top: 0;
 - 
 
531 
    margin-top: -22px;
 - 
 
532 
    margin-left: 30px;
 - 
 
533 
    font-size: $font-size-sm;
 - 
 
534 
    padding: .1em .4em;
 - 
 
535 
    text-decoration: none;
 - 
 
536 
    z-index: 9999;
 - 
 
537 
    border: $alert-border-width solid transparent;
 - 
 
538 
    width: fit-content;
 - 
 
539 
 
 - 
 
540 
    @include alert-variant(
 - 
 
541 
        theme-color-level('info', $alert-bg-level),
 - 
 
542 
        theme-color-level('info', $alert-border-level),
 - 
 
543 
        theme-color-level('info', $alert-color-level)
 - 
 
544 
    );
 - 
 
545 
}
 - 
 
546 
 
 - 
 
547 
/* COURSES LISTINGS AND COURSE SUMMARY */
 - 
 
548 
#page-course-pending .singlebutton,
 - 
 
549 
#page-course-index .singlebutton,
 - 
 
550 
#page-course-index-category .singlebutton,
 - 
 
551 
#page-course-editsection .singlebutton {
 - 
 
552 
    text-align: center;
 - 
 
553 
}
 - 
 
554 
 
 - 
 
555 
#page-admin-course-manage #movecourses td img {
 - 
 
556 
    margin: 0 .22em;
 - 
 
557 
    vertical-align: text-bottom;
 - 
 
558 
}
 - 
 
559 
 
 - 
 
560 
#page-course-pending .pendingcourserequests {
 - 
 
561 
    margin-bottom: 1em;
 - 
 
562 
}
 - 
 
563 
 
 - 
 
564 
#page-course-pending .pendingcourserequests .singlebutton {
 - 
 
565 
    display: inline;
 - 
 
566 
}
 - 
 
567 
 
 - 
 
568 
#page-course-pending .pendingcourserequests .cell {
 - 
 
569 
    padding: 0 5px;
 - 
 
570 
}
 - 
 
571 
 
 - 
 
572 
#page-course-pending .pendingcourserequests .cell.c6 {
 - 
 
573 
    white-space: nowrap;
 - 
 
574 
}
 - 
 
575 
 
 - 
 
576 
.coursebox {
 - 
 
577 
    display: flex;
 - 
 
578 
    flex-direction: column;
 - 
 
579 
    .info {
 - 
 
580 
        display: flex;
 - 
 
581 
        align-items: center;
 - 
 
582 
    }
 - 
 
583 
}
 - 
 
584 
 
 - 
 
585 
#frontpage-available-course-list,
 - 
 
586 
#frontpage-course-list,
 - 
 
587 
.course-search-result {
 - 
 
588 
    margin-top: $spacer * 0.5;
 - 
 
589 
    .coursebox {
 - 
 
590 
        padding: $spacer * 0.5;
 - 
 
591 
        border: $border-width solid $border-color;
 - 
 
592 
        margin-bottom: $spacer * 0.5;
 - 
 
593 
 
 - 
 
594 
        @include border-radius();
 - 
 
595 
    }
 - 
 
596 
}
 - 
 
597 
 
 - 
 
598 
.subcategories,
 - 
 
599 
#frontpage-category-names,
 - 
 
600 
#frontpage-category-combo {
 - 
 
601 
    .coursebox > .info > .coursename a {
 - 
 
602 
        display: block;
 - 
 
603 
        background-image: url([[pix:moodle|i/course]]);
 - 
 
604 
        background-repeat: no-repeat;
 - 
 
605 
        padding-left: 21px;
 - 
 
606 
        background-position: left 0.2em;
 - 
 
607 
    }
 - 
 
608 
}
 - 
 
609 
 
 - 
 
610 
.coursebox > .info > .coursename {
 - 
 
611 
    font-size: $font-size-base;
 - 
 
612 
    font-weight: normal;
 - 
 
613 
    margin: 5px;
 - 
 
614 
    padding: 0;
 - 
 
615 
}
 - 
 
616 
 
 - 
 
617 
.coursebox .content .teachers li {
 - 
 
618 
    list-style-type: none;
 - 
 
619 
    padding: 0;
 - 
 
620 
    margin: 0;
 - 
 
621 
}
 - 
 
622 
 
 - 
 
623 
.coursebox .customfieldname,
 - 
 
624 
.coursebox .customfieldseparator {
 - 
 
625 
    font-weight: $font-weight-bold;
 - 
 
626 
}
 - 
 
627 
 
 - 
 
628 
.coursebox .content .coursefile {
 - 
 
629 
    max-width: 100px;
 - 
 
630 
}
 - 
 
631 
 
 - 
 
632 
.coursebox .content .courseimage img {
 - 
 
633 
    max-width: 100px;
 - 
 
634 
    max-height: 100px;
 - 
 
635 
}
 - 
 
636 
 
 - 
 
637 
.coursebox .content .coursecat,
 - 
 
638 
.coursebox .content .summary,
 - 
 
639 
.coursebox .content .courseimage,
 - 
 
640 
.coursebox .content .coursefile,
 - 
 
641 
.coursebox .content .teachers,
 - 
 
642 
.coursebox.remotecoursebox .remotecourseinfo,
 - 
 
643 
.coursebox .content .customfields-container {
 - 
 
644 
    margin: 15px 5px 5px;
 - 
 
645 
    padding: 0;
 - 
 
646 
}
 - 
 
647 
 
 - 
 
648 
.category-browse {
 - 
 
649 
    .coursebox .content .coursecat,
 - 
 
650 
    .coursebox .content .summary,
 - 
 
651 
    .coursebox .content .courseimage,
 - 
 
652 
    .coursebox .content .coursefile,
 - 
 
653 
    .coursebox .content .teachers,
 - 
 
654 
    .coursebox.remotecoursebox .remotecourseinfo,
 - 
 
655 
    .coursebox .content .customfields-container {
 - 
 
656 
        margin-top: 0;
 - 
 
657 
    }
 - 
 
658 
}
 - 
 
659 
 
 - 
 
660 
.coursebox.collapsed > .content {
 - 
 
661 
    display: none;
 - 
 
662 
}
 - 
 
663 
 
 - 
 
664 
.courses > .paging.paging-morelink {
 - 
 
665 
    text-align: center;
 - 
 
666 
    padding: $spacer;
 - 
 
667 
}
 - 
 
668 
 
 - 
 
669 
.course_category_tree .category .numberofcourse {
 - 
 
670 
    font-size: $font-size-sm;
 - 
 
671 
}
 - 
 
672 
 
 - 
 
673 
.course_category_tree .category > .info > .categoryname {
 - 
 
674 
    margin: 5px;
 - 
 
675 
    font-size: $font-size-base;
 - 
 
676 
    font-weight: normal;
 - 
 
677 
    padding: 2px 18px;
 - 
 
678 
}
 - 
 
679 
 
 - 
 
680 
.course_category_tree .category.with_children > .info > .categoryname {
 - 
 
681 
    background-image: url([[pix:moodle|t/expanded]]);
 - 
 
682 
    background-repeat: no-repeat;
 - 
 
683 
    background-position: center left;
 - 
 
684 
}
 - 
 
685 
 
 - 
 
686 
.course_category_tree .category.with_children.collapsed > .info > .categoryname {
 - 
 
687 
    background-image: url([[pix:moodle|t/collapsed]]);
 - 
 
688 
}
 - 
 
689 
/* rtl:raw:
 - 
 
690 
.course_category_tree .category.with_children.collapsed > .info > .categoryname {
 - 
 
691 
    background-image:url([[pix:moodle|t/collapsed_rtl]]);
 - 
 
692 
}
 - 
 
693 
*/
 - 
 
694 
.course_category_tree .category.collapsed > .content {
 - 
 
695 
    display: none;
 - 
 
696 
}
 - 
 
697 
 
 - 
 
698 
.course_category_tree .category > .content {
 - 
 
699 
    padding-left: 16px;
 - 
 
700 
}
 - 
 
701 
 
 - 
 
702 
#page-course-index-category .categorypicker {
 - 
 
703 
    margin: 10px 0 20px;
 - 
 
704 
}
 - 
 
705 
 
 - 
 
706 
/**
 1 
/*
707 
 * Course management page
 2 
 * Course page styles.
708 
 * Palette
 - 
 
709 
 *
 - 
 
710 
 * Background (reg)         #F5F5F5
 - 
 
711 
 * Background (light        #fafafa
 - 
 
712 
 * Background (highlight)   #ddffaa
 - 
 
713 
 * Borders                  #e1e1e8
 - 
 
714 
 */
 - 
 
715 
#course-category-listings {
 - 
 
716 
    margin-bottom: 0;
 - 
 
717 
 
 - 
 
718 
    /** Two column layout */
 - 
 
719 
    &.columns-2 {
 - 
 
720 
        > #course-listing > div {
 - 
 
721 
            position: relative;
 - 
 
722 
            left: -1px;
 - 
 
723 
        }
 - 
 
724 
    }
 - 
 
725 
    /** Three column layout */
 - 
 
726 
    &.columns-3 > #course-listing > div {
 - 
 
727 
        height: 100%;
 - 
 
728 
    }
 - 
 
729 
 
 - 
 
730 
    > div > div {
 - 
 
731 
        min-height: 300px;
 - 
 
732 
 
 - 
 
733 
        > ul.ml > li:first-child > div {
 - 
 
734 
            border-top: 0;
 - 
 
735 
        }
 - 
 
736 
    }
 - 
 
737 
 
 - 
 
738 
    h3 {
 - 
 
739 
        margin: 0;
 - 
 
740 
        padding: 0.4rem 0.6rem 0.3rem;
 - 
 
741 
    }
 - 
 
742 
 
 - 
 
743 
    h4 {
 - 
 
744 
        margin: 1rem 0 0;
 - 
 
745 
        padding: 0.6rem 1rem 0.5rem;
 - 
 
746 
    }
 - 
 
747 
 
 - 
 
748 
    .moodle-actionmenu {
 - 
 
749 
        white-space: nowrap;
 - 
 
750 
    }
 - 
 
751 
 
 - 
 
752 
    .listing-actions {
 - 
 
753 
        text-align: center;
 - 
 
754 
 
 - 
 
755 
        > .moodle-actionmenu {
 - 
 
756 
            display: inline-block;
 - 
 
757 
        }
 - 
 
758 
    }
 - 
 
759 
 
 - 
 
760 
    ul.ml {
 - 
 
761 
        list-style: none;
 - 
 
762 
        margin: 1rem 0;
 - 
 
763 
 
 - 
 
764 
        ul.ml {
 - 
 
765 
            margin: 0;
 - 
 
766 
        }
 - 
 
767 
    }
 - 
 
768 
 
 - 
 
769 
    .listitem {
 - 
 
770 
 
 - 
 
771 
        &[data-selected='1'] {
 - 
 
772 
            border-left: calc(#{$list-group-border-width} + 5px) solid map-get($theme-colors, 'primary');
 - 
 
773 
            padding-left: calc(#{$list-group-item-padding-x} - 5px);
 - 
 
774 
        }
 - 
 
775 
        &:hover {
 - 
 
776 
            z-index: 2;
 - 
 
777 
        }
 - 
 
778 
    }
 - 
 
779 
 
 - 
 
780 
    .item-actions {
 - 
 
781 
        margin-right: 1em;
 - 
 
782 
        display: inline-block;
 - 
 
783 
 
 - 
 
784 
        &.show .menu {
 - 
 
785 
 
 - 
 
786 
            img {
 - 
 
787 
                width: 12px;
 - 
 
788 
                max-width: none;
 - 
 
789 
            }
 - 
 
790 
        }
 - 
 
791 
 
 - 
 
792 
        .menu-action-text {
 - 
 
793 
            vertical-align: inherit;
 - 
 
794 
        }
 - 
 
795 
    }
 - 
 
796 
 
 - 
 
797 
    .listitem {
 - 
 
798 
        > div {
 - 
 
799 
            > .float-left {
 - 
 
800 
                float: left;
 - 
 
801 
            }
 - 
 
802 
 
 - 
 
803 
            > .float-right {
 - 
 
804 
                float: right;
 - 
 
805 
                text-align: right;
 - 
 
806 
            }
 - 
 
807 
 
 - 
 
808 
            .item-actions {
 - 
 
809 
                .action-show {
 - 
 
810 
                    display: none;
 - 
 
811 
                }
 - 
 
812 
 
 - 
 
813 
                .action-hide {
 - 
 
814 
                    display: inline;
 - 
 
815 
                }
 - 
 
816 
            }
 - 
 
817 
 
 - 
 
818 
            .without-actions {
 - 
 
819 
                color: $course-cat-without-actions-color;
 - 
 
820 
            }
 - 
 
821 
 
 - 
 
822 
            .idnumber {
 - 
 
823 
                margin-right: 2em;
 - 
 
824 
            }
 - 
 
825 
        }
 - 
 
826 
        // The category or course is hidden.
 - 
 
827 
        &[data-visible="0"] {
 - 
 
828 
            color: $text-muted;
 - 
 
829 
 
 - 
 
830 
            > div {
 - 
 
831 
                > a {
 - 
 
832 
                    color: $text-muted;
 - 
 
833 
                }
 - 
 
834 
 
 - 
 
835 
                .item-actions {
 - 
 
836 
                    .action-show {
 - 
 
837 
                        display: inline;
 - 
 
838 
                    }
 - 
 
839 
 
 - 
 
840 
                    .action-hide {
 - 
 
841 
                        display: none;
 - 
 
842 
                    }
 - 
 
843 
                }
 - 
 
844 
            }
 - 
 
845 
        }
 - 
 
846 
 
 - 
 
847 
        &.highlight {
 - 
 
848 
            background-color: $body-bg;
 - 
 
849 
 
 - 
 
850 
            > div,
 - 
 
851 
            > div:hover,
 - 
 
852 
            &[data-selected='1'] > div {
 - 
 
853 
                background-color: $table-hover-bg;
 - 
 
854 
            }
 - 
 
855 
        }
 - 
 
856 
    }
 - 
 
857 
 
 - 
 
858 
    #course-listing {
 - 
 
859 
        .listitem {
 - 
 
860 
            .categoryname {
 - 
 
861 
                display: inline-block;
 - 
 
862 
                margin-left: 1em;
 - 
 
863 
                color: $course-listing-color;
 - 
 
864 
            }
 - 
 
865 
 
 - 
 
866 
            .coursename {
 - 
 
867 
                display: inline-block;
 - 
 
868 
                flex-basis: 10rem;
 - 
 
869 
            }
 - 
 
870 
        }
 - 
 
871 
 
 - 
 
872 
        > .firstpage .listitem:first-child > div .item-actions .action-moveup,
 - 
 
873 
        > .lastpage .listitem:last-child > div .item-actions .action-movedown {
 - 
 
874 
            display: none;
 - 
 
875 
        }
 - 
 
876 
 
 - 
 
877 
        .bulk-action-checkbox {
 - 
 
878 
            margin: -2px 6px 0 0;
 - 
 
879 
        }
 - 
 
880 
    }
 - 
 
881 
 
 - 
 
882 
    #category-listing {
 - 
 
883 
        .listitem.collapsed > ul.ml {
 - 
 
884 
            display: none;
 - 
 
885 
        }
 - 
 
886 
 
 - 
 
887 
        .listitem {
 - 
 
888 
            &:first-child > div .item-actions .action-moveup,
 - 
 
889 
            &:last-child > div .item-actions .action-movedown {
 - 
 
890 
                display: none;
 - 
 
891 
            }
 - 
 
892 
        }
 - 
 
893 
 
 - 
 
894 
        .course-count {
 - 
 
895 
            color: $course-listing-color;
 - 
 
896 
            margin-right: 2rem;
 - 
 
897 
            min-width: 3.5em;
 - 
 
898 
            display: inline-block;
 - 
 
899 
        }
 - 
 
900 
 
 - 
 
901 
        .bulk-action-checkbox {
 - 
 
902 
            margin-right: -3px;
 - 
 
903 
        }
 - 
 
904 
 
 - 
 
905 
        .category-listing > ul > .listitem:first-child {
 - 
 
906 
            position: relative;
 - 
 
907 
        }
 - 
 
908 
 
 - 
 
909 
        .category-bulk-actions {
 - 
 
910 
            margin: 0 0.5em 0.5em;
 - 
 
911 
            position: relative;
 - 
 
912 
        }
 - 
 
913 
    }
 - 
 
914 
 
 - 
 
915 
    .detail-pair {
 - 
 
916 
 
 - 
 
917 
        > * {
 - 
 
918 
            display: inline-block;
 - 
 
919 
        }
 - 
 
920 
 
 - 
 
921 
        .pair-key {
 - 
 
922 
            font-weight: bold;
 - 
 
923 
            vertical-align: top;
 - 
 
924 
 
 - 
 
925 
            span {
 - 
 
926 
                margin-right: 1rem;
 - 
 
927 
                display: block;
 - 
 
928 
            }
 - 
 
929 
        }
 - 
 
930 
 
 - 
 
931 
        .pair-value select {
 - 
 
932 
            max-width: 100%;
 - 
 
933 
        }
 - 
 
934 
    }
 - 
 
935 
 
 - 
 
936 
    .bulk-actions .detail-pair {
 - 
 
937 
        > * {
 - 
 
938 
            display: block;
 - 
 
939 
            width: 100%;
 - 
 
940 
        }
 - 
 
941 
    }
 - 
 
942 
 
 - 
 
943 
    .listing-pagination {
 - 
 
944 
        text-align: center;
 - 
 
945 
 
 - 
 
946 
        .yui3-button {
 - 
 
947 
            @include button-variant($info, $info);
 - 
 
948 
            border: 0;
 - 
 
949 
            margin: 0.4rem 0.2rem 0.45rem;
 - 
 
950 
            font-size: 10.4px;
 - 
 
951 
 
 - 
 
952 
            &.active-page {
 - 
 
953 
                @include button-variant($primary, $primary);
 - 
 
954 
            }
 - 
 
955 
        }
 - 
 
956 
    }
 - 
 
957 
 
 - 
 
958 
    .listing-pagination-totals {
 - 
 
959 
        text-align: center;
 - 
 
960 
 
 - 
 
961 
        &.dimmed {
 - 
 
962 
            color: $text-muted;
 - 
 
963 
            margin: 0.4rem 1rem 0.45rem;
 - 
 
964 
        }
 - 
 
965 
    }
 - 
 
966 
 
 - 
 
967 
    .select-a-category .notifymessage,
 - 
 
968 
    .select-a-category .alert {
 - 
 
969 
        margin: 1em;
 - 
 
970 
    }
 - 
 
971 
}
 - 
 
972 
 
 - 
 
973 
#course-category-listings #course-listing .listitem .drag-handle {
 - 
 
974 
    display: none;
 - 
 
975 
}
 - 
 
976 
 
 - 
 
977 
.jsenabled #course-category-listings #course-listing .listitem .drag-handle {
 - 
 
978 
    display: inline-block;
 - 
 
979 
    margin: 0 6px 0 0;
 - 
 
980 
    cursor: pointer;
 - 
 
981 
}
 - 
 
982 
 
 - 
 
983 
/** Management header styling **/
 - 
 
984 
.course-being-dragged-proxy {
 - 
 
985 
    border: 0;
 - 
 
986 
    color: $link-color;
 - 
 
987 
    vertical-align: middle;
 - 
 
988 
    padding: 0 0 0 4em;
 - 
 
989 
}
 - 
 
990 
 
 - 
 
991 
.course-being-dragged {
 - 
 
992 
    opacity: 0.5;
 - 
 
993 
}
 - 
 
994 
 
 - 
 
995 
/**
 - 
 
996 
 * Display sizes:
 - 
 
997 
 * Large displays                   1200        +
 - 
 
998 
 * Default displays                  980     1199
 - 
 
999 
 * Tablets                           768      979
 - 
 
1000 
 * Small tablets and large phones    481      767
 - 
 
1001 
 * Phones                              0      480
 - 
 
1002 
 */
 3 
 */
Línea 1003... Línea -...
1003 
 
 - 
 
1004 
@media (min-width: 1200px) and (max-width: 1600px) {
 - 
 
1005 
    #course-category-listings.columns-3 {
 - 
 
1006 
        background-color: $body-bg;
 - 
 
1007 
        border: 0;
 - 
 
1008 
 
 - 
 
1009 
        #category-listing,
 - 
 
1010 
        #course-listing {
 - 
 
1011 
            width: 50%;
 - 
 
1012 
        }
 - 
 
1013 
 
 - 
 
1014 
        #category-listing > div,
 - 
 
1015 
        #course-listing > div,
 - 
 
1016 
        #course-detail > div {
 - 
 
1017 
            background-color: $body-bg;
 - 
 
1018 
        }
 - 
 
1019 
 
 - 
 
1020 
        #course-detail {
 - 
 
1021 
            width: 100%;
 - 
 
1022 
            margin-top: 1em;
 - 
 
1023 
        }
 - 
 
1024 
    }
 - 
 
1025 
}
 - 
 
1026 
 
 - 
 
1027 
@media (max-width: 1199px) {
 - 
 
1028 
    #course-category-listings.columns-2,
 - 
 
1029 
    #course-category-listings.columns-3 {
 - 
 
1030 
        border: 0;
 - 
 
1031 
 
 - 
 
1032 
        #category-listing,
 - 
 
1033 
        #course-listing,
 - 
 
1034 
        #course-detail {
 - 
 
1035 
            width: 100%;
 - 
 
1036 
            margin: 0 0 1em;
 - 
 
1037 
        }
 - 
 
1038 
    }
 - 
 
1039 
}
 - 
 
1040 
 
 - 
 
1041 
.page-settings-menu .menubar > a > .icon {
 - 
 
1042 
    width: auto;
 - 
 
1043 
    height: 32px;
 - 
 
1044 
    font-size: 32px;
 - 
 
1045 
}
 - 
 
1046 
 
 - 
 
1047 
.activity-navigation {
 4 
 
1048 
    .row {
 - 
 
1049 
        align-items: center;
 - 
 
1050 
    }
 - 
 
1051 
    #prev-activity-link,
 - 
 
1052 
    #next-activity-link {
 5 
// Variables.
1053 
        white-space: pre-wrap;
 - 
 
1054 
    }
 - 
 
1055 
}
 - 
 
1056 
 
 - 
 
1057 
.automatic-completion-conditions {
 - 
 
1058 
    .badge {
 - 
 
1059 
        font-size: 100%;
 - 
 
1060 
    }
 - 
 
1061 
}
 - 
 
1062 
 
 - 
 
1063 
// These are the new styles for the renewed course UI in isssue MDL-71691
 - 
 
1064 
// once the old course renderers are removed in MDL-72656, all css related
 - 
 
1065 
// to activities and sections above this commend needs to be reviewed an
 - 
 
1066 
// possibly removed.
 - 
 
1067 
 
 - 
 
1068 
/* Variables definition*/
 - 
 
1069 
 
 6 
$activity-item-padding: 0.75rem !default;
1070 
$activity-border-radius: 1rem !default;
 7 
$activity-border-radius: 1rem !default;
1071 
$activity-border-width: 2px !default;
 8 
$activity-border-width: 2px !default;
1072 
$activity-hover-border-color: $primary !default;
 9 
$activity-hover-border-color: $primary !default;
1073 
$divider-color: $gray-300 !default;
 10 
$divider-color: $gray-300 !default;
1074 
$divider-width: 2px !default;
 11 
$divider-width: 2px !default;
Línea 1075... Línea 12...
1075 
$divider-hover-color: $primary !default;
 12 
$divider-hover-color: $primary !default;
Línea 1076... Línea 13...
1076 
 
 13 
 
1077 
/* Functions/Mixins definition */
 14 
/* Course content */
1078 
 
 15 
 
1079 
// Activity completion button custom styling mixin.
 - 
 
- 
 
 16 
.course-content ul.section-list {
- 
 
 17 
    padding: 0;
1080 
@mixin completion-button() {
 18 
    margin: 0;
1081 
    &.btn {
 19 
}
1082 
        @include button-variant($white, $gray-400, $gray-600);
 20 
 
1083 
        min-height: map-get($iconsizes, 5);
 21 
// Re-style ordered list in course content.
1084 
        font-weight: bold;
 22 
.course-content .section-item,
1085 
        @include border-radius();
 23 
.course-content .section-item .activity-item {
1086 
        .icon {
 - 
 
1087 
            font-size: inherit;
 - 
 
1088 
        }
 24 
    ul {
1089 
    }
 - 
 
1090 
    @each $color, $value in $theme-colors {
 - 
 
1091 
        &.btn-#{$color} {
 - 
 
1092 
            $bg-color: theme-color-level($color, $alert-bg-level);
 25 
        list-style: disc;
1093 
            @include button-variant($bg-color, $bg-color, $value);
 26 
        ul {
1094 
            color: theme-color-level($color, $alert-color-level);
 27 
            list-style: circle;
1095 
            &:hover {
 28 
            ul {
1096 
                color: color-yiq($value);
 29 
                list-style: square;
1097 
            }
 30 
            }
Línea 1098... Línea 31...
1098 
        }
 31 
        }
1099 
    }
 - 
 
1100 
}
 32 
    }
1101 
 
 33 
}
1102 
/* Section Expand all/Collapse all */
 34 
 
1103 
 
 35 
// Expand all/Collapse all.
Línea 1119... Línea 51...
1119 
            display: block;
 51 
            display: block;
1120 
        }
 52 
        }
1121 
    }
 53 
    }
1122 
}
 54 
}
Línea -... Línea 55...
- 
 
 55 
 
- 
 
 56 
// Course 'add section' button.
- 
 
 57 
.btn.add-section {
- 
 
 58 
    @include border-radius($activity-border-radius);
- 
 
 59 
    border: $divider-width dashed $border-color;
- 
 
 60 
    color: $primary;
- 
 
 61 
    font-size: $font-size-sm;
- 
 
 62 
    font-weight: bold;
- 
 
 63 
    &:hover,
- 
 
 64 
    &:focus {
- 
 
 65 
        background-color: $primary-light-background;
- 
 
 66 
        border: $divider-width solid $primary;
- 
 
 67 
        color: $primary;
- 
 
 68 
    }
- 
 
 69 
}
- 
 
 70 
 
- 
 
 71 
// Max sections reached alert.
- 
 
 72 
.max-section-alert {
- 
 
 73 
    border-top: $divider-width dashed $border-color;
- 
 
 74 
    font-size: $font-size-sm;
- 
 
 75 
    font-weight: normal;
- 
 
 76 
    color: $gray-600;
- 
 
 77 
}
1123 
 
 78 
 
Línea 1124... Línea 79...
1124 
/* Course section */
 79 
/* Sections */
1125 
 
 80 
 
1126 
.course-section {
 81 
.course-section {
1127 
    list-style: none;
 82 
    list-style: none;
Línea 1135... Línea 90...
1135 
        padding: map-get($spacers, 3);
 90 
        padding: map-get($spacers, 3);
1136 
        border: $border-width solid $border-color;
 91 
        border: $border-width solid $border-color;
1137 
        @include border-radius($activity-border-radius);
 92 
        @include border-radius($activity-border-radius);
1138 
    }
 93 
    }
Línea 1139... Línea 94...
1139 
 
 94 
 
- 
 
 95 
    &.hidden,
1140 
    &.hidden {
 96 
    &.orphaned {
1141 
        .section-item {
 97 
        .section-item {
1142 
            background-color: $gray-100;
 98 
            background-color: $gray-100;
1143 
        }
 99 
        }
Línea -... Línea 100...
- 
 
 100 
    }
- 
 
 101 
 
- 
 
 102 
    // Highlighted section.
- 
 
 103 
    &.current {
- 
 
 104 
        > .section-item {
- 
 
 105 
            position: relative;
- 
 
 106 
            &::before {
- 
 
 107 
                border-left: $primary 3px solid;
- 
 
 108 
                bottom: 0;
- 
 
 109 
                content: "";
- 
 
 110 
                left: -8px;
- 
 
 111 
                position: absolute;
- 
 
 112 
                top: 0;
- 
 
 113 
            }
- 
 
 114 
        }
1144 
    }
 115 
    }
1145 
 
 116 
 
1146 
    .sectionname > a {
 117 
    .sectionname > a {
1147 
        color: $gray-900;
 118 
        color: $gray-900;
1148 
        &:hover {
 119 
        &:hover {
Línea 1197... Línea 168...
1197 
                }
 168 
                }
1198 
            }
 169 
            }
1199 
        }
 170 
        }
1200 
    }
 171 
    }
Línea 1201... Línea 172...
1201 
 
 172 
 
1202 
    // Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
 173 
    // Override '.btn-icon' styles from buttons.scss to make section action menu icons bigger.
1203 
    .action-menu .btn.btn-icon {
 174 
    .section_action_menu > .action-menu {
1204 
        height: map-get($iconsizes, 5);
 175 
        .btn-icon {
1205 
        width: map-get($iconsizes, 5);
 176 
            font-size: $font-size-lg;
1206 
        @include border-radius();
 177 
        }
Línea 1207... Línea 178...
1207 
    }
 178 
    }
1208 
 
 179 
 
1209 
    .section-summary-activities {
 180 
    .section-summary-activities {
Línea 1228... Línea 199...
1228 
    .overlay-preview {
 199 
    .overlay-preview {
1229 
        z-index: 5;
 200 
        z-index: 5;
1230 
    }
 201 
    }
1231 
}
 202 
}
Línea 1232... Línea -...
1232 
 
 - 
 
1233 
// Course 'add section' button.
 - 
 
1234 
.btn.add-section {
 - 
 
1235 
    @include border-radius($activity-border-radius);
 - 
 
1236 
    border: $divider-width dashed $border-color;
 - 
 
1237 
    color: $primary;
 - 
 
1238 
    font-size: $font-size-sm;
 - 
 
1239 
    font-weight: bold;
 - 
 
1240 
    &:hover,
 - 
 
1241 
    &:focus {
 - 
 
1242 
        background-color: $primary-light-background;
 - 
 
1243 
        border: $divider-width solid $primary;
 - 
 
1244 
        color: $primary;
 - 
 
1245 
    }
 - 
 
1246 
}
 - 
 
1247 
 
 - 
 
1248 
/* Single section page specific styles */
 - 
 
1249 
 
 - 
 
1250 
.single-section {
 203 
 
1251 
    // Revert main section's styles.
 204 
// Old movehere link styles.
1252 
    > ul > .course-section {
 - 
 
1253 
        &.hidden .section-item {
 - 
 
1254 
            background-color: inherit;
 - 
 
1255 
        }
 - 
 
1256 
        .section-item {
 - 
 
1257 
            padding: 0;
 - 
 
1258 
            border: none;
 - 
 
1259 
        }
 - 
 
1260 
    }
 - 
 
1261 
}
 - 
 
1262 
 
 - 
 
1263 
/* Re-style ordered list in course content */
 - 
 
1264 
.course-content .activity-altcontent {
 - 
 
1265 
    ul {
 205 
.section li.movehere a {
1266 
        list-style: disc;
 206 
    display: block;
1267 
        ul {
 - 
 
1268 
            list-style: circle;
 207 
    width: 100%;
1269 
            ul {
 208 
    height: 2rem;
1270 
                list-style: square;
 - 
 
1271 
            }
 - 
 
1272 
        }
 - 
 
1273 
    }
 209 
    border: 2px dashed $gray-800;
Línea 1274... Línea 210...
1274 
}
 210 
}
Línea 1275... Línea 211...
1275 
 
 211 
 
1276 
/* Activity cards */
 212 
/* Activities */
1277 
 
 - 
 
1278 
.activity {
 213 
 
1279 
    list-style: none;
 214 
.activity {
1280 
    position: relative;
 215 
    list-style: none;
- 
 
 216 
    padding-top: map-get($spacers, 1);
- 
 
 217 
    margin-top: map-get($spacers, 1);
- 
 
 218 
    border-top: $border-width solid $border-color;
- 
 
 219 
    &.indented {
- 
 
 220 
        .activity-item {
1281 
    padding-top: map-get($spacers, 1);
 221 
            margin-left: map-get($spacers, 3);
1282 
    margin-top: map-get($spacers, 1);
 222 
        }
- 
 
 223 
    }
1283 
    border-top: $border-width solid $border-color;
 224 
    // Custom styles for activity while editing and for the first activity card in the section.
1284 
    // Custom styles for activity while editing.
 225 
    .editing &,
1285 
    .editing & {
 226 
    .section &:first-child {
1286 
        // Remove activity top border and spacing, while editing a separator is displayed.
 227 
        // Remove activity top border and spacing, while editing a separator is displayed.
1287 
        padding-top: 0;
 228 
        padding-top: 0;
1288 
        margin-top: 0;
 229 
        margin-top: 0;
Línea 1289... Línea 230...
1289 
        border-top: none;
 230 
        border-top: none;
1290 
    }
 - 
 
1291 
}
 231 
    }
1292 
 
 232 
}
1293 
.activity-item {
 233 
 
1294 
    position: relative;
 234 
.activity-item {
1295 
    padding: .75rem;
 235 
    padding: $activity-item-padding;
1296 
    background-color: $white;
 236 
    @include border-radius($activity-border-radius);
1297 
    &.activityinline {
 237 
    &.activityinline {
1298 
        padding: .75rem 0;
 238 
        padding: $activity-item-padding 0;
1299 
    }
 239 
    }
Línea 1305... Línea 245...
1305 
        }
 245 
        }
1306 
    }
 246 
    }
1307 
    // Custom styles for activity cards while editing.
 247 
    // Custom styles for activity cards while editing.
1308 
    .editing & {
 248 
    .editing & {
1309 
        cursor: move;
 249 
        cursor: move;
1310 
        border: $activity-border-width solid transparent;
 - 
 
1311 
        @include border-radius($activity-border-radius);
 - 
 
1312 
        .a {
 250 
        .a {
1313 
            cursor: pointer;
 251 
            cursor: pointer;
1314 
        }
 252 
        }
- 
 
 253 
        // Add a border on hover to the activity card (avoiding hover effect in inner activities).
1315 
        &:hover,
 254 
        &:hover:not(:has(.activity:hover)),
1316 
        &.selected {
 255 
        &.selected {
- 
 
 256 
            // We use outline here to avoid changing the layout everytime we hover.
1317 
            border: $activity-border-width solid $activity-hover-border-color;
 257 
            outline: $activity-border-width solid $activity-hover-border-color;
1318 
            box-shadow: $box-shadow-sm;
 258 
            box-shadow: $box-shadow-sm;
1319 
            .activityiconcontainer,
 259 
            .activityiconcontainer,
1320 
            .badge {
 260 
            .badge {
1321 
                mix-blend-mode: multiply;
 261 
                mix-blend-mode: multiply;
1322 
            }
 262 
            }
1323 
        }
 263 
        }
1324 
    }
 264 
    }
- 
 
 265 
    .activity.dragging & {
- 
 
 266 
        border: $activity-border-width solid $activity-hover-border-color;
- 
 
 267 
        .editing &:hover {
- 
 
 268 
            // We cancel the outline when dragging because it is not taken into account
- 
 
 269 
            // in the element/image representing the drag and drop and it cuts out part of the
- 
 
 270 
            // border.
- 
 
 271 
            outline: none;
- 
 
 272 
        }
- 
 
 273 
    }
Línea 1325... Línea 274...
1325 
 
 274 
 
1326 
    // Activity card grid layout.
 275 
    // Activity card grid layout.
1327 
    .activity-grid {
 276 
    .activity-grid {
1328 
        display: grid;
 277 
        display: grid;
Línea 1334... Línea 283...
1334 
            "icon   visibility    groupmode      completion    actions"
 283 
            "icon   visibility    groupmode      completion    actions"
1335 
            "icon   dates         groupmode      completion    actions"
 284 
            "icon   dates         groupmode      completion    actions"
1336 
            "icon   altcontent    altcontent     altcontent    altcontent"
 285 
            "icon   altcontent    altcontent     altcontent    altcontent"
1337 
            "icon   afterlink     afterlink      afterlink     afterlink"
 286 
            "icon   afterlink     afterlink      afterlink     afterlink"
1338 
            "icon   availability  availability   availability  availability";
 287 
            "icon   availability  availability   availability  availability";
1339 
        @include media-breakpoint-down(xs) {
 288 
        @include media-breakpoint-down(sm) {
1340 
            grid-template-columns: min-content 1fr min-content min-content min-content;
 289 
            grid-template-columns: min-content 1fr min-content min-content min-content;
1341 
            grid-template-rows: 1fr repeat(4, min-content);
 290 
            grid-template-rows: 1fr repeat(4, min-content);
1342 
            grid-template-areas:
 291 
            grid-template-areas:
1343 
                "icon          name          actions"
 292 
                "icon          name          actions"
1344 
                "icon          visibility    actions"
 293 
                "icon          visibility    actions"
Línea 1356... Línea 305...
1356 
        grid-template-areas:
 305 
        grid-template-areas:
1357 
            "visibility    groupmode        completion    actions"
 306 
            "visibility    groupmode        completion    actions"
1358 
            "altcontent    altcontent       altcontent    altcontent"
 307 
            "altcontent    altcontent       altcontent    altcontent"
1359 
            "afterlink     afterlink        afterlink     afterlink"
 308 
            "afterlink     afterlink        afterlink     afterlink"
1360 
            "availability  availability     availability  availability";
 309 
            "availability  availability     availability  availability";
1361 
        @include media-breakpoint-down(xs) {
 310 
        @include media-breakpoint-down(sm) {
1362 
            grid-template-columns: 1fr min-content;
 311 
            grid-template-columns: 1fr min-content;
1363 
            grid-template-areas:
 312 
            grid-template-areas:
1364 
                "visibility    actions"
 313 
                "visibility    actions"
1365 
                "altcontent    altcontent"
 314 
                "altcontent    altcontent"
1366 
                "groupmode     groupmode"
 315 
                "groupmode     groupmode"
Línea 1386... Línea 335...
1386 
        @include font-size($small-font-size);
 335 
        @include font-size($small-font-size);
1387 
        color: $gray-700;
 336 
        color: $gray-700;
1388 
        display: flex;
 337 
        display: flex;
1389 
        flex-wrap: wrap;
 338 
        flex-wrap: wrap;
1390 
        column-gap: 0.75rem;
 339 
        column-gap: 0.75rem;
1391 
        @include media-breakpoint-down(xs) {
 340 
        @include media-breakpoint-down(sm) {
1392 
            margin-top: map-get($spacers, 2);
 341 
            margin-top: map-get($spacers, 2);
1393 
        }
 342 
        }
1394 
    }
 343 
    }
1395 
    .activity-name-area {
 344 
    .activity-name-area {
1396 
        grid-area: name;
 345 
        grid-area: name;
Línea 1406... Línea 355...
1406 
            }
 355 
            }
1407 
        }
 356 
        }
1408 
        .activitybadge {
 357 
        .activitybadge {
1409 
            &.badge-none {
 358 
            &.badge-none {
1410 
                font-weight: normal;
 359 
                font-weight: normal;
- 
 
 360 
                --#{$prefix}badge-color: #{$body-color};
1411 
                @include font-size($small-font-size);
 361 
                @include font-size($small-font-size);
1412 
                padding: 0;
 362 
                padding: 0;
1413 
            }
 363 
            }
1414 
        }
 364 
        }
1415 
    }
 365 
    }
Línea 1416... Línea 366...
1416 
 
 366 
 
1417 
    .activity-completion {
 367 
    .activity-completion {
1418 
        grid-area: completion;
 368 
        grid-area: completion;
1419 
        justify-self: end;
 - 
 
1420 
        // Re-style completion buttons (mark as done & dropdown).
 369 
        justify-self: end;
1421 
        button,
 370 
        button,
1422 
        a[role="button"] {
 371 
        a[role="button"] {
1423 
            @include completion-button();
 372 
            min-height: map-get($iconsizes, 5);
1424 
        }
 373 
        }
1425 
        @include media-breakpoint-down(xs) {
 374 
        @include media-breakpoint-down(sm) {
1426 
            width: 100%;
 375 
            width: 100%;
1427 
            margin-top: map-get($spacers, 2);
 376 
            margin-top: map-get($spacers, 2);
1428 
            button {
 377 
            button {
1429 
                width: 100%;
 378 
                width: 100%;
Línea 1456... Línea 405...
1456 
        justify-self: end;
 405 
        justify-self: end;
1457 
        .groupmode-information {
 406 
        .groupmode-information {
1458 
            height: map-get($iconsizes, 5);
 407 
            height: map-get($iconsizes, 5);
1459 
            width: map-get($iconsizes, 5);
 408 
            width: map-get($iconsizes, 5);
1460 
            @include border-radius();
 409 
            @include border-radius();
- 
 
 410 
            .icon {
- 
 
 411 
                width: map-get($iconsizes, 3);
- 
 
 412 
                height: map-get($iconsizes, 3);
- 
 
 413 
            }
1461 
        }
 414 
        }
1462 
        .groupmode-icon-info {
 415 
        .groupmode-icon-info {
1463 
            display: none;
 416 
            display: none;
1464 
        }
 417 
        }
1465 
        @include media-breakpoint-down(xs) {
 418 
        @include media-breakpoint-down(sm) {
1466 
            width: 100%;
 419 
            width: 100%;
1467 
            margin-top: map-get($spacers, 2);
 420 
            margin-top: map-get($spacers, 2);
1468 
            padding-top: map-get($spacers, 2);
 421 
            padding-top: map-get($spacers, 2);
1469 
            border-top: $border-width solid $border-color;
 422 
            border-top: $border-width solid $border-color;
1470 
            .groupmode-information {
 423 
            .groupmode-information {
Línea 1501... Línea 454...
1501 
        &.activity-description {
 454 
        &.activity-description {
1502 
            margin-top: map-get($spacers, 2);
 455 
            margin-top: map-get($spacers, 2);
1503 
            padding-top: map-get($spacers, 2);
 456 
            padding-top: map-get($spacers, 2);
1504 
            border-top: $border-width solid $border-color;
 457 
            border-top: $border-width solid $border-color;
1505 
            @include font-size($small-font-size);
 458 
            @include font-size($small-font-size);
- 
 
 459 
            // Fix activity description bottom margin for first level-lists.
- 
 
 460 
            ul:not(.activity-description ul ul) {
- 
 
 461 
                margin-bottom: 1rem;
- 
 
 462 
            }
1506 
        }
 463 
        }
1507 
        // Add rounded borders to images.
 464 
        // Add rounded borders to images.
1508 
        img {
 465 
        img {
1509 
            @include border-radius($activity-border-radius);
 466 
            @include border-radius($activity-border-radius);
1510 
        }
 467 
        }
Línea 1530... Línea 487...
1530 
    display: none;
 487 
    display: none;
1531 
}
 488 
}
Línea 1532... Línea 489...
1532 
 
 489 
 
Línea 1533... Línea 490...
1533 
/* Dividers */
 490 
/* Dividers */
1534 
 
 491 
 
1535 
.divider {
 492 
.course-content .divider {
1536 
    position: relative;
 493 
    position: relative;
1537 
    hr {
 494 
    hr {
1538 
        width: 100%;
 495 
        width: 100%;
- 
 
 496 
        margin: map-get($spacers, 2) map-get($spacers, 1);
- 
 
 497 
        border-top: $divider-width dashed $divider-color;
- 
 
 498 
        opacity: 1;
- 
 
 499 
        .changenumsections.disabled & {
1539 
        margin: map-get($spacers, 2) map-get($spacers, 1);
 500 
            border-top: $divider-width dashed $divider-color;
1540 
        border-top: $divider-width dashed $divider-color;
 501 
        }
1541 
    }
 502 
    }
1542 
    .divider-content {
 503 
    .divider-content {
1543 
        opacity: 0;
 504 
        opacity: 0;
Línea 1575... Línea 536...
1575 
    }
 536 
    }
1576 
    // Style the hr divider when the "Add content" button is hovered.
 537 
    // Style the hr divider when the "Add content" button is hovered.
1577 
    &:has(.btn.add-content:hover) {
 538 
    &:has(.btn.add-content:hover) {
1578 
        hr {
 539 
        hr {
1579 
            border-color: $divider-hover-color;
 540 
            border-color: $divider-hover-color;
- 
 
 541 
            .changenumsections.disabled & {
- 
 
 542 
                border-color: $gray-200;
- 
 
 543 
            }
1580 
        }
 544 
        }
1581 
    }
 545 
    }
1582 
}
 546 
}
Línea 1583... Línea 547...
1583 
 
 547 
 
Línea 1594... Línea 558...
1594 
.course-content ul.topics > li:last-child .changenumsections {
 558 
.course-content ul.topics > li:last-child .changenumsections {
1595 
    display: none;
 559 
    display: none;
1596 
}
 560 
}
Línea 1597... Línea 561...
1597 
 
 561 
 
1598 
// Custom buttons for dividers.
 562 
// Custom buttons for dividers.
1599 
.btn.add-content {
 563 
.course-content .divider .btn.add-content {
1600 
    position: relative;
 564 
    position: relative;
1601 
    z-index: 1;
 565 
    z-index: 1;
1602 
    @include border-radius($rounded-pill);
 566 
    @include border-radius();
1603 
    font-size: $font-size-sm;
 567 
    font-size: $font-size-sm;
1604 
    font-weight: bold;
 568 
    font-weight: bold;
1605 
    color: theme-color-level("primary", $alert-color-level);
 569 
    color: shift-color($primary, $alert-color-scale);
1606 
    background-color: theme-color-level("primary", $alert-bg-level);
 570 
    background-color: shift-color($primary, $alert-bg-scale);
1607 
    &:hover,
 571 
    &:hover,
1608 
    &:focus {
 572 
    &:focus {
1609 
        color: color-yiq($primary);
 573 
        color: color-contrast($primary);
1610 
        background-color: $primary;
 574 
        background-color: $primary;
1611 
    }
 575 
    }
1612 
    .icon {
 576 
    .icon {
1613 
        width: 14px;
 577 
        width: 14px;
1614 
        height: 14px;
 578 
        height: 14px;
1615 
        font-size: 14px;
 579 
        font-size: 14px;
- 
 
 580 
    }
- 
 
 581 
    .changenumsections.disabled & {
- 
 
 582 
        color: $gray-500;
- 
 
 583 
        background-color: $gray-200;
- 
 
 584 
        outline: none;
- 
 
 585 
        box-shadow: none;
- 
 
 586 
        &:hover,
- 
 
 587 
        &:focus {
- 
 
 588 
            color: $gray-500;
- 
 
 589 
            background-color: $gray-200;
- 
 
 590 
            outline: none;
- 
 
 591 
            box-shadow: none;
- 
 
 592 
        }
- 
 
 593 
        pointer-events: auto; // Restore pointer events for the disabled button so we can see the tooltip.
1616 
    }
 594 
    }
Línea 1617... Línea 595...
1617 
}
 595 
}
Línea 1618... Línea 596...
1618 
 
 596 
 
1619 
/* Bulk editing */
 597 
/* Bulk editing */
1620 
 
 598 
 
1621 
.bulkenabled {
 599 
.bulkenabled {
- 
 
 600 
    .bulk-hidden {
- 
 
 601 
        display: none !important; // stylelint-disable-line declaration-no-important
1622 
    .bulk-hidden {
 602 
    }
1623 
        display: none !important; // stylelint-disable-line declaration-no-important
 603 
    .section {
- 
 
 604 
        margin-left: map-get($spacers, 3);
1624 
    }
 605 
        &:not(:first-child) {
1625 
    .section:not(:first-child) {
 606 
            margin-top: map-get($spacers, 4);
1626 
        margin-top: map-get($spacers, 4);
 607 
        }
1627 
    }
 608 
    }
1628 
    .activity {
 609 
    .activity {
Línea 1634... Línea 615...
1634 
            margin-top: map-get($spacers, 4);
 615 
            margin-top: map-get($spacers, 4);
1635 
        }
 616 
        }
1636 
    }
 617 
    }
1637 
    .activity-item {
 618 
    .activity-item {
1638 
        .bulkselect {
 619 
        .bulkselect {
1639 
            position: absolute;
 620 
            float: left;
1640 
            left: -2rem;
 621 
            margin-left: -2rem;
- 
 
 622 
        }
- 
 
 623 
        // Delegated sections are not available for bulk editing.
- 
 
 624 
        &:has(.delegated-section):hover {
- 
 
 625 
            outline: none !important; // stylelint-disable-line declaration-no-important
- 
 
 626 
            box-shadow: none !important; // stylelint-disable-line declaration-no-important
1641 
        }
 627 
        }
1642 
    }
 628 
    }
1643 
    .course-section-header .bulkselect {
 629 
    .course-section-header .bulkselect {
1644 
        left: -2.75rem;
 630 
        left: -2.75rem;
1645 
        position: relative;
 631 
        position: relative;
1646 
        width: 0;
 632 
        width: 0;
1647 
    }
 633 
    }
1648 
    @include media-breakpoint-down(sm) {
 634 
    @include media-breakpoint-down(md) {
1649 
        .course-content {
 635 
        .course-content {
1650 
            margin-left: 2rem;
 636 
            margin-left: 2rem;
1651 
        }
 637 
        }
1652 
    }
 638 
    }
- 
 
 639 
    .sticky-footer-content.bulkactions {
- 
 
 640 
        .btn {
- 
 
 641 
            --bs-btn-disabled-border-color: transparent;
- 
 
 642 
            &:focus {
- 
 
 643 
                outline: 0;
- 
 
 644 
                box-shadow: $input-btn-focus-box-shadow;
- 
 
 645 
            }
- 
 
 646 
        }
- 
 
 647 
    }
1653 
}
 648 
}
Línea 1654... Línea 649...
1654 
 
 649 
 
1655 
// Custom styles for bulk actions sticky footer in small devices.
 650 
// Custom styles for bulk actions sticky footer in small devices.
1656 
.sticky-footer-content.bulkactions {
 651 
.sticky-footer-content.bulkactions {
1657 
    @include media-breakpoint-down(sm) {
 652 
    @include media-breakpoint-down(md) {
1658 
        position: relative;
 653 
        position: relative;
1659 
        .form-check,
 654 
        .form-check,
1660 
        .bulkaction-name,
 655 
        .bulkaction-name,
1661 
        .bulkcount {
 656 
        .bulkcount {
Línea 1670... Línea 665...
1670 
            right: 0;
 665 
            right: 0;
1671 
        }
 666 
        }
1672 
    }
 667 
    }
1673 
}
 668 
}
Línea -... Línea 669...
- 
 
 669 
 
- 
 
 670 
/* Single section page */
- 
 
 671 
 
- 
 
 672 
.single-section {
- 
 
 673 
    // Revert main section's styles.
- 
 
 674 
    > ul > .course-section {
- 
 
 675 
        &.hidden .section-item {
- 
 
 676 
            background-color: inherit;
- 
 
 677 
        }
- 
 
 678 
        .section-item {
- 
 
 679 
            padding: 0;
- 
 
 680 
            border: none;
- 
 
 681 
        }
- 
 
 682 
    }
- 
 
 683 
}
- 
 
 684 
 
- 
 
 685 
.single-section-page .header-action {
- 
 
 686 
    display: inline-block;
- 
 
 687 
}
1674 
 
 688 
 
Línea 1675... Línea 689...
1675 
/* Activity completion */
 689 
/* Default activity completion page */
1676 
 
 690 
 
1677 
.defaultactivitycompletion-item {
 691 
.defaultactivitycompletion-item {
1678 
    a {
 692 
    a {
Línea 1683... Línea 697...
1683 
        width: 32px;
 697 
        width: 32px;
1684 
        height: 32px;
 698 
        height: 32px;
1685 
    }
 699 
    }
1686 
}
 700 
}
Línea 1687... Línea 701...
1687 
 
 701 
 
Línea 1688... Línea 702...
1688 
/* Home page course specific styles */
 702 
/* Home page course */
1689 
 
 - 
 
1690 
.sitetopic {
 - 
 
1691 
    // Hide the first activity top border.
 - 
 
1692 
    .activity:first-of-type hr {
 - 
 
1693 
        display: none;
 703 
 
1694 
    }
 704 
.sitetopic {
1695 
    .section-item {
 705 
    .section-item {
1696 
        margin-bottom: map-get($spacers, 4);
 706 
        margin-bottom: map-get($spacers, 4);
1697 
        @include border-radius();
 707 
        @include border-radius();
- 
 
 708 
    }
- 
 
 709 
}
- 
 
 710 
 
- 
 
 711 
/* Move activity and Move section modals */
- 
 
 712 
 
- 
 
 713 
.move-activity-tree {
- 
 
 714 
    .collapse-list-item {
- 
 
 715 
        @include border-radius();
- 
 
 716 
 
- 
 
 717 
        &:hover,
- 
 
 718 
        &:focus {
- 
 
 719 
            background-color: shift-color($primary, $alert-bg-scale);
- 
 
 720 
 
- 
 
 721 
            a {
- 
 
 722 
                color: shift-color($primary, $alert-color-scale);
- 
 
 723 
            }
- 
 
 724 
        }
- 
 
 725 
 
- 
 
 726 
        a {
- 
 
 727 
            color: $list-group-action-active-color;
- 
 
 728 
 
- 
 
 729 
            &:hover,
- 
 
 730 
            &:focus {
- 
 
 731 
                text-decoration: none;
- 
 
 732 
            }
- 
 
 733 
        }
- 
 
 734 
 
- 
 
 735 
        a.disabled {
- 
 
 736 
            color: $list-group-disabled-color;
- 
 
 737 
        }
- 
 
 738 
    }
- 
 
 739 
 
- 
 
 740 
    .collapse-list-item-content .collapse-list-item {
- 
 
 741 
        padding: $collapse-list-item-padding-y $collapse-list-item-padding-x;
- 
 
 742 
    }
- 
 
 743 
 
- 
 
 744 
    ul {
- 
 
 745 
        margin-left: map-get($spacers, 4);
- 
 
 746 
    }
- 
 
 747 
 
- 
 
 748 
    .collapse-list-link {
- 
 
 749 
        font-weight: bold;
- 
 
 750 
    }
- 
 
 751 
}
- 
 
 752 
 
- 
 
 753 
/* Subsections */
- 
 
 754 
 
- 
 
 755 
.activity.subsection {
- 
 
 756 
    border-top: none;
- 
 
 757 
    > .activity-item {
- 
 
 758 
        border: $border-width solid $border-color;
- 
 
 759 
        padding: 0;
- 
 
 760 
        margin: map-get($spacers, 2) 0;
- 
 
 761 
        > .activity-grid > .activity-altcontent {
- 
 
 762 
            margin-top: 0;
- 
 
 763 
        }
- 
 
 764 
    }
- 
 
 765 
    .section {
- 
 
 766 
        margin-top: 0;
- 
 
 767 
        .section-item {
- 
 
 768 
            border: none;
- 
 
 769 
            padding: $activity-item-padding;
- 
 
 770 
        }
- 
 
 771 
        .icons-collapse-expand:has(+ h4) {
- 
 
 772 
            height: map-get($iconsizes, 4);
- 
 
 773 
            width: map-get($iconsizes, 4);
- 
 
 774 
            font-size: $font-size-sm;
- 
 
 775 
        }
- 
 
 776 
        h4 {
- 
 
 777 
            font-size: $h5-font-size;
- 
 
 778 
        }
- 
 
 779 
        .section_action_menu > .action-menu .btn-icon {
- 
 
 780 
            font-size: inherit;
- 
 
 781 
        }
- 
 
 782 
    }
- 
 
 783 
    + .activity {
- 
 
 784 
        border-top: none;
- 
 
 785 
    }
- 
 
 786 
    // Allow v-parent-focus only for closest acvitity (avoiding subsection).
- 
 
 787 
    .focus-control:not(:has(.focus-control)) {
- 
 
 788 
        &:focus-within .v-parent-focus,
- 
 
 789 
        &:hover .v-parent-focus {
- 
 
 790 
            opacity: 1 !important; // stylelint-disable-line declaration-no-important
- 
 
 791 
            visibility: visible !important; // stylelint-disable-line declaration-no-important
- 
 
 792 
        }
- 
 
 793 
    }
- 
 
 794 
    .focus-control:focus-within .focus-control .v-parent-focus,
- 
 
 795 
    .focus-control:hover .focus-control .v-parent-focus {
- 
 
 796 
        opacity: 0;
- 
 
 797 
        visibility: hidden;
- 
 
 798 
    }
- 
 
 799 
}
- 
 
 800 
 
- 
 
 801 
/* Spinners */
- 
 
 802 
 
- 
 
 803 
// Edit in progress spinner animation.
- 
 
 804 
@keyframes editinprogress-rotation {
- 
 
 805 
    0% {
- 
 
 806 
        opacity: 0;
- 
 
 807 
        transform: rotate(0deg);
- 
 
 808 
    }
- 
 
 809 
    50% {
- 
 
 810 
        opacity: 1;
- 
 
 811 
    }
- 
 
 812 
    100% {
- 
 
 813 
        opacity: 0;
- 
 
 814 
        transform: rotate(359deg);
- 
 
 815 
    }
- 
 
 816 
}
- 
 
 817 
 
- 
 
 818 
.editing {
- 
 
 819 
    // New editing in progress spinners.
- 
 
 820 
    .editinprogress {
- 
 
 821 
        position: relative;
- 
 
 822 
 
- 
 
 823 
        & > * {
- 
 
 824 
            opacity: .4;
- 
 
 825 
        }
- 
 
 826 
 
- 
 
 827 
        .corelightbox,
- 
 
 828 
        .lightbox {
- 
 
 829 
            display: none;
- 
 
 830 
        }
- 
 
 831 
 
- 
 
 832 
        &:after {
- 
 
 833 
            font: var(--fa-font-solid);
- 
 
 834 
            position: absolute;
- 
 
 835 
            font-size: 20px;
- 
 
 836 
            color: $gray-600;
- 
 
 837 
            content: fa-content($fa-var-spinner);
- 
 
 838 
            display: flex;
- 
 
 839 
            justify-content: center;
- 
 
 840 
            align-items: center;
- 
 
 841 
            width: 30px;
- 
 
 842 
            height: 30px;
- 
 
 843 
            left: calc(50% - 15px);
- 
 
 844 
            top: calc(50% - 15px);
- 
 
 845 
            animation: editinprogress-rotation 2s infinite linear;
- 
 
 846 
        }
- 
 
 847 
 
- 
 
 848 
        // Prevent inner editingprogress.
- 
 
 849 
        .editinprogress {
- 
 
 850 
            &:after {
- 
 
 851 
                display: none;
- 
 
 852 
            }
- 
 
 853 
        }
- 
 
 854 
    }
- 
 
 855 
}
- 
 
 856 
 
- 
 
 857 
/* Drag and drop */
- 
 
 858 
 
- 
 
 859 
// Compensate for the border widths when dropzones are displayed.
- 
 
 860 
.course-content .section.dropready {
- 
 
 861 
 
- 
 
 862 
    &.main.drop-down {
- 
 
 863 
        border-bottom: 1px solid $dropzone-border;
- 
 
 864 
    }
- 
 
 865 
 
- 
 
 866 
    .course-section-header.dropready.drop-zone {
- 
 
 867 
        margin-top: -2px;
- 
 
 868 
    }
- 
 
 869 
 
- 
 
 870 
    li.activity.dropready.drop-down {
- 
 
 871 
        border-bottom: 1px solid $dropzone-border;
- 
 
 872 
        margin-bottom: -1px;
- 
 
 873 
    }
- 
 
 874 
 
- 
 
 875 
    li.activity.dropready.drop-up {
- 
 
 876 
        border-top: 1px solid $dropzone-border;
- 
 
 877 
        margin-top: -1px;
- 
 
 878 
    }
- 
 
 879 
 
- 
 
 880 
    [data-for="sectioninfo"] {
- 
 
 881 
        // When a section is empty, the activity dropzone indicator is below
- 
 
 882 
        // the section info. This ensures the dropzone will not displace the content
- 
 
 883 
        // even if the section has no restrictions or info to display.
- 
 
 884 
        min-height: 1px;
- 
 
 885 
    }
- 
 
 886 
 
- 
 
 887 
    [data-for="sectioninfo"].drop-down {
- 
 
 888 
        margin-top: -1px;
- 
 
 889 
    }
- 
 
 890 
}
- 
 
 891 
 
- 
 
 892 
/* Old indentation styles */
- 
 
 893 
 
- 
 
 894 
.mod-indent-outer {
- 
 
 895 
    display: table;
- 
 
 896 
}
- 
 
 897 
 
- 
 
 898 
.mod-indent {
- 
 
 899 
    display: table-cell;
- 
 
 900 
}
- 
 
 901 
 
- 
 
 902 
.label .mod-indent {
- 
 
 903 
    float: left;
- 
 
 904 
    padding-top: 20px;
- 
 
 905 
}
- 
 
 906 
 
- 
 
 907 
.activity.label.modtype_label .mod-indent {
- 
 
 908 
    float: none;
- 
 
 909 
}
- 
 
 910 
 
- 
 
 911 
@include media-breakpoint-up(sm) {
- 
 
 912 
    $mod-indent-size: 30px;
- 
 
 913 
    /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
- 
 
 914 
 
- 
 
 915 
    @for $i from 1 through 16 {
- 
 
 916 
        $width: ($i * $mod-indent-size);
- 
 
 917 
 
- 
 
 918 
        .mod-indent-#{$i} {
- 
 
 919 
            width: $width;
- 
 
 920 
        }
- 
 
 921 
    }
- 
 
 922 
 
- 
 
 923 
    .mod-indent-huge {
- 
 
 924 
        width: (16 * $mod-indent-size);