_header.scss 2.0 KB

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