MDL-67264 core_course: Activity chooser new feature

[moodle.git] / theme / boost / scss / moodle / core.scss

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 2c3ad22..8fd7052 100644 (file)
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -1489,11 +1489,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     padding-top: 1px;
 }
 
-.chooserdialogue-course-modchooser .modicon .icon {
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-}
 
 @include media-breakpoint-down(xs) {
     .jsenabled .choosercontainer #chooseform .alloptions {
@@ -1506,6 +1501,124 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     }
 }
 
+/**
+ * Module chooser dialogue (moodle-core-chooserdialogue)
+ *
+ * This CSS belong to the chooser dialogue which should work both with, and
+ * without javascript enabled
+ */
+.modchooser .modal-body {
+    padding: 0;
+    height: 590px;
+    overflow-y: auto;
+
+    .loading-icon {
+        opacity: 1;
+        .icon {
+            display: block;
+            font-size: 3em;
+            height: 1em;
+            width: 1em;
+            margin: 5em auto;
+        }
+    }
+}
+
+.modchoosercontainer.noscroll {
+    overflow-y: hidden;
+}
+
+.modchoosercontainer .optionscontainer {
+    overflow-x: hidden;
+    .option {
+        // Six items per line.
+        flex-basis: 16%;
+        .optionactions {
+            .optionaction {
+                cursor: pointer;
+                margin: 0.2rem;
+                color: $gray-600;
+                i {
+                    margin: 0;
+                }
+            }
+        }
+        .optioninfo {
+            a {
+                color: $gray-700;
+                &:hover {
+                    text-decoration: none;
+                }
+                .optionname {
+                    margin-top: 0.5em;
+                }
+                .optionicon {
+                    .icon {
+                        margin: 0;
+                        padding: 0;
+                        width: 32px;
+                        height: 32px;
+                        font-size: 32px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.modchooser .modal-body .optionsummary {
+    background-color: $white;
+    overflow-x: hidden;
+    overflow-y: auto;
+    line-height: 2em;
+    height: 590px;
+
+    .content {
+        overflow-y: auto;
+        .heading {
+            .icon {
+                height: 32px;
+                width: 32px;
+                font-size: 32px;
+                padding: 0;
+            }
+        }
+    }
+
+    .actions {
+        border-top: 1px solid $gray-300;
+        background: $white;
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    .modchoosercontainer .optionscontainer .option {
+        // Five items per line.
+        flex-basis: 20%;
+    }
+}
+
+@include media-breakpoint-down(xs) {
+    .path-course-view .modal-dialog.modal-lg,
+    .path-course-view .modal-content,
+    .modchooser .modal-body,
+    .modchooser .modal-body .carousel,
+    .modchooser .modal-body .carousel-inner,
+    .modchooser .modal-body .carousel-item,
+    .modchooser .modal-body .optionsummary,
+    .modchoosercontainer,
+    .optionscontainer {
+        height: 100%;
+    }
+    .path-course-view .modal-dialog.modal-lg {
+        margin: 0;
+    }
+    .modchoosercontainer .optionscontainer .option {
+        // Four items per line.
+        flex-basis: 25%;
+    }
+}
+
 /* Form element: listing */
 .formlistingradio {
     padding-bottom: 25px;