Header.styl 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. .header
  2. position fixed
  3. width 100%
  4. box-shadow shadow-bottom
  5. z-index 5
  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. &__btnquestion
  67. margin-right 30px
  68. .btnquestion__icon
  69. color darkGrey
  70. &__itemprofil
  71. .profilgroup
  72. &__name
  73. border 0
  74. padding 0 5px
  75. background-color transparent
  76. cursor pointer
  77. &:hover
  78. background-color lightGrey
  79. &:focus
  80. box-shadow shadow-all-side-blue
  81. background-color lightGrey
  82. &::after //bootstrap overrides
  83. vertical-align middle
  84. color darkGrey
  85. &__imgprofil
  86. display inline-block
  87. margin-right 10px
  88. width 40px
  89. height 40px
  90. &__text
  91. display inline-block
  92. vertical-align middle
  93. margin-right 10px
  94. color darkGrey
  95. &__sub
  96. color darkGrey
  97. cursor pointer
  98. &:focus
  99. box-shadow none
  100. &__setting
  101. padding 0
  102. left inherit
  103. right 0
  104. cursor pointer
  105. .setting__link
  106. padding 10px
  107. color fontColor
  108. @media (min-width: min-lg) and (max-width: max-lg)
  109. .header
  110. &__menu
  111. &__rightside
  112. width 100%
  113. @media (min-width: min-md) and (max-width: max-md)
  114. .header
  115. &__logo__img
  116. margin-left 0
  117. &__menu
  118. &__rightside
  119. width 100%
  120. @media (min-width: min-sm) and (max-width: max-sm)
  121. .header
  122. &__logo__img
  123. margin-left 0
  124. &__menu
  125. &__rightside
  126. padding-left 0
  127. width 100%
  128. &__itemquestion
  129. display none
  130. @media (max-width: max-xs)
  131. .header
  132. &__logo__img
  133. margin-left 0
  134. &__menu
  135. &__rightside
  136. flex-wrap wrap
  137. padding-left 0
  138. width 418px
  139. &__itemquestion
  140. display none
  141. &__itemprofil
  142. &__profilgroup
  143. margin-top 20px
  144. .profilgroup__setting
  145. left 0