Add in-flight nav work
Addy Osmani
parent
7ea8c2f7b5
commit
6d17f98146
|
|
@ -53,7 +53,7 @@
|
||||||
<h1>Shadows</h1>
|
<h1>Shadows</h1>
|
||||||
<iframe src="./styleguide/shadow/demo.html" scrolling="no"></iframe>
|
<iframe src="./styleguide/shadow/demo.html" scrolling="no"></iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="styleguide-demo">
|
<div class="styleguide-demo">
|
||||||
<h1>Button</h1>
|
<h1>Button</h1>
|
||||||
<iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
|
<iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
|
||||||
|
|
@ -85,10 +85,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="styleguide-demo">
|
<div class="styleguide-demo">
|
||||||
<h1>Side Nav</h1>
|
<h1>Navigation</h1>
|
||||||
<div class="demo-wrapper">
|
<iframe class="sidenavDemo" src="./styleguide/navigation/demo.html" scrolling="no" style="margin: 50px;"></iframe>
|
||||||
<iframe class="sidenavDemo" src="./styleguide/sidenav/demo.html" scrolling="no"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="styleguide-demo">
|
<div class="styleguide-demo">
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,52 @@
|
||||||
@import "../palette/palette";
|
@import "../palette/palette";
|
||||||
@import "../typography/typography";
|
@import "../typography/typography";
|
||||||
|
|
||||||
/*navigation component*/
|
/* Colors */
|
||||||
|
$sidenav-bg-color: nth($paletteGrey, 1);
|
||||||
$sidenav-bg-color: #fff;
|
|
||||||
$sidenav-modal-bg-color: rgba(0, 0, 0, 0.5);
|
$sidenav-modal-bg-color: rgba(0, 0, 0, 0.5);
|
||||||
$sidenav-border-color: nth($paletteGrey, 4);
|
$sidenav-border-color: nth($paletteGrey, 4);
|
||||||
|
|
||||||
|
$nav-link-color: nth($paletteGrey, 6);
|
||||||
|
$nav-link-color-light: nth($paletteGrey, 1);
|
||||||
|
|
||||||
|
$sidenav-item-border-color: #e0e0e0;
|
||||||
|
|
||||||
|
/* Positions */
|
||||||
|
/* Set menu button position (left or right) to 0px */
|
||||||
|
$nav-button-right: 0px;
|
||||||
|
$nav-button-left: auto;
|
||||||
|
|
||||||
|
/* Navigation Top */
|
||||||
|
$nav-padding-top: 0%; /* Try 30%*/
|
||||||
|
|
||||||
|
/* Dimensions */
|
||||||
|
$nav-narrow: 240px;
|
||||||
|
$nav-wide: 456px;
|
||||||
|
$nav-width: $nav-narrow;
|
||||||
|
|
||||||
|
$vertical-padding: 16px;
|
||||||
|
$horizontal-padding: 24px;
|
||||||
|
|
||||||
|
/* Variants */
|
||||||
|
.sidenav-narrow {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-button-right {
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-button-left {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
/* -------- */
|
||||||
|
|
||||||
.sidenav-button {
|
.sidenav-button {
|
||||||
display: block;
|
display: none;
|
||||||
|
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
|
@ -32,6 +70,8 @@ $sidenav-border-color: nth($paletteGrey, 4);
|
||||||
|
|
||||||
.sidenav-container {
|
.sidenav-container {
|
||||||
display: block;
|
display: block;
|
||||||
|
border-bottom: 1px solid $sidenav-item-border-color;
|
||||||
|
height: 64px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
background: $sidenav-bg-color;
|
background: $sidenav-bg-color;
|
||||||
|
|
@ -41,32 +81,160 @@ $sidenav-border-color: nth($paletteGrey, 4);
|
||||||
transform: translateX(0px);
|
transform: translateX(0px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav-modal-bg {
|
.sidenav-container.transparent {
|
||||||
display: block;
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
|
||||||
width: 100%;
|
.logo {
|
||||||
height: 100%;
|
color: $nav-link-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
position: fixed;
|
.sidenav-nav li a {
|
||||||
top: 0;
|
color: $nav-link-color-light;
|
||||||
left: 0;
|
}
|
||||||
|
|
||||||
will-change: opacity;
|
|
||||||
|
|
||||||
opacity: 0.1;
|
|
||||||
|
|
||||||
background-color: $sidenav-modal-bg-color;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
|
||||||
|
|
||||||
z-index: 3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav-modal-bg.visible {
|
.sidenav-container .logo {
|
||||||
opacity: 1;
|
font-size: 24px;
|
||||||
|
padding: 18px $horizontal-padding 18px $horizontal-padding;
|
||||||
pointer-events: all;
|
float: left;
|
||||||
|
}
|
||||||
transition-delay: 0;
|
|
||||||
|
.sidenav-nav {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-nav li a {
|
||||||
|
font-weight: 400;
|
||||||
|
color: $nav-link-color;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px
|
||||||
|
}
|
||||||
|
|
||||||
|
/* clean up*/
|
||||||
|
|
||||||
|
.sidenav-container ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 1.6em 1.6em;
|
||||||
|
float: left;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a:hover {
|
||||||
|
border-bottom: 1px solid $nav-link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 850px) {
|
||||||
|
|
||||||
|
|
||||||
|
.sidenav-modal-bg {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
will-change: opacity;
|
||||||
|
|
||||||
|
opacity: 0.1;
|
||||||
|
|
||||||
|
background-color: $sidenav-modal-bg-color;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
||||||
|
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-modal-bg.visible {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
pointer-events: all;
|
||||||
|
|
||||||
|
transition-delay: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sidenav-container {
|
||||||
|
border-bottom: 0px;
|
||||||
|
height: auto;
|
||||||
|
padding-top: $nav-padding-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-container .logo {
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 18px $horizontal-padding 18px $horizontal-padding;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-button {
|
||||||
|
display: block;
|
||||||
|
left: $nav-button-left;
|
||||||
|
right: $nav-button-right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-container {
|
||||||
|
display: block;
|
||||||
|
width: $nav-width;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
max-height: 100%;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
background-color: $sidenav-bg-color;
|
||||||
|
border-right: 1px solid $sidenav-border-color;
|
||||||
|
|
||||||
|
// With this, we get a huge paint before it runs.
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
transform: translateX(-$nav-width);
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition-delay: 0.1s;
|
||||||
|
transition-duration:0.2s;
|
||||||
|
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sidenav-container ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: $vertical-padding $horizontal-padding;
|
||||||
|
margin: 0px;
|
||||||
|
float: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-nav {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-middle {
|
||||||
|
padding-top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-wide {
|
||||||
|
width: 456px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Navigation Bar</title>
|
||||||
|
|
||||||
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="nav-button">
|
||||||
|
<button class="sidenav-button">Show navigation</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-container">
|
||||||
|
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||||
|
<nav class="sidenav-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Hello</a></li>
|
||||||
|
<li><a href="">World.</a></li>
|
||||||
|
<li><a href="">How</a></li>
|
||||||
|
<li><a href="">Are</a></li>
|
||||||
|
<li><a href="">You?</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-modal-bg"></div>
|
||||||
|
|
||||||
|
<script src="sidenav.js"></script>
|
||||||
|
<script>
|
||||||
|
// Remove for your own app
|
||||||
|
// This auto-toggles the menu
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
var menuButton = document.querySelector('button.sidenav-button');
|
||||||
|
menuButton.click();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Navigation Bar</title>
|
||||||
|
|
||||||
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="nav-button">
|
||||||
|
<button class="sidenav-button">Show navigation</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-container">
|
||||||
|
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||||
|
<nav class="sidenav-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Hello</a></li>
|
||||||
|
<li><a href="">World.</a></li>
|
||||||
|
<li><a href="">How</a></li>
|
||||||
|
<li><a href="">Are</a></li>
|
||||||
|
<li><a href="">You?</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-modal-bg"></div>
|
||||||
|
|
||||||
|
<script src="sidenav.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Navigation Bar</title>
|
||||||
|
|
||||||
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-image: url('images/desktop-handsfree-hero.jpg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: scroll;
|
||||||
|
|
||||||
|
background-position: 0% 0%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="nav-button">
|
||||||
|
<button class="sidenav-button">Show navigation</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-container transparent">
|
||||||
|
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||||
|
<nav class="sidenav-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Hello</a></li>
|
||||||
|
<li><a href="">World.</a></li>
|
||||||
|
<li><a href="">How</a></li>
|
||||||
|
<li><a href="">Are</a></li>
|
||||||
|
<li><a href="">You?</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-modal-bg"></div>
|
||||||
|
|
||||||
|
<script src="sidenav.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Navigation Bar</title>
|
||||||
|
|
||||||
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="nav-button">
|
||||||
|
<button class="sidenav-button">Show navigation</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-container sidenav-middle">
|
||||||
|
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||||
|
<nav class="sidenav-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Hello</a></li>
|
||||||
|
<li><a href="">World.</a></li>
|
||||||
|
<li><a href="">How</a></li>
|
||||||
|
<li><a href="">Are</a></li>
|
||||||
|
<li><a href="">You?</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-modal-bg"></div>
|
||||||
|
|
||||||
|
<script src="sidenav.js"></script>
|
||||||
|
<script>
|
||||||
|
// Remove for your own app
|
||||||
|
// This auto-toggles the menu
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
var menuButton = document.querySelector('button.sidenav-button');
|
||||||
|
menuButton.click();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Navigation Bar</title>
|
||||||
|
|
||||||
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="nav-button">
|
||||||
|
<button class="sidenav-button">Show navigation</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-container sidenav-wide">
|
||||||
|
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
||||||
|
<nav class="sidenav-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Hello</a></li>
|
||||||
|
<li><a href="">World.</a></li>
|
||||||
|
<li><a href="">How</a></li>
|
||||||
|
<li><a href="">Are</a></li>
|
||||||
|
<li><a href="">You?</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidenav-modal-bg"></div>
|
||||||
|
|
||||||
|
<script src="sidenav.js"></script>
|
||||||
|
<script>
|
||||||
|
// Remove for your own app
|
||||||
|
// This auto-toggles the menu
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
var menuButton = document.querySelector('button.sidenav-button');
|
||||||
|
menuButton.click();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Side Nav</title>
|
<title>Navigation Bar</title>
|
||||||
|
|
||||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
|
|
@ -13,25 +13,20 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="nav-button">
|
<h2>Narrow - Full View</h2>
|
||||||
<button class="sidenav-button">Show navigation</button>
|
<iframe height="300px" width="900px" src="demo-narrow.html"></iframe>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidenav-container">
|
<h2>Default Mobile Menu</h2>
|
||||||
<h1 class="logo">Web <strong>Starter Kit</strong></h1>
|
<iframe height="500px" width="400px" src="demo-narrow-expanded.html"></iframe>
|
||||||
<nav class="sidenav-nav">
|
|
||||||
<ul>
|
|
||||||
<li><a href="">Hello</a></li>
|
|
||||||
<li><a href="">World.</a></li>
|
|
||||||
<li><a href="">How</a></li>
|
|
||||||
<li><a href="">Are</a></li>
|
|
||||||
<li><a href="">You?</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidenav-modal-bg"></div>
|
<h2>Wide Mobile Menu</h2>
|
||||||
|
<iframe height="500px" width="600px" src="demo-wide.html"></iframe>
|
||||||
|
|
||||||
|
<h2>Vertically Centered Menu</h2>
|
||||||
|
<iframe height="900px" width="500px" src="demo-vertical.html"></iframe>
|
||||||
|
|
||||||
|
<h2>Transparent Menu</h2>
|
||||||
|
<iframe height="900px" width="900px" src="demo-transparent.html"></iframe>
|
||||||
|
|
||||||
<script src="sidenav.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,141 +1,12 @@
|
||||||
@import "../styleguide_demo_bp";
|
@import "../styleguide_demo_bp";
|
||||||
@import 'sidenav';
|
@import 'sidenav';
|
||||||
|
|
||||||
/* Positions */
|
|
||||||
|
|
||||||
/* Set menu button position (left or right) to 0px */
|
|
||||||
$nav-button-right: 0px;
|
|
||||||
$nav-button-left: auto;
|
|
||||||
|
|
||||||
/* Dimensions */
|
|
||||||
$nav-narrow: 240px;
|
|
||||||
$nav-wide: 456px;
|
|
||||||
$nav-width: $nav-narrow;
|
|
||||||
|
|
||||||
$vertical-padding: 16px;
|
|
||||||
$horizontal-padding: 24px;
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
$nav-link-color: #999999;
|
|
||||||
$sidenav-item-border-color: #e0e0e0;
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
padding:0px;
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav-button {
|
iframe {
|
||||||
display: none;
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-container {
|
|
||||||
border-bottom: 1px solid $sidenav-item-border-color;
|
|
||||||
height: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-container .logo {
|
|
||||||
font-size: 24px;
|
|
||||||
padding: 18px $horizontal-padding 18px $horizontal-padding;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-nav {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-nav li a {
|
|
||||||
font-weight: 400;
|
|
||||||
color: $nav-link-color;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 14px
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-container ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
/*padding: $vertical-padding $horizontal-padding;*/
|
|
||||||
/*new */
|
|
||||||
margin: 1.6em 1.6em;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
li a:hover {
|
|
||||||
border-bottom: 1px solid $nav-link-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 850px) {
|
|
||||||
|
|
||||||
.sidenav-container {
|
|
||||||
border-bottom: 0px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-container .logo {
|
|
||||||
font-size: 24px;
|
|
||||||
padding: 18px $horizontal-padding 18px $horizontal-padding;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-nav {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-button {
|
|
||||||
display: block;
|
|
||||||
left: $nav-button-left;
|
|
||||||
right: $nav-button-right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-container {
|
|
||||||
display: block;
|
|
||||||
width: $nav-width;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
max-height: 100%;
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
|
|
||||||
background-color: $sidenav-bg-color;
|
|
||||||
border-right: 1px solid $sidenav-border-color;
|
|
||||||
|
|
||||||
// With this, we get a huge paint before it runs.
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
transform: translateX(-$nav-width);
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transition-delay: 0.1s;
|
|
||||||
transition-duration:0.2s;
|
|
||||||
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
|
||||||
will-change: transform;
|
|
||||||
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sidenav-container ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: $vertical-padding $horizontal-padding;
|
|
||||||
margin: 0px;
|
|
||||||
float: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Loading…
Reference in New Issue