Header.styl 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. .header
  2. position fixed
  3. width 100%
  4. box-shadow shadow-bottom
  5. background mainColor
  6. z-index 4
  7. &__logo
  8. &__img
  9. margin-left 40px
  10. width 150px
  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. .btnnavbar
  35. border 1px solid grey
  36. background-color transparent
  37. cursor pointer
  38. &__itemlanguage
  39. &__languagedropdown
  40. .languagedropdown
  41. &__btnlanguage
  42. margin-right 25px
  43. color darkGrey
  44. &:focus
  45. box-shadow shadow-all-side-blue
  46. border-radius 5px
  47. background-color transparent
  48. &__imgselected
  49. margin-right 10px
  50. width 20px
  51. height 15px
  52. &__subdropdown
  53. padding 0
  54. min-width 0
  55. .subdropdown
  56. &__link
  57. cursor pointer
  58. &__flag
  59. width 25px
  60. height 18px
  61. &__itemquestion
  62. &__btnquestion
  63. margin-right 30px
  64. .btnquestion__icon
  65. color darkGrey
  66. &__itemprofil
  67. &__profilgroup
  68. .profilgroup__name
  69. border 0
  70. padding 0 5px
  71. background-color transparent
  72. &:hover
  73. background-color lightGrey
  74. &:focus
  75. box-shadow shadow-all-side-blue
  76. background-color lightGrey
  77. &::after //bootstrap overrides
  78. vertical-align middle
  79. color darkGrey
  80. &__imgprofil
  81. display inline-block
  82. margin-right 10px
  83. width 40px
  84. height 40px
  85. &__text
  86. display inline-block
  87. vertical-align middle
  88. margin-right 10px
  89. color darkGrey
  90. .profilgroup__sub
  91. color darkGrey
  92. cursor pointer
  93. &:focus
  94. box-shadow none
  95. .profilgroup__setting
  96. padding 0
  97. &__link
  98. padding 10px 0
  99. @media (min-width: min-lg) and (max-width: max-lg)
  100. .header
  101. &__menu
  102. &__rightside
  103. width 100%
  104. @media (min-width: min-md) and (max-width: max-md)
  105. .header
  106. &__logo__img
  107. margin-left 0
  108. &__menu
  109. &__rightside
  110. width 100%
  111. @media (min-width: min-sm) and (max-width: max-sm)
  112. .header
  113. &__logo__img
  114. margin-left 0
  115. &__menu
  116. &__rightside
  117. padding-left 0
  118. width 100%
  119. &__itemquestion
  120. display none
  121. @media (max-width: max-xs)
  122. .header
  123. &__logo__img
  124. margin-left 0
  125. &__menu
  126. &__rightside
  127. flex-wrap wrap
  128. padding-left 0
  129. width 418px
  130. &__itemquestion
  131. display none
  132. &__itemprofil__profilgroup
  133. margin-top 20px