_base.scss 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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. @else {
  29. opacity: $hamburger-hover-opacity;
  30. }
  31. }
  32. }
  33. .hamburger-box {
  34. width: $hamburger-layer-width;
  35. height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
  36. display: inline-block;
  37. position: relative;
  38. }
  39. .hamburger-inner {
  40. display: block;
  41. top: 50%;
  42. margin-top: $hamburger-layer-height / -2;
  43. &,
  44. &::before,
  45. &::after {
  46. width: $hamburger-layer-width;
  47. height: $hamburger-layer-height;
  48. background-color: $hamburger-layer-color;
  49. border-radius: $hamburger-layer-border-radius;
  50. position: absolute;
  51. -webkit-transition-property: -webkit-transform;
  52. transition-property: -webkit-transform;
  53. transition-property: transform;
  54. transition-property: transform, -webkit-transform;
  55. -webkit-transition-duration: 0.15s;
  56. transition-duration: 0.15s;
  57. -webkit-transition-timing-function: ease;
  58. transition-timing-function: ease;
  59. }
  60. &::before,
  61. &::after {
  62. content: "";
  63. display: block;
  64. }
  65. &::before {
  66. top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
  67. }
  68. &::after {
  69. bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
  70. }
  71. }