summaryrefslogtreecommitdiffstats
path: root/client/components/boards/boardsList.styl
blob: ae366e833912e14b53649b3c354fb478b374d73e (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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
@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: #fff
    display: block
    font-size: 14px
    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

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

  .fa-archive
    position: absolute;
    bottom: 0
    font-size: 14px
    height: 18px
    line-height: 18px
    opacity: 0
    left: 0
    padding: 9px 9px
    transition-duration: .15s
    transition-property: color, font-size, background

  li:hover a
    &:hover
      .fa-star,
      .fa-clone,
      .fa-archive,
      .fa-star-o
        color: white

    .fa-star,
    .fa-clone,
    .fa-archive,
    .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
      color: white
      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: 50% 

    .board-list-item
      overflow: hidden
      height: 8rem

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

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