split up input-replacement into checkbox-replacement and radio-replacement

for easier understanding
This commit is contained in:
Felix Niklas 2015-09-15 11:28:44 +02:00
parent 0794cef040
commit 724cf36007
2 changed files with 14 additions and 10 deletions

View file

@ -3,8 +3,8 @@
<tr>
<% if @checkbox: %>
<th style="width: 40px" class="no-padding">
<label class="input-replacement">
<input type="checkbox" value="" name="bulk_all"/>
<label class="checkbox-replacement">
<input type="checkbox" value="" name="bulk_all">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</label>
@ -40,8 +40,8 @@
<tr class="item<% if object.active is false: %> is-inactive<% end %>" data-id="<%= object.id %>" data-position="<%= position %>" >
<% if @checkbox: %>
<td class="no-padding">
<label class="input-replacement">
<input type="checkbox" value="<%= object.id %>" name="bulk"/>
<label class="checkbox-replacement">
<input type="checkbox" value="<%= object.id %>" name="bulk">
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</label>
@ -49,8 +49,8 @@
<% end %>
<% if @radio: %>
<td class="no-padding">
<label class="input-replacement">
<input type="radio" value="<%= object.id %>" name="radio"/>
<label class="radio-replacement">
<input type="radio" value="<%= object.id %>" name="radio">
<%- @Icon('radio', 'icon-unchecked') %>
<%- @Icon('radio-checked', 'icon-checked') %>
</label>

View file

@ -615,7 +615,8 @@ table {
margin-top: -3px;
}
.input-replacement {
.checkbox-replacement,
.radio-replacement {
padding: 0;
margin: 0;
height: 38px;
@ -625,9 +626,12 @@ table {
justify-content: center;
}
.input-replacement input,
.input-replacement input:not(:checked) ~ .icon-checked,
.input-replacement input:checked ~ .icon-unchecked {
.checkbox-replacement input,
.checkbox-replacement input:not(:checked) ~ .icon-checked,
.checkbox-replacement input:checked ~ .icon-unchecked,
.radio-replacement input,
.radio-replacement input:not(:checked) ~ .icon-checked,
.radio-replacement input:checked ~ .icon-unchecked {
display: none;
}