Updated demos

demo/src/App.vue

@@ -39,8 +39,9 @@
     <button @click="show(false, true, false)">Adaptive</button>
     <button @click="show(true, true, false)">Mixed</button>
     <button @click="show(false, false, true)">Draggable</button>
-    <button @click="$modal.show('error-modal')">Demo: Error handling</button>
-    <button @click="$modal.show('demo-login')">Demo: Login</button>
+    <br>
+    <button class="green" @click="$modal.show('error-modal')">Demo: Error handling</button>
+    <button class="green" @click="$modal.show('demo-login')">Demo: Login</button>
   </div>
 
   <props-table />
@@ -141,6 +142,18 @@ button {
     color: #20a0ff;
     border: 1px solid #20a0ff;
   }
+
+  &.green {
+    $green: #50C9BA;
+
+    color: $green;
+    border: 1px solid $green;
+
+    &:hover {
+      color: mix($green, black, 95%);
+      border: 1px solid mix($green, black, 95%);
+    }
+  }
 }
 
 @media (max-width:600px)  {

demo/src/components/DemoLoginModal.vue

@@ -1,5 +1,5 @@
 <template>
-<modal name="demo-login" transition="pop-out" :width="656" :height="400">
+<modal name="demo-login" transition="pop-out" :width="modalWidth" :height="400">
   <div class="box">
     <div class="box-part" id="bp-left">
       <div class="partition" id="partition-register">
@@ -37,8 +37,20 @@
 </modal>
 </template>
 <script>
+const MODAL_WIDTH = 656
+
 export default {
-  name: 'DemoLoginModal'
+  name: 'DemoLoginModal',
+  data () {
+    return {
+      modalWidth: MODAL_WIDTH
+    }
+  },
+  created () {
+    this.modalWidth = window.innerWidth < MODAL_WIDTH
+      ? MODAL_WIDTH / 2
+      : MODAL_WIDTH
+  }
 }
 </script>
 <style lang="scss">