Home
Diffusion Attract (master) Browse

attract/src/styles/_shots.sass
be7ef81e9693master

Last Change
Raw File

_shots.sass
View Options

.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)
.attract-box
.item-id
padding: 8px
margin-left: 10px
width: 40px
border: thin solid transparent
background-color: white
color: $color-text-dark-secondary
box-shadow: none
border-color: $color-text-dark-hint
&:hover
color: $color-text-dark-primary
border-color: $color-text-dark-primary
#item-details
height: 100%
display: flex
flex-direction: column
.item-details-empty
display: flex
align-items: center
justify-content: center
width: 100%
height: 100%
color: rgba($color-text-dark-hint, .5)
cursor: default
padding: 15px 10px
font:
size: 2em
weight: 100
#item-view-feed
padding: 10px
color: $color-text-dark-primary
pre
margin: 15px auto