summaryrefslogtreecommitdiffstats
path: root/client/components/boards/boardsList.styl
blob: e24940a0d55773abb7bfb2bfb0fd3ac7c7b22956 (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
121
122
123
124
125
126
127
128
129
130
$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

  .board-list-item
    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

  .board-list-item-desc
    color: rgba(255, 255, 255, .5)
    display: block
    font-size: 10px
    font-weight: 400
    line-height: 18px

  .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
    &:hover
      .fa-star,
      .fa-star-o
        color: white

    .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