Files
attract/src/styles/_tasks.sass
2017-05-10 23:34:46 +02:00

166 lines
3.0 KiB
Sass

.item-list.task
overflow-x: hidden
.attract-box
margin: 10px
padding: 10px
+container-box
&.with-status
border-top: thick solid $color-background-dark
@include status-color-property(border-top-color, '', 'dark')
@include status-color-property(color, ' select', 'dark')
@include status-color-property(border-bottom-color, ' select', 'dark')
.item-name
font-size: 1.6em
margin: 0
+text-overflow-ellipsis
span.item-name
padding-left: 5px
margin-top: 0
color: $color-text-dark-secondary
.item-description
padding: 10px 5px
color: $color-text-dark-primary
.dropdown button
height: 38px
margin-left: 10px
.dropdown-menu
top: 36px
left: initial
right: 0
padding-top: 0
padding-bottom: 0
border: thin solid $color-background
box-shadow: 1px 1px 2px rgba(black, .1), 0 5px 25px rgba(black, .1)
li
display: flex
height: 100%
width: 100%
padding: 0
margin: 0
&.divider
height: 2px
&.item-delete a:hover
color: $color-danger
a
padding: 10px 15px 10px 12px
flex: 1
height: 100%
color: $color-text-dark-primary
i
position: relative
top: -1px
left: -4px
font-size: .9em
.table.item-properties
.table-body
text-shadow: 1px 1px 0 white
.table-row
.table-cell
padding: 3px 10px
vertical-align: top
line-height: 1.6em
border: none
color: $color-text-dark-primary
@include status-color-property(color, '', 'dark')
&:first-child
width: 120px
max-width: 200px
text-align: right
font-weight: bold
padding-right: 10px
border-right: thin solid $color-background-dark
+text-overflow-ellipsis
&.properties-assignees
.table-cell span
display: block
&.properties-status
cursor: help
.attract-box+.attract-box
margin-top: 0
#item-add
margin-left: auto
font-size: .85em
color: $color-primary
.status-indicator
position: absolute
height: 100%
top: 0
bottom: 0
width: 5px
.task-list-item
position: relative
color: $color-text-dark
&:hover
color: $color-text-dark-primary
background-color: $color-background-light
text-decoration: none
&.active
text-decoration: none
.status, .due_date
display: inline-block
margin-right: 10px
text-transform: uppercase
font-size: .8em
text-decoration: none
.due_date
margin-left: auto
color: $color-text-dark-primary
+text-overflow-ellipsis
&.late
color: $color-danger
.name
padding: 5px 5px 5px 10px
+text-overflow-ellipsis
.shotname
color: $color-text-dark-secondary
margin-left: 15px
padding-right: 10px
position: relative
+text-overflow-ellipsis
&:after
position: absolute
width: 2px
height: 2px
right: 0
border-radius: 50%
bottom: 9px
display: block
content: ''
border: thin solid $color-text-dark-hint
.status-indicator+.name
margin-left: 5px
@include status-color-property(background-color, ' .status-indicator', '')
option.invalid_task
color: $color-danger
background-color: hsl(hue($color-danger), 80%, 90%)