bicro/PigeonPalomacy

View on GitHub
app/assets/stylesheets/survey.css

Summary

Maintainability
Test Coverage
.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;
}