From 3cd7bffc9e1d75f83c320718e51f7633a3db03df Mon Sep 17 00:00:00 2001
From: euvl <yev.vlasenko@gmail.com>
Date: Mon, 1 May 2017 14:48:40 +0300
Subject: [PATCH] Updated demos

---
 demo/src/App.vue                       | 17 +++++++++++++++--
 demo/src/components/DemoLoginModal.vue | 16 ++++++++++++++--
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 301b7ca..a5335c6 100644
--- a/demo/src/App.vue
+++ b/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)  {
diff --git a/demo/src/components/DemoLoginModal.vue b/demo/src/components/DemoLoginModal.vue
index 73c35ce..d0fc83f 100644
--- a/demo/src/components/DemoLoginModal.vue
+++ b/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">