_header.scss 2.3 KB

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