Header.styl 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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. &__itemsearch
  28. display none
  29. margin-right 8%
  30. width 55%
  31. &__search
  32. width 100%
  33. .search__addonsearch
  34. background-color transparent
  35. cursor pointer
  36. &:hover
  37. background-color thirdColor
  38. color mainColor
  39. .btnnavbar
  40. border 1px solid grey
  41. background-color transparent
  42. cursor pointer
  43. &__itemlanguage
  44. &__languagedropdown
  45. .languagedropdown
  46. &__btnlanguage
  47. margin-right 25px
  48. color darkGrey
  49. &:focus
  50. box-shadow shadow-all-side-blue
  51. border-radius 5px
  52. background-color transparent
  53. &__imgselected
  54. margin-right 10px
  55. width 20px
  56. height 15px
  57. &__subdropdown
  58. padding 0
  59. min-width 0
  60. .subdropdown
  61. &__link
  62. cursor pointer
  63. &__flag
  64. width 25px
  65. height 18px
  66. &__itemquestion
  67. display none
  68. &__btnquestion
  69. margin-right 30px
  70. .btnquestion__icon
  71. color darkGrey
  72. &__itemprofil
  73. .profilgroup
  74. margin-right 30px
  75. &__name
  76. border 0
  77. padding 0 5px
  78. background-color transparent
  79. cursor pointer
  80. &::after //bootstrap overrides
  81. vertical-align middle
  82. color darkGrey
  83. &__imgprofil
  84. display inline-block
  85. margin-right 10px
  86. width 40px
  87. height 40px
  88. &__text
  89. display inline-block
  90. vertical-align middle
  91. margin-right 10px
  92. color darkGrey
  93. &__sub
  94. color darkGrey
  95. cursor pointer
  96. &:focus
  97. box-shadow none
  98. &__setting
  99. padding 0
  100. left inherit
  101. right 0
  102. cursor pointer
  103. .setting__link
  104. padding 10px
  105. // color fontColor
  106. &__itemnotification
  107. display none
  108. &__timeline
  109. margin-right 30px
  110. .timeline
  111. &__btnnotif
  112. color darkGrey
  113. &::after
  114. margin-left 15px
  115. &__subdropdown
  116. padding 0
  117. left inherit
  118. right 0
  119. cursor pointer
  120. &__text
  121. padding 10px;
  122. @media (min-width: min-lg) and (max-width: max-lg)
  123. .header
  124. &__menu
  125. &__rightside
  126. width 100%
  127. @media (min-width: min-md) and (max-width: max-md)
  128. .header
  129. &__logo__img
  130. margin-left 0
  131. &__menu
  132. &__rightside
  133. width 100%
  134. @media (min-width: min-sm) and (max-width: max-sm)
  135. .header
  136. &__logo__img
  137. margin-left 0
  138. &__menu
  139. &__rightside
  140. padding-left 0
  141. width 100%
  142. &__itemquestion
  143. display none
  144. @media (max-width: max-xs)
  145. .header
  146. &__logo__img
  147. margin-left 0
  148. &__menu
  149. &__rightside
  150. flex-wrap wrap
  151. padding-left 0
  152. width 418px
  153. &__itemquestion
  154. display none
  155. &__itemprofil
  156. &__profilgroup
  157. margin-top 20px
  158. .profilgroup__setting
  159. left 0