Use anchor instead of div or button for filters and details tags

2 files changed, 11 insertions, 1 deletions

diff --git a/src/main/scala/reading/component/widget/Input.scala b/src/main/scala/reading/component/widget/Input.scala
index 1a1157e..9855c5f 100644
--- a/src/main/scala/reading/component/widget/Input.scala
+++ b/src/main/scala/reading/component/widget/Input.scala
@@ -12,6 +12,7 @@ import rx._
 
 import reading.component.style.{ Color => C }
 import reading.component.widget.style.{ Input => InputStyle }
+import reading.utils.RxUtils._
 
 object Input {
   def apply(
@@ -47,6 +48,7 @@ object Input {
       inputBox,
       span(
         InputStyle.clear,
+        Rx(if (query().nonEmpty) InputStyle.showClear else InputStyle.empty),
         onclick := (() => query() = ""),
         Cross(15.px, C.gray.value)
       )
diff --git a/src/main/scala/reading/component/widget/style/Input.scala b/src/main/scala/reading/component/widget/style/Input.scala
index 9453640..a9d61dc 100644
--- a/src/main/scala/reading/component/widget/style/Input.scala
+++ b/src/main/scala/reading/component/widget/style/Input.scala
@@ -26,6 +26,14 @@ object Input extends StyleSheet.Inline {
     display.flex,
     height(100.%%),
     alignItems.center,
-    cursor.pointer
+    cursor.pointer,
+    opacity(0),
+    transition := "opacity 0.2s ease-in-out"
   )
+
+  val showClear = style(
+    opacity(1)
+  )
+
+  val empty = style()
 }