fixup! MDL-80303 theme_boost: Clean and reorder course SCSS

roland04 · Nov 7, 2024 · 035a262 · 035a262
1 parent 4210176
commit 035a262
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 207 deletions.
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
@@ -221,13 +221,6 @@ button.btn-close,
     padding: 0;
 }
 
-.section li.movehere a {
-    display: block;
-    width: 100%;
-    height: 2rem;
-    border: 2px dashed $gray-800;
-}
-
 .inline,
 .inline-list li {
     display: inline;
@@ -1019,40 +1012,6 @@ tr.flagged-tag a {
     left: 50%;
 }
 
-.mod-indent-outer {
-    display: table;
-}
-
-.mod-indent {
-    display: table-cell;
-}
-
-.label .mod-indent {
-    float: left;
-    padding-top: 20px;
-}
-
-.activity.label.modtype_label .mod-indent {
-    float: none;
-}
-
-@include media-breakpoint-up(sm) {
-    $mod-indent-size: 30px;
-    /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
-
-    @for $i from 1 through 16 {
-        $width: ($i * $mod-indent-size);
-
-        .mod-indent-#{$i} {
-            width: $width;
-        }
-    }
-
-    .mod-indent-huge {
-        width: (16 * $mod-indent-size);
-    }
-}
-
 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
 .resourcecontent .mediaplugin_mp3 object {
     height: 25px;

diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
@@ -229,6 +229,14 @@ $divider-hover-color: $primary !default;
     }
 }
 
+// Old movehere link styles.
+.section li.movehere a {
+    display: block;
+    width: 100%;
+    height: 2rem;
+    border: 2px dashed $gray-800;
+}
+
 /* Activities */
 
 .activity {
@@ -818,10 +826,6 @@ $divider-hover-color: $primary !default;
 }
 
 .editing {
-    // Remove old spinners if the reactive state is ready.
-    .course-content .stateready .section .spinner {
-        display: none;
-    }
     // New editing in progress spinners.
     .editinprogress {
         position: relative;
@@ -894,3 +898,39 @@ $divider-hover-color: $primary !default;
         margin-top: -1px;
     }
 }
+
+/* Old indentation styles */
+
+.mod-indent-outer {
+    display: table;
+}
+
+.mod-indent {
+    display: table-cell;
+}
+
+.label .mod-indent {
+    float: left;
+    padding-top: 20px;
+}
+
+.activity.label.modtype_label .mod-indent {
+    float: none;
+}
+
+@include media-breakpoint-up(sm) {
+    $mod-indent-size: 30px;
+    /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
+
+    @for $i from 1 through 16 {
+        $width: ($i * $mod-indent-size);
+
+        .mod-indent-#{$i} {
+            width: $width;
+        }
+    }
+
+    .mod-indent-huge {
+        width: (16 * $mod-indent-size);
+    }
+}
diff --git a/theme/boost/scss/moodle/deprecated.scss b/theme/boost/scss/moodle/deprecated.scss
@@ -60,3 +60,13 @@
 .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 */
 }
+
+//
+// Deprecated since Moodle 5.0.
+//
+
+// In 6.0 all YUI section spinners wont be needed.
+.course-content .stateready .section .spinner {
+    @include deprecated-styles();
+    display: none;
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -23229,13 +23229,6 @@ button.btn-close:focus:hover,
   padding: 0;
 }
 
