Header.styl 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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. &__flag
  57. width 25px
  58. height 18px
  59. &__itemquestion
  60. &__btnquestion
  61. margin-right 30px
  62. .btnquestion__icon
  63. color darkGrey
  64. &__itemprofil
  65. &__profilgroup
  66. .profilgroup__name
  67. border 0
  68. padding 0 5px
  69. background-color transparent
  70. &:hover
  71. background-color lightGrey
  72. &:focus
  73. box-shadow shadow-all-side-blue
  74. background-color lightGrey
  75. &::after //bootstrap overrides
  76. vertical-align middle
  77. color darkGrey
  78. &__imgprofil
  79. display inline-block
  80. margin-right 10px
  81. width 40px
  82. height 40px
  83. &__text
  84. display inline-block
  85. vertical-align middle
  86. margin-right 10px
  87. color darkGrey
  88. .profilgroup__sub
  89. color darkGrey
  90. cursor pointer
  91. &:focus
  92. box-shadow none
  93. .profilgroup__setting
  94. padding 0
  95. &__link
  96. padding 10px 0
  97. @media (min-width: min-lg) and (max-width: max-lg)
  98. .header
  99. &__menu
  100. &__rightside
  101. width 100%
  102. @media (min-width: min-md) and (max-width: max-md)
  103. .header
  104. &__logo__img
  105. margin-left 0
  106. &__menu
  107. &__rightside
  108. width 100%
  109. @media (min-width: min-sm) and (max-width: max-sm)
  110. .header
  111. &__logo__img
  112. margin-left 0
  113. &__menu
  114. &__rightside
  115. padding-left 0
  116. width 100%
  117. &__itemquestion
  118. display none
  119. @media (max-width: max-xs)
  120. .header
  121. &__logo__img
  122. margin-left 0
  123. &__menu
  124. &__rightside
  125. flex-wrap wrap
  126. padding-left 0
  127. width 418px
  128. &__itemquestion
  129. display none
  130. &__itemprofil__profilgroup
  131. margin-top 20px