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

@@ -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%);
+            }
         }
     }
 }