cute selectors
{% block head_title %}{% trans "Signup for Proposal Mentorship" %}{% endblock %}
+{% block extra_style %}
+<style>
+.checkcontainer {
+ display: block;
+ position: relative;
+ padding-left: 35px;
+ margin-bottom: 12px;
+ cursor: pointer;
+ font-size: 22px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.checkcontainer input {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+}
+
+.checkmark {
+ position: absolute;
+ top: 10px;
+ left: 0;
+ height: 25px;
+ width: 25px;
+ background-color: #fff;
+ border-radius: 5px;
+}
+
+.checkcontainer:hover input ~ .checkmark {
+ background-color: #fff;
+}
+
+.checkcontainer input:checked ~ .checkmark {
+ background-color: #2196F3;
+}
+
+.checkmark:after {
+ content: "";
+ position: absolute;
+ display: none;
+}
+
+.checkcontainer input:checked ~ .checkmark:after {
+ display: block;
+}
+
+.checkcontainer .checkmark:after {
+ left: 9px;
+ top: 5px;
+ width: 5px;
+ height: 10px;
+ border: solid white;
+ border-width: 0 3px 3px 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+</style>
+{% endblock %}
+
+
{% block body %}
<div class="span12">
<h1>Signup for PyCon Proposal Mentorship</h1>
{% for day in slots_by_day %}
<h2>{{ day.grouper }}</h2>
{% for slot in day.list %}
- <input type="checkbox" value="{{ slot.id }}"><span class="btn">{{ slot.time|timezone:timezone}}</span></input><br>
+ <label class="checkcontainer">
+ <span class="btn">{{ slot.time|timezone:timezone}}</span>
+ <input type="checkbox" value="{{ slot.id }}">
+ <span class="checkmark"></span>
+ </input>
+ </label>
{% endfor %}
{% endfor %}
</div>
