From c2502375ff2bbf02ecac75d73f2c83f8d51ddd31 Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@moodle.com>
Date: Fri, 3 Nov 2017 03:18:02 +0000
Subject: [PATCH] MDL-60657 boost: fix styles when extending modal components

I've wrapped the custom modal styling in the .modal class. This prevents
those custom styles from being pulled in when the SCSS @extend
functionality is used to extend the modal components.
---
 theme/boost/scss/moodle/modal.scss | 46 ++++++++++++++++--------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/theme/boost/scss/moodle/modal.scss b/theme/boost/scss/moodle/modal.scss
index bc73697d2e5..5288e16093e 100644
--- a/theme/boost/scss/moodle/modal.scss
+++ b/theme/boost/scss/moodle/modal.scss
@@ -1,29 +1,31 @@
-.modal-header {
-    padding: 0;
+.modal {
+    .modal-header {
+        padding: 0;
 
-    .close {
-        padding: $modal-title-padding;
-        margin-top: 0;
+        .close {
+            padding: $modal-title-padding;
+            margin-top: 0;
+        }
+
+        .modal-title {
+            padding: $modal-title-padding;
+        }
     }
 
-    .modal-title {
-        padding: $modal-title-padding;
-    }
-}
+    .modal-body {
+        & > .loading-icon {
+            display: block;
+            position: relative;
+            width: 100%;
+            height: 100%;
 
-.modal-body {
-    & > .loading-icon {
-        display: block;
-        position: relative;
-        width: 100%;
-        height: 100%;
-
-        .icon {
-            position: absolute;
-            top: 50%;
-            /*rtl:ignore*/
-            left: 50%;
-            transform: translate(-50%, -50%);
+            .icon {
+                position: absolute;
+                top: 50%;
+                /*rtl:ignore*/
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
         }
     }
 }