Header.styl 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. .header
  2. position fixed
  3. width 100%
  4. border-bottom 1px solid grey
  5. z-index 6
  6. &__logo
  7. &__img
  8. width 150px
  9. &__breadcrumb
  10. width 630px
  11. &__menu
  12. justify-content flex-end
  13. &__list
  14. display none
  15. margin-left 50px
  16. .list__item
  17. padding-right 30px
  18. &__link
  19. color blue
  20. font-size 16px
  21. &:hover
  22. color darkBlue
  23. &__rightside
  24. display flex
  25. margin-top 15px
  26. list-style none
  27. &__adminlink
  28. .adminlink
  29. &__btn
  30. margin-right 15px
  31. border 1px solid grey
  32. border-radius 5px
  33. background-color transparent
  34. &::after
  35. margin-left 15px
  36. &__setting
  37. padding 0
  38. .setting__link
  39. padding 10px
  40. &__itemsearch
  41. display none
  42. margin-right 8%
  43. width 55%
  44. &__search
  45. width 100%
  46. .search__addonsearch
  47. background-color transparent
  48. cursor pointer
  49. .btnnavbar
  50. border 1px solid grey
  51. background-color transparent
  52. cursor pointer
  53. &__itemlanguage
  54. &__languagedropdown
  55. .languagedropdown
  56. &__btnlanguage
  57. margin-right 25px
  58. color darkGrey
  59. &:focus
  60. box-shadow shadow-all-side-blue
  61. border-radius 5px
  62. background-color transparent
  63. &__imgselected
  64. margin-right 10px
  65. width 20px
  66. height 15px
  67. &__subdropdown
  68. padding 0
  69. min-width 0
  70. .subdropdown
  71. &__link
  72. cursor pointer
  73. &__flag
  74. width 25px
  75. height 18px
  76. &__itemquestion
  77. display none
  78. &__btnquestion
  79. margin-right 30px
  80. .btnquestion__icon
  81. color darkGrey
  82. &__itemprofil
  83. .profilgroup
  84. margin-right 30px
  85. &__name
  86. border 0
  87. padding 0 5px
  88. background-color transparent
  89. cursor pointer
  90. &::after //bootstrap overrides
  91. vertical-align middle
  92. color darkGrey
  93. &__imgprofil
  94. display inline-block
  95. margin-right 10px
  96. width 40px
  97. height 40px
  98. &__text
  99. display inline-block
  100. vertical-align middle
  101. margin-right 10px
  102. color darkGrey
  103. &__sub
  104. color darkGrey
  105. cursor pointer
  106. &:focus
  107. box-shadow none
  108. &__setting
  109. padding 0
  110. left inherit
  111. right 0
  112. width 100%
  113. cursor pointer
  114. .setting__link
  115. padding 10px
  116. // color fontColor
  117. &__itemnotification
  118. display none
  119. &__timeline
  120. margin-right 30px
  121. .timeline
  122. &__btnnotif
  123. color darkGrey
  124. &::after
  125. margin-left 15px
  126. &__subdropdown
  127. padding 0
  128. left inherit
  129. right 0
  130. cursor pointer
  131. &__text
  132. padding 10px;
  133. @media (min-width: min-lg) and (max-width: max-lg)
  134. .header
  135. &__menu
  136. &__rightside
  137. width 100%
  138. @media (min-width: min-md) and (max-width: max-md)
  139. .header
  140. &__logo__img
  141. margin-left 0
  142. &__menu
  143. &__rightside
  144. width 100%
  145. @media (min-width: min-sm) and (max-width: max-sm)
  146. .header
  147. &__logo__img
  148. margin-left 0
  149. &__menu
  150. &__rightside
  151. padding-left 0
  152. width 100%
  153. &__itemquestion
  154. display none
  155. @media (max-width: max-xs)
  156. .header
  157. &__logo__img
  158. margin-left 0
  159. &__menu
  160. &__rightside
  161. flex-wrap wrap
  162. padding-left 0
  163. width 418px
  164. &__itemquestion
  165. display none
  166. &__itemprofil
  167. &__profilgroup
  168. margin-top 20px
  169. .profilgroup__setting
  170. left 0