Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
$courseindex-item-padding-y: .5rem;
2 
$courseindex-item-padding-x: .75rem;
3 
 
4 
$courseindex-item-padding-y-sm: 4px;
5 
$courseindex-item-padding-x-sm: 7px;
6 
 
7 
$courseindex-item-dragging-bg: theme-color-level('info', -11) !default;
8 
$courseindex-item-dragging-border: theme-color-level('info', -9) !default;
9 
 
10 
// Dark mode.
11 
$dm-courseindex-item-dragging-bg: theme-color-level('info', -11) !default;
12 
$dm-courseindex-item-dragging-border: theme-color-level('info', -9) !default;
13 
 
14 
@mixin courseindex-item-hover() {
15 
    @include hover-focus() {
16 
 
17 
        span,
18 
        .courseindex-link,
19 
        .courseindex-chevron {
20 
            align-self: center;
21 
            color: $drawer-link;
22 
            cursor: pointer;
23 
 
24 
            .theme-dark & {
25 
                color: $dm-drawer-link;
26 
            }
27 
        }
28 
 
29 
        &.dimmed {
30 
            opacity: .6;
31 
            color: $drawer-link;
32 
 
33 
            .theme-dark & {
34 
                color: $dm-drawer-link;
35 
            }
36 
 
37 
            .courseindex-link,
38 
            .courseindex-chevron {
39 
                color: $drawer-link;
40 
 
41 
                .theme-dark & {
42 
                    color: $dm-drawer-link;
43 
                }
44 
            }
45 
        }
46 
 
47 
        &.draggable {
48 
            cursor: pointer;
49 
        }
50 
    }
51 
}
52 
 
53 
@mixin courseindex-item-dragging() {
54 
    &.dragging {
55 
        border: $border-width solid $courseindex-item-dragging-border;
56 
        background-color: $courseindex-item-dragging-bg;
57 
 
58 
        .theme-dark & {
59 
            border: $border-width solid $dm-courseindex-item-dragging-border;
60 
            background-color: $dm-courseindex-item-dragging-bg;
61 
        }
62 
    }
63 
}
64 
 
65 
.drawer-course-index {
66 
    @include media-breakpoint-up(lmd) {
67 
        z-index: $zindex-fixed + 1;
68 
    }
69 
 
70 
    @include media-breakpoint-down(md) {
71 
        z-index: 9999;
72 
    }
73 
}
74 
 
75 
.drawer-course-index .drawercontent {
76 
    padding: 0 0 70px 0;
77 
    overflow-x: hidden;
78 
}
79 
 
