From fd0415f8ea10fdb53aeee6848a0ee5c08daa1af0 Mon Sep 17 00:00:00 2001
From: Alexey Khrushch <alexeykhr@outlook.com>
Date: Thu, 24 Oct 2019 21:21:19 +0300
Subject: [PATCH] fix: correct display border-radius on cut div

---
 demo/components/content/Vertical.vue | 5 +++++
 src/scss/_variables.scss             | 1 +
 src/scss/index.scss                  | 6 +++++-
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/_variables.scss

diff --git a/demo/components/content/Vertical.vue b/demo/components/content/Vertical.vue
index 81bb18c..3ebfd04 100644
--- a/demo/components/content/Vertical.vue
+++ b/demo/components/content/Vertical.vue
@@ -51,6 +51,11 @@ export default {
   padding: 0;
   > div {
     padding: 30px;
+    // Making background is for both blocks to prevent
+    // wrong display roundings
+    &.primary {
+      background-color: #fff;
+    }
     &.secondary {
       background-color: #f6f9fc;
     }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
new file mode 100644
index 0000000..9ed868b
--- /dev/null
+++ b/src/scss/_variables.scss
@@ -0,0 +1 @@
+$borderRadius: 4px;
diff --git a/src/scss/index.scss b/src/scss/index.scss
index c433d0c..8a21e68 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 .vsm-menu {
   perspective: 2000px;
   ul {
@@ -68,7 +70,7 @@
 
 .vsm-background {
   background: #fff;
-  border-radius: 4px;
+  border-radius: $borderRadius;
   overflow: hidden;
   box-shadow: 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), 0 -18px 60px -10px rgba(0, 0, 0, .025);
   width: 380px;
@@ -119,6 +121,8 @@
   top: 0;
   transform: translateX(0);
   will-change: transform, width, height;
+  // Content is cut (overflow hidden), so border-radius can not show
+  border-radius: $borderRadius + 2px;
   transition-property: transform, width, height, -webkit-transform;
 }