diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass index 5a0d5ff..b9ea73a 100644 --- a/src/styles/_shots.sass +++ b/src/styles/_shots.sass @@ -55,12 +55,12 @@ background-color: $color-background-light &.shot-name - padding: 0px 10px text-align: left position: relative height: 100% a - height: 100% + display: flex + padding: 5px 10px color: $color-text-dark-primary &.task-type @@ -70,12 +70,15 @@ overflow: hidden a - display: inline-block /* Each task in a new line */ + display: inline-block /* Each task next to each other */ + vertical-align: middle height: 100% - padding: 0 15px + min-height: 100% + padding: 15px transition: all 150ms ease-in-out + position: relative - @include status-color-property(background-color, ':before', 'dark') + @include status-color-property(background-color, ':before', '') &:before display: block @@ -85,17 +88,29 @@ height: 16px border-radius: 50% border: 2px solid transparent - top: 50% - left: 50% - transform: translate(-50%, -50%) + +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.6) - border: 2px solid $color-primary + transform: translate(-50%, -50%) scale(1.3) + border-color: $color-primary + &:hover + border-color: $color-primary-light &.task-add width: auto @@ -111,6 +126,8 @@ &:hover &:before opacity: .8 + transform: translate(-50%, -50%) scale(1.2) + &.active:before transform: translate(-50%, -50%) scale(1.3) .attract-box