LT-328: improving radio buttons

This commit is contained in:
Eloízio Salgado 2016-11-15 13:56:35 -02:00
parent dedb0b8531
commit 6a0fcd5d32
2 changed files with 28 additions and 2 deletions

View File

@ -23,7 +23,7 @@
{{#each relevantStudies}}
<tr>
<td class="center">
<input type="checkbox" class="includeStudy" {{valueIf autoselected '' 'checked'}}/>
<input type="checkbox" class="includeStudy" {{valueIf autoselected '' 'checked'}}/> <span></span>
</td>
<td class="center studyDataCell {{#if autoselected}}disabled{{/if}}">
{{#if autoselected}}
@ -51,7 +51,7 @@
class="timepointOption"
{{valueIf checked 'checked' ''}}
{{valueIf autoselected 'disabled' ''}}>
{{name}}
<span></span>{{name}}
</label>
{{/each}}
</td>

View File

@ -11,6 +11,32 @@
td.timepointOptions
input
margin: 0 3px
&[type="radio"]
border: 0
clip: rect(0 0 0 0)
height: 1px
margin: -1px
overflow: hidden
padding: 0
position: absolute
width: 1px
& + span:before
content: ''
display: inline-block
width: 13px
height: 13px
border-radius: 1em
border: 0.125em solid #fff
box-shadow: 0 0 0 0.15em #000
margin: 0 6px
transition: 0.5s ease all
vertical-align: middle
&:checked + span:before
background: #3b99fc
box-shadow: 0 0 0 0.25em #000
label
padding: 0 5px