sidebar.styl 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. #sidebar
  2. @media mq-normal
  3. column(sidebar-column)
  4. @media mq-tablet
  5. column(sidebar-column-tablet)
  6. .widget
  7. @extend $base-style
  8. line-height: line-height
  9. word-wrap: break-word
  10. font-size: 0.9em
  11. ul, ol
  12. list-style: none
  13. margin: 0
  14. ul, ol
  15. margin: 0 20px
  16. ul
  17. list-style: disc
  18. ol
  19. list-style: decimal
  20. .category-list-count
  21. .tag-list-count
  22. .archive-list-count
  23. padding-left: 5px
  24. color: color-grey
  25. font-size: 0.85em
  26. &:before
  27. content: "("
  28. &:after
  29. content: ")"
  30. .tagcloud
  31. a
  32. margin-right: 5px
  33. .widget-wrap
  34. margin: block-margin 10px
  35. @media mq-mini
  36. margin: block-margin 20px
  37. .widget-title
  38. @extend $block-caption
  39. margin-bottom: 0
  40. .widget
  41. padding: 15px 5px
  42. a
  43. color: color-sidebar-text
  44. text-decoration: none
  45. &:hover
  46. color: color-sidebar-text-dark
  47. ul, ol, dl
  48. ul, ol, dl
  49. margin-left: 15px
  50. list-style: disc
  51. ul, ol
  52. list-style: none
  53. li,
  54. .category-list-child
  55. padding: 10px 0
  56. font-size: font-size
  57. border-bottom: 1px solid border-color
  58. a
  59. color: color-sidebar-text
  60. ul, ol
  61. list-style: none
  62. li
  63. border: none
  64. &:last-child
  65. padding-bottom: 0px
  66. ul:not(#recent-post), ol:not(#recent-post)
  67. li
  68. a
  69. &:before
  70. color: #ccc
  71. content: "\f0da"
  72. font-size: 12px
  73. margin-right: 6px
  74. font-family: FontAwesome
  75. transition: 0.2s ease
  76. &:hover:before
  77. color: color-sidebar-text-dark
  78. #toTop
  79. @extend $block
  80. display: none
  81. cursor: pointer
  82. text-align: center
  83. width: 60px
  84. height: 60px
  85. color: white
  86. font-size: 50px
  87. line-height: 55px
  88. background: color-default
  89. opacity: 0.8
  90. border-radius: 4px
  91. bottom: 20px
  92. position: fixed
  93. @media mq-mobile
  94. width: 52px
  95. height: 52px
  96. font-size: 34px
  97. line-height: 52px
  98. @media mq-mini
  99. width: 48px
  100. height: 48px
  101. font-size: 32px
  102. line-height: 48px
  103. #recent-post
  104. li
  105. clearfix()
  106. padding: 10px 0 10px 94px
  107. &.no-thumbnail
  108. li
  109. padding: 10px 0px
  110. li
  111. .item-thumbnail
  112. opacity: 1
  113. float: left
  114. margin-left: -94px
  115. transition: all 0.2s ease
  116. .thumbnail
  117. width: 80px
  118. height: 80px
  119. display: block
  120. position: relative
  121. overflow: hidden
  122. span
  123. width: 100%
  124. height: 100%
  125. display: block
  126. .thumbnail-image
  127. position: absolute
  128. background-size: cover
  129. background-position: center
  130. .thumbnail-none
  131. background-image: url(thumbnail-default-small)
  132. background-size: 100% 100%
  133. .item-inner
  134. a
  135. .item-category
  136. font-size: 13px
  137. text-transform: uppercase
  138. a
  139. color: color-link
  140. &:hover
  141. color: color-sidebar-text-dark
  142. a, .fa
  143. margin-right: 5px
  144. .item-title
  145. font-size: 15px
  146. a
  147. color: color-sidebar-text-dark
  148. transition: all 0.2s ease
  149. .item-date
  150. color: #aaa
  151. font-size: 13px
  152. text-transform: uppercase
  153. &:hover
  154. .item-thumbnail
  155. opacity: 0.8
  156. .item-title a
  157. color: color-link