add raffle in css

This commit is contained in:
Adrian Thompson
2020-10-21 12:42:30 +02:00
parent eee7a85cba
commit f8f5cd519a
2 changed files with 29 additions and 3 deletions

View File

@@ -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
}
}

View File

@@ -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,13 +165,16 @@ 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;
&.winner-chance {