MDL-59884 themes: add styles for overlay loading
authorSimey Lameze <simey@moodle.com>
Tue, 22 Aug 2017 07:38:53 +0000 (15:38 +0800)
committerSimey Lameze <simey@moodle.com>
Wed, 30 Aug 2017 01:47:18 +0000 (09:47 +0800)
theme/boost/scss/moodle/core.scss
theme/bootstrapbase/less/moodle/core.less
theme/bootstrapbase/style/moodle.css

index f7a36ef..c427200 100644 (file)
@@ -2159,3 +2159,25 @@ $footer-link-color: $bg-inverse-link-color !default;
 .clickable {
     cursor: pointer;
 }
 .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;
+
+        }
+    }
+}
index 85e2608..69fef7b 100644 (file)
@@ -2385,3 +2385,25 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
     cursor: pointer;
 }
 .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;
+
+        }
+    }
+}
index 70102d3..11af68b 100644 (file)
@@ -4777,6 +4777,24 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
   cursor: pointer;
 }
 .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;
 /* admin.less */
 .formtable tbody th {
   font-weight: normal;