Merge branch 'MDL-40674_master' of https://github.com/nadavkav/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / responsive.less
index eeaea9b..bc4b844 100644 (file)
     .form-horizontal .controls {
         margin-left: @horizontalComponentOffset980;
     }
+    .dir-rtl {
+        .form-item .form-setting,
+        .form-item .form-description,
+        .mform .fitem .felement,
+        .mform .fdescription.required,
+        .userprofile dl.list dd,
+        .form-horizontal .controls {
+            margin-right: @horizontalComponentOffset980;
+        }
+    }
+    #page-mod-forum-search.dir-lrt .c1 {
+        margin-right: @horizontalComponentOffset980;
+    }
     .path-admin .buttons,
     .form-buttons {
         padding-left: @horizontalComponentOffset980;
     }
+}
+
+@media (max-width: 873px) {
+    .file-picker .fp-repo-area {
+        width: 100%;
+        height: auto;
+        max-height: 220px;
+        y-scroll: auto;
+        float: none;
+        border: 0px;
+    }
+    .file-picker .fp-repo-items {
+        width: 100%;
+        float: none;
+    }
+    .file-picker .fp-login-form .fp-login-input label {
+        text-align: left;
+    }
+    .dir-rtl .file-picker .fp-login-form .fp-login-input label {
+        text-align: right;
+    }
+    .file-picker .fp-content form td {
+        display: block;
+        width: 100%;
+        text-align: left;
+    }
+    .dir-rtl .file-picker .fp-content form td {
+        text-align: right;
+    }
+    .fp-content .mdl-right {
+        text-align: left;
+    }
+    .dir-rtl .fp-content .mdl-right {
+        text-align: right;
+    }
+
+    .fp-repo-items .fp-navbar {
+        border-top: 1px solid rgb(187, 187, 187);
+    }
+
+    .dir-rtl {
+        .userprofile dl.list dt,
+        .userprofile dl.list dd {
+            float: none;
+            text-align: right;
+            margin-right: 0;
+        }
+    }
 
+    .fp-formset div {
+        height: auto;
+    }
 }
 
-// login page
 @media (min-width: 1200px) {
+    // Login page.
     .loginbox.twocolumns .loginpanel {
         margin-left: 0;
     }
     .form-horizontal .controls {
         margin-left: @horizontalComponentOffset1200;
     }
+    .dir-rtl {
+        .form-item .form-setting,
+        .form-item .form-description,
+        .mform .fitem .felement,
+        .mform .fdescription.required,
+        .userprofile dl.list dd,
+        .form-horizontal .controls {
+            margin-right: (@horizontalComponentOffset1200 - 100px);
+        }
+        #page-mod-forum-search .c1 {
+            margin-right: @horizontalComponentOffset1200;
+        }
+        .form-item .form-label,
+        .mform .fitem div.fitemtitle,
+        .userprofile dl.list dt,
+        .form-horizontal .control-label {
+            width: (@horizontalComponentOffset1200 - 120px);
+        }
+
+    }
     .path-admin .buttons,
     .form-buttons {
         padding-left: @horizontalComponentOffset1200;
     }
+    .dir-rtl {
+        .path-admin .buttons,
+        .form-buttons {
+            padding-right: @horizontalComponentOffset1200;
+        }
+    }
 
+    // Core empty block regions.
+    .fluid-span (@columns) {
+        .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+    }
+    .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
+    .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
+        #region-main.span8 {
+            /** increase the span size by 1 **/
+            .fluid-span(9);
+        }
+        #block-region-side-pre.span4 {
+            /** decrease the span size by 1 **/
+            .fluid-span(3);
+        }
+    }
 }
 
 @media (min-width: 980px) {
 }
 
 @media (min-width: 768px) and (max-width: 979px) {
+    // Login page.
     .loginbox.twocolumns .loginpanel {
           margin-left: 0;
     }
         width: 48.61878453038674%;
         *width: 48.56559304102504%;
     }
+    // Core empty block regions.
+    .fluid-span (@columns) {
+        .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
+    }
+    .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
+    .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
+        #region-main.span8 {
+            /** increase the span size by 1 **/
+            .fluid-span(9);
+        }
+        #block-region-side-pre.span4 {
+            /** decrease the span size by 1 **/
+            .fluid-span(3);
+        }
+    }
 }
 
 @media (max-width: 767px) {
         border-color: #ddd;
         z-index: 2;
     }
-    .file-picker .fp-repo-items,
-    .file-picker .fp-repo-area {
-        position: relative;
-        display: block;
-        width: auto;
-        top: 0;
-        bottom: 0;
-        border: none;
-        margin: 0;
-    }
-    .file-picker .fp-content {
-        width: 100%;
-        height: 100%;
-    }
     .fp-content-center {
         display: block;
         vertical-align: top;
     }
-    .fp-upload-form td.mdl-right,
-    .fp-upload-form td.mdl-left,
-    .fp-login-form .input,
-    .file-picker .fp-login-form .fp-login-input label,
-    .file-picker td.label {
-        display: block;
-        text-align: left;
-    }
-    .file-picker .fp-login-form table,
-    .file-picker td,
-    .file-picker td.label,
-    .file-picker .fp-upload-form table {
-            margin: 0;
-            padding: 0;
-    }
     .course-content ul.topics li.section,
     .course-content ul.topics li.section .content,
     .course-content ul.weeks li.section .content,
         border-bottom: thin solid #eee;
     }
     .course-content .section .activity .commands {
-        display: block;
         text-align: right;
     }
