Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
.layout {
2 
    &.fullscreen {
3 
        height: 100vh;
4 
        position: fixed;
5 
        top: 0;
6 
        left: 0;
7 
        z-index: $zindex-modal-backdrop;
8 
        @include transition(0.5s);
9 
        width: 100vw;
10 
        margin: 0;
11 
        opacity: 1;
12 
        background-color: $modal-content-bg;
13 
 
14 
        > div {
15 
            height: 100%;
16 
            width: 100%;
17 
        }
18 
 
19 
        .loading-icon {
20 
            margin-left: auto;
21 
            margin-right: auto;
22 
            text-align: center;
23 
            display: inline-block;
24 
            width: 100%;
25 
            top: 40%;
26 
            position: fixed;
27 
            .icon {
28 
                max-width: 4em;
29 
                max-height: 4em;
30 
                font-size: 4em;
31 
            }
32 
        }
33 
    }
34 
}
35 
 
36 
#page.drawers {
37 
    margin-top: $navbar-height;
38 
    @include thin-scrolls($gray-100);
39 
    .main-inner {
40 
        max-width: 100%;
41 
        width: 100%;
42 
        margin: 0 auto;
43 
        @include border-radius();
44 
        background-color: $white;
45 
        padding: 1.5rem 0.5rem;
46 
        margin-top: 0.5rem;
47 
        margin-bottom: 3rem;
48 
        flex: 1 0 auto;
49 
    }
50 
    .activity-header {
51 
        margin-left: 15px;
52 
        margin-right: 15px;
53 
    }
54 
}
55 
 
56 
@include media-breakpoint-up(md) {
57 
    .pagelayout-standard,
58 
    body.limitedwidth {
59 
        #page.drawers {
60 
            .main-inner {
61 
                max-width: $course-content-maxwidth;
62 
            }
63 
            .footer-popover {
64 
                max-width: $course-content-maxwidth;
65 
                width: 100%;
66 
                margin: 0 auto;
67 
                @include border-radius();
68 
            }
69 
        }
70 
    }
71 
    body.mediumwidth {
72 
        #page.drawers {
73 
            .main-inner {
74 
                max-width: $medium-content-maxwidth;
75 
            }
76 
            .footer-popover {
77 
                max-width: $medium-content-maxwidth;
78 
                width: 100%;
79 
                margin: 0 auto;
80 
                @include border-radius();
81 
            }
82 
        }
83 
    }
84 
    .header-maxwidth {
85 
        max-width: $course-content-maxwidth;
86 
        margin: 0 auto;
87 
        padding-left: 15px;
88 
        padding-right: 15px;
89 
 
90 
        .header-inner {
91 
            padding-left: 0;
92 
            padding-right: 0;
93 
        }
94 
    }
95 
}
96 
 
97 
.drawer-toggles {
98 
 
99 
    .drawer-toggler {
100 
        position: fixed;
101 
        top: calc(#{$navbar-height} + 0.7rem);
102 
        z-index: 2;
103 
        .btn {
104 
            border-radius: 200px;
105 
            padding: 16px;
106 
            background-color: $gray-300;
107 
            box-shadow: $box-shadow-sm;
108 
            .icon {
109 
                width: auto;
110 
                height: auto;
111 
            }
112 
            &:focus {
113 
                box-shadow: $input-btn-focus-box-shadow;
114 
            }
115 
            transition: padding 200ms;
116 
        }
117 
    }
118 
 
119 
    .drawer-left-toggle {
120 
        left: 0;
121 
        .btn {
122 
            border-top-left-radius: 0;
123 
            border-bottom-left-radius: 0;
124 
            padding-right: 14px;
125 
            padding-left: 10px;
126 
 
127 
            &:hover {
128 
                padding-left: 20px;
129 
            }
130 
        }
131 
    }
132 
 
133 
    .drawer-right-toggle {
134 
        right: 0;
135 
        .btn {
136 
            border-top-right-radius: 0;
137 
            border-bottom-right-radius: 0;
138 
            padding-right: 10px;
139 
            padding-left: 14px;
140 
 
141 
            &:hover {
142 
                padding-right: 20px;
143 
            }
144 
        }
145 
    }
146 
}
147 
 
148 
#page.drawers.show-drawer-left .drawer-left-toggle {
149 
    display: none;
150 
}
151 
 
152 
#page.drawers.show-drawer-right .drawer-right-toggle {
153 
    display: none;
154 
}
155 
 
156 
@include media-breakpoint-down(sm) {
157 
    //the scroll to top button
158 
    .drawer-toggles {
159 
        z-index: 100;
160 
 
161 
        .drawer-right-toggle,
162 
        .drawer-left-toggle {
163 
            top: calc(99vh - (#{$navbar-height} * 2.5));
164 
        }
165 
    }
166 
    #page.drawers.scroll-down {
167 
        .drawer-right-toggle {
168 
            transform: translateX(150%);
169 
            pointer-events: auto;
170 
            visibility: hidden;
171 
        }
172 
        .drawer-left-toggle {
173 
            transform: translateX(-150%);
174 
            pointer-events: auto;
175 
            visibility: hidden;
176 
        }
177 
    }
178 
}
179 
 
180 
@include media-breakpoint-up(sm) {
181 
    #page.drawers .main-inner {
182 
        margin-top: 1.5rem;
183 
    }
184 
}
185 
 
186 
@include media-breakpoint-up(md) {
187 
 
188 
    // Add some padding for the drawer toggle buttons
189 
    #page.drawers {
190 
        padding-left: 3rem;
191 
        padding-right: 3rem;
192 
        .main-inner {
193 
            padding: 1.5rem 0.5rem;
194 
        }
195 
        div[role="main"] {
196 
            padding-left: 15px;
197 
            padding-right: 15px;
198 
        }
199 
    }
200 
}
201 
 
202 
@include media-breakpoint-up(lg) {
203 
    .drawer-left,
204 
    .drawer-right {
205 
        top: $navbar-height;
206 
        height: calc(100vh - #{$navbar-height});
207 
    }
208 
    .hasstickyfooter {
209 
        .drawer-left,
210 
        .drawer-right {
211 
            top: $navbar-height;
212 
            height: calc(100vh - #{$navbar-height} - #{$stickyfooter-height});
213 
        }
214 
    }
215 
 
216 
    #page.drawers {
217 
        position: relative;
218 
        overflow-y: visible;
219 
        @include transition(0.2s);
220 
        left: 0;
221 
        right: 0;
222 
        &.show-drawer-left {
223 
            margin-left: $drawer-left-width;
224 
            margin-right: 0;
225 
            padding-left: 1rem;
226 
        }
227 
        &.show-drawer-right {
228 
            margin-left: 0;
229 
            margin-right: $drawer-right-width;
230 
            padding-right: 1rem;
231 
            .jsenabled & .popover-process-monitor,
232 
            .jsenabled & .btn-footer-popover,
233 
            .jsenabled & .btn-footer-communication {
234 
                right: calc(#{$drawer-right-width} + 2rem);
235 
            }
236 
        }
237 
        &.show-drawer-left.show-drawer-right {
238 
            margin-left: $drawer-left-width;
239 
            margin-right: $drawer-right-width;
240 
        }
241 
        &.hasstickyfooter {
242 
            margin-bottom: $stickyfooter-height;
243 
        }
244 
    }
245 
}
246 
 
247 
.drawercontrolbuttons {
248 
    margin-top: 92px;
249 
    .buttons {
250 
        z-index: 1;
251 
    }
252 
}