boardList.styl 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  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. .js-add-board
  35. text-align:center
  36. .label
  37. font-weight: normal
  38. line-height:90px
  39. :hover
  40. background-color:#939393
  41. .fa-star-o
  42. bottom: 0
  43. font-size: 14px
  44. height: 18px
  45. line-height: 18px
  46. opacity: 0
  47. padding: 9px 9px
  48. position: absolute
  49. right: 0
  50. top: 0
  51. transition-duration: .15s
  52. transition-property: color, font-size, background
  53. .is-star-active
  54. color: #e6bf00
  55. li:hover a
  56. color: #f6f6f6
  57. .fa-star-o
  58. color: #fff
  59. opacity: .75
  60. &:hover
  61. font-size: 18px
  62. opacity: 1
  63. &.is-star-active
  64. color: #e6bf00
  65. opacity: 1
  66. &:hover
  67. color: #ffd91a
  68. font-size: 16px
  69. opacity: 1
  70. .board-backgrounds-list
  71. .board-background-select
  72. box-sizing: border-box
  73. display: block
  74. float: left
  75. width: 50%
  76. padding-top: 12px
  77. position: relative
  78. z-index: 1
  79. &:nth-child(-n + 2)
  80. padding-top: 0
  81. &:nth-child(2n)
  82. padding-left: 6px
  83. &:nth-child(2n+1)
  84. padding-right: 6px
  85. .background-box
  86. border-radius: 3px
  87. background-size: cover
  88. display: block
  89. height: 74px
  90. position: relative
  91. width: 100%
  92. cursor: pointer
  93. display: flex
  94. align-items: center
  95. justify-content: center
  96. i.fa-check
  97. font-size: 25px
  98. color: white