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">
-                            <input type="checkbox" class="includeStudy" {{valueIf autoselected '' 'checked'}}/> <span></span>
+                            <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,38 +10,106 @@
   table
     tbody
       tr
-        td.timepointOptions
+        td
-          input
+          position: relative
-            margin: 0 3px
           
-            &[type="radio"]
+          &.timepointOptions
-              border: 0
+            input
-              clip: rect(0 0 0 0)
+              margin: 0 3px
-              height: 1px
-              margin: -1px
-              overflow: hidden
-              padding: 0
-              position: absolute
-              width: 1px
               
-            & + span:before
+              &[type="radio"]
-              content: ''
+                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: 2px solid #c8c8c8
+                border-radius: 100%
+                height: 16px
+                width: 16px
+                top: 2px
+                left: 0
+                z-index: 5
+                transition: border .25s linear
+                -webkit-transition: border .25s linear
+                
+              & + span:before
+                display: block
+                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
-              width: 13px
+              position: relative
-              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
+          &.disabled
-              background: #3b99fc
+            opacity: 0.2
-              box-shadow: 0 0 0 0.25em #000
             
-          label
+          &.checkboxWrapper
-            padding: 0 5px
+            input
+              margin: 0 3px
               
-        td.disabled
+              &[type="checkbox"]
-          opacity: 0.2
+                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'