<div class="form-item">
<legend class="legend">Which is a Imagine Dragons Song?</legend>
<ul class="radiobutton-list">
<li class="form-item--radio__item">
<label for="radio1">
<input id="radio1" name="radio" type="radio" class="radio"> Radioactive
</label>
</li>
<li class="form-item--radio__item">
<label for="radio2">
<input id="radio2" name="radio" type="radio" class="radio"> Push It
</label>
</li>
<li class="form-item--radio__item">
<label for="radio3">
<input id="radio3" name="radio" type="radio" class="radio"> Outlaw Pete
</label>
</li>
<li class="form-item--radio__item">
<label for="radio4">
<input id="radio4" name="radio" type="radio" class="radio"> Sweet Caroline
</label>
</li>
</ul>
</div>
<div class="form-item">
{% if rb_legend %}
<legend class="legend">{{ rb_legend }}</legend>
{% endif %}
<ul class="radiobutton-list">
{% for rb_item in rb_items %}
<li class="form-item--radio__item">
<label for="radio{{ rb_item.key }}">
<input id="radio{{ rb_item.key }}" name="radio" type="radio" class="radio" {% if list_item.checked %}checked="checked"{% endif %}> {{ rb_item.item }}
</label>
</li>
{% endfor %}
</ul>
</div>
{
"legend": "Which are Creed Songs?",
"list_items": {
"1": {
"key": 1,
"item": "Radioactive"
},
"2": {
"key": 2,
"checked": "checked",
"item": "With Arms Wide Open"
},
"3": {
"key": 3,
"item": "Ice, Ice, Baby"
},
"4": {
"key": 4,
"checked": "checked",
"item": "Weathered"
}
},
"rb_legend": "Which is a Imagine Dragons Song?",
"rb_items": {
"1": {
"key": 1,
"item": "Radioactive"
},
"2": {
"key": 2,
"checked": "checked",
"item": "Push It"
},
"3": {
"key": 3,
"item": "Outlaw Pete"
},
"4": {
"key": 4,
"item": "Sweet Caroline"
}
}
}
.checkbox-list,
.radiobutton-list{
list-style: none;
margin: 0;
padding: 0;
}
.form-item {
margin: $space 0;
&:first-of-type {
margin: 0 0 $space 0;
}
&:last-of-type {
margin: $space 0 0 0;
}
}
.form-item__select,
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=number],
textarea {
font-size: 1rem;
}
.search-name {
position: relative;
.search-name-box {
min-width: 300px;
background: transparent url(../images/search-icon.jpg) no-repeat 98% center;
background-size: 25px auto;
height: 30px;
}
#search-name-submit {
-webkit-appearance: none;
box-sizing: inherit;
padding: 0;
border-width: 0;
border-style: none;
border-color: inherit;
border-image: none;
color: transparent;
position: absolute;
left: 250px;
top: 1px;
width: 55px;
height: 30px;
background-color: transparent;
}
}
form {
.hidden {
visibility: hidden;
}
}
No notes defined.