summaryrefslogtreecommitdiffstats
path: root/client/components/boards/boardsList.styl
blob: 6318ea948f639c902e95781aca53ed0c5af9bd53 (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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
@import 'nib'

$spaceBetweenTiles = 16px

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

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

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

  .board-list-item
    overflow: hidden;
    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
    margin: ($spaceBetweenTiles/2)
    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

  .fa-circle
    bottom: 0;
    font-size: 10px;
    height: 10px;
    line-height: 10px;
    padding: 9px 9px;
    position: absolute;
    right: 0;
    transition-duration: .15s
    transition-property: color, font-size, background

  .has-overtime-card-active
    color: #eb4646 !important

  .no-overtime-card-active
    color: #3cb500 !important

  .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

@media screen and (max-width: 800px)
  .board-list
    height: 100%
    overflow: scroll

    li
      width: 33.3%

    .board-list-item
      overflow: hidden

    .board-list-item-sub-name
      position: relative
      top: -100px
      left: -100px

@media screen and (max-width: 360px)
    li
      width: 50%