Updated demos.

demo/client_side_rendering/src/components/ModesTable.vue

@@ -4,24 +4,26 @@
       <td style="width: 20%">Modes:</td>
       <td></td>
     </tr>
-    <tr>
-      <td><b>Simple</b></td>
-      <td>Yet another boring modal :)</td>
-    </tr>
     <tr>
       <td><b>Adaptive</b></td>
-      <td>Tries to adjust to the page size</td>
+      <td>Tries to adjust to the page size.</td>
     </tr>
     <tr>
       <td><b>Resizable</b></td>
       <td>
-        Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal
+        Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal.
       </td>
     </tr>
     <tr>
       <td><b>Draggable</b></td>
       <td>
-        Allows to drag modal on the screen
+        Allows to drag modal on the screen.
+      </td>
+    </tr>
+    <tr>
+      <td><b>Scrollable</b></td>
+      <td>
+        If <i>height</i> is set to "auto" - <i>scrollable</i> flag will make your modal... scrollable.
       </td>
     </tr>
   </table>

demo/client_side_rendering/src/components/SizeModal.vue

@@ -1,6 +1,7 @@
 <template> 
   <modal name="size-modal"
         transition="nice-modal-fade"
+        classes="demo-modal-class"
         :min-width="200"
         :min-height="200" 
         :pivot-y="0.25"
@@ -48,4 +49,14 @@
     padding: 10px;
     font-style: 13px;
   }
+
+  .v--modal-overlay[data-modal="size-modal"] {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .demo-modal-class {
+    border-radius: 5px;
+    background: #F7F7F7;
+    box-shadow: 5px 5px 30px 0px rgba(46,61,73, 0.6);
+  }
 </style>