header.styl 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. #header
  2. @extend $block
  3. background: white
  4. position: relative
  5. a, a:visited
  6. white-space: nowrap
  7. transition: 0.2s ease
  8. color: color-default
  9. a:hover
  10. color: color-link
  11. $header-block
  12. height: logo-size
  13. line-height: logo-size
  14. padding: ((header-height - logo-size)/2) 15px
  15. $header-block-left
  16. float: left
  17. $header-block-right
  18. float: right
  19. .header-inner
  20. height: 100%
  21. position: relative
  22. #logo
  23. @extend $header-block
  24. @extend $header-block-left
  25. display: inline-block
  26. .logo
  27. display: inline-block
  28. width: logo-size
  29. height: logo-size
  30. margin-right: 5px
  31. .site-title
  32. font-size: 16px
  33. display: inline-block
  34. vertical-align: top
  35. font-weight: 600
  36. #header-title
  37. text-align: center
  38. height: logo-size
  39. position: absolute
  40. top: 50%
  41. left: 0
  42. margin-top: logo-size * -0.5
  43. .header-sub
  44. border-top: 1px solid color-border
  45. ul
  46. clearfix()
  47. margin: 0 15px
  48. li
  49. float: left
  50. margin: 0 10px
  51. a
  52. display: inline-block
  53. line-height: header-sub-height
  54. .main-nav-link
  55. display: inline-block
  56. line-height: header-sub-height
  57. #header-sub
  58. @media mq-mobile
  59. display: none
  60. @media mq-mini
  61. display: none
  62. #main-nav
  63. @extend $header-block
  64. @extend $header-block-left
  65. @media mq-mobile
  66. display: none
  67. @media mq-mini
  68. display: none
  69. #main-nav-mobile
  70. @media mq-tablet
  71. display: none
  72. @media mq-normal
  73. display: none
  74. $nav-link
  75. float: left
  76. display: block
  77. padding: 0 15px
  78. .nav-icon
  79. @extend $nav-link
  80. text-align: center
  81. font-size: font-size
  82. width: font-size
  83. height: font-size
  84. position: relative
  85. cursor: pointer
  86. height: logo-size !important
  87. line-height: logo-size !important
  88. .main-nav-link
  89. @extend $nav-link
  90. font-weight: 300
  91. #sub-nav
  92. @media mq-normal
  93. display: none
  94. @extend $header-block
  95. @extend $header-block-right
  96. #profile-nav
  97. #profile-anchor
  98. clearfix()
  99. display: block
  100. height: logo-size
  101. line-height: logo-size
  102. .avatar, .fa
  103. float: left
  104. .avatar
  105. width: logo-size
  106. height: logo-size
  107. margin-right: 8px
  108. .fa
  109. line-height: logo-size
  110. #search-form-wrap
  111. @media mq-mini
  112. display: none
  113. @extend $header-block
  114. @extend $header-block-right
  115. .search-form
  116. position: relative
  117. .search-form-input
  118. width: 100%
  119. height: logo-size
  120. padding: 0 30px 0 10px
  121. line-height: logo-size
  122. border-radius: ((logo-size + 2)/2)
  123. &::-webkit-search-results-decoration
  124. &::-webkit-search-cancel-button
  125. -webkit-appearance: none
  126. .search-form-submit
  127. top: 50%
  128. right: 15px
  129. border: none
  130. cursor: pointer
  131. margin-top: -7px
  132. background: none
  133. position: absolute
  134. font: 13px font-icon
  135. font-family: 'FontAwesome'
  136. &:before
  137. content: '\f002'
  138. &:hover, &:focus
  139. color: #777
  140. .search-form-input
  141. width: 200px
  142. outline: none
  143. appearance: none
  144. background: none
  145. box-shadow: none
  146. color: color-default
  147. transition: 0.2s ease
  148. box-sizing: border-box
  149. font: font-size font-sans
  150. border: 1px solid color-border
  151. &:focus
  152. border-color: color-link
  153. #main-nav-mobile
  154. overflow-y: hidden
  155. overflow-x: auto
  156. .menu
  157. clearfix()
  158. margin: 0
  159. height: header-sub-height
  160. .search-form-input
  161. display: none
  162. @media mq-mini
  163. display: block
  164. padding: 0 10px
  165. margin-right: 15px
  166. height: header-sub-height - 16
  167. line-height: header-sub-height - 16
  168. border-radius: ((header-sub-height - 16)/2)
  169. &::-webkit-search-results-decoration
  170. &::-webkit-search-cancel-button
  171. -webkit-appearance: none