MDL-38016 Themes - Add a bootstrap theme to core
[moodle.git] / theme / bootstrap / less / moodle / responsive.less
CommitLineData
8903b17b
BB
1/* responsive.less */
2
3// Should probably be moved to relevant .less files
4// after 4095 selector issue is solved
5
6@media (min-width: 980px) {
7 .dir-rtl .navbar .nav.pull-right,
8 .dir-rtl .navbar .logininfo {
9 float: left;
10 }
11 .dir-rtl .navbar .nav {
12 float: right;
13 & > li {
14 float: right;
15 }
16 }
17}
18
19// login page
20@media (min-width: 1200px) {
21 .loginbox.twocolumns .loginpanel {
22 margin-left: 0;
23 }
24 .loginbox.twocolumns .loginpanel,
25 .loginbox.twocolumns .signuppanel {
26 width: 48.717948717948715%;
27 *width: 48.664757228587014%;
28 }
29}
30
31@media (min-width: 980px) {
32 .loginbox.twocolumns .loginpanel {
33 margin-left: 0;
34 }
35 .loginbox.twocolumns .loginpanel,
36 .loginbox.twocolumns .signuppanel {
37 width: 48.617948717948715%;
38 *width: 48.664757228587014%;
39 }
40}
41
42@media (min-width: 768px) and (max-width: 979px) {
43 .loginbox.twocolumns .loginpanel {
44 margin-left: 0;
45 }
46 .loginbox.twocolumns .loginpanel,
47 .loginbox.twocolumns .signuppanel {
48 width: 48.61878453038674%;
49 *width: 48.56559304102504%;
50 }
51}
52
53@media (max-width: 767px) {
54 .loginbox.twocolumns .loginpanel,
55 .loginbox.twocolumns .signuppanel {
56 display: block;
57 float: none;
58 width: 100%;
59 margin-left: 0;
60 .box-sizing(border-box);
61 }
62 }
63 // Course
64 @media (min-width: 1200px) {
65 .coursebox .info,
66 .coursebox .summary {
67 width: 48.717948717948715%;
68 *width: 48.664757228587014%;
69 }
70}
71
72@media (min-width: 980px) {
73 .coursebox .info,
74 .coursebox .summary {
75 width: 48.617948717948715%;
76 *width: 48.664757228587014%;
77 }
78}
79
80@media (min-width: 768px) and (max-width: 979px) {
81 .coursebox .info,
82 .coursebox .summary {
83 width: 48.61878453038674%;
84 *width: 48.56559304102504%;
85 }
86}
87
88@media ( max-width : 767px) {
89 .coursebox .info,
90 .coursebox .summary {
91 display: block;
92 float: none;
93 width: 100%;
94 margin-left: 0;
95 .box-sizing(border-box);
96 }
97}
98
99@media (max-width: 480px) {
100 // copied from tabs.less stacked-navs
101 .tabtree > ul {
102 border: none;
103 }
104 .tabtree > ul > li {
105 float: none;
106 }
107 .tabtree > ul > li > a {
108 border: 1px solid #ddd;
109 .border-radius(0);
110 }
111 .tabtree > ul > li.first > a {
112 .border-top-radius(4px);
113 }
114 .tabtree > ul > li.last > a,
115 .tabtree > ul > li.last > a:hover {
116 border: 1px solid #ddd;
117 .border-bottom-radius(4px);
118 }
119 .tabtree > ul > li > a:hover,
120 .tabtree > ul > li > a:focus {
121 border-color: #ddd;
122 z-index: 2;
123 }
124 .file-picker .fp-repo-items,
125 .file-picker .fp-repo-area {
126 position: relative;
127 display: block;
128 width: auto;
129 top: 0;
130 bottom: 0;
131 border: none;
132 margin: 0;
133 }
134 .file-picker .fp-content {
135 width: 100%;
136 height: 100%;
137 }
138 .fp-content-center {
139 display: block;
140 vertical-align: top;
141 }
142 .fp-upload-form td.mdl-right,
143 .fp-upload-form td.mdl-left,
144 .fp-login-form .input,
145 .file-picker .fp-login-form .fp-login-input label,
146 .file-picker td.label {
147 display: block;
148 text-align: left;
149 }
150 .file-picker .fp-login-form table,
151 .file-picker td,
152 .file-picker td.label,
153 .file-picker .fp-upload-form table {
154 margin: 0;
155 padding: 0;
156 }
157 .course-content ul.topics li.section,
158 .course-content ul.topics li.section .content,
159 .course-content ul.weeks li.section .content,
160 .course-content ul.weeks li.section,
161 .course-content ul.section {
162 margin-right: 0;
163 margin-left: 0;
164 padding: 0;
165 }
166 .activityinstance {
167 display: block;
168 }
169 .editing .course-content .section .activity {
170 margin-bottom: 0.2em;
171 padding-bottom: 0.2em;
172 border-bottom: thin solid #eee;
173 }
174 .course-content .section .activity .commands {
175 display: block;
176 text-align: right;
177 }
178 .jsenabled .visibleifjs.addresourcemodchooser {
179 display: none;
180 }
181 .jsenabled .hiddenifjs.addresourcedropdown {
182 display: block;
183 .iconhelp {
184 display: inline-block;
185 padding: 6px;
186 vertical-align: top;
187 }
188 div.urlselect {
189 display: block;
190 form {
191 margin: 0;
192 }
193 }
194 }
195 .que .info {
196 float: none;
197 width: auto;
198 }
199 .que .content {
200 margin: 0;
201 }
202 .path-mod-choice .horizontal .choices .option {
203 display: block;
204 }
205 .path-mod-forum .forumsearch #search {
206 width: 120px;
207 }
208}
209
210// Stuart's 2,1,3 layout
211@media (min-width : 768px) {
212 .row-fluid .desktop-first-column {
213 margin-left: 0;
214 }
215}
216@media (max-width : 767px) {
217 .row-fluid .desktop-first-column {
218 clear: right;
219 }
220}
221// Forms
222@media (max-width: 767px) {
223 // Remove the horizontal form styles
224 .form-item .form-label,
225 .mform .fitem div.fitemtitle {
226 // copied from .control-label {
227 float: none;
228 width: auto;
229 padding-top: 0;
230 text-align: left;
231 }
232 .form-item .form-label label{
233 display: inline-block;
234 margin-right: .5em;
235 }
236 .form-item .form-setting .form-checkbox {
237 margin-top: 0;
238 }
239 .form-label span.form-shortname {
240 display: inline-block;
241 }
242 .form-item .form-setting,
243 .mform .fitem .felement,
244 .path-backup .mform .fitem .felement,
245 .mform .fdescription.required,
246 .form-item .form-description {
247 margin-left: 0;
248 }
249 table#form td.submit,
250 .form-buttons,
251 #fitem_id_submitbutton,
252 .fp-content-center form + div,
253 #fgroup_id_buttonar,
254 .form-horizontal .form-actions,
255 .fitem_fsubmit .felement.fsubmit {
256 padding-left: 10px;
257 padding-right: 10px;
258 }
259 #helppopupbox {
260 width: auto !important;
261 left: 0 !important;
262 }
263}
264// Shrink calender when short on space in block
265@media (min-width : 768px) and (max-width: 979px) {
266 .block_calendar_month .content,
267 .block .minicalendar td {
268 padding-left: 0;
269 padding-right: 0;
270 }
271}
272
273@media (max-width: 979px) {
274 .nav-collapse {
275 height: 0;
276 .nav > li > a {
277 color: @grayDark;
278 }
279 .nav > li > a:hover,
280 .nav > li > a:focus,
281 .dropdown-menu a:hover,
282 .dropdown-menu a:focus,
283 .dropdown-submenu a:focus,
284 .dropdown-submenu a:hover,
285 .dropdown-submenu a:active,
286 .dropdown-menu > li > a:hover,
287 .dropdown-menu > li > a:focus,
288 {
289 background-image: none;
290 color: @grayDark;
291 }
292 }
293 .nav-collapse.active {
294 height: auto;
295 }
296
297}
298
299@media (max-width: 768px) {
300// Resize, reflow file-picker on small devices
301 #filesskin .yui3-panel,
302 #filesskin .file-picker.fp-generallayout {
303 width: 100%;
304 left: 0;
305 }
306 .userprofile dl.list {
307 // copied from dl-horizontal in bootstrap/repsonsive.less
308 dt {
309 float: none;
310 clear: none;
311 width: auto;
312 text-align: left;
313 }
314 dd {
315 margin-left: 0;
316 }
317 }
318// Hide broken drag'n'drop options on touch devices MDL-38371
319// Not a great workaround, landscape iPads are wider than this,
320// and a resized window on a netbook could be smaller, but best
321// we can do with CSS. There might be a JS-based solution.
322 .section .side,
323 .editing_move {
324 display: none;
325 }
326 .activityinstance > a {
327 display: block;
328 }
329
330 // GRID & CONTAINERS
331 // -----------------
332 // Remove width from containers
333 .container {
334 width: auto;
335 }
336 // Fluid rows
337 .row-fluid {
338 width: 100%;
339 }
340 .row-fluid .span8.pull-right,
341 .row-fluid .span9.pull-right {
342 float: none;
343 }
344 // Undo negative margin on rows and thumbnails
345 .row {
346 margin-left: 0;
347 }
348 // Make all grid-sized elements block level again
349 [class*="span"],
350 .row-fluid [class*="span"] {
351 float: none;
352 display: block;
353 width: 100%;
354 margin-left: 0;
355 .box-sizing(border-box);
356 }
357 .row-fluid .span12 {
358 width: 100%;
359 .box-sizing(border-box);
360 }
361 .row-fluid [class*="offset"]:first-child {
362 margin-left: 0;
363 }
364 div[role=main] {
365 margin-bottom: 2em;
366 }
367}