theme/bootstrapbase/less/moodle/responsive.less

   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     // 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
  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  }
  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     }
 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     }
 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 }