BREAKING CHANGE mgmodal changed position class name

Author: medevod

demo/sections/modal-section.html

@@ -182,7 +182,9 @@ <h3>
 
   <p>
     Combine following classes with mg-modal to define orientation:
-    <code>mg-top | mg-bottom | mg-right | mg-left </code>
+    <code
+      >mg-modal--top | mg-modal--bottom | mg-modal--right | mg-modal--left
+    </code>
   </p>
   <div class="mg-container">
     <div class="mg-row mg-gap1">
@@ -266,7 +268,7 @@ <h3>
       </div>
     </div>
   </div>
-  <div class="mg-modal mg-right" id="modal-tr">
+  <div class="mg-modal mg-modal--right" id="modal-tr">
     <div class="mg-modal--content mg-top mg-container">
       <h3>
         <i
@@ -279,7 +281,7 @@ <h3>
       </div>
     </div>
   </div>
-  <div class="mg-modal mg-right" id="modal-r">
+  <div class="mg-modal mg-modal--right" id="modal-r">
     <div class="mg-modal--content mg-container">
       <h3>
         <i
@@ -292,7 +294,7 @@ <h3>
       </div>
     </div>
   </div>
-  <div class="mg-modal mg-right" id="modal-br">
+  <div class="mg-modal mg-modal--right" id="modal-br">
     <div class="mg-modal--content mg-bottom mg-container">
       <h3>
         <i
@@ -305,8 +307,8 @@ <h3>
       </div>
     </div>
   </div>
-  <div class="mg-modal mg-left" id="modal-tl">
-    <div class="mg-modal--content mg-top  mg-container">
+  <div class="mg-modal mg-modal--left" id="modal-tl">
+    <div class="mg-modal--content mg-top mg-container">
       <h3>
         <i
           class="mg-icon icon-close mg-icon--action mg-right"
@@ -318,8 +320,8 @@ <h3>
       </div>
     </div>
   </div>
-  <div class="mg-modal mg-left" id="modal-bl">
-    <div class="mg-modal--content mg-bottom  mg-container">
+  <div class="mg-modal mg-modal--left" id="modal-bl">
+    <div class="mg-modal--content mg-bottom mg-container">
       <h3>
         <i
           class="mg-icon icon-close mg-icon--action mg-right"
@@ -331,7 +333,7 @@ <h3>
       </div>
     </div>
   </div>
-  <div class="mg-modal mg-left" id="modal-l">
+  <div class="mg-modal mg-modal--left" id="modal-l">
     <div class="mg-modal--content mg-container">
       <h3>
         <i
@@ -344,7 +346,7 @@ <h3>
       </div>
     </div>
   </div>
-  <div class="mg-modal mg-top" id="modal-tc">
+  <div class="mg-modal mg-modal--top" id="modal-tc">
     <div class="mg-modal--content mg-container">
       <h3>
         <i
@@ -358,7 +360,7 @@ <h3>
     </div>
   </div>
 
-  <div class="mg-modal mg-bottom" id="modal-b">
+  <div class="mg-modal mg-modal--bottom" id="modal-b">
     <div class="mg-modal--content mg-container">
       <h3>
         <i

src/scss/extensions/mg-modal.scss

@@ -43,45 +43,45 @@
     overflow-y: auto;
   }
 
-  &.mg-bottom>.mg-modal--content {
+  &.mg-modal--bottom>.mg-modal--content {
     bottom: -100vh;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  &.mg-top>.mg-modal--content {
+  &.mg-modal--top>.mg-modal--content {
     top: -100vh;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
-  &.mg-right>.mg-modal--content {
+  &.mg-modal--right>.mg-modal--content {
     right: -100vw;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     margin-right: -1rem;
   }
 
-  &.mg-left>.mg-modal--content {
+  &.mg-modal--left>.mg-modal--content {
     left: -100vw;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     margin-left: -1rem;
   }
 
-  &.opened.mg-right>.mg-modal--content {
+  &.opened.mg-modal--right>.mg-modal--content {
     transform: translateX(-100vw);
   }
 
-  &.opened.mg-left>.mg-modal--content {
+  &.opened.mg-modal--left>.mg-modal--content {
     transform: translateX(100vw);
   }
 
-  &.opened.mg-top>.mg-modal--content {
+  &.opened.mg-modal--top>.mg-modal--content {
     transform: translateY(100vh);
   }
 
-  &.opened.mg-bottom>.mg-modal--content {
+  &.opened.mg-modal--bottom>.mg-modal--content {
     transform: translateY(-100vh);
   }
 }