Asta Valentaite

Burger 

<a id="nav-btn" href="#0" class="o-burger block absolute z-20 ">
	<span class="u-vh">Open Menu</span>
	<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
	<span class="o-burger__slice o-burger__slice--mid absolute h-px bg-white"></span>
	<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
 
<a id="{{ id|default('nav-btn') }}" href="{{ target|default('#0') }}" {{ attributes }} class="o-burger block absolute z-20 {{ className }}">
	<span class="u-vh">{{ text|default('Open Menu') }}</span>
	<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
	<span class="o-burger__slice o-burger__slice--mid absolute h-px bg-white"></span>
	<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
 
{
  "siteTitle": "Asta Valentaite",
  "copyright": "© 2017 Asta Valentaite. All rights reserved.",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "objects": "/02-objects/",
            "global": "../03-global/",
            "components": "/04-components/",
            "pages": "/05-pages/",
            "macros": "/macros/",
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "sitemenu": [
    {
      "title": "About",
      "slug": "/components/preview/about"
    },
    {
      "title": "Fashion",
      "slug": "/components/preview/press"
    },
    {
      "title": "Beauty",
      "slug": "/components/preview/post"
    },
    {
      "title": "Lifestyle",
      "slug": "/components/preview/vertical"
    },
    {
      "title": "Collaborations",
      "slug": "/components/preview/collaborations"
    },
    {
      "title": "Press",
      "slug": "/components/preview/press"
    }
  ]
}
  • Content: 
    .o-burger {
	// position: relative;
	width: rem(40px);
	height: rem(40px);

	&.is-active {
		.o-burger__slice--mid {
			opacity: 0;
			transition-delay: 0ms;
		}

		.o-burger__slice--top {
			transform: translate3d(0, calc(-50%), 0) rotate(45deg);
		}

		.o-burger__slice--bot {
			transform: translate3d(0, calc(-50%), 0) rotate(-45deg);
		}
	}
}

.o-burger__slice {
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	transform: translate3d(0, -50%, 0);
	width: rem(25px);
	transform-origin: 50%;
	transition: opacity 150ms ease, transform 250ms ease;
}

.o-burger__slice--top {
	transform: translate3d(0, calc(-50% - #{rem(8px)}), 0);
}

.o-burger__slice--bot {
	transform: translate3d(0, calc(-50% + #{rem(8px)}), 0);
}

.o-burger__slice--mid {
	transition: opacity 300ms ease;
	opacity: 1;
}
  • URL: /components/raw/burger/_burger.scss
  • Filesystem Path: src/templates/02-objects/burger/_burger.scss
  • Size: 793 Bytes

There are no notes for this item.