From 3c57fe762ffaa06acf4ac894e7cedcd2c5102991 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 23 Nov 2018 00:45:30 +0100
Subject: [PATCH] feat(tasks): make time values less prominent

---
 src/app/tasks/task/task.component.scss | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/tasks/task/task.component.scss b/src/app/tasks/task/task.component.scss
index ea1c9b2852..786385c7c6 100644
--- a/src/app/tasks/task/task.component.scss
+++ b/src/app/tasks/task/task.component.scss
@@ -8,10 +8,11 @@ $this-active-shadow: $whiteframe-shadow-6dp;
 $this-first-line-min-height: 40px;
 $this-icon-default-opacity: 0.7;
 
-%standardTaskHover {
+%standardTaskOpacityChange {
   opacity: $this-icon-default-opacity;
   transition: transform $transition-standard;
 
+  :host:focus &,
   .isCurrent &,
   &:hover,
   &:focus {
@@ -63,7 +64,6 @@ $this-icon-default-opacity: 0.7;
   }
 
 
-
   .title-bar-wrapper {
     display: flex;
     flex-wrap: nowrap;
@@ -86,12 +86,13 @@ $this-icon-default-opacity: 0.7;
   }
 
   $this-button-spacer: 1px;
+
   .toggle-sub-tasks-btn,
   .first-line .ico-btn {
     margin: 0 $this-button-spacer;
     padding: 0;
     z-index: 4;
-    @extend %standardTaskHover;
+    @extend %standardTaskOpacityChange;
     @extend %standardTaskZoom;
 
     &:hover {
@@ -115,7 +116,6 @@ $this-icon-default-opacity: 0.7;
   }
 
 
-
   .first-line {
     display: flex;
     flex-wrap: nowrap;
@@ -250,12 +250,7 @@ $this-icon-default-opacity: 0.7;
   position: relative;
   z-index: 3;
   cursor: grab;
-  opacity: $this-icon-default-opacity;
-  transition: transform $transition-standard;
-
-  &:hover {
-    opacity: 1;
-  }
+  @extend %standardTaskOpacityChange;
 
   &:after {
     content: '';
@@ -359,6 +354,15 @@ input {
   white-space: nowrap;
   margin-left: 10px;
   margin-right: 10px;
+  opacity: 0.3;
+
+
+  :host:focus > .inner-wrapper > .first-line &,
+  //:host:hover > .inner-wrapper > .first-line &,
+  .inner-wrapper.isCurrent > .first-line & {
+    opacity: 1;
+  }
+
   @include mq(xs, max) {
     margin-left: 8px;
     font-size: 13px;