Proyectos de Subversion Moodle

Rev

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