LT-328: Styling checkbox inputs for Association Modal

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

@@ -22,8 +22,10 @@
             <tbody>
                 {{#each relevantStudies}}
                     <tr>
-                        <td class="center">
+                        <td class="checkboxWrapper center">
+                            <label>
                                 <input type="checkbox" class="includeStudy" {{valueIf autoselected '' 'checked'}}/> <span></span>
+                            </label>
                         </td>
                         <td class="center studyDataCell {{#if autoselected}}disabled{{/if}}">
                             {{#if autoselected}}

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

@@ -1,3 +1,5 @@
+@import "{design}/app"
+
 #studyAssociationTable
   .header
     text-align: center
@@ -8,7 +10,10 @@
   table
     tbody
       tr
-        td.timepointOptions
+        td
+          position: relative
+          
+          &.timepointOptions
             input
               margin: 0 3px
               
@@ -22,24 +27,89 @@
                 position: absolute
                 width: 1px
                 
-            & + span:before
+              & + span
-              content: ''
+                display: block
-              display: inline-block
+                position: absolute
-              width: 13px
+                border: 2px solid #c8c8c8
-              height: 13px
+                border-radius: 100%
-              border-radius: 1em
+                height: 16px
-              border: 0.125em solid #fff
+                width: 16px
-              box-shadow: 0 0 0 0.15em #000
+                top: 2px
-              margin: 0 6px
+                left: 0
-              transition: 0.5s ease all
+                z-index: 5
-              vertical-align: middle
+                transition: border .25s linear
+                -webkit-transition: border .25s linear
                 
-            &:checked + span:before
+              & + span:before
-              background: #3b99fc
+                display: block
-              box-shadow: 0 0 0 0.25em #000
+                position: absolute
+                content: ''
+                border-radius: 100%
+                height: 6px
+                width: 6px
+                top: 3px
+                left: 3px
+                margin: auto
+                transition: background 0.25s linear
+                -webkit-transition: background 0.25s linear
+
+              &:checked + span
+                theme('border-color', '$activeColor')
+                
+                &:before
+                  theme('background-color', '$activeColor')
 
             label
               padding: 0 5px
+              padding-left: 20px
+              display: inline-block
+              position: relative
 
-        td.disabled
+          &.disabled
             opacity: 0.2
+            
+          &.checkboxWrapper
+            input
+              margin: 0 3px
+              
+              &[type="checkbox"]
+                border: 0
+                clip: rect(0 0 0 0)
+                height: 1px
+                margin: -1px
+                overflow: hidden
+                padding: 0
+                position: absolute
+                width: 1px
+                
+              & + span
+                display: block
+                position: absolute
+                border: 1px solid #b6b6b6
+                background-color: white
+                border-radius: 2px
+                height: 16px
+                width: 16px
+                top: 10px
+                left: calc((100% - 16px)/2)
+                z-index: 5
+                transition: border .25s linear
+                -webkit-transition: border .25s linear
+                
+              & + span:before
+                display: block
+                position: absolute
+                content: ''
+                font-size: 9px
+                left: 3px
+                top: 1px
+                color: white
+                background-color: transparent
+                transition: background 0.25s linear
+                -webkit-transition: background 0.25s linear
+
+              &:checked + span
+                theme('background-color', '$activeColor')
+                
+                &:before
+                  content: '\2713'