Added Menu Mixins:
Desktop vertical Desktop vertical Tablet/Phone Fullscreen Toggle Button
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Camera</title>
|
||||
<link type="text/css"
|
||||
rel="stylesheet"
|
||||
href="./cover.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="img-square">
|
||||
<img src="http://lorempixel.com/300/400/city/1">
|
||||
</div>
|
||||
<div class="img-square">
|
||||
<img src="http://lorempixel.com/400/300/city/2">
|
||||
</div>
|
||||
<div class="img-square">
|
||||
<img src="http://lorempixel.com/700/400/city/3">
|
||||
</div>
|
||||
<div class="img-square">
|
||||
<img src="http://lorempixel.com/400/700/city/4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="img-round">
|
||||
<img src="http://lorempixel.com/300/400/city/1">
|
||||
</div>
|
||||
|
||||
<div class="img-round">
|
||||
<img src="http://lorempixel.com/400/300/city/2">
|
||||
</div>
|
||||
|
||||
<div class="img-round">
|
||||
<img src="http://lorempixel.com/700/400/city/3">
|
||||
</div>
|
||||
|
||||
<div class="img-round">
|
||||
<img src="http://lorempixel.com/400/700/city/4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="img-wrapper">
|
||||
<img src="http://lorempixel.com/300/400/city/1">
|
||||
</div>
|
||||
|
||||
<div class="img-wrapper">
|
||||
<img src="http://lorempixel.com/400/300/city/2">
|
||||
</div>
|
||||
|
||||
<div class="img-wrapper">
|
||||
<img src="http://lorempixel.com/700/400/city/3">
|
||||
</div>
|
||||
|
||||
<div class="img-wrapper">
|
||||
<img src="http://lorempixel.com/400/700/city/4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
@import "../../../../framework";
|
||||
|
||||
.content {
|
||||
.img-square {
|
||||
width: 25%;
|
||||
margin: 0 -4px 0 0 !important;
|
||||
|
||||
@include image-cover(0.75);
|
||||
}
|
||||
|
||||
.img-round {
|
||||
width: 25%;
|
||||
margin-right: -4px !important;
|
||||
|
||||
@include image-cover(1);
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
/* Simons SCSS Framework */
|
||||
@CHARSET "ISO-8859-1";
|
||||
/* RESET
|
||||
|
||||
SOURCE:
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
*/
|
||||
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-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0 !important; }
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif; }
|
||||
body .header #navcheck {
|
||||
display: none;
|
||||
/* tablet */ }
|
||||
body .header #navcheck + .navbar {
|
||||
display: none; }
|
||||
@media (max-width: 979px) {
|
||||
body .header #navcheck + .navbar {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
padding: 14.28571px;
|
||||
background-color: #ffd9d9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span {
|
||||
display: block;
|
||||
margin-bottom: 14.28571px;
|
||||
width: 71.42857px;
|
||||
height: 14.28571px;
|
||||
background-color: #806c80;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span:last-of-type {
|
||||
margin-bottom: 0; }
|
||||
body .header #navcheck + .navbar + ul {
|
||||
display: none; }
|
||||
body .header #navcheck:checked + .navbar + ul {
|
||||
/* Absolute Positioning */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 100px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
background-color: #806c80; }
|
||||
body .header #navcheck:checked + .navbar + ul li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: 100%;
|
||||
text-transform: uppercase; }
|
||||
body .header #navcheck:checked + .navbar + ul li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li {
|
||||
color: #d9ffd9;
|
||||
text-transform: none; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li a {
|
||||
padding-left: 40px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul {
|
||||
position: relative;
|
||||
display: block;
|
||||
left: auto;
|
||||
top: auto; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9;
|
||||
font-weight: 300; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li a {
|
||||
padding-left: 60px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li {
|
||||
display: block;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
|
||||
right: auto;
|
||||
left: auto; } }
|
||||
body .header .nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
display: block;
|
||||
width: 200px;
|
||||
background-color: #806c80;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
body .header .nav li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: auto; }
|
||||
body .header .nav li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header .nav li ul {
|
||||
width: 100%; }
|
||||
body .header .nav li ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header .nav li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
|
||||
/*# sourceMappingURL=vertical.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-open.scss"],"names":[],"mappings":"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","file":"vertical.css"}
|
||||
@@ -0,0 +1,219 @@
|
||||
/* Simons SCSS Framework */
|
||||
@CHARSET "ISO-8859-1";
|
||||
/* RESET
|
||||
|
||||
SOURCE:
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
*/
|
||||
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-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0 !important; }
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif; }
|
||||
body .header #navcheck {
|
||||
display: none;
|
||||
/* tablet */ }
|
||||
body .header #navcheck + .navbar {
|
||||
display: none; }
|
||||
@media (max-width: 979px) {
|
||||
body .header #navcheck + .navbar {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
padding: 14.28571px;
|
||||
background-color: #ffd9d9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span {
|
||||
display: block;
|
||||
margin-bottom: 14.28571px;
|
||||
width: 71.42857px;
|
||||
height: 14.28571px;
|
||||
background-color: #806c80;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span:last-of-type {
|
||||
margin-bottom: 0; }
|
||||
body .header #navcheck + .navbar + ul {
|
||||
display: none; }
|
||||
body .header #navcheck:checked + .navbar + ul {
|
||||
/* Absolute Positioning */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 100px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
background-color: #806c80; }
|
||||
body .header #navcheck:checked + .navbar + ul li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: 100%;
|
||||
text-transform: uppercase; }
|
||||
body .header #navcheck:checked + .navbar + ul li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li {
|
||||
color: #d9ffd9;
|
||||
text-transform: none; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li a {
|
||||
padding-left: 40px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul {
|
||||
position: relative;
|
||||
display: block;
|
||||
left: auto;
|
||||
top: auto; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9;
|
||||
font-weight: 300; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li a {
|
||||
padding-left: 60px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li {
|
||||
display: block;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
|
||||
right: auto;
|
||||
left: auto; } }
|
||||
body .header .nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
display: block;
|
||||
width: 200px;
|
||||
background-color: #806c80;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
body .header .nav li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: auto; }
|
||||
body .header .nav li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header .nav li ul {
|
||||
width: 100%; }
|
||||
body .header .nav li ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header .nav li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
|
||||
/*# sourceMappingURL=vertical.css.tmp.map */
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-open.scss"],
|
||||
"names": [],
|
||||
"file": "vertical.css.tmp"
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="vertical.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
|
||||
<input id="navcheck" type="checkbox" name="menu">
|
||||
|
||||
<label class="navbar" for="navcheck">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</label>
|
||||
|
||||
<ul class="nav">
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,26 @@
|
||||
@import "../../../../framework";
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif;
|
||||
|
||||
.header {
|
||||
//transform: rotate(-1deg);
|
||||
|
||||
#navcheck {
|
||||
@include toggle-tablet(100px, #ffd9d9, #806c80) {
|
||||
@include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
@include menu-vertical-open(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
/* Simons SCSS Framework */
|
||||
@CHARSET "ISO-8859-1";
|
||||
/* RESET
|
||||
|
||||
SOURCE:
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
*/
|
||||
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-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0 !important; }
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif; }
|
||||
body .header #navcheck {
|
||||
display: none;
|
||||
/* tablet */ }
|
||||
body .header #navcheck + .navbar {
|
||||
display: none; }
|
||||
@media (max-width: 979px) {
|
||||
body .header #navcheck + .navbar {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
padding: 14.28571px;
|
||||
background-color: #ffd9d9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span {
|
||||
display: block;
|
||||
margin-bottom: 14.28571px;
|
||||
width: 71.42857px;
|
||||
height: 14.28571px;
|
||||
background-color: #806c80;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span:last-of-type {
|
||||
margin-bottom: 0; }
|
||||
body .header #navcheck + .navbar + ul {
|
||||
display: none; }
|
||||
body .header #navcheck:checked + .navbar + ul {
|
||||
/* Absolute Positioning */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 100px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
background-color: #806c80; }
|
||||
body .header #navcheck:checked + .navbar + ul li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: 100%;
|
||||
text-transform: uppercase; }
|
||||
body .header #navcheck:checked + .navbar + ul li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li {
|
||||
color: #d9ffd9;
|
||||
text-transform: none; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li a {
|
||||
padding-left: 40px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul {
|
||||
position: relative;
|
||||
display: block;
|
||||
left: auto;
|
||||
top: auto; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9;
|
||||
font-weight: 300; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li a {
|
||||
padding-left: 60px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li {
|
||||
display: block;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
|
||||
right: auto;
|
||||
left: auto; } }
|
||||
body .header .nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
display: block;
|
||||
width: 200px;
|
||||
background-color: #806c80;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0; }
|
||||
body .header .nav li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: auto; }
|
||||
body .header .nav li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header .nav li ul {
|
||||
width: 100%;
|
||||
padding-right: 20px; }
|
||||
body .header .nav li ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header .nav li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
|
||||
/*# sourceMappingURL=vertical.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-right-open.scss"],"names":[],"mappings":"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","file":"vertical.css"}
|
||||
@@ -0,0 +1,222 @@
|
||||
/* Simons SCSS Framework */
|
||||
@CHARSET "ISO-8859-1";
|
||||
/* RESET
|
||||
|
||||
SOURCE:
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
*/
|
||||
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-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0 !important; }
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif; }
|
||||
body .header #navcheck {
|
||||
display: none;
|
||||
/* tablet */ }
|
||||
body .header #navcheck + .navbar {
|
||||
display: none; }
|
||||
@media (max-width: 979px) {
|
||||
body .header #navcheck + .navbar {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
padding: 14.28571px;
|
||||
background-color: #ffd9d9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span {
|
||||
display: block;
|
||||
margin-bottom: 14.28571px;
|
||||
width: 71.42857px;
|
||||
height: 14.28571px;
|
||||
background-color: #806c80;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span:last-of-type {
|
||||
margin-bottom: 0; }
|
||||
body .header #navcheck + .navbar + ul {
|
||||
display: none; }
|
||||
body .header #navcheck:checked + .navbar + ul {
|
||||
/* Absolute Positioning */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 100px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
background-color: #806c80; }
|
||||
body .header #navcheck:checked + .navbar + ul li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: 100%;
|
||||
text-transform: uppercase; }
|
||||
body .header #navcheck:checked + .navbar + ul li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li {
|
||||
color: #d9ffd9;
|
||||
text-transform: none; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li a {
|
||||
padding-left: 40px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul {
|
||||
position: relative;
|
||||
display: block;
|
||||
left: auto;
|
||||
top: auto; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9;
|
||||
font-weight: 300; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li a {
|
||||
padding-left: 60px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li {
|
||||
display: block;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
|
||||
right: auto;
|
||||
left: auto; } }
|
||||
body .header .nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
display: block;
|
||||
width: 200px;
|
||||
background-color: #806c80;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0; }
|
||||
body .header .nav li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: auto; }
|
||||
body .header .nav li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header .nav li ul {
|
||||
width: 100%;
|
||||
padding-right: 20px; }
|
||||
body .header .nav li ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header .nav li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
|
||||
/*# sourceMappingURL=vertical.css.tmp.map */
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-right-open.scss"],
|
||||
"names": [],
|
||||
"file": "vertical.css.tmp"
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="vertical.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
|
||||
<input id="navcheck" type="checkbox" name="menu">
|
||||
|
||||
<label class="navbar" for="navcheck">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</label>
|
||||
|
||||
<ul class="nav">
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,27 @@
|
||||
@import "../../../../framework";
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif;
|
||||
|
||||
.header {
|
||||
//transform: rotate(-1deg);
|
||||
|
||||
#navcheck {
|
||||
@include toggle-tablet(100px, #ffd9d9, #806c80) {
|
||||
@include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
@include menu-vertical-right-open(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
/* Simons SCSS Framework */
|
||||
@CHARSET "ISO-8859-1";
|
||||
/* RESET
|
||||
|
||||
SOURCE:
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
*/
|
||||
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-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0 !important; }
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif; }
|
||||
body .header #navcheck {
|
||||
display: none;
|
||||
/* tablet */ }
|
||||
body .header #navcheck + .navbar {
|
||||
display: none; }
|
||||
@media (max-width: 979px) {
|
||||
body .header #navcheck + .navbar {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
padding: 14.28571px;
|
||||
background-color: #ffd9d9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span {
|
||||
display: block;
|
||||
margin-bottom: 14.28571px;
|
||||
width: 71.42857px;
|
||||
height: 14.28571px;
|
||||
background-color: #806c80;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck + .navbar span:last-of-type {
|
||||
margin-bottom: 0; }
|
||||
body .header #navcheck + .navbar + ul {
|
||||
display: none; }
|
||||
body .header #navcheck:checked + .navbar + ul {
|
||||
/* Absolute Positioning */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 100px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
background-color: #806c80; }
|
||||
body .header #navcheck:checked + .navbar + ul li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: 100%;
|
||||
text-transform: uppercase; }
|
||||
body .header #navcheck:checked + .navbar + ul li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li {
|
||||
color: #d9ffd9;
|
||||
text-transform: none; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li a {
|
||||
padding-left: 40px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul {
|
||||
position: relative;
|
||||
display: block;
|
||||
left: auto;
|
||||
top: auto; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9;
|
||||
font-weight: 300; }
|
||||
body .header #navcheck:checked + .navbar + ul li ul li ul li a {
|
||||
padding-left: 60px;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li {
|
||||
display: block;
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
|
||||
right: auto;
|
||||
left: auto; } }
|
||||
body .header .nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
display: block;
|
||||
width: 200px;
|
||||
background-color: #806c80;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0; }
|
||||
body .header .nav li {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #806c80;
|
||||
color: #d9ffd9;
|
||||
width: auto; }
|
||||
body .header .nav li a {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #d9ffd9;
|
||||
box-sizing: border-box; }
|
||||
body .header .nav li ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
right: 100%;
|
||||
top: 0; }
|
||||
body .header .nav li ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul {
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: 100%;
|
||||
top: 0; }
|
||||
body .header .nav li ul li ul li {
|
||||
position: relative;
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li ul li ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover {
|
||||
background-color: #ffd9d9;
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul {
|
||||
display: block; }
|
||||
body .header .nav li:hover ul li {
|
||||
display: block;
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li ul {
|
||||
display: none; }
|
||||
body .header .nav li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul {
|
||||
display: block; }
|
||||
body .header .nav li:hover ul li:hover ul li {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li a {
|
||||
color: #d9ffd9; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover {
|
||||
color: #6c8080; }
|
||||
body .header .nav li:hover ul li:hover ul li:hover a {
|
||||
color: #6c8080; }
|
||||
|
||||
/*# sourceMappingURL=vertical.css.map */
|
||||
@@ -0,0 +1,180 @@
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="vertical.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
|
||||
<input id="navcheck" type="checkbox" name="menu">
|
||||
|
||||
<label class="navbar" for="navcheck">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</label>
|
||||
|
||||
<ul class="nav">
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Sub Item</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
<li><a href="#">Sub Sub Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,27 @@
|
||||
@import "../../../../framework";
|
||||
|
||||
body {
|
||||
background-color: #d9ffd9;
|
||||
font-family: Calibri, sans-serif;
|
||||
|
||||
.header {
|
||||
//transform: rotate(-1deg);
|
||||
|
||||
#navcheck {
|
||||
@include toggle-tablet(100px, #ffd9d9, #806c80) {
|
||||
@include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 20px;
|
||||
@include menu-vertical-right-desktop(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user