← Back to branch summary

~ubuntu-branches/ubuntu/utopic/moodle/utopic

« back to all changes in this revision

Viewing changes to theme/bootstrapbase/less/moodle/responsive.less

  • Committer: Package Import Robot
  • Author(s): Thijs Kinkhorst
  • Date: 2014-05-12 16:10:38 UTC
  • mfrom: (36.1.3 sid)
  • Revision ID: package-import@ubuntu.com-20140512161038-puyqf65k4e0s8ytz
Tags: 2.6.3-1
New upstream release.

Show diffs side-by-side

added added

removed removed

Lines of Context:
theme/bootstrapbase/less/moodle/responsive.less
50
50
    .form-buttons {
51
51
        padding-left: @horizontalComponentOffset980;
52
52
    }
53
 
 
54
 
}
55
 
 
56
 
// login page
 
53
}
 
54
 
 
55
@media (max-width: 873px) {
 
56
    .file-picker .fp-repo-area {
 
57
        width: 100%;
 
58
        height: auto;
 
59
        max-height: 220px;
 
60
        y-scroll: auto;
 
61
        float: none;
 
62
        border: 0px;
 
63
    }
 
64
    .file-picker .fp-repo-items {
 
65
        width: 100%;
 
66
        float: none;
 
67
    }
 
68
    .file-picker .fp-login-form .fp-login-input label {
 
69
        text-align: left;
 
70
    }
 
71
    .dir-rtl .file-picker .fp-login-form .fp-login-input label {
 
72
        text-align: right;
 
73
    }
 
74
    .file-picker .fp-content form td {
 
75
        display: block;
 
76
        width: 100%;
 
77
        text-align: left;
 
78
    }
 
79
    .dir-rtl .file-picker .fp-content form td {
 
80
        text-align: right;
 
81
    }
 
82
    .fp-content .mdl-right {
 
83
        text-align: left;
 
84
    }
 
85
    .dir-rtl .fp-content .mdl-right {
 
86
        text-align: right;
 
87
    }
 
88
 
 
89
    .fp-repo-items .fp-navbar {
 
90
        border-top: 1px solid rgb(187, 187, 187);
 
91
    }
 
92
 
 
93
    .dir-rtl {
 
94
        .userprofile dl.list dt,
 
95
        .userprofile dl.list dd {
 
96
            float: none;
 
97
            text-align: right;
 
98
            margin-right: 0;
 
99
        }
 
100
    }
 
101
 
 
102
}
 
103
 
57
104
@media (min-width: 1200px) {
 
105
    // Login page.
58
106
    .loginbox.twocolumns .loginpanel {
59
107
        margin-left: 0;
60
108
    }
86
134
        .mform .fdescription.required,
87
135
        .userprofile dl.list dd,
88
136
        .form-horizontal .controls {
89
 
            margin-right: @horizontalComponentOffset1200;
 
137
            margin-right: (@horizontalComponentOffset1200 - 100px);
90
138
        }
91
139
        #page-mod-forum-search .c1 {
92
140
            margin-right: @horizontalComponentOffset1200;
93
141
        }
 
142
        .form-item .form-label,
 
143
        .mform .fitem div.fitemtitle,
 
144
        .userprofile dl.list dt,
 
145
        .form-horizontal .control-label {
 
146
            width: (@horizontalComponentOffset1200 - 120px);
 
147
        }
 
148
 
94
149
    }
95
150
    .path-admin .buttons,
96
151
    .form-buttons {
103
158
        }
104
159
    }
105
160
 
 
161
    // Core empty block regions.
 
162
    .fluid-span (@columns) {
 
163
        .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 
164
    }
 
165
    .empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
 
166
        #region-main.span8 {
 
167
            /** increase the span size by 1 **/
 
168
            .fluid-span(9);
 
169
        }
 
170
        #block-region-side-pre.span4 {
 
171
            /** decrease the span size by 1 **/
 
172
            .fluid-span(3);
 
173
        }
 
174
    }
106
175
}
107
176
 
108
177
@media (min-width: 980px) {
117
186
}
118
187
 
119
188
@media (min-width: 768px) and (max-width: 979px) {
 
189
    // Login page.
120
190
    .loginbox.twocolumns .loginpanel {
121
191
          margin-left: 0;
122
192
    }
125
195
        width: 48.61878453038674%;
126
196
        *width: 48.56559304102504%;
127
197
    }
 
198
    // Core empty block regions.
 
199
    .fluid-span (@columns) {
 
200
        .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
 
201
    }
 
202
    .empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
 
203
        #region-main.span8 {
 
204
            /** increase the span size by 1 **/
 
