From 74984babbc41016d7629b6a21a5fc09bc0ab1cfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= <eloisalgado@gmail.com>
Date: Wed, 16 Nov 2016 12:07:14 -0200
Subject: [PATCH] LT-328: Styling checkbox inputs for Association Modal

---
 .../studyAssociationTable.html                |   6 +-
 .../studyAssociationTable.styl                | 132 ++++++++++++++----
 2 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.html b/Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.html
index b8a3ae10c..dda5652a9 100644
--- a/Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.html
+++ b/Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.html
@@ -22,8 +22,10 @@
             <tbody>
                 {{#each relevantStudies}}
                     <tr>
-                        <td class="center">
-                            <input type="checkbox" class="includeStudy" {{valueIf autoselected '' 'checked'}}/> <span></span>
+                        <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}}
diff --git a/Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.styl b/Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.styl
index 12587f6f5..e7eba95d0 100644
--- a/Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.styl
+++ b/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
-          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
+        td
+          position: relative
+          
+          &.timepointOptions
+            input
+              margin: 0 3px
               
-            & + span:before
-              content: ''
+              &[type="radio"]
+                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
-              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
+              position: relative
 
-            &:checked + span:before
-              background: #3b99fc
-              box-shadow: 0 0 0 0.25em #000
+          &.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
 
-          label
-            padding: 0 5px
-
-        td.disabled
-          opacity: 0.2
\ No newline at end of file
+              &:checked + span
+                theme('background-color', '$activeColor')
+                
+                &:before
+                  content: '\2713'
\ No newline at end of file