diff options
Diffstat (limited to 'client/components/boards/boardsList.styl')
-rw-r--r-- | client/components/boards/boardsList.styl | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/client/components/boards/boardsList.styl b/client/components/boards/boardsList.styl new file mode 100644 index 00000000..8e296028 --- /dev/null +++ b/client/components/boards/boardsList.styl @@ -0,0 +1,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 + |