205
            .fluid-span(9);
 
206
        }
 
207
        #block-region-side-pre.span4 {
 
208
            /** decrease the span size by 1 **/
 
209
            .fluid-span(3);
 
210
        }
 
211
    }
128
212
}
129
213
 
130
214
@media (max-width: 767px) {
136
220
         margin-left: 0;
137
221
         .box-sizing(border-box);
138
222
     }
 
223
     #page-mod-quiz-edit div.quizcontents,
 
224
    .questionbankwindow.block {
 
225
        width: 100%;
 
226
        float: none;
 
227
    }
 
228
    #page-mod-quiz-edit #block-region-side-pre,
 
229
    #page-mod-quiz-edit #block-region-side-post {
 
230
        clear: both;
 
231
    }
 
232
 
139
233
 }
140
234
 
141
235
@media (max-width: 480px) {
169
263
        border-color: #ddd;
170
264
        z-index: 2;
171
265
    }
172
 
    .file-picker .fp-repo-items,
173
 
    .file-picker .fp-repo-area {
174
 
        position: relative;
175
 
        display: block;
176
 
        width: auto;
177
 
        top: 0;
178
 
        bottom: 0;
179
 
        border: none;
180
 
        margin: 0;
181
 
    }
182
 
    .file-picker .fp-content {
183
 
        width: 100%;
184
 
        height: 100%;
185
 
    }
186
266
    .fp-content-center {
187
267
        display: block;
188
268
        vertical-align: top;
189
269
    }
190
 
    .fp-upload-form td.mdl-right,
191
 
    .fp-upload-form td.mdl-left,
192
 
    .fp-login-form .input,
193
 
    .file-picker .fp-login-form .fp-login-input label,
194
 
    .file-picker td.label {
195
 
        display: block;
196
 
        text-align: left;
197
 
    }
198
 
    .file-picker .fp-login-form table,
199
 
    .file-picker td,
200
 
    .file-picker td.label,
201
 
    .file-picker .fp-upload-form table {
202
 
            margin: 0;
203
 
            padding: 0;
204
 
    }
205
270
    .course-content ul.topics li.section,
206
271
    .course-content ul.topics li.section .content,
207
272
    .course-content ul.weeks li.section .content,
220
285
        border-bottom: thin solid #eee;
221
286
    }
222
287
    .course-content .section .activity .commands {
223
 
        display: block;
224
288
        text-align: right;
225
289
    }
226
 
    .jsenabled .visibleifjs.addresourcemodchooser {
227
 
        display: none;
 
290
    /** Handles display of the activity chooser on small screens **/
 
291
    .jsenabled .choosercontainer #chooseform .alloptions {
 
292
        max-width: 100%;
228
293
    }
229
 
    .jsenabled .hiddenifjs.addresourcedropdown {
230
 
        display: block;
231
 
        .iconhelp {
232
 
            display: inline-block;
233
 
            padding: 6px;
234
 
            vertical-align: top;
235
 
        }
236
 
        div.urlselect {
237
 
            display: block;
238
 
            form {
239
 
                margin: 0;
240
 
            }
241
 
        }
 
294
    .jsenabled .choosercontainer #chooseform .instruction,
 
295
    .jsenabled .choosercontainer #chooseform .typesummary {
 
296
        position:static;
242
297
    }
243
298
    .que .info {
244
299
        float: none;
324
379
    }
325
380
}
326
381
 
 
382
.dir-rtl {
 
383
    .dropdown-menu {
 
384
        right:0;
 
385
        left:auto;
 
386
    }
 
387
    .navbar .nav>li>.dropdown-menu:before {
 
388
        right:9px;
 
389
        left:auto;
 
390
    }
 
391
    .navbar .nav>li>.dropdown-menu:after {
 
392
        right: 10px;
 
393
        left:auto;
 
394
    }
 
395
    .dropdown-submenu>a:after {
 
396
        margin-right: -10px;
 
397
        margin-left: 0;
 
398
        border-right-color: #ccc;
 
399
        border-left-color: transparent;
 
400
        border-width: 5px 5px 5px 0px;
 
401
    }
 
402
    .dropdown-submenu>.dropdown-menu {
 
403
        right:100%;
 
404
        left:auto;
 
405
    }
 
406
}
 
407
 
