boardsList.styl 2.1 KB

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