<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--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--bot absolute h-px bg-white"></span>
</a>
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "01225 471 465",
"phone": "01225 471 465",
"email": "hello@ournameismud.co.uk",
"twitter": "asclearasmud",
"copyright": "© 2018 Our Name is Mud",
"siteUrl": "/components/preview/home",
"address": "5 Princes Buildings \nBath \nBA1 2ED",
"cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself, <a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
"entries": [
{
"title": "Projects",
"url": "/components/preview/listing"
},
{
"title": "About",
"url": "/components/preview/about"
},
{
"title": "Journal",
"url": "/components/preview/journal"
},
{
"title": "Contact",
"url": "/components/preview/contact"
}
]
}
.o-burger {
// position: relative;
width: rem(40px);
height: rem(40px);
&.is-active {
.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(-10% - #{rem(8px)}), 0);
}
.o-burger__slice--bot {
transform: translate3d(0, calc(-10% + #{rem(8px)}), 0);
}
There are no notes for this item.