Merge branch 'MDL-42711-master' of git://github.com/nebgor/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / course.less
index 2647095..c748eff 100644 (file)
 .course-content ul.section {
     margin: 1em;
 }
-.section .activity img.activityicon {
+.section {
+    .spinner {
+        height: 16px;
+        width: 16px;
+    }
+    .activity {
+        .spinner {
+            left: 100%;
+            position: absolute;
+            vertical-align: text-bottom;
+        }
+
+        .editing_move {
+            /* Move the move icon to the start of the line */
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        .mod-indent-outer {
+            /**
+             * Add appropriate padding such that nothing overlaps the
+             * absolute positioned move icon.
+             */
+            padding-left: 32px;
+        }
+
+        /* The command block for each activity */
+        .actions {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+
+        .contentwithoutlink,
+        .activityinstance {
+
+            min-width: 40%;
+            display: table-cell;
+            padding-right: 4px;
+            min-height: 2em;
+
+            .dimmed {
+                img.activityicon {
+                  opacity: 0.5;
+                  filter: alpha(opacity=50);
+                }
+            }
+        }
+    }
+
+    .filler {
+        width: 16px;
+        height: 16px;
+        padding: 0.3em;
+        display: inline-block;
+    }
+
+    .activity.editor_displayed {
+        a.editing_title,
+        .moodle-actionmenu {
+            display: none;
+        }
+        div.activityinstance {
+            padding-right: initial;
+
+            input {
+                margin-bottom: initial;
+                padding-top: initial;
+                padding-bottom: initial;
+                vertical-align: text-bottom;
+            }
+        }
+    }
+}
+
+.dir-rtl .section {
+    .activity {
+        .spinner {
+            left: auto;
+            right: 100%;
+        }
+
+        .mod-indent-outer {
+            /**
+             * Add appropriate padding such that nothing overlaps the
+             * absolute positioned move icon.
+             */
+            padding-left: initial;
+            padding-right: 32px;
+        }
+
+        /* The command block for each activity */
+        .actions {
+            left: 0;
+            right: auto;
+        }
+
+        .contentwithoutlink,
+        .activityinstance {
+            padding-left: 4px;
+            padding-right: initial;
+        }
+    }
+}
+
+.dir-rtl.editing .section {
+    .activity {
+        .editing_move {
+            /* Move the move icon to the start of the line */
+            left: auto;
+            right: 0;
+        }
+
+        &.editor_displayed {
+            div.activityinstance {
+                padding-left: initial;
+            }
+        }
+    }
+}
+
+.activity img.activityicon {
     margin-right: 6px;
+    vertical-align: text-bottom;
 }
 .dir-rtl .section .activity img.activityicon {
     margin-left: 6px;
 .section .activity .activityinstance div {
     display: inline-block;
 }
-.editing .section .activity .activityinstance {
-    min-width: 40%;
+.editing {
+    .section {
+        .activity {
+            .contentwithoutlink,
+            .activityinstance {
+                padding-right: 200px;
+            }
+        }
+    }
 }
-.section .activity .activityinstance > a {
-    display: block;
+
+.dir-rtl.editing {
+    .section {
+        .activity {
+            .contentwithoutlink,
+            .activityinstance {
+                padding-left: 200px;
+                padding-right: 0;
+            }
+        }
+    }
 }
+
 .editing_show + .editing_assign,
 .editing_hide + .editing_assign {
     // if roles icon missing, add space
     white-space: nowrap;
     display: inline;
 }
-.section .activity.modtype_label .commands {
-    margin-left: 40%;
-    padding-left: .2em;
-}
 .section .activity.modtype_label.label {
     font-weight: normal;
     padding: .2em;
     position: relative;
     padding: 0 0 0 16px;
 }
-.path-course-view li.activity span.autocompletion,
-.path-course-view li.activity form.togglecompletion {
-    float: right;
-    width: 0; /* Reduce the width of the control to 0 and rely on natural overflow */
+.path-course-view li.activity span.autocompletion img {
+    vertical-align: text-bottom;
 }
-.path-course-view li.activity span.autocompletion img,
 .path-course-view li.activity form.togglecompletion img {
     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
 }
 .path-course-view li.activity form.togglecompletion .ajaxworking {
     width: 16px;
     height: 16px;
+    position: absolute;
+    right: 22px;
+    top: 3px;
     background: url([[pix:i/ajaxloader]]) no-repeat;
 }
-.dir-rtl.path-course-view li.activity form.togglecompletion,
-.dir-rtl.path-course-view li.activity span.autocompletion {
-    float: left;
-}
 .dir-rtl.path-course-view .completionprogress {
     float: none;
 }
@@ -300,7 +432,6 @@ input.titleeditor {
 span.editinstructions {
     position: absolute;
     top: 0;
-    left: 0;
     margin-top: -22px;
     margin-left: 30px;
     line-height: 16px;
@@ -314,8 +445,6 @@ span.editinstructions {
     border: 1px solid @infoBorder;
 }
 .dir-rtl span.editinstructions {
-    left: auto;
-    right: 32px;
 }
 
 /* Course drag and drop upload styles */
@@ -612,20 +741,47 @@ span.editinstructions {
     margin: 10px 0 20px;
 }
 
-.section .activity .moodle-actionmenu .iconsmall {
-    max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
-    width:16px;
-    height:16px;
-    padding:0.3em;
+.section {
+    .summary,
+    .activity {
+        .iconsmall {
+            width: 16px;
+            height: 16px;
+        }
+    }
+    .editing_title {
+        .iconsmall {
+            width: 12px;
+            height: 12px;
+            margin: 8px 8px 0px 0;
+            padding: 4px 8px 0px 0;
+            vertical-align: text-bottom;
+        }
+    }
+    .moodle-actionmenu {
+        .iconsmall {
+            max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
+            width:16px;
+            height:16px;
+            padding: 4px;
+            vertical-align: text-bottom;
+        }
+    }
+    .moodle-actionmenu[data-enhanced] {
+        .menu {
+            img {
+              width: 12px;
+              height: 12px;
+            }
+        }
+    }
 }
 
-
-
 /**
  * Course management page
  * Palette
  *
- * Background (reg)         #f7f7f9
+ * Background (reg)         #F5F5F5
  * Background (light        #fafafa
  * Background (highlight)   #ddffaa
  * Borders                  #e1e1e8
@@ -656,13 +812,32 @@ span.editinstructions {
     h3 {
         margin:0;
         padding:0.4rem 0.6rem 0.3rem;
-        background-color:#f7f7f9;
+        background-color:#F5F5F5;
         border-bottom:1px solid #e1e1e8;
     }
     h4 {
         margin:1rem 0 0;
         padding:0.6rem 1rem 0.5rem;
     }
+    .moodle-actionmenu {
+        white-space:nowrap;
+    }
+
+    .moodle-actionmenu[data-enhance] {
+        .toggle-display {
+            img {
+                width: auto;
+            }
+            &.textmenu {
+                padding-right: 4px;
+
+                .caret {
+                    margin-top: 12px;
+                }
+            }
+        }
+    }
+
     .listing-actions {
         text-align:center;
         padding:0.4rem 0.3rem 0.3rem;
@@ -673,9 +848,6 @@ span.editinstructions {
                 padding-left:1rem;
             }
         }
-        .iconsmall {
-            vertical-align:text-bottom;
-        }
         .moodle-actionmenu:not([data-enhanced]) {
             li {line-height:normal;}
             > .menubar a {
@@ -684,6 +856,9 @@ span.editinstructions {
                 > img {
                     display:none;
                 }
+                .caret {
+                    display: none;
+                }
             }
             > .menu .menu-action-text {
                 display:inline-block;
@@ -700,21 +875,20 @@ span.editinstructions {
     li {
         line-height:2.2em;
         > div {
-            border-bottom:1px solid #fff;
-            border-top:1px solid #fff;
             &:hover {
                 background-color:#fafafa;
             }
         }
         .tree-icon {
-            vertical-align:text-top;
             margin: 2px 6px 0 0;
+            width:12px;
+            vertical-align:inherit;
         }
         &[data-selected='1'] {
             > div {
                 background-color:#FFFFD8;
                 border-top-color: #e1e1e8;
-                border-bottom-color:#f7f7f9;
+                border-bottom-color:#F5F5F5;
             }
             li:first-of-type > div,
             &[data-expandable='0']+li > div {
@@ -737,7 +911,7 @@ span.editinstructions {
 
         &+li > div,
         &:first-child > div {
-            border-top-color:#f7f7f9;
+            border-top-color:#F5F5F5;
         }
     }
 
@@ -746,7 +920,22 @@ span.editinstructions {
         display:inline-block;
         display:initial;
         img {
-            margin: 0 0.3em;
+            margin: 0 4px;
+            height:12px;
+            padding: 0;
+            vertical-align: inherit;
+        }
+        &.show .menu {
+            a {
+                padding:4px 1em 4px 4px;
+            }
+            img {
+                width: 12px;
+                max-width:none;
+            }
+        }
+        .menu-action-text {
+            vertical-align: inherit;
         }
     }
 
@@ -770,6 +959,10 @@ span.editinstructions {
             .without-actions {
                 color: #333;
             }
+            .idnumber {
+                color:#a1a1a8;
+                margin-right:2em;
+            }
         }
         // The category or course is hidden.
         &[data-visible="0"] {
@@ -810,10 +1003,6 @@ span.editinstructions {
 
     #course-listing {
         .listitem {
-            .idnumber {
-                color:#a1a1a8;
-                margin-right:2em;
-            }
             .categoryname {
                 display:inline-block;
                 margin-left:1em;
@@ -822,18 +1011,15 @@ span.editinstructions {
             .coursename {
                 display:inline-block;
             }
-            .drag-handle {
-                display:inline-block;
-                margin: 0 6px 0 0;
-            }
             > div {
                 padding-left:1rem;
             }
         }
         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
-        > .lastpage .listitem:last-child > div .item-actions .action-movedown {display: none;}
+        > .lastpage .listitem:last-child > div .item-actions .action-movedown {
+          display: none;
+        }
         .bulk-action-checkbox {
-            vertical-align:middle;
             margin:-2px 6px 0 0;
         }
     }
@@ -843,12 +1029,7 @@ span.editinstructions {
         }
         .listitem {
             > div {
-                margin-left:0.5em;
                 > .ba-checkbox {
-                    background-color: #FaFaFb;
-                    border-right: 1px solid #EFEFF4;
-                    border-left: 1px solid #EFEFF4;
-                    vertical-align:middle;
                     width:2.2em;
                     text-align:center;
                     margin:-1px 0.5em 0 0;
@@ -864,60 +1045,30 @@ span.editinstructions {
                 background-color: inherit;
             }
             &:first-child > div .item-actions .action-moveup,
-            &:last-child > div .item-actions .action-movedown {display: none;}
+            &:last-child > div .item-actions .action-movedown {
+              display: none;
+            }
         }
         .course-count {
             color:#a1a1a8;
             margin-right:2rem;
-            min-width:35px;
+            min-width:3.5em;
             display:inline-block;
             .smallicon {
-                width:0.8rem;
-                height:0.8rem;
-                vertical-align:middle;
-                margin:0 0.3rem;
+                width:12px;
+                margin-left:4px;
+                vertical-align: inherit;
             }
         }
         .bulk-action-checkbox {
-            vertical-align:middle;
             margin-right: -3px;
         }
         .category-listing > ul > .listitem:first-child {
             position:relative;
-            .ba-checkbox:before {
-                content: '.';
-                background-color: #FaFaFb;
-                color: #FaFaFb;
-                position:absolute;
-                top:-0.2em;
-                line-height:0.2em;
-                border: 1px solid #EFEFF4;
-                border-width:1px 1px 0;
-                margin:-1px;
-                width:2.2em;
-                display:block;
-                border-radius: 2px 2px 0 0;
-            }
         }
         .category-bulk-actions {
             margin: 0 0.5em 0.5em;
-            background-color: #FaFaFb;
-            border: 1px solid #EFEFF4;
             position:relative;
-
-            &:before {
-                content: '.';
-                background-color: #FaFaFb;
-                color: #FaFaFb;
-                position:relative;
-                top:-1em;
-                line-height:110%;
-                border: 1px solid #EFEFF4;
-                border-width:0 1px;
-                margin:-1px;
-                width:2.2em;
-                display:block;
-            }
         }
     }
 
@@ -929,9 +1080,7 @@ span.editinstructions {
             line-height:2.2rem;
         }
         .pair-key {
-            color:#075698;
             font-weight:bold;
-            text-align:right;
             vertical-align: top;
             span {
                 margin-right: 1rem;
@@ -941,16 +1090,12 @@ span.editinstructions {
         .pair-value select {
             max-width:100%;
         }
-        &:last-child {
-            border-bottom-width:0;
-        }
     }
 
     .bulk-actions .detail-pair {
         > * {
             display:block;
             width:100%;
-            text-align:left;
         }
     }
 
@@ -978,8 +1123,111 @@ span.editinstructions {
         margin: 1em;
     }
 }
-/** JS MUST be enabled for this next style **/
-.jsenabled #course-category-listings .category-item-actions .menu-action-text {padding-left:0.3em;}
+
+#course-category-listings #course-listing .listitem .drag-handle {
+    display: none;
+}
+.jsenabled #course-category-listings #course-listing .listitem .drag-handle {
+    display:inline-block;
+    margin: 0 6px 0 0;
+    cursor:pointer;
+}
+
+.dir-rtl #course-category-listings {
+    #category-listing,
+    #course-listing {
+        float: right;
+        margin-left: 0;
+    }
+
+    .listitem {
+        > div {
+            > .float-left {
+                float:right;
+            }
+            > .float-right {
+                float:left;
+                text-align:left;
+            }
+        }
+    }
+    li {
+        .tree-icon {
+            margin: 2px 0 0 6px;
+        }
+
+        // Tree item indenting to represent depth.
+        .tree-icon {margin-right:0;}
+        li .tree-icon {margin-right:1em;}
+        li li .tree-icon {margin-right:2em;}
+        li li li .tree-icon {margin-right:3em;}
+        li li li li .tree-icon {margin-right:4em;}
+        li li li li li .tree-icon {margin-right:4.5em;}
+        li li li li li li .tree-icon {margin-right:5em;}
+        li li li li li li li .tree-icon {margin-right:5.5em;}
+    }
+    #category-listing {
+        .listitem {
+            > div {
+                margin-right:0.5em;
+                margin-left: 0;
+                > .ba-checkbox {
+                  margin:-1px 0 0 0.5em;
+                }
+            }
+
+            &[data-selected='1'] > div > .ba-checkbox {
+                margin:0 0 0 0.5em;
+            }
+        }
+        .course-count {
+            margin-left:2rem;
+        }
+        .bulk-action-checkbox {
+            margin-left: -3px;
+            margin-right: 0;
+        }
+    }
+    #course-listing {
+        padding-right: 24px;
+        .listitem {
+            .idnumber {
+                color:#a1a1a8;
+                padding-right:2em;
+            }
+            .categoryname {
+                display:inline-block;
+                margin-right:1em;
+                margin-left:0;
+            }
+            .drag-handle {
+                margin: 0 6px 0 6px;
+            }
+            > div {
+                padding-left:1rem;
+            }
+        }
+        .bulk-action-checkbox {
+            vertical-align:middle;
+            margin:-2px 0 0 6px;
+        }
+    }
+  .detail-pair {
+        > * {
+            float: right;
+            margin-right: 0;
+        }
+        .pair-key {
+            span {
+                margin-right:0;
+                margin-left: 0;
+            }
+        }
+        .pair-value {
+            margin-right: 0.5em;
+        }
+    }
+}
 
 /** Management header styling **/
 .coursecat-management-header {
@@ -991,9 +1239,12 @@ span.editinstructions {
     > div {
         display:inline-block;
         float:right;
-        margin-left:1em;
-        margin: 10px 0;
         line-height:40px;
+        > div {
+          margin-left:1em;
+          margin: 10px 0;
+          display:inline-block;
+        }
     }
     select {
         max-width: 300px;
@@ -1002,8 +1253,26 @@ span.editinstructions {
         vertical-align: baseline;
         white-space: nowrap;
     }
+    .view-mode-selector {
+        .moodle-actionmenu {
+            white-space:nowrap;
+            display:inline-block;
+        }
+        .moodle-actionmenu[data-enhanced].show .menu a {
+            padding-left:1em;
+        }
+    }
+}
+.dir-rtl .coursecat-management-header {
+    h2 {
+        text-align:right;
+    }
+    > div {
+        float:left;
+        margin-right:1em;
+        margin-left: 0;
+    }
 }
-
 .course-being-dragged-proxy {
     border: 0;
     color: @linkColor;