80 
.courseindex {
81 
 
82 
    .expanded-icon,
83 
    .collapsed-icon {
84 
        background-color: $gray-100;
85 
        color: $gray-800;
86 
 
87 
        align-items: center;
88 
        justify-content: center;
89 
 
90 
        width: 30px;
91 
        height: 30px;
92 
        border-radius: 30px;
93 
 
1441 ariadna 94 
        margin: 0 4px;
95 
 
1 efrain 96 
        &:hover {
1441 ariadna 97 
            background-color: var(--primary-color-300);
1 efrain 98 
        }
99 
 
100 
        .theme-dark & {
101 
            background-color: $dm-gray-100;
102 
            color: $dm-gray-800;
103 
        }
104 
 
105 
        .icon {
106 
            font-size: 12px;
107 
            line-height: 20px;
1441 ariadna 108 
            color: $gray-800;
109 
 
110 
            .theme-dark & {
111 
                color: $dm-gray-800;
112 
            }
1 efrain 113 
        }
114 
    }
115 
 
116 
    // Both activity and section items.
117 
    .courseindex-item {
118 
        padding: $courseindex-item-padding-y-sm 0;
119 
        border: $border-width solid transparent;
120 
        @include border-radius($border-radius);
121 
        position: relative;
122 
 
123 
        align-items: center;
124 
 
125 
        &.courseindex-section-title {
126 
            padding: 0;
127 
        }
128 
 
1441 ariadna 129 
        .icon {
130 
            font-size: 12px;
131 
        }
132 
 
1 efrain 133 
        &.courseindex-section-title a {
134 
            font-weight: $font-weight-bold;
135 
            font-size: 14px;
136 
            line-height: 1.5;
137 
            color: $drawer-nav-btn-text;
138 
 
139 
            .theme-dark & {
140 
                color: $dm-headings-color;
141 
            }
142 
        }
143 
 
144 
        .icons-collapse-expand {
145 
            line-height: 1;
146 
        }
147 
 
148 
        .courseindex-name,
149 
        .courseindex-link {
150 
            align-self: center;
151 
            color: $drawer-nav-btn-text;
152 
            font-size: .85rem;
153 
            line-height: 1.3;
154 
            display: block;
155 
            //width: calc(100% - 60px);
156 
 
157 
            .theme-dark & {
158 
                color: $dm-body-color-secondary;
159 
            }
160 
        }
161 
 
162 
        @include courseindex-item-hover();
163 
        @include courseindex-item-dragging();
164 
 
165 
        &.active {
166 
            background-color: $drawer-nav-btn-bg-hover;
167 
            color: $drawer-nav-btn-text-hover;
168 
        }
169 
 
170 
        // Hidden elements.
171 
        &.dimmed {
172 
            opacity: .6;
173 
 
174 
            .courseindex-link,
175 
            .courseindex-chevron {
176 
                opacity: .6;
177 
            }
178 
        }
179 
 
180 
        // Restrictions icon.
181 
        .courseindex-locked {
182 
            display: none;
183 
        }
184 
 
185 
        &.restrictions {
186 
            .courseindex-locked {
187 
                display: inline-flex;
188 
 
189 
                .rui-icon {
190 
                    background-color: $yellow-200;
191 
                    width: 24px;
192 
                    height: 24px;
193 
                    border-radius: 24px;
194 
                    display: flex;
195 
                    justify-content: center;
196 
                    align-items: center;
197 
                }
198 
 
199 
                .icon {
200 
                    padding: 4px;
201 
                    width: 16px;
202 
                    height: 16px;
1441 ariadna 203 
                    font-size: 14px;
1 efrain 204 
                }
205 
            }
206 
        }
207 
 
208 
        // Current page item.
209 
        &.pageitem {
210 
            &:before {
211 
                content: '';
212 
                position: absolute;
213 
                top: calc(50% - 4px);
1441 ariadna 214 
                left: -23px;
1 efrain 215 
                z-index: 1;
1441 ariadna 216 
                background-color: var(--primary-color-400);
1 efrain 217 
                width: 8px;
218 
                height: 8px;
219 
                border-radius: 8px;
220 
            }
221 
 
222 
            scroll-margin: 80px;
223 
 
224 
            a {
225 
                align-self: center;
226 
                font-weight: $font-weight-bold;
227 
                color: $drawer-nav-btn-text;
228 
 
229 
                .theme-dark & {
230 
                    color: $dm-dropdown-link-color;
231 
                }
232 
            }
233 
 
234 
            @include hover-focus() {
235 
                color: $drawer-nav-btn-text;
236 
 
237 
                .courseindex-link,
238 
                .courseindex-chevron {
239 
                    color: $drawer-nav-btn-text;
240 
                }
241 
            }
242 
        }
243 
 
244 
        // Completion.
245 
        .completioninfo {
246 
            line-height: 1;
247 
            margin-left: 0;
248 
            margin-right: 4px;
249 
            min-width: 20px;
250 
 
251 
            color: $body-color-light;
252 
 
253 
            .theme-dark & {
254 
                color: $dm-body-color-light;
255 
            }
256 
 
257 
            &:empty {
258 
                display: none;
259 
            }
260 
 
261 
            &.completion_complete {
262 
                color: #00665f;
263 
 
264 
                .theme-dark & {
265 
                    color: #45ca7d;
266 
                }
267 
            }
268 
 
269 
            &.completion_fail {
270 
                color: $danger;
271 
            }
272 
        }
273 
 
274 
        .completion_complete~.courseindex-link {
275 
            color: #00665f;
276 
 
277 
            .theme-dark & {
278 
                color: $dm-body-color-light;
279 
            }
280 
        }
281 
 
282 
        &.indented {
283 
            padding: 4px 2px !important;
1441 ariadna 284 
            margin-left: 20px;
1 efrain 285 
 
286 
            .courseindex-link {
287 
                font-size: 12px;
288 
                opacity: .8;
289 
            }
290 
        }
291 
    }
292 
 
293 
    // The full section collapsable.
294 
    .courseindex-section {
295 
        border-radius: $btn-border-radius;
296 
        margin-left: 4px;
1441 ariadna 297 
        margin-right: 10px;
1 efrain 298 
        margin-bottom: 5px;
299 
 
300 
        @include courseindex-item-dragging();
301 
 
302 
        .current-badge {
303 
            font-size: 11px;
304 
            font-weight: $font-weight-medium;
305 
            line-height: $line-height-base;
306 
            border-radius: $btn-border-radius - 3px;
307 
            display: none;
1441 ariadna 308 
 
309 
            color: $yellow-800;
310 
            background-color: $yellow-100;
311 
 
1 efrain 312 
            position: absolute;
1441 ariadna 313 
            top: 0;
314 
            right: -20px;
315 
 
316 
            padding: 3px;
317 
            text-align: center;
318 
            box-sizing: content-box;
1 efrain 319 
        }
320 
 
321 
        &.current {
322 
            position: relative;
323 
            color: $drawer-nav-btn-text-hover;
1441 ariadna 324 
            border-left: 3px solid var(--main-theme-color);
1 efrain 325 
 
326 
            .current-badge {
327 
                display: inline-block;
328 
            }
329 
        }
330 
 
331 
        &.dropready .courseindex-item-content {
332 
            /* Extra dropzone space */
333 
            padding-bottom: 1em;
334 
        }
335 
 
336 
        .courseindex-sectioncontent {
337 
            .courseindex-item {
338 
                padding-left: 0;
339 
            }
340 
        }
341 
    }
342 
 
343 
    .courseindex-sectioncontent {
1441 ariadna 344 
        padding: 3px 3px 20px 38px;
1 efrain 345 
    }
346 
 
347 
    // Element visible only on editing mode.
348 
    .d-flex-noedit {
349 
        display: none;
350 
    }
351 
 
352 
    &.editing {
353 
        .d-flex-noedit {
354 
            display: flex;
355 
        }
356 
    }
357 
 
358 
    // Placeholders.
359 
    .media-list {
360 
        .placeholder-circle {
361 
            height: 20px;
362 
            width: 20px;
363 
            border-radius: $btn-border-radius;
364 
        }
365 
 
366 
        .placeholder-rec {
367 
            width: 50%;
368 
            height: 20px;
369 
            border-radius: $btn-border-radius;
370 
            margin: 0.5rem 0;
371 
        }
372 
    }
373 
}
374 
 
375 
.drawerheadercontent {
376 
    position: absolute;
377 
 
378 
    @include media-breakpoint-up(lmd) {
379 
        right: 20px;
380 
        top: 30px;
381 
    }
382 
 
383 
    @include media-breakpoint-between(xs, md) {
384 
        right: 10px;
385 
        top: 10px;
386 
    }
387 
}