hamburgers.scss 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. @charset "UTF-8";
  2. /*!
  3. * Hamburgers
  4. * @description Tasty CSS-animated hamburgers
  5. * @author Jonathan Suh @jonsuh
  6. * @site https://jonsuh.com/hamburgers
  7. * @link https://github.com/jonsuh/hamburgers
  8. */
  9. // Settings
  10. // ==================================================
  11. $hamburger-padding-x : 15px !default;
  12. $hamburger-padding-y : 15px !default;
  13. $hamburger-layer-width : 40px !default;
  14. $hamburger-layer-height : 4px !default;
  15. $hamburger-layer-spacing : 6px !default;
  16. $hamburger-layer-color : #000 !default;
  17. $hamburger-layer-border-radius : 4px !default;
  18. $hamburger-hover-opacity : 0.7 !default;
  19. $hamburger-hover-transition-duration : 0.15s !default;
  20. $hamburger-hover-transition-timing-function: linear !default;
  21. // To use CSS filters as the hover effect instead of opacity,
  22. // set $hamburger-hover-use-filter as true and
  23. // change the value of $hamburger-hover-filter accordingly.
  24. $hamburger-hover-use-filter: false !default;
  25. $hamburger-hover-filter : opacity(50%) !default;
  26. // Types (Remove or comment out what you don’t need)
  27. // ==================================================
  28. $hamburger-types: (
  29. 3dx,
  30. 3dx-r,
  31. 3dy,
  32. 3dy-r,
  33. 3dxy,
  34. 3dxy-r,
  35. arrow,
  36. arrow-r,
  37. arrowalt,
  38. arrowalt-r,
  39. arrowturn,
  40. arrowturn-r,
  41. boring,
  42. collapse,
  43. collapse-r,
  44. elastic,
  45. elastic-r,
  46. emphatic,
  47. emphatic-r,
  48. minus,
  49. slider,
  50. slider-r,
  51. spin,
  52. spin-r,
  53. spring,
  54. spring-r,
  55. stand,
  56. stand-r,
  57. squeeze,
  58. vortex,
  59. vortex-r
  60. ) !default;
  61. // Base Hamburger (We need this)
  62. // ==================================================
  63. @import "base";
  64. // Hamburger types
  65. // ==================================================
  66. @import "squeeze";
  67. // ==================================================
  68. // Cooking up additional types:
  69. //
  70. // The Sass for each hamburger type should be nested
  71. // inside an @if directive to check whether or not
  72. // it exists in $hamburger-types so only the CSS for
  73. // included types are generated.
  74. //
  75. // e.g. hamburgers/types/_new-type.scss
  76. //
  77. // @if index($hamburger-types, new-type) {
  78. // .hamburger--new-type {
  79. // ...
  80. // }
  81. // }