boardList.styl 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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. .board-list-item-sub-name
  29. color: rgba(255, 255, 255, .5)
  30. display: block
  31. font-size: 14px
  32. font-weight: 400
  33. line-height: 22px
  34. .fa-star-o
  35. bottom: 0
  36. font-size: 14px
  37. height: 18px
  38. line-height: 18px
  39. opacity: 0
  40. padding: 9px 9px
  41. position: absolute
  42. right: 0
  43. top: 0
  44. transition-duration: .15s
  45. transition-property: color, font-size, background
  46. .is-star-active
  47. color: #e6bf00
  48. li:hover a
  49. color: #f6f6f6
  50. .fa-star-o
  51. color: #fff
  52. opacity: .75
  53. &:hover
  54. font-size: 18px
  55. opacity: 1
  56. &.is-star-active
  57. color: #e6bf00
  58. opacity: 1
  59. &:hover
  60. color: #ffd91a
  61. font-size: 16px
  62. opacity: 1