TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-328: Styling checkbox inputs for Association Modal

Browse Source
This commit is contained in:
Eloízio Salgado 2016-11-16 12:07:14 -02:00
parent 6a0fcd5d32
commit 74984babbc
2 changed files with 105 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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
&:checked + span
theme('background-color', '$activeColor')
&:before
content: '\2713'