add checkboxes and radios

app/assets/javascripts/app/views/generic/radio.jst.eco

@@ -1,5 +1,9 @@
 <div class="<%= @attribute.class %>">
 <% for row in @attribute.options: %>
-    <label><input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%= row.note %><% end %></label>
+    <label>
+      <input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%= row.note %><% end %>
+      <svg class="icon-radio"><use xlink:href="#icon-radio" /></svg>
+      <svg class="icon-radio-checked"><use xlink:href="#icon-radio-checked" /></svg>
+    </label>
 <% end %>
 </div>

app/assets/javascripts/app/views/generic/table.jst.eco

@@ -3,9 +3,10 @@
     <tr>
     <% if @checkbox: %>
       <th style="width: 40px" class="no-padding">
-        <label class="input-replacement centered">
+        <label class="input-replacement">
           <input type="checkbox" value="" name="bulk_all"/>
-          <span class="white checkbox icon"></span>
+          <svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg>
+          <svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg>
         </label>
       </th>
     <% end %>
@@ -41,7 +42,8 @@
       <td class="no-padding">
         <label class="input-replacement">
           <input type="checkbox" value="<%= object.id %>" name="bulk"/>
-          <span class="checkbox icon"></span>
+          <svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg>
+          <svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg>
         </label>
       </td>
     <% end %>
@@ -49,7 +51,8 @@
       <td class="no-padding">
         <label class="input-replacement">
           <input type="radio" value="<%= object.id %>" name="radio"/>
-          <span class="radio icon"></span>
+          <svg class="icon-radio icon-unchecked"><use xlink:href="#icon-radio" /></svg>
+          <svg class="icon-radio-checked icon-checked"><use xlink:href="#icon-radio-checked" /></svg>
         </label>
       </td>
     <% end %>

app/assets/stylesheets/zammad.css.scss

@@ -507,7 +507,9 @@ table {
   justify-content: center;
 }
 
-.input-replacement input {
+.input-replacement input,
+.input-replacement input:not(:checked) ~ .icon-checked,
+.input-replacement input:checked ~ .icon-unchecked {
   display: none;
 }
 

public/assets/images/icons/radio-checked.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+    <title>radio-checked</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="radio-checked" sketch:type="MSArtboardGroup" fill="#000000">
+            <path d="M11,5.5 C11,2.46243387 8.53756613,0 5.5,0 C2.46243387,0 0,2.46243387 0,5.5 C0,8.53756613 2.46243387,11 5.5,11 C8.53756613,11 11,8.53756613 11,5.5 L11,5.5 Z M0.932708535,5.51604187 C0.932708535,2.98473676 2.98473676,0.932708535 5.51604187,0.932708535 C8.04734697,0.932708535 10.0993752,2.98473676 10.0993752,5.51604187 C10.0993752,8.04734697 8.04734697,10.0993752 5.51604187,10.0993752 C2.98473676,10.0993752 0.932708535,8.04734697 0.932708535,5.51604187 L0.932708535,5.51604187 Z M5.49188096,7.33333333 C6.50440301,7.33333333 7.3252143,6.51252204 7.3252143,5.5 C7.3252143,4.48747796 6.50440301,3.66666667 5.49188096,3.66666667 C4.47935893,3.66666667 3.65854763,4.48747796 3.65854763,5.5 C3.65854763,6.51252204 4.47935893,7.33333333 5.49188096,7.33333333 L5.49188096,7.33333333 Z" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

public/assets/images/icons/radio.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+    <title>radio</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="radio" sketch:type="MSArtboardGroup" fill="#CBCBCB">
+            <path d="M11,5.5 C11,2.46243342 8.53756567,0 5.5,0 C2.46243342,0 0,2.46243342 0,5.5 C0,8.53756567 2.46243342,11 5.5,11 C8.53756567,11 11,8.53756567 11,5.5 L11,5.5 Z M0.932708333,5.51604167 C0.932708333,2.98473633 2.98473633,0.932708333 5.51604167,0.932708333 C8.047347,0.932708333 10.099375,2.98473633 10.099375,5.51604167 C10.099375,8.047347 8.047347,10.099375 5.51604167,10.099375 C2.98473633,10.099375 0.932708333,8.047347 0.932708333,5.51604167 L0.932708333,5.51604167 Z" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>