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