From f0c83831db03afe7f8120fb3fed0e9d0733ae1ad Mon Sep 17 00:00:00 2001
From: Anton Vakhrushev <anwinged@ya.ru>
Date: Fri, 22 Jun 2018 22:04:25 +0300
Subject: [PATCH] Create button component

---
 source/_assets/components/button.scss | 12 ++++++++++++
 source/_assets/predictor/demo.vue     | 27 +++++++++------------------
 source/_assets/vars.scss              |  2 ++
 3 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 source/_assets/components/button.scss

diff --git a/source/_assets/components/button.scss b/source/_assets/components/button.scss
new file mode 100644
index 0000000..ba85310
--- /dev/null
+++ b/source/_assets/components/button.scss
@@ -0,0 +1,12 @@
+@import '../vars';
+
+%button {
+    display: inline-block;
+    color: #fff;
+    background-color: #405480;
+    padding: 0.6em 1.2em;
+    border: none;
+    font-size: 100%;
+    font-family: inherit;
+    border-radius: $button-border-radius;
+}
diff --git a/source/_assets/predictor/demo.vue b/source/_assets/predictor/demo.vue
index 21d69c2..d61066b 100644
--- a/source/_assets/predictor/demo.vue
+++ b/source/_assets/predictor/demo.vue
@@ -81,8 +81,7 @@ export default {
 
 <style lang="scss">
 @import '../vars.scss';
-
-$button-radius: 0.5em;
+@import '../components/button';
 
 .app {
     display: block;
@@ -115,20 +114,12 @@ $button-radius: 0.5em;
     justify-content: center;
 }
 
-%button {
-    display: inline-block;
-    color: #fff;
-    background-color: #405480;
-    padding: 0.6em;
-    border: none;
-    font-size: 100%;
-    font-family: inherit;
-}
-
 .restart-button {
     @extend %button;
-    padding: 0.6em 1.4em;
-    border-radius: $button-radius;
+    padding: {
+        left: 1.4em;
+        right: 1.4em;
+    }
 }
 
 .pass-button {
@@ -139,12 +130,12 @@ $button-radius: 0.5em;
 }
 
 .pass-button.__left {
-    border-top-left-radius: $button-radius;
-    border-bottom-left-radius: $button-radius;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 .pass-button.__right {
-    border-top-right-radius: $button-radius;
-    border-bottom-right-radius: $button-radius;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 </style>
diff --git a/source/_assets/vars.scss b/source/_assets/vars.scss
index 49c5fab..4e95551 100644
--- a/source/_assets/vars.scss
+++ b/source/_assets/vars.scss
@@ -9,3 +9,5 @@ $preferred-width: 700px;
 $first-media-step: $preferred-width - 1px;
 
 $mobile-margin: 0.8em;
+
+$button-border-radius: 0.5em;