aboutsummaryrefslogtreecommitdiff
path: root/src/main/scala/reading/component/index/style/Menu.scala
blob: 38620e81615672c82c0e48f7871c1c4ee7ca777d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
package reading.component.index.style

import scalacss.Defaults._

import reading.Media
import reading.component.style.{ Color => C }

object Menu extends StyleSheet.Inline {
  import dsl._

  val menu = style(
    Media.mobile(display.none),
    backgroundColor(C.englishWalnut.value),
    color(C.white.value),
    width(280.px),
    height(100.%%),
    boxShadow := "4px 0px 6px -1px rgba(0, 0, 0, 0.2)"
  )

  val header = style(
    display.flex,
    alignItems.center,
    justifyContent.center,
    position.relative,
    height(60.px),
    backgroundColor(C.englishWalnut.darken(20).value),
    color(C.white.value),
    textTransform.uppercase,
    fontWeight.bold,
    letterSpacing(1.px),
    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 show = style(
    Media.mobile(
      display.block,
      position.fixed,
      top(0.px),
      left(0.px),
      width(100.%%),
      height(100.%%),
      zIndex(1),
      overflowY.scroll,
      backgroundColor(C.white.value),
      color(C.black.value)
    )
  )

  val filterGroup = style()

  private val filterCommon = style(
    display.flex,
    alignItems.center,
    width(100.%%),
    padding(5.px, 30.px),
    textAlign.left
  )

  val filterTitle = style(
    filterCommon,
    minHeight(50.px),
    fontWeight.bold,
    textTransform.uppercase,
    letterSpacing(1.px),
    marginBottom(10.px)
  )

  val filter = style(
    filterCommon,
    marginLeft(10.px),
    minHeight(40.px),
    color.inherit,
    &.lastChild(marginBottom(30.px))
  )

  val activeFilter = style(
    color(C.stiletto.value),
    cursor.pointer
  )
}