app/assets/stylesheets/survey.css
.survey {
width: 600px;
left: calc(50% - 300px);
position: relative;
top: 160px;
margin-bottom: 40px;
transform: translateY(40px);
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-o-transform: translateY(40px);
opacity: 0;
-webkit-transition:cubic-bezier(.19,1,.22,1) 2s;
-moz-transition:cubic-bezier(.19,1,.22,1) 2s;
-o-transition:cubic-bezier(.19,1,.22,1) 2s;
transition:cubic-bezier(.19,1,.22,1) 2s;
}
.survey-active {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1;
}
.survey-card {
background-color: #FFFFFF;
box-shadow: 0 1px 2px 0 #E5E5E5;
border-radius: 3px;
padding: 20px 20px 10px 20px;
position: relative;
margin-bottom: 10px;
border: 1px solid #F2F2F2;
}
.survey-description {
margin-bottom: 20px;
}
.survey-submit {
margin-top: 10px;
}
.survey-container {
margin-bottom: 20px;
}
.question {
margin-bottom: 20px;
}
.answers {
margin: 0;
}
.answer {
color: #999999;
margin-right: 50px;
float: left;
margin-bottom: 10px;
}
.answer input {
margin: 0;
width: 16px;
height: 16px;
border: 2px solid #CCCCCC;
border-radius: 50%;
cursor: pointer;
position: relative;
vertical-align: bottom;
bottom: 5px;
}
.answer label {
margin-left: 5px;
cursor: pointer;
}
.answer input[type=radio]:checked + label {
color: #52bdec;
}
.answer input:checked {
border-color: #52bdec;
background-image: url('circle.png');
background-size: 12px;
background-repeat: no-repeat;
}
.answer-img {
width: 200px;
height: 150px;
margin-top: 10px;
}
img[src=""] {
display: none;
}