app/css/sip_poll.css
html, body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 18px;
font-weight: 400;
height: 300px;
width: 560px;
}
.container {
background-size: cover;
padding: 0 20%;
padding-bottom: 10px;
}
.poll {
display: flex;
align-self: center;
flex-direction: column;
}
.poll--poll-question {
color: white;
font-weight: 400;
padding-bottom: 20px;
}
.poll--content {
padding: 0 10px;
}
.poll--content--poll-option {
border: 1px solid rgba(221,221,221,0.2);
border-radius: 40px;
display: flex;
flex-direction: row;
margin-bottom: 20px;
padding: 20px;
position: relative;
}
.poll--content--poll-option--text {
width: 100%;
z-index: 2;
}
.poll--content--poll-option--percentage {
float: right;
}
.poll--content--poll-option--percentage-container {
background: #ddd;
border-radius: 40px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.poll--content--poll-option--percentage-container-fill {
background: #bcbcbc;
border-radius: 40px;
box-sizing: border-box;
height: 100%;
left: 0;
min-width: 80px;
position: absolute;
top: 0;
z-index: -1;
}
.bold { font-weight: bold; }
.voted {
background: #4A90E2;
}
.poll-icon {
margin-right: 6px;
vertical-align: -3px;
}