_header.scss 2.3 KB

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