From f8f5cd519afe061b8b8e626e047a0ec7ff2a68c2 Mon Sep 17 00:00:00 2001
From: Adrian Thompson <adrianhthompson@gmail.com>
Date: Wed, 21 Oct 2020 12:42:30 +0200
Subject: [PATCH] add raffle in css

---
 src/styles/global.scss | 22 ++++++++++++++++++++++
 src/ui/TotalBought.vue | 10 +++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index d4bbfce..e37a8c8 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -224,3 +224,25 @@ textarea {
     background-color: $light-red;
   }
 }
+
+@mixin raffle {
+  padding-bottom: 50px;
+  &::before, &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 25px;
+    height: 50px;
+    background: radial-gradient(closest-side, #fff, #fff 50%, transparent 50%);
+    background-size: 50px 50px;
+    background-position: 0 25px;
+    background-repeat: repeat-x;
+  }
+  &::after{
+    background: radial-gradient(closest-side, transparent, transparent 50%, #fff 50%);
+    background-size: 50px 50px;
+    background-position: 25px -25px;
+    bottom: -25px
+  }
+}
\ No newline at end of file
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index 4cd254b..c4843f2 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -20,7 +20,7 @@
             '-ballot ballot-element-local'
         "
         :key="color.name"
-      >
+        >
         <p class="winner-chance">
           {{translate(color.name)}} vinnersjanse
         </p>
@@ -144,6 +144,7 @@ export default {
 <style lang="scss" scoped>
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
+@import "../styles/global.scss";
 
 @include mobile{
   section {
@@ -164,12 +165,15 @@ export default {
   .ballot-element-local {
     height: 250px;
     width: 100%;
-
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    @include raffle;
+    
     .win-percentage {
       margin-left: 30px;
       font-size: 50px;
     }
-    
 
     p {
       margin-left: 30px;