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