Header.styl 3.4KB

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