Initial checkbox commit

src/newsreader/news/collection/templates/news/collection/views/rules.html

@@ -23,7 +23,7 @@
           <thead class="table__header rules-table__header">
             <tr class="table__row rules-table__row">
               <th class="table__heading rules-table__heading--select">
-                <input type="checkbox" id="select-all" data-input="rules" />
+                {% include "components/form/checkbox.html" with id="select-all" data_input="rules" id_for_label="select-all" %}
               </th>
               <th class="table__heading rules-table__heading--name">{% trans "Name" %}</th>
               <th class="table__heading rules-table__heading--category">{% trans "Category" %}</th>
@@ -36,7 +36,11 @@
           <tbody class="table__body">
             {% for rule in rules %}
               <tr class="table__row rules-table__row">
-                <td class="table__item rules-table__item"><input name="rules" type="checkbox" value="{{ rule.pk }}" /></td>
+                <td class="table__item rules-table__item">
+                  {% with "rules_"|add:rule.pk as id_for_label %}
+                    {% include "components/form/checkbox.html" with name="rules" value=rule.pk id=id_for_label id_for_label=id_for_label %}
+                  {% endwith %}
+                </td>
                 <td class="table__item rules-table__item" title="{{ rule.name }}">{{ rule.name }}</td>
                 <td class="table__item rules-table__item" title="{{ rule.category.name }}">{{ rule.category.name }}</td>
                 <td class="table__item rules-table__item" title="{{ rule.url }}">{{ rule.url }}</td>

src/newsreader/scss/elements/checkbox/_checkbox.scss

@@ -0,0 +1,35 @@
+.checkbox {
+  display: block;
+  height: 20px;
+  width: 20px;
+  margin: 0 0 0 20px;
+
+
+  & input[type=checkbox] {
+    position: absolute;
+    opacity: 0;
+
+    appearance: none;
+    -moz-appearance: none;
+
+    &:checked + .checkbox__label {
+      .checkbox__box {
+        background-color: $focus-blue;
+      }
+    }
+  }
+
+  &__label {
+    padding: 0;
+  }
+
+  &__box {
+    display: block;
+    position: relative;
+
+    height: 100%;
+    width: 100%;
+    border: 2px solid darken($gainsboro, 10%);
+    cursor: pointer;
+  }
+}

src/newsreader/scss/elements/checkbox/index.scss

@@ -0,0 +1 @@
+@import './checkbox';

src/newsreader/scss/elements/index.scss

@@ -11,3 +11,4 @@
 @import './h5/index';
 @import './small/index';
 @import './select/index';
+@import './checkbox/index';

src/newsreader/templates/components/form/checkbox.html

@@ -0,0 +1,10 @@
+<div class="checkbox">
+  {% if field %}
+    {{ field }}
+  {% else %}
+    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}" data-input="{{ data_input }}" />
+  {% endif %}
+  <label class="checkbox__label" for="{% if field %}{{ field.id_for_label }}{% else %}{{ id_for_label }}{% endif %}">
+    <span class="checkbox__box"/>
+  </label>
+</div>

src/newsreader/templates/components/form/form.html

@@ -23,9 +23,14 @@
       {% for field in form.visible_fields %}
         <fieldset class="fieldset form__fieldset">
           {% include "components/form/label.html" %}
-
           {{ field.errors }}
+
+          {% if field.field.widget.input_type == "checkbox" %}
+            {% include "components/form/checkbox.html" with field=field %}
+          {% else %}
             {{ field }}
+          {% endif %}
+
           {% include "components/form/help-text.html" %}
         </fieldset>
       {% endfor %}