boardList.styl 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .board-list
  2. margin: 25px auto
  3. width: 1200px
  4. li
  5. float: left
  6. width: 25%
  7. box-sizing: border-box
  8. position: relative
  9. &.starred .fa-star-o
  10. opacity: 1
  11. a
  12. background-color: #999
  13. color: #f6f6f6
  14. height: 90px
  15. font-size: 16px
  16. line-height: 22px
  17. border-radius: 3px
  18. display: block
  19. font-weight: 700
  20. min-height: 18px
  21. padding: 8px 12px 8px 12px
  22. margin: 0 16px 16px 0
  23. position: relative
  24. text-decoration: none
  25. &.tile
  26. background-size: auto
  27. background-repeat: repeat
  28. .details
  29. height: 84px
  30. padding-right: 36px
  31. bottom: 0
  32. left: 0
  33. overflow: hidden
  34. padding: 9px 12px
  35. position: absolute
  36. right: 0
  37. top: 0
  38. .board-list-item-sub-name
  39. color: rgba(255, 255, 255, .5)
  40. display: block
  41. font-size: 14px
  42. font-weight: 400
  43. line-height: 22px
  44. .fa-star-o
  45. bottom: 0
  46. font-size: 14px
  47. height: 18px
  48. line-height: 18px
  49. opacity: 0
  50. padding: 9px 9px
  51. position: absolute
  52. right: 0
  53. top: 0
  54. transition-duration: .15s
  55. transition-property: color, font-size, background
  56. .is-star-active
  57. color: #e6bf00
  58. li:hover a
  59. color: #f6f6f6
  60. .fa-star-o
  61. color: #fff
  62. opacity: .75
  63. &:hover
  64. font-size: 18px
  65. opacity: 1
  66. &.is-star-active
  67. color: #e6bf00
  68. opacity: 1
  69. &:hover
  70. color: #ffd91a
  71. font-size: 16px
  72. opacity: 1