2018-12-09 08:21:01 +01:00
|
|
|
|
@charset "UTF-8";
|
|
|
|
|
/*!
|
|
|
|
|
* Hamburgers
|
|
|
|
|
* @description Tasty CSS-animated hamburgers
|
|
|
|
|
* @author Jonathan Suh @jonsuh
|
|
|
|
|
* @site https://jonsuh.com/hamburgers
|
|
|
|
|
* @link https://github.com/jonsuh/hamburgers
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// Settings
|
|
|
|
|
// ==================================================
|
2020-08-23 12:01:06 +02:00
|
|
|
|
$hamburger-padding-x: 15px !default;
|
|
|
|
|
$hamburger-padding-y: 15px !default;
|
|
|
|
|
$hamburger-layer-width: 36px;
|
|
|
|
|
$hamburger-layer-height: 3px !default;
|
|
|
|
|
$hamburger-layer-spacing: 7px;
|
|
|
|
|
$hamburger-layer-color: $primary !default;
|
|
|
|
|
$hamburger-layer-border-radius: 3px !default;
|
|
|
|
|
$hamburger-hover-opacity: 0.7 !default;
|
|
|
|
|
$hamburger-active-layer-color: #fff !default;
|
2018-12-09 08:21:01 +01:00
|
|
|
|
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
|
|
|
|
|
|
|
|
|
|
// To use CSS filters as the hover effect instead of opacity,
|
|
|
|
|
// set $hamburger-hover-use-filter as true and
|
|
|
|
|
// change the value of $hamburger-hover-filter accordingly.
|
2020-08-23 12:01:06 +02:00
|
|
|
|
$hamburger-hover-use-filter: false !default;
|
|
|
|
|
$hamburger-hover-filter: opacity(50%) !default;
|
2018-12-09 08:21:01 +01:00
|
|
|
|
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
|
|
|
|
|
|
|
|
|
|
// Types (Remove or comment out what you don’t need)
|
|
|
|
|
// ==================================================
|
|
|
|
|
$hamburger-types: (
|
|
|
|
|
3dx,
|
|
|
|
|
3dx-r,
|
|
|
|
|
3dy,
|
|
|
|
|
3dy-r,
|
|
|
|
|
3dxy,
|
|
|
|
|
3dxy-r,
|
|
|
|
|
arrow,
|
|
|
|
|
arrow-r,
|
|
|
|
|
arrowalt,
|
|
|
|
|
arrowalt-r,
|
|
|
|
|
arrowturn,
|
|
|
|
|
arrowturn-r,
|
|
|
|
|
boring,
|
|
|
|
|
collapse,
|
|
|
|
|
collapse-r,
|
|
|
|
|
elastic,
|
|
|
|
|
elastic-r,
|
|
|
|
|
emphatic,
|
|
|
|
|
emphatic-r,
|
|
|
|
|
minus,
|
|
|
|
|
slider,
|
|
|
|
|
slider-r,
|
|
|
|
|
spin,
|
|
|
|
|
spin-r,
|
|
|
|
|
spring,
|
|
|
|
|
spring-r,
|
|
|
|
|
stand,
|
|
|
|
|
stand-r,
|
|
|
|
|
squeeze,
|
|
|
|
|
vortex,
|
|
|
|
|
vortex-r
|
|
|
|
|
) !default;
|
|
|
|
|
|
|
|
|
|
// Base Hamburger (We need this)
|
|
|
|
|
// ==================================================
|
2020-08-23 12:01:06 +02:00
|
|
|
|
@import 'base';
|
2018-12-09 08:21:01 +01:00
|
|
|
|
|
|
|
|
|
// Hamburger types
|
|
|
|
|
// ==================================================
|
|
|
|
|
// @import "types/3dx";
|
|
|
|
|
// @import "types/3dx-r";
|
|
|
|
|
// @import "types/3dy";
|
|
|
|
|
// @import "types/3dy-r";
|
|
|
|
|
// @import "types/3dxy";
|
|
|
|
|
// @import "types/3dxy-r";
|
|
|
|
|
// @import "types/arrow";
|
|
|
|
|
// @import "types/arrow-r";
|
|
|
|
|
// @import "types/arrowalt";
|
|
|
|
|
// @import "types/arrowalt-r";
|
|
|
|
|
// @import "types/arrowturn";
|
|
|
|
|
// @import "types/arrowturn-r";
|
|
|
|
|
// @import "types/boring";
|
|
|
|
|
// @import "types/collapse";
|
|
|
|
|
// @import "types/collapse-r";
|
|
|
|
|
// @import "types/elastic";
|
|
|
|
|
// @import "types/elastic-r";
|
|
|
|
|
// @import "types/emphatic";
|
|
|
|
|
// @import "types/emphatic-r";
|
|
|
|
|
// @import "types/minus";
|
2020-08-23 12:01:06 +02:00
|
|
|
|
@import 'types/slider';
|
2018-12-09 08:21:01 +01:00
|
|
|
|
// @import "types/slider-r";
|
|
|
|
|
// @import "types/spin";
|
|
|
|
|
// @import "types/spin-r";
|
|
|
|
|
// @import "types/spring";
|
|
|
|
|
// @import "types/spring-r";
|
|
|
|
|
// @import "types/stand";
|
|
|
|
|
// @import "types/stand-r";
|
|
|
|
|
// @import "types/squeeze";
|
|
|
|
|
// @import "types/vortex";
|
|
|
|
|
// @import "types/vortex-r";
|
|
|
|
|
|
|
|
|
|
// ==================================================
|
|
|
|
|
// Cooking up additional types:
|
|
|
|
|
//
|
|
|
|
|
// The Sass for each hamburger type should be nested
|
|
|
|
|
// inside an @if directive to check whether or not
|
|
|
|
|
// it exists in $hamburger-types so only the CSS for
|
|
|
|
|
// included types are generated.
|
|
|
|
|
//
|
|
|
|
|
// e.g. hamburgers/types/_new-type.scss
|
|
|
|
|
//
|
|
|
|
|
// @if index($hamburger-types, new-type) {
|
|
|
|
|
// .hamburger--new-type {
|
|
|
|
|
// ...
|
|
|
|
|
// }
|
|
|
|
|
// }
|