-    .jsenabled .visibleifjs.addresourcemodchooser {
-        display: none;
+    /** Handles display of the activity chooser on small screens **/
+    .jsenabled .choosercontainer #chooseform .alloptions {
+        max-width: 100%;
     }
-    .jsenabled .hiddenifjs.addresourcedropdown {
-        display: block;
-        .iconhelp {
-            display: inline-block;
-            padding: 6px;
-            vertical-align: top;
-        }
-        div.urlselect {
-            display: block;
-            form {
-                margin: 0;
-            }
-        }
+    .jsenabled .choosercontainer #chooseform .instruction,
+    .jsenabled .choosercontainer #chooseform .typesummary {
+        position:static;
     }
     .que .info {
         float: none;
   .row-fluid .desktop-first-column {
       margin-left: 0;
   }
+  #page-navbar .breadcrumb-button {
+      display: inline;
+  }
 }
 @media (max-width : 767px) {
   .row-fluid .desktop-first-column {
     .nav-collapse.active {
         height: auto;
     }
-
+    .path-mod-data .box > table > tbody > tr > td {
+        display: block;
+    }
+    .path-mod-forum .forumheaderlist {
+        thead .header {
+            font-weight: normal;
+            font-size: round(@fontSizeSmall);
+        }
+        .discussion {
+            .author, .replies, .lastpost {
+                font-size: round(@fontSizeSmall);
+            }
+            .replies .unread a {
+                padding: 0;
+            }
+        }
+    }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
 // Resize, reflow file-picker on small devices
    #filesskin .yui3-panel,
    #filesskin .file-picker.fp-generallayout {
         float: left;
     }
 
-// Hide broken drag'n'drop options on touch devices MDL-38371
-// Not a great workaround, landscape iPads are wider than this,
-// and a resized window on a netbook could be smaller, but best
-// we can do with CSS. There might be a JS-based solution.
-    .section .side,
-    .editing_move {
-        display: none;
-    }
-    .activityinstance > a {
-        display: block;
-    }
-
   // GRID & CONTAINERS
   // -----------------
   // Remove width from containers
     margin-left: 0;
     .box-sizing(border-box);
   }
+
+    // We need to specify a more specific selector to reset the width for
+    // cases when we have content in the side-pre blockregion but not in the
+    // side-post blockregion as there are more specific selectors in
+    // core.less which take precedence which break responsiveness.
+    .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
+    .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
+        #block-region-side-pre.span4,
+        #region-main.span8 {
+            .fluid-span(12);
+        }
+    }
+
   .row-fluid .span12 {
     width: 100%;
     .box-sizing(border-box);
     margin-left: 0;
   }
   div[role=main] {
-      margin-bottom: 2em;
+      margin-bottom: 1em;
   }
+    .coursebox {
+        .info {
+            .name {
+                a {
+                    background-position: 0 13px;
+                }
+            }
+        }
+    }
+    .category-browse {
+        .coursebox {
+            .info {
+                .name {
+                    a {
+                        background-position: 0 13px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// All widths between 1200px and 1600px
+@media (min-width: 1200px) and (max-width: 1600px) {
+    .fluid-span (@columns) {
+        .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+    }
+    // CSS for the course management pages.
+    #course-category-listings.columns-3 {
+        background-color: @tableBackground;
+        border:0;
+
+        #category-listing,
+        #course-listing {
+            .fluid-span(6);
+            margin-left: @fluidGridGutterWidth1200;
+            *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+        #course-detail {
+            .fluid-span(12);
+            margin: 1em 0 0;
+        }
+    }
+}
+
+// All widths up to 1199px.
+@media (max-width: 1199px) {
+    // CSS for the course management pages.
+    #course-category-listings.columns-3 {
+        background-color: @tableBackground;
+        border:0;
+        #category-listing,
+        #course-listing,
+        #course-detail {
+            .fluid-span(12);
+            margin: 0 0 1em 0;
+        }
+    }
+
+    #page-mod-forum-discuss .discussioncontrols {
+        text-align: right;
+        .discussioncontrol {
+            float: none;
+            width: auto;
+            display: inline-block;
+            margin: 0 3px 0.5em;
+            select,
+            input {
+                margin-bottom: 0;
+            }
+            &.movediscussion {
+                margin-right: 0;
+                padding-right: 0;
+            }
+        }
+    }
+
+   #page-mod-forum-discuss.dir-rtl .discussioncontrols {
+       text-align: left;
+   }
+}
+
+
+// File Picker.
+@media (max-width: 768px) {
+    .fp-forminset .control-group .controls {
+        margin-left: 0;
+    }
+    .dir-rtl .fp-formset .control-group {
+        label.control-label {
+            text-align: right;
+            float: none;
+        }
+    }
+    .dir-rtl .fp-forminset .control-group {
+        label.control-label {
+            text-align: right;
+            float: none;
+        }
+        .controls {
+            margin-right: 0;
+        }
+    }
 }