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