LT-328: improving radio buttons

Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.html

@@ -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>

Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.styl

@@ -12,6 +12,32 @@
           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