1 files changed, 83 insertions, 29 deletions

diff --git a/src/main/scala/reading/component/index/style/Menu.scala b/src/main/scala/reading/component/index/style/Menu.scala
index 38620e8..fca2bce 100644
--- a/src/main/scala/reading/component/index/style/Menu.scala
+++ b/src/main/scala/reading/component/index/style/Menu.scala
@@ -3,7 +3,7 @@ package reading.component.index.style
 import scalacss.Defaults._
 
 import reading.Media
-import reading.component.style.{ Color => C }
+import reading.component.style.{ Color => C, Count }
 
 object Menu extends StyleSheet.Inline {
   import dsl._
@@ -28,24 +28,13 @@ object Menu extends StyleSheet.Inline {
     textTransform.uppercase,
     fontWeight.bold,
     letterSpacing(1.px),
-    marginBottom(20.px),
+    Media.desktop(marginBottom(20.px)),
     Media.mobile(boxShadow := "0px 3px 5px -1px rgba(0, 0, 0, 0.2)")
   )
 
-  val close = style(
-    Media.desktop(display.none),
-    Media.mobile(
-      position.absolute,
-      top(0.px),
-      left(0.px),
-      width(100.%%),
-      height(100.%%),
-      cursor.pointer
-    )
-  )
-
-  val count = style(
-    Count.count
+  val filtersCount = style(
+    Count.major,
+    marginLeft(20.px)
   )
 
   val show = style(
@@ -63,35 +52,100 @@ object Menu extends StyleSheet.Inline {
     )
   )
 
-  val filterGroup = style()
-
-  private val filterCommon = style(
-    display.flex,
-    alignItems.center,
-    width(100.%%),
-    padding(5.px, 30.px),
-    textAlign.left
+  val groups = style(
+    Media.mobile(
+      height :=! "calc(100% - 120px)",
+      overflowY.auto
+    )
   )
 
+  val filterGroup = style()
+
   val filterTitle = style(
-    filterCommon,
+    Commons.filter(),
     minHeight(50.px),
     fontWeight.bold,
     textTransform.uppercase,
     letterSpacing(1.px),
-    marginBottom(10.px)
+    Media.desktop(marginBottom(10.px))
   )
 
-  val filter = style(
-    filterCommon,
+  val filterTitleCount = style(
+    Count.major,
     marginLeft(10.px),
+    color.white,
+    fontSize(12.px),
+    width(20.px),
+    height(20.px)
+  )
+
+  val filter = style(
+    Commons.filter(additionalLeftPadding = 10),
     minHeight(40.px),
     color.inherit,
-    &.lastChild(marginBottom(30.px))
+    &.lastChild(
+      Media.desktop(marginBottom(30.px)),
+      Media.mobile(marginBottom(15.px))
+    ),
+    &.hover(color(C.stiletto.value))
   )
 
   val activeFilter = style(
     color(C.stiletto.value),
+    fontWeight.bold,
+    cursor.pointer
+  )
+
+  val filterCount = style(
+    Count.minor
+  )
+
+  val footer = style(
+    Media.desktop(display.none),
+    Media.mobile(
+      display.flex,
+      width(100.%%),
+      height(60.px)
+    )
+  )
+
+  val clear = style(
+    Commons.footerButton,
+    border(2.px, solid, C.gray.value)
+  )
+
+  val returnToBooks = style(
+    Commons.footerButton,
+    backgroundColor(C.stiletto.value),
+    color(C.white.value)
+  )
+
+  val bookCount = style(
+    Count.minor,
+    color(C.white.value)
+  )
+}
+
+object Commons extends StyleSheet.Inline {
+  import dsl._
+
+  def filter(additionalLeftPadding: Int = 0) = style(
+    display.flex,
+    alignItems.center,
+    width(100.%%),
+    padding(5.px, 15.px, 5.px, (15 + additionalLeftPadding).px),
+    textAlign.left
+  )
+
+  val footerButton = style(
+    display.flex,
+    width(50.%%),
+    justifyContent.center,
+    alignItems.center,
+    margin(5.px),
+    textTransform.uppercase,
+    fontSize(14.px),
+    fontWeight.bold,
     cursor.pointer
   )
 }