_header.scss 2.3 KB

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