Header.styl 3.8KB

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