_header.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. header{
  2. z-index: 999;
  3. position: relative;
  4. @include inlineflex();
  5. -webkit-box-pack: center;
  6. -ms-flex-pack: center;
  7. justify-content: center;
  8. width: 100%;
  9. border-bottom: 1px solid $light-blue;
  10. height: 105px;
  11. nav{
  12. @include inlineflex();
  13. -ms-flex-pack: distribute;
  14. justify-content: space-around;
  15. height: 100px;
  16. width: 70%;
  17. flex-wrap: nowrap;
  18. .logo{
  19. display: -webkit-box;
  20. display: -ms-flexbox;
  21. display: flex;
  22. a{
  23. display: block;
  24. margin: auto;
  25. }
  26. }
  27. &.dropmenu{
  28. a{
  29. padding: 10px;
  30. }
  31. & > ul{
  32. @include inlineflex();
  33. -ms-flex-wrap: nowrap;
  34. flex-wrap: nowrap;
  35. & > li{
  36. text-align: center;
  37. max-width: 241px;
  38. &>a{
  39. white-space: nowrap;
  40. line-height: 6rem;
  41. border-top: 1px solid $light-blue;
  42. border-bottom: 3px solid $green;
  43. }
  44. padding: 0 20px;
  45. & > ul{
  46. display: none;
  47. margin-top: -1.5rem;
  48. li{
  49. background-color: white;
  50. text-align: center;
  51. a{
  52. display: block;
  53. padding: 10px;
  54. position: relative;
  55. &:before{
  56. content: "";
  57. position: absolute;
  58. width: 100%;
  59. height: 3px;
  60. bottom: 0;
  61. left: 0;
  62. background-color: $green;
  63. visibility: hidden;
  64. -webkit-transform: scaleX(0);
  65. transform: scaleX(0);
  66. -webkit-transition: all 0.3s ease-in-out 0s;
  67. transition: all 0.3s ease-in-out 0s;
  68. }
  69. }
  70. }
  71. }
  72. &:hover{
  73. & > ul{
  74. display: block;
  75. li:hover{
  76. a:hover:before {
  77. visibility: visible;
  78. -webkit-transform: scaleX(1);
  79. transform: scaleX(1);
  80. }
  81. }
  82. }
  83. }
  84. }
  85. }
  86. }
  87. .reso{
  88. @include inlineflex;
  89. -ms-flex-wrap: nowrap;
  90. flex-wrap: nowrap;
  91. a{
  92. display: block;
  93. width: 35px;
  94. margin: auto 5px;
  95. }
  96. }
  97. }
  98. }