_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. white-space: nowrap;
  39. line-height: 6rem;
  40. border-top: 1px solid $light-blue;
  41. border-bottom: 3px solid $green;
  42. }
  43. padding: 0 20px;
  44. & > ul{
  45. display: none;
  46. margin-top: -1.5rem;
  47. li{
  48. background-color: white;
  49. text-align: center;
  50. a{
  51. display: block;
  52. padding: 10px;
  53. position: relative;
  54. &:before{
  55. content: "";
  56. position: absolute;
  57. width: 100%;
  58. height: 3px;
  59. bottom: 0;
  60. left: 0;
  61. background-color: $green;
  62. visibility: hidden;
  63. -webkit-transform: scaleX(0);
  64. transform: scaleX(0);
  65. -webkit-transition: all 0.3s ease-in-out 0s;
  66. transition: all 0.3s ease-in-out 0s;
  67. }
  68. }
  69. }
  70. }
  71. &:hover{
  72. & > ul{
  73. display: block;
  74. li:hover{
  75. a:hover:before {
  76. visibility: visible;
  77. -webkit-transform: scaleX(1);
  78. transform: scaleX(1);
  79. }
  80. }
  81. }
  82. }
  83. }
  84. }
  85. }
  86. .reso{
  87. @include inlineflex;
  88. -ms-flex-wrap: nowrap;
  89. flex-wrap: nowrap;
  90. a{
  91. display: block;
  92. width: 35px;
  93. margin: auto 5px;
  94. }
  95. }
  96. }
  97. }