_base.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. // Hamburger
  2. // ==================================================
  3. .hamburger {
  4. padding: $hamburger-padding-y $hamburger-padding-x;
  5. display: inline-block;
  6. cursor: pointer;
  7. -webkit-transition-property: opacity, -webkit-filter;
  8. transition-property: opacity, -webkit-filter;
  9. transition-property: opacity, filter;
  10. transition-property: opacity, filter, -webkit-filter;
  11. -webkit-transition-duration: $hamburger-hover-transition-duration;
  12. transition-duration: $hamburger-hover-transition-duration;
  13. -webkit-transition-timing-function: $hamburger-hover-transition-timing-function;
  14. transition-timing-function: $hamburger-hover-transition-timing-function;
  15. // Normalize (<button>)
  16. font: inherit;
  17. color: inherit;
  18. text-transform: none;
  19. background-color: transparent;
  20. border: 0;
  21. margin: 0;
  22. overflow: visible;
  23. &:hover {
  24. @if $hamburger-hover-use-filter == true {
  25. -webkit-filter: $hamburger-hover-filter;
  26. filter: $hamburger-hover-filter;
  27. }
  28. }
  29. }
  30. .hamburger-box {
  31. width: 30px;
  32. height: 16px;
  33. display: inline-block;
  34. position: relative;
  35. }
  36. .hamburger-inner {
  37. display: block;
  38. top: 50%;
  39. margin-top: $hamburger-layer-height / -2;
  40. background: white;
  41. &,
  42. &::before,
  43. &::after {
  44. background: white;
  45. width: 30px;
  46. height: 2px;
  47. border-radius: $hamburger-layer-border-radius;
  48. position: absolute;
  49. -webkit-transition-property: -webkit-transform;
  50. transition-property: -webkit-transform;
  51. transition-property: transform;
  52. transition-property: transform, -webkit-transform;
  53. -webkit-transition-duration: 0.15s;
  54. transition-duration: 0.15s;
  55. -webkit-transition-timing-function: ease;
  56. transition-timing-function: ease;
  57. }
  58. &::before,
  59. &::after {
  60. content: "";
  61. display: block;
  62. }
  63. &::before {
  64. top: -7px;
  65. }
  66. &::after {
  67. bottom: -7px;
  68. }
  69. }