Activity: Make left line stop at top and bottom

This commit is contained in:
2016-10-20 15:33:20 +02:00
parent aff8347718
commit a31fec8917

View File

@@ -6,32 +6,46 @@
ul ul
cursor: default cursor: default
padding: 0 10px padding: 5px
color: $color-text-dark-primary color: $color-text-dark-primary
list-style: none list-style: none
border-left: thin solid $activity-highlight-color
li li
padding: 7px 0 padding: 0 10px 7px 10px
position: relative
span.date span.date
color: darken($activity-highlight-color, 5%) color: darken($activity-highlight-color, 5%)
position: relative
&:before /* Left Dot */
content: '' &:after
display: block content: ''
position: absolute display: block
bottom: 5px position: absolute
left: -13px top: 6px
width: 5px left: -3px
height: 5px width: 5px
border-radius: 50% height: 5px
background-color: $color-background-light border-radius: 50%
border: thin solid $activity-highlight-color background-color: $color-background-light
transition: all 250ms ease-in-out border: thin solid $activity-highlight-color
transition: all 250ms ease-in-out
&:hover span.date:before /* Left Line */
&:before
content: ''
display: block
position: absolute
top: 10px
left: -1px
width: 1px
height: 100%
background-color: $activity-highlight-color background-color: $activity-highlight-color
transition: all 250ms ease-in-out
&:last-child
&:before
background-color: transparent
span.actor span.actor
padding: 0 5px padding: 0 5px