-.section li.movehere a {
-  display: block;
-  width: 100%;
-  height: 2rem;
-  border: 2px dashed #343a40;
-}
-
 .inline,
 .inline-list li {
   display: inline;
@@ -24069,77 +24062,6 @@ tr.flagged-tag a {
   left: 50%;
 }
 
-.mod-indent-outer {
-  display: table;
-}
-
-.mod-indent {
-  display: table-cell;
-}
-
-.label .mod-indent {
-  float: left;
-  padding-top: 20px;
-}
-
-.activity.label.modtype_label .mod-indent {
-  float: none;
-}
-
-@media (min-width: 576px) {
-  /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
-  .mod-indent-1 {
-    width: 30px;
-  }
-  .mod-indent-2 {
-    width: 60px;
-  }
-  .mod-indent-3 {
-    width: 90px;
-  }
-  .mod-indent-4 {
-    width: 120px;
-  }
-  .mod-indent-5 {
-    width: 150px;
-  }
-  .mod-indent-6 {
-    width: 180px;
-  }
-  .mod-indent-7 {
-    width: 210px;
-  }
-  .mod-indent-8 {
-    width: 240px;
-  }
-  .mod-indent-9 {
-    width: 270px;
-  }
-  .mod-indent-10 {
-    width: 300px;
-  }
-  .mod-indent-11 {
-    width: 330px;
-  }
-  .mod-indent-12 {
-    width: 360px;
-  }
-  .mod-indent-13 {
-    width: 390px;
-  }
-  .mod-indent-14 {
-    width: 420px;
-  }
-  .mod-indent-15 {
-    width: 450px;
-  }
-  .mod-indent-16 {
-    width: 480px;
-  }
-  .mod-indent-huge {
-    width: 480px;
-  }
-}
 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
 .resourcecontent .mediaplugin_mp3 object {
   height: 25px;
@@ -28274,6 +28196,13 @@ table.calendartable caption {
   z-index: 5;
 }
 
+.section li.movehere a {
+  display: block;
+  width: 100%;
+  height: 2rem;
+  border: 2px dashed #343a40;
+}
+
 /* Activities */
 .activity {
   list-style: none;
@@ -29169,9 +29098,6 @@ table.calendartable caption {
     transform: rotate(359deg);
   }
 }
-.editing .course-content .stateready .section .spinner {
-  display: none;
-}
 .editing .editinprogress {
   position: relative;
 }
@@ -29222,6 +29148,78 @@ table.calendartable caption {
   margin-top: -1px;
 }
 
+/* Old indentation styles */
+.mod-indent-outer {
+  display: table;
+}
+
+.mod-indent {
+  display: table-cell;
+}
+
+.label .mod-indent {
+  float: left;
+  padding-top: 20px;
+}
+
+.activity.label.modtype_label .mod-indent {
+  float: none;
+}
+
+@media (min-width: 576px) {
+  /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
+  .mod-indent-1 {
+    width: 30px;
+  }
+  .mod-indent-2 {
+    width: 60px;
+  }
+  .mod-indent-3 {
+    width: 90px;
+  }
+  .mod-indent-4 {
+    width: 120px;
+  }
+  .mod-indent-5 {
+    width: 150px;
+  }
+  .mod-indent-6 {
+    width: 180px;
+  }
+  .mod-indent-7 {
+    width: 210px;
+  }
+  .mod-indent-8 {
+    width: 240px;
+  }
+  .mod-indent-9 {
+    width: 270px;
+  }
+  .mod-indent-10 {
+    width: 300px;
+  }
+  .mod-indent-11 {
+    width: 330px;
+  }
+  .mod-indent-12 {
+    width: 360px;
+  }
+  .mod-indent-13 {
+    width: 390px;
+  }
+  .mod-indent-14 {
+    width: 420px;
+  }
+  .mod-indent-15 {
+    width: 450px;
+  }
+  .mod-indent-16 {
+    width: 480px;
+  }
+  .mod-indent-huge {
+    width: 480px;
+  }
+}
 /*
  * Course management page styles.
  */
@@ -38915,6 +38913,25 @@ body.behat-site .path-course-view li.activity form.togglecompletion::before,
   max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
 }
 
+.course-content .stateready .section .spinner {
+  /* stylelint-disable declaration-no-important */
+  /* stylelint-enable */
+  display: none;
+}
+body.behat-site .course-content .stateready .section .spinner,
+.course-content .stateready .section .spinner body.behat-site.course-content .stateready .section .spinner, body.themedesignermode .course-content .stateready .section .spinner,
+.course-content .stateready .section .spinner body.themedesignermode.course-content .stateready .section .spinner {
+  outline: 3px dotted #ca3120 !important;
+  background-color: #fceeed !important;
+}
+body.behat-site .course-content .stateready .section .spinner::before,
+.course-content .stateready .section .spinner body.behat-site.course-content .stateready .section .spinner::before, body.themedesignermode .course-content .stateready .section .spinner::before,
+.course-content .stateready .section .spinner body.themedesignermode.course-content .stateready .section .spinner::before {
+  content: "Deprecated style in use" !important;
+  color: #ca3120 !important;
+  font-size: smaller !important;
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;