Renamed css ballot to raffle.

src/ui/Attendees.vue

@@ -4,10 +4,10 @@
     <div class="attendees-container" ref="attendees">
       <div class="attendee" v-for="(attendee, index) in flipList(attendees)" :key="index">
         <span class="attendee-name">{{ attendee.name }}</span>
-        <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
-        <div class="blue-ballot ballot-element small">{{ attendee.blue }}</div>
-        <div class="green-ballot ballot-element small">{{ attendee.green }}</div>
-        <div class="yellow-ballot ballot-element small">{{ attendee.yellow }}</div>
+        <div class="red-raffle ballot-element small">{{ attendee.red }}</div>
+        <div class="blue-raffle ballot-element small">{{ attendee.blue }}</div>
+        <div class="green-raffle ballot-element small">{{ attendee.green }}</div>
+        <div class="yellow-raffle ballot-element small">{{ attendee.yellow }}</div>
       </div>
     </div>
   </div>
@@ -46,7 +46,7 @@ export default {
   width: 60%;
 }
 
-.ballot-element {
+.raffle-element {
   font-size: 0.75rem;
   width: 45px;
   height: 45px;

src/ui/TotalBought.vue

@@ -8,7 +8,7 @@
           color.name +
             '-container ' +
             color.name +
-            '-ballot inner-bought-container ballot-element'
+            '-raffle inner-bought-container ballot-element'
         "
         :key="color.name"
       >
@@ -24,7 +24,7 @@
         </div>
       </div>
 
-      <div class="inner-bought-container total-ballots">
+      <div class="inner-bought-container total-raffles">
         <div class="total-container">
           Totalt&nbsp;
           <div>
@@ -136,7 +136,7 @@ export default {
   align-items: center;
 }
 
-.ballot-element {
+.raffle-element {
   width: 140px;
   height: 150px;
   margin: 20px 0;
@@ -166,7 +166,7 @@ export default {
   }
 }
 
-.total-ballots {
+.total-raffles {
   width: 150px;
   height: 150px;
   margin: 20px 0;

src/ui/WinnerDraw.vue

@@ -3,7 +3,7 @@
     <div class="current-draw" v-if="drawing">
       <h2>TREKKER</h2>
       <div
-        :class="currentColor + '-ballot'"
+        :class="currentColor + '-raffle'"
         class="ballot-element center-new-winner"
         :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
       >
@@ -19,7 +19,7 @@
     <div class="current-draw" v-if="drawingDone">
       <h2>VINNER</h2>
       <div
-        :class="currentColor + '-ballot'"
+        :class="currentColor + '-raffle'"
         class="ballot-element center-new-winner"
         :style="{ transform: 'rotate(' + getRotation() + 'deg)' }"
       >
@@ -204,7 +204,7 @@ h2 {
   align-items: center;
 }
 
-.ballot-element {
+.raffle-element {
   width: 140px;
   height: 140px;
   font-size: 1.2rem;

src/ui/Winners.vue

@@ -3,7 +3,7 @@
     <h2 v-if="winners.length > 0"> {{ title ? title : 'Vinnere' }}</h2>
     <div class="winners" v-if="winners.length > 0">
       <div class="winner" v-for="(winner, index) in winners" :key="index">
-        <div :class="winner.color + '-ballot'" class="ballot-element">{{ winner.name }}</div>
+        <div :class="winner.color + '-raffle'" class="ballot-element">{{ winner.name }}</div>
       </div>
     </div>
   </div>
@@ -40,7 +40,7 @@ h2 {
   flex-wrap: wrap;
 }
 
-.ballot-element {
+.raffle-element {
   font-size: 1rem;
   width: 145px;
   height: 145px;