boardsList.styl 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. $spaceBetweenTiles = 16px
  2. .board-list
  3. margin: $spaceBetweenTiles ($spaceBetweenTiles/-2) 0
  4. li
  5. float: left
  6. width: 25%
  7. box-sizing: border-box
  8. position: relative
  9. &.starred
  10. .fa-star,
  11. .fa-star-o
  12. opacity: 1
  13. .board-list-item
  14. background-color: #999
  15. color: #f6f6f6
  16. height: 90px
  17. font-size: 16px
  18. line-height: 22px
  19. border-radius: 3px
  20. display: block
  21. font-weight: 700
  22. min-height: 18px
  23. padding: 8px 12px 8px 12px
  24. margin: 0 ($spaceBetweenTiles/2) $spaceBetweenTiles
  25. position: relative
  26. text-decoration: none
  27. &.tile
  28. background-size: auto
  29. background-repeat: repeat
  30. .board-list-item-sub-name
  31. color: rgba(255, 255, 255, .5)
  32. display: block
  33. font-size: 14px
  34. font-weight: 400
  35. line-height: 22px
  36. .board-list-item-desc
  37. color: rgba(255, 255, 255, .5)
  38. display: block
  39. font-size: 10px
  40. font-weight: 400
  41. line-height: 18px
  42. .js-add-board
  43. text-align:center
  44. .label
  45. font-weight: normal
  46. line-height:90px
  47. :hover
  48. background-color:#939393
  49. .fa-star,
  50. .fa-star-o
  51. bottom: 0
  52. font-size: 14px
  53. height: 18px
  54. line-height: 18px
  55. opacity: 0
  56. padding: 9px 9px
  57. position: absolute
  58. right: 0
  59. top: 0
  60. transition-duration: .15s
  61. transition-property: color, font-size, background
  62. .is-star-active
  63. color: white
  64. li:hover a
  65. &:hover
  66. .fa-star,
  67. .fa-star-o
  68. color: white
  69. .fa-star,
  70. .fa-star-o
  71. color: white
  72. opacity: .75
  73. &:hover
  74. font-size: 18px
  75. opacity: 1
  76. &.is-star-active
  77. opacity: 1
  78. .board-backgrounds-list
  79. .board-background-select
  80. box-sizing: border-box
  81. display: block
  82. float: left
  83. width: 50%
  84. padding-top: 12px
  85. position: relative
  86. z-index: 1
  87. &:nth-child(-n + 2)
  88. padding-top: 0
  89. &:nth-child(2n)
  90. padding-left: 6px
  91. &:nth-child(2n+1)
  92. padding-right: 6px
  93. .background-box
  94. border-radius: 3px
  95. background-size: cover
  96. display: block
  97. height: 74px
  98. position: relative
  99. width: 100%
  100. cursor: pointer
  101. display: flex
  102. align-items: center
  103. justify-content: center
  104. i.fa-check
  105. font-size: 25px
  106. color: white