MDL-59884 themes: add styles for overlay loading

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index f7a36ef..c427200 100644 (file)
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2159,3 +2159,25 @@ $footer-link-color: $bg-inverse-link-color !default;
 .clickable {
     cursor: pointer;
 }
+
+.overlay-icon-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .loading-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .icon {
+            height: 40px;
+            width: 40px;
+
+        }
+    }
+}

diff --git a/theme/bootstrapbase/less/moodle/core.less b/theme/bootstrapbase/less/moodle/core.less
index 85e2608..69fef7b 100644 (file)
--- a/theme/bootstrapbase/less/moodle/core.less
+++ b/theme/bootstrapbase/less/moodle/core.less
@@ -2385,3 +2385,25 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
     cursor: pointer;
 }
+
+.overlay-icon-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .loading-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .icon {
+            height: 40px;
+            width: 40px;
+
+        }
+    }
+}

diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 70102d3..11af68b 100644 (file)
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -4777,6 +4777,24 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
   cursor: pointer;
 }
+.overlay-icon-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+.overlay-icon-container .loading-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.overlay-icon-container .loading-icon .icon {
+  height: 40px;
+  width: 40px;
+}
 /* admin.less */
 .formtable tbody th {
   font-weight: normal;