327
408
@media (max-width: 979px) {
328
409
    .nav-collapse {
329
410
         height: 0;
347
428
    .nav-collapse.active {
348
429
        height: auto;
349
430
    }
350
 
 
 
431
    .path-mod-data .box > table > tbody > tr > td {
 
432
        display: block;
 
433
    }
 
434
    .path-mod-forum .forumheaderlist {
 
435
        thead .header {
 
436
            font-weight: normal;
 
437
            font-size: round(@fontSizeSmall);
 
438
        }
 
439
        .discussion {
 
440
            .author, .replies, .lastpost {
 
441
                font-size: round(@fontSizeSmall);
 
442
            }
 
443
            .replies .unread a {
 
444
                padding: 0;
 
445
            }
 
446
        }
 
447
    }
351
448
}
352
449
 
353
 
@media (max-width: 768px) {
 
450
@media (max-width: 767px) {
354
451
// Resize, reflow file-picker on small devices
355
452
   #filesskin .yui3-panel,
356
453
   #filesskin .file-picker.fp-generallayout {
374
471
        float: left;
375
472
    }
376
473
 
377
 
// Hide broken drag'n'drop options on touch devices MDL-38371
378
 
// Not a great workaround, landscape iPads are wider than this,
379
 
// and a resized window on a netbook could be smaller, but best
380
 
// we can do with CSS. There might be a JS-based solution.
381
 
    .section .side,
382
 
    .editing_move {
383
 
        display: none;
384
 
    }
385
 
    .activityinstance > a {
386
 
        display: block;
387
 
    }
388
 
 
389
474
  // GRID & CONTAINERS
390
475
  // -----------------
391
476
  // Remove width from containers
413
498
    margin-left: 0;
414
499
    .box-sizing(border-box);
415
500
  }
 
501
 
 
502
    // We need to specify a more specific selector to reset the width for
 
503
    // cases when we have content in the side-pre blockregion but not in the
 
504
    // side-post blockregion as there are more specific selectors in
 
505
    // core.less which take precedence which break responsiveness.
 
506
    .empty-region-side-post.used-region-side-pre { // Post region is empty and pre region is in use.
 
507
        #block-region-side-pre.span4,
 
508
        #region-main.span8 {
 
509
            .fluid-span(12);
 
510
        }
 
511
    }
 
512
 
416
513
  .row-fluid .span12 {
417
514
    width: 100%;
418
515
    .box-sizing(border-box);
423
520
  div[role=main] {
424
521
      margin-bottom: 1em;
425
522
  }
 
523
    .coursebox {
 
524
        .info {
 
525
            .name {
 
526
                a {
 
527
                    background-position: 0 13px;
 
528
                }
 
529
            }
 
530
        }
 
531
    }
 
532
    .category-browse {
 
533
        .coursebox {
 
534
            .info {
 
535
                .name {
 
536
                    a {
 
537
                        background-position: 0 13px;
 
538
                    }
 
539
                }
 
540
            }
 
541
        }
 
542
    }
 
543
}
 
544
 
 
545
// All widths between 1200px and 1600px
 
546
@media (min-width: 1200px) and (max-width: 1600px) {
 
547
    .fluid-span (@columns) {
 
548
        .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 
549
    }
 
550
    // CSS for the course management pages.
 
551
    #course-category-listings.columns-3 {
 
552
        background-color:transparent;
 
553
        border:0;
 
554
 
 
555
        #category-listing,
 
556
        #course-listing {
 
557
            .fluid-span(6);
 
558
            margin-left: @fluidGridGutterWidth1200;
 
559
            *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
 
560
            &:first-child {
 
561
                margin-left: 0;
 
562
            }
 
563
        }
 
564
        #course-detail {
 
565
            .fluid-span(12);
 
566
            margin: 1em 0 0;
 
567
        }
 
568
    }
 
569
}
 
570
 
 
571
// All widths up to 1199px.
 
572
@media (max-width: 1199px) {
 
573
    // CSS for the course management pages.
 
574
    #course-category-listings.columns-3 {
 
575
        background-color:transparent;
 
576
        border:0;
 
577
        #category-listing,
 
578
        #course-listing,
 
579
        #course-detail {
 
580
            .fluid-span(12);
 
581
            margin: 0 0 1em 0;
 
582
        }
 
583
    }
 
584
 
 
585
    #page-mod-forum-discuss .discussioncontrols {
 
586
        text-align: right;
 
587
        .discussioncontrol {
 
588
            float: none;
 
589
            width: auto;
 
590
            display: inline-block;
 
591
            margin: 0 3px 0.5em;
 
592
            select,
 
593
            input {
 
594
                margin-bottom: 0;
 
595
            }
 
596
            &.movediscussion {
 
597
                margin-right: 0;
 
598
                padding-right: 0;
 
599
            }
 
600
        }
 
601
    }
 
602
 
 
603
   #page-mod-forum-discuss.dir-rtl .discussioncontrols {
 
604
       text-align: left;
 
605
   }
426
606
}