fix: correct display border-radius on cut div

oleksiikhr · Oct 24, 2019 · fd0415f · fd0415f
1 parent e0ee05b
commit fd0415f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -0,0 +1 @@
+$borderRadius: 4px;
diff --git 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;
 }