Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="canvas">
<input type="checkbox" id="toggle-nav" class="toggle-nav" />
<nav class="off-canvas">
<h2>Navigation</h2>
<label for="toggle-nav">Toggle Nav</label>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</nav>
<main class="main">
<h2>Main</h2>
<label for="toggle-nav">Toggle Nav</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
</main>
</div>
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Susy (v2.1.2)
// ----
@import "compass";
@import "compass/layout";
@import "breakpoint";
@import "susy";
// Setup
// -----
$susy: layout(6 (4rem 1rem) inside-static);
@import "compass/reset";
@include establish-baseline;
@include border-box-sizing;
@mixin is-hidden {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
@mixin is-checked {
&:checked { @content; }
}
@mixin is-toggle {
@include is-hidden;
@include is-checked { @content; }
}
html, body {
height: 100%;
}
// Off-Canvas Pattern
// ------------------
$off-canvas: (
drawer: '.off-canvas',
pusher: '~ .main',
push: span(-3 static),
);
@mixin off-canvas(
$off-canvas: $off-canvas
) {
@at-root #{map-get($off-canvas, drawer)} {
width: abs(map-get($off-canvas, push));
}
@include is-toggle {
#{map-get($off-canvas, pusher)} {
@include translate3d(map-get($off-canvas, push), 0, 0);
}
@content;
}
}
// Render Off-Canvas
// -----------------
.toggle-nav {
@include off-canvas {
~ .off-canvas {
@include scale3d(1, 1, 1);
}
}
}
// Extra Styles
// ------------
.canvas {
@include container;
height: 100%;
overflow: hidden;
position: relative;
}
.off-canvas {
@include scale3d(.95, .95, .95);
@include stretch-y;
@include transition(all 300ms ease);
background: #ccc;
right: 0;
overflow: auto;
}
.main {
@include transition(all 300ms ease);
background: white;
height: 100%;
overflow: auto;
position: relative;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
html {
font-size: 100%;
line-height: 1.5em;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.toggle-nav {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.off-canvas {
width: 15rem;
}
.toggle-nav:checked ~ .main {
-moz-transform: translate3d(-15rem, 0, 0);
-webkit-transform: translate3d(-15rem, 0, 0);
transform: translate3d(-15rem, 0, 0);
}
.toggle-nav:checked ~ .off-canvas {
-moz-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.canvas {
max-width: 30rem;
margin-left: auto;
margin-right: auto;
height: 100%;
overflow: hidden;
position: relative;
}
.canvas:after {
content: " ";
display: block;
clear: both;
}
.off-canvas {
-moz-transform: scale3d(0.95, 0.95, 0.95);
-webkit-transform: scale3d(0.95, 0.95, 0.95);
transform: scale3d(0.95, 0.95, 0.95);
position: absolute;
top: 0;
bottom: 0;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
background: #ccc;
right: 0;
overflow: auto;
}
.main {
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
background: white;
height: 100%;
overflow: auto;
position: relative;
}
<div class="canvas">
<input type="checkbox" id="toggle-nav" class="toggle-nav" />
<nav class="off-canvas">
<h2>Navigation</h2>
<label for="toggle-nav">Toggle Nav</label>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</nav>
<main class="main">
<h2>Main</h2>
<label for="toggle-nav">Toggle Nav</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
In, possimus, soluta et natus nemo animi quis quidem perspiciatis
iure perferendis architecto maiores itaque voluptatibus culpa dolor
cumque praesentium doloremque labore!
</p>
</main>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.