Add in-flight nav work
Addy Osmani
parent
7ea8c2f7b5
commit
6d17f98146
|
|
@ -85,10 +85,8 @@
|
|||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Side Nav</h1>
|
||||
<div class="demo-wrapper">
|
||||
<iframe class="sidenavDemo" src="./styleguide/sidenav/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
<h1>Navigation</h1>
|
||||
<iframe class="sidenavDemo" src="./styleguide/navigation/demo.html" scrolling="no" style="margin: 50px;"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,52 @@
|
|||
@import "../palette/palette";
|
||||
@import "../typography/typography";
|
||||
|
||||
/*navigation component*/
|
||||
|
||||
$sidenav-bg-color: #fff;
|
||||
/* Colors */
|
||||
$sidenav-bg-color: nth($paletteGrey, 1);
|
||||
$sidenav-modal-bg-color: rgba(0, 0, 0, 0.5);
|
||||
$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 {
|
||||
display: block;
|
||||
display: none;
|
||||
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
|
@ -32,6 +70,8 @@ $sidenav-border-color: nth($paletteGrey, 4);
|
|||
|
||||
.sidenav-container {
|
||||
display: block;
|
||||
border-bottom: 1px solid $sidenav-item-border-color;
|
||||
height: 64px;
|
||||
box-sizing: border-box;
|
||||
z-index: 4;
|
||||
background: $sidenav-bg-color;
|
||||
|
|
@ -41,7 +81,60 @@ $sidenav-border-color: nth($paletteGrey, 4);
|
|||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
.sidenav-modal-bg {
|
||||
.sidenav-container.transparent {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
.logo {
|
||||
color: $nav-link-color-light;
|
||||
}
|
||||
|
||||
.sidenav-nav li a {
|
||||
color: $nav-link-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
|
|
@ -61,12 +154,87 @@ $sidenav-border-color: nth($paletteGrey, 4);
|
|||
transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-modal-bg.visible {
|
||||
.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 name="description" content="">
|
||||
<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'>
|
||||
|
||||
|
|
@ -13,25 +13,20 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div class="nav-button">
|
||||
<button class="sidenav-button">Show navigation</button>
|
||||
</div>
|
||||
<h2>Narrow - Full View</h2>
|
||||
<iframe height="300px" width="900px" src="demo-narrow.html"></iframe>
|
||||
|
||||
<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>
|
||||
<h2>Default Mobile Menu</h2>
|
||||
<iframe height="500px" width="400px" src="demo-narrow-expanded.html"></iframe>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,141 +1,12 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@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 {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
|
||||
padding: 0;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
.sidenav-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
iframe {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
|
|||
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