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 
.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 
    .header-maxwidth {
72 
        max-width: $course-content-maxwidth;
73 
        margin: 0 auto;
74 
        padding-left: 15px;
75 
        padding-right: 15px;
76 
 
77 
        .header-inner {
78 
            padding-left: 0;
79 
            padding-right: 0;
80 
        }
81 
    }
82 
}
83 
 
84 
.drawer-toggles {
85 
 
86 
    .drawer-toggler {
87 
        position: fixed;
88 
        top: calc(#{$navbar-height} + 0.7rem);
89 
        z-index: 2;
90 
        .btn {
91 
            border-radius: 200px;
92 
            padding: 16px;
93 
            background-color: $gray-300;
94 
            box-shadow: $box-shadow-sm;
95 
            .icon {
96 
                width: auto;
97 
                height: auto;
98 
            }
99 
            &:focus {
100 
                box-shadow: $input-btn-focus-box-shadow;
101 
            }
102 
            transition: padding 200ms;
103 
        }
104 
    }
105 
 
106 
    .drawer-left-toggle {
107 
        left: 0;
108 
        .btn {
109 
            border-top-left-radius: 0;
110 
            border-bottom-left-radius: 0;
111 
            padding-right: 14px;
112 
            padding-left: 10px;
113 
 
114 
            &:hover {
115 
                padding-left: 20px;
116 
            }
117 
        }
118 
    }
119 
 
120 
    .drawer-right-toggle {
121 
        right: 0;
122 
        .btn {
123 
            border-top-right-radius: 0;
124 
            border-bottom-right-radius: 0;
125 
            padding-right: 10px;
126 
            padding-left: 14px;
127 
 
128 
            &:hover {
129 
                padding-right: 20px;
130 
            }
131 
        }
132 
    }
133 
}
134 
 
135 
#page.drawers.show-drawer-left .drawer-left-toggle {
136 
    display: none;
137 
}
138 
 
139 
#page.drawers.show-drawer-right .drawer-right-toggle {
140 
    display: none;
141 
}
142 
 
1441 ariadna 143 
@include media-breakpoint-down(md) {
1 efrain 144 
    //the scroll to top button
145 
    .drawer-toggles {
146 
        z-index: 100;
147 
 
148 
        .drawer-right-toggle,
149 
        .drawer-left-toggle {
150 
            top: calc(99vh - (#{$navbar-height} * 2.5));
151 
        }
152 
    }
153 
    #page.drawers.scroll-down {
154 
        .drawer-right-toggle {
155 
            transform: translateX(150%);
156 
            pointer-events: auto;
157 
            visibility: hidden;
158 
        }
159 
        .drawer-left-toggle {
160 
            transform: translateX(-150%);
161 
            pointer-events: auto;
162 
            visibility: hidden;
163 
        }
164 
    }
1441 ariadna 165 
    .hasstickyfooter:has(.drawer-right-toggle) .maintenancewarning {
166 
        right: 2rem;
167 
    }
168 
    .hasstickyfooter:has(.drawer-left-toggle) .maintenancewarning {
169 
        margin-left: 3.5rem;
170 
    }
1 efrain 171 
}
172 
 
173 
@include media-breakpoint-up(sm) {
174 
    #page.drawers .main-inner {
175 
        margin-top: 1.5rem;
176 
    }
177 
}
178 
 
179 
@include media-breakpoint-up(md) {
180 
 
181 
    // Add some padding for the drawer toggle buttons
182 
    #page.drawers {
183 
        padding-left: 3rem;
184 
        padding-right: 3rem;
185 
        .main-inner {
186 
            padding: 1.5rem 0.5rem;
187 
        }
188 
        div[role="main"] {
189 
            padding-left: 15px;
190 
            padding-right: 15px;
191 
        }
192 
    }
193 
}
194 
 
195 
@include media-breakpoint-up(lg) {
196 
    .drawer-left,
197 
    .drawer-right {
198 
        top: $navbar-height;
199 
        height: calc(100vh - #{$navbar-height});
200 
    }
201 
    .hasstickyfooter {
202 
        .drawer-left,
203 
        .drawer-right {
204 
            top: $navbar-height;
205 
            height: calc(100vh - #{$navbar-height} - #{$stickyfooter-height});
206 
        }
207 
    }
208 
 
209 
    #page.drawers {
210 
        position: relative;
211 
        overflow-y: visible;
212 
        @include transition(0.2s);
213 
        left: 0;
214 
        right: 0;
215 
        &.show-drawer-left {
216 
            margin-left: $drawer-left-width;
217 
            margin-right: 0;
218 
            padding-left: 1rem;
219 
        }
220 
        &.show-drawer-right {
221 
            margin-left: 0;
222 
            margin-right: $drawer-right-width;
223 
            padding-right: 1rem;
224 
            .jsenabled & .popover-process-monitor,
225 
            .jsenabled & .btn-footer-popover,
226 
            .jsenabled & .btn-footer-communication {
227 
                right: calc(#{$drawer-right-width} + 2rem);
228 
            }
1441 ariadna 229 
            .jsenabled:has(&) .maintenancewarning {
230 
                right: calc(#{$drawer-right-width} + 5rem);
231 
            }
1 efrain 232 
        }
233 
        &.show-drawer-left.show-drawer-right {
234 
            margin-left: $drawer-left-width;
235 
            margin-right: $drawer-right-width;
236 
        }
237 
        &.hasstickyfooter {
238 
            margin-bottom: $stickyfooter-height;
239 
        }
240 
    }
241 
}
242 
 
243 
.drawercontrolbuttons {
244 
    margin-top: 92px;
245 
    .buttons {
246 
        z-index: 1;
247 
    }
248 
}