135 lines
2.6 KiB
Sass
135 lines
2.6 KiB
Sass
.table#shot-list
|
|
background-color: white
|
|
.table-row:hover
|
|
background-color: $color-background-light
|
|
|
|
.table-cell
|
|
&.shot-status
|
|
width: 5px
|
|
height: 100%
|
|
.table-head
|
|
.table-cell
|
|
text-align: center
|
|
|
|
&.highlight .collapser
|
|
color: $color-primary-dark
|
|
|
|
&.shot-thumbnail
|
|
width: $shots-list-thumbnail-width
|
|
|
|
&.task-type
|
|
text-transform: capitalize
|
|
|
|
span.collapser
|
|
cursor: pointer
|
|
width: 100%
|
|
display: inline-block
|
|
padding: 5px
|
|
|
|
&:hover
|
|
span.collapser
|
|
color: $color-primary
|
|
|
|
.table-body
|
|
display: table-row-group
|
|
|
|
.table-row
|
|
position: relative
|
|
|
|
&.active
|
|
border-color: $color-background-dark
|
|
background-color: $color-background-light
|
|
|
|
.table-cell:last-child
|
|
box-shadow: inset -5px 0 0 $color-primary
|
|
|
|
@include status-color-property(background-color, ' .shot-status', '')
|
|
|
|
.table-cell
|
|
text-align: center
|
|
border-left: thin solid transparent
|
|
border-right: thin solid transparent
|
|
|
|
&.active
|
|
background-color: $color-background
|
|
|
|
&.highlight
|
|
background-color: $color-background-light
|
|
|
|
&.shot-name
|
|
text-align: left
|
|
position: relative
|
|
height: 100%
|
|
a
|
|
display: flex
|
|
padding: 5px 10px
|
|
color: $color-text-dark-primary
|
|
|
|
&.task-type
|
|
max-width: 120px
|
|
position: relative
|
|
height: 100%
|
|
overflow: hidden
|
|
|
|
a
|
|
display: inline-block /* Each task next to each other */
|
|
vertical-align: middle
|
|
height: 100%
|
|
min-height: 100%
|
|
padding: 15px
|
|
transition: all 150ms ease-in-out
|
|
position: relative
|
|
|
|
@include status-color-property(background-color, ':before', '')
|
|
|
|
&:before
|
|
display: block
|
|
content: ''
|
|
position: absolute
|
|
width: 16px
|
|
height: 16px
|
|
border-radius: 50%
|
|
border: 2px solid transparent
|
|
+position-center-translate
|
|
transition: all 150ms ease-in-out
|
|
|
|
span
|
|
display: block
|
|
+position-center-translate
|
|
z-index: 1
|
|
font:
|
|
weight: bold
|
|
size: .8em
|
|
text:
|
|
align: center
|
|
transform: capitalize
|
|
color: white
|
|
|
|
&.active
|
|
opacity: 1
|
|
|
|
&:before
|
|
transform: translate(-50%, -50%) scale(1.3)
|
|
border-color: $color-primary
|
|
&:hover
|
|
border-color: $color-primary-light
|
|
|
|
&.task-add
|
|
width: auto
|
|
border-radius: initial
|
|
opacity: 0
|
|
vertical-align: middle
|
|
padding: 5px
|
|
display: flex
|
|
justify-content: center
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
&:hover
|
|
&:before
|
|
opacity: .8
|
|
transform: translate(-50%, -50%) scale(1.2)
|
|
&.active:before
|
|
transform: translate(-50%, -50%) scale(1.3)
|