summaryrefslogtreecommitdiffstats
path: root/client/components/boards/boardsList.styl
blob: 8e296028c2b5f92e50e65dd0f5b7b91d9f94fcce (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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
$spaceBetweenTiles = 16px

.board-list
  margin: $spaceBetweenTiles ($spaceBetweenTiles/-2) 0

  li
    float: left
    width: 25%
    box-sizing: border-box
    position: relative

    &.starred
      .fa-star,
      .fa-star-o
        opacity: 1

  a
    background-color: #999
    color: #f6f6f6
    height: 90px
    font-size: 16px
    line-height: 22px
    border-radius: 3px
    display: block
    font-weight: 700
    min-height: 18px
    padding: 8px 12px 8px 12px
    margin: 0 ($spaceBetweenTiles/2) $spaceBetweenTiles
    position: relative
    text-decoration: none

    &.tile
      background-size: auto
      background-repeat: repeat

  .board-list-item-sub-name
    color: rgba(255, 255, 255, .5)
    display: block
    font-size: 14px
    font-weight: 400
    line-height: 22px

  .js-add-board
    text-align:center

    .label
      font-weight: normal
      line-height:90px

    :hover
      background-color:#939393

  .fa-star,
  .fa-star-o
    bottom: 0
    font-size: 14px
    height: 18px
    line-height: 18px
    opacity: 0
    padding: 9px 9px
    position: absolute
    right: 0
    top: 0
    transition-duration: .15s
    transition-property: color, font-size, background

  .is-star-active
    color: white

  li:hover a
    color: #f6f6f6

    .fa-star,
    .fa-star-o
      color: white
      opacity: .75

      &:hover
        font-size: 18px
        opacity: 1

      &.is-star-active
        opacity: 1

.board-backgrounds-list

  .board-background-select
    box-sizing: border-box
    display: block
    float: left
    width: 50%
    padding-top: 12px
    position: relative
    z-index: 1

    &:nth-child(-n + 2)
      padding-top: 0

    &:nth-child(2n)
      padding-left: 6px

    &:nth-child(2n+1)
      padding-right: 6px

    .background-box
      border-radius: 3px
      background-size: cover
      display: block
      height: 74px
      position: relative
      width: 100%
      cursor: pointer
      display: flex
      align-items: center
      justify-content: center

      i.fa-check
        font-size: 25px
        color: white