-
-
Save saske505/83c891c021049e590ced to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en" class=" js csstransforms3d"> | |
<head> | |
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title></title> | |
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels"> | |
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform"> | |
<meta name="author" content="Codrops"> | |
<link rel="shortcut icon" href="../favicon.ico"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/normalize.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/demo.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/icons.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/component.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/normalize.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/demo.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css"> | |
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/modernizr.custom.js"></script> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/codrops/adpacks/demoadpacks.css?1426365179082"> | |
<script id="_carbonads_projs" type="text/javascript" src="http://srv.carbonads.net/ads/C6AILKT.json?segment=placement:codrops&callback=_carbonads_go"></script> | |
<style id="jsbin-css"> | |
form { | |
width: 380px; | |
margin: 4em auto; | |
padding: 3em 2em 2em 2em; | |
background: #fafafa; | |
border: 1px solid #ebebeb; | |
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px; | |
} | |
.group { | |
position: relative; | |
margin-bottom: 45px; | |
} | |
input { | |
font-size: 18px; | |
padding: 10px 10px 10px 5px; | |
-webkit-appearance: none; | |
display: block; | |
background: #fafafa; | |
color: #636363; | |
width: 100%; | |
border: none; | |
border-radius: 0; | |
border-bottom: 1px solid #757575; | |
} | |
input:focus { outline: none; } | |
/* Label */ | |
label { | |
color: #999; | |
font-size: 18px; | |
font-weight: normal; | |
position: absolute; | |
pointer-events: none; | |
left: 5px; | |
top: 10px; | |
transition: all 0.2s ease; | |
} | |
/* active */ | |
input:focus ~ label, input.used ~ label { | |
top: -20px; | |
transform: scale(.75); left: -2px; | |
/* font-size: 14px; */ | |
color: #4a89dc; | |
} | |
/* Underline */ | |
.bar { | |
position: relative; | |
display: block; | |
width: 100%; | |
} | |
.bar:before, .bar:after { | |
content: ''; | |
height: 2px; | |
width: 0; | |
bottom: 1px; | |
position: absolute; | |
background: #4a89dc; | |
transition: all 0.2s ease; | |
} | |
.bar:before { left: 50%; } | |
.bar:after { right: 50%; } | |
/* active */ | |
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } | |
/* Highlight */ | |
.highlight { | |
position: absolute; | |
height: 60%; | |
width: 100px; | |
top: 25%; | |
left: 0; | |
pointer-events: none; | |
opacity: 0.5; | |
} | |
/* active */ | |
input:focus ~ .highlight { | |
animation: inputHighlighter 0.3s ease; | |
} | |
/* Animations */ | |
@keyframes inputHighlighter { | |
from { background: #4a89dc; } | |
to { width: 0; background: transparent; } | |
} | |
</style> | |
</head> | |
<body cz-shortcut-listen="true"> | |
<div class="container"> | |
<!-- Push Wrapper --> | |
<div class="mp-pusher" id="mp-pusher"> | |
<!-- mp-menu --> | |
<nav id="mp-menu" class="mp-menu mp-overlap"> | |
<div class="mp-level" data-level="1"> | |
<h2 class="icon icon-world">Index</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-display" href="#">menu item 1</a> | |
<div class="mp-level" data-level="2"> | |
<h2 class="icon icon-display">menu item 1 level 2</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-phone" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2>menu item 1 level 3</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-tv" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-camera" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-news" href="#">menu item 2</a> | |
<div class="mp-level" data-level="2"> | |
<h2 class="icon icon-news">menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-shop" href="#">menu item 3</a> | |
<div class="mp-level" data-level="2"> | |
<h2 class="icon icon-shop">menu item</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-t-shirt" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2 class="icon icon-t-shirt">menu item</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-female" href="#">menu item</a> | |
<div class="mp-level" data-level="4"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-male" href="#">menu itemg</a> | |
<div class="mp-level" data-level="4"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</li> | |
<li> | |
<a class="icon icon-diamond" href="#">menu item</a> | |
</li> | |
<li> | |
<a class="icon icon-music" href="#">menu item</a> | |
</li> | |
<li> | |
<a class="icon icon-food" href="#">menu item</a> | |
</li> | |
</ul> | |
</div> | |
</li> | |
<li><a class="icon icon-photo" href="#">menu item4</a></li> | |
<li><a class="icon icon-wallet" href="#">menu item 5</a></li> | |
</ul> | |
</div> | |
</nav> | |
<!-- /mp-menu --> | |
<div class="scroller"><!-- this is for emulating position fixed of the nav --> | |
<div class="scroller-inner"> | |
<!-- Top Navigation --> | |
<div class="content clearfix"> | |
<div class="block block-20 clearfix"> | |
<p><a href="#" id="trigger" class="menu-trigger"></a></p> | |
</div> | |
<div class="block block-60"> | |
<section> | |
<div class="tabs tabs-style-bar"> | |
<nav> | |
<ul> | |
<li class="tab-current"><a href="#section-bar-1" class="icon icon-home"><span>Home</span></a></li> | |
<li><a href="#section-bar-2" class="icon icon-box"><span>Archive</span></a></li> | |
<li><a href="#section-bar-3" class="icon icon-display"><span>Analytics</span></a></li> | |
<li><a href="#section-bar-4" class="icon icon-upload"><span>Upload</span></a></li> | |
<li><a href="#section-bar-5" class="icon icon-tools"><span>Settings</span></a></li> | |
</ul> | |
</nav> | |
<div class="content-wrap"> | |
<section id="section-bar-1" class="content-current"> | |
<form> | |
<div class="group"> | |
<input type="text"><span class="highlight"></span><span class="bar"></span> | |
<label>Name</label> | |
</div> | |
<div class="group"> | |
<input type="email"><span class="highlight"></span><span class="bar"></span> | |
<label>Email</label> | |
</div> | |
<button type="button" class="button buttonBlue">Subscribe | |
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div> | |
</button> | |
</form> | |
</section> | |
<section id="section-bar-2"><p>2</p></section> | |
<section id="section-bar-3"><p>3</p></section> | |
<section id="section-bar-4"><p>4</p></section> | |
<section id="section-bar-5"><p>5</p></section> | |
</div><!-- /content --> | |
</div><!-- /tabs --> | |
</section> | |
</div> | |
</div> | |
</div><!-- /scroller-inner --> | |
</div><!-- /scroller --> | |
</div><!-- /pusher --> | |
</div><!-- /container --> | |
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/classie.js"></script> | |
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/mlpushmenu.js"></script> | |
<script> | |
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) ); | |
</script> | |
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script> | |
<script> | |
(function() { | |
[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) { | |
new CBPFWTabs( el ); | |
}); | |
})(); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><html lang="en" class=" js csstransforms3d"> | |
<head> | |
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title></title> | |
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels"> | |
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform"> | |
<meta name="author" content="Codrops"> | |
<link rel="shortcut icon" href="../favicon.ico"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/normalize.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/demo.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/icons.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/component.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/normalize.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/demo.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css"> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css"> | |
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/modernizr.custom.js"><\/script> | |
<link rel="stylesheet" type="text/css" href="http://tympanus.net/codrops/adpacks/demoadpacks.css?1426365179082"> | |
<script id="_carbonads_projs" type="text/javascript" src="//srv.carbonads.net/ads/C6AILKT.json?segment=placement:codrops&callback=_carbonads_go"><\/script> | |
</head> | |
<body cz-shortcut-listen="true"> | |
<div class="container"> | |
<\!-- Push Wrapper --> | |
<div class="mp-pusher" id="mp-pusher"> | |
<\!-- mp-menu --> | |
<nav id="mp-menu" class="mp-menu mp-overlap"> | |
<div class="mp-level" data-level="1"> | |
<h2 class="icon icon-world">Index</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-display" href="#">menu item 1</a> | |
<div class="mp-level" data-level="2"> | |
<h2 class="icon icon-display">menu item 1 level 2</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-phone" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2>menu item 1 level 3</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-tv" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-camera" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-news" href="#">menu item 2</a> | |
<div class="mp-level" data-level="2"> | |
<h2 class="icon icon-news">menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-shop" href="#">menu item 3</a> | |
<div class="mp-level" data-level="2"> | |
<h2 class="icon icon-shop">menu item</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-t-shirt" href="#">menu item</a> | |
<div class="mp-level" data-level="3"> | |
<h2 class="icon icon-t-shirt">menu item</h2> | |
<ul> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-female" href="#">menu item</a> | |
<div class="mp-level" data-level="4"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
<li class="icon icon-arrow-left"> | |
<a class="icon icon-male" href="#">menu itemg</a> | |
<div class="mp-level" data-level="4"> | |
<h2>menu item</h2> | |
<ul> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
<li><a href="#">menu item</a></li> | |
</ul> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</li> | |
<li> | |
<a class="icon icon-diamond" href="#">menu item</a> | |
</li> | |
<li> | |
<a class="icon icon-music" href="#">menu item</a> | |
</li> | |
<li> | |
<a class="icon icon-food" href="#">menu item</a> | |
</li> | |
</ul> | |
</div> | |
</li> | |
<li><a class="icon icon-photo" href="#">menu item4</a></li> | |
<li><a class="icon icon-wallet" href="#">menu item 5</a></li> | |
</ul> | |
</div> | |
</nav> | |
<\!-- /mp-menu --> | |
<div class="scroller"><\!-- this is for emulating position fixed of the nav --> | |
<div class="scroller-inner"> | |
<\!-- Top Navigation --> | |
<div class="content clearfix"> | |
<div class="block block-20 clearfix"> | |
<p><a href="#" id="trigger" class="menu-trigger"></a></p> | |
</div> | |
<div class="block block-60"> | |
<section> | |
<div class="tabs tabs-style-bar"> | |
<nav> | |
<ul> | |
<li class="tab-current"><a href="#section-bar-1" class="icon icon-home"><span>Home</span></a></li> | |
<li><a href="#section-bar-2" class="icon icon-box"><span>Archive</span></a></li> | |
<li><a href="#section-bar-3" class="icon icon-display"><span>Analytics</span></a></li> | |
<li><a href="#section-bar-4" class="icon icon-upload"><span>Upload</span></a></li> | |
<li><a href="#section-bar-5" class="icon icon-tools"><span>Settings</span></a></li> | |
</ul> | |
</nav> | |
<div class="content-wrap"> | |
<section id="section-bar-1" class="content-current"> | |
<form> | |
<div class="group"> | |
<input type="text"><span class="highlight"></span><span class="bar"></span> | |
<label>Name</label> | |
</div> | |
<div class="group"> | |
<input type="email"><span class="highlight"></span><span class="bar"></span> | |
<label>Email</label> | |
</div> | |
<button type="button" class="button buttonBlue">Subscribe | |
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div> | |
</button> | |
</form> | |
</section> | |
<section id="section-bar-2"><p>2</p></section> | |
<section id="section-bar-3"><p>3</p></section> | |
<section id="section-bar-4"><p>4</p></section> | |
<section id="section-bar-5"><p>5</p></section> | |
</div><\!-- /content --> | |
</div><\!-- /tabs --> | |
</section> | |
</div> | |
</div> | |
</div><\!-- /scroller-inner --> | |
</div><\!-- /scroller --> | |
</div><\!-- /pusher --> | |
</div><\!-- /container --> | |
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/classie.js"><\/script> | |
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/mlpushmenu.js"><\/script> | |
<script> | |
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) ); | |
<\/script> | |
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"><\/script> | |
<script> | |
(function() { | |
[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) { | |
new CBPFWTabs( el ); | |
}); | |
})(); | |
<\/script> | |
</body></html></script> | |
<script id="jsbin-source-css" type="text/css">form { | |
width: 380px; | |
margin: 4em auto; | |
padding: 3em 2em 2em 2em; | |
background: #fafafa; | |
border: 1px solid #ebebeb; | |
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px; | |
} | |
.group { | |
position: relative; | |
margin-bottom: 45px; | |
} | |
input { | |
font-size: 18px; | |
padding: 10px 10px 10px 5px; | |
-webkit-appearance: none; | |
display: block; | |
background: #fafafa; | |
color: #636363; | |
width: 100%; | |
border: none; | |
border-radius: 0; | |
border-bottom: 1px solid #757575; | |
} | |
input:focus { outline: none; } | |
/* Label */ | |
label { | |
color: #999; | |
font-size: 18px; | |
font-weight: normal; | |
position: absolute; | |
pointer-events: none; | |
left: 5px; | |
top: 10px; | |
transition: all 0.2s ease; | |
} | |
/* active */ | |
input:focus ~ label, input.used ~ label { | |
top: -20px; | |
transform: scale(.75); left: -2px; | |
/* font-size: 14px; */ | |
color: #4a89dc; | |
} | |
/* Underline */ | |
.bar { | |
position: relative; | |
display: block; | |
width: 100%; | |
} | |
.bar:before, .bar:after { | |
content: ''; | |
height: 2px; | |
width: 0; | |
bottom: 1px; | |
position: absolute; | |
background: #4a89dc; | |
transition: all 0.2s ease; | |
} | |
.bar:before { left: 50%; } | |
.bar:after { right: 50%; } | |
/* active */ | |
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } | |
/* Highlight */ | |
.highlight { | |
position: absolute; | |
height: 60%; | |
width: 100px; | |
top: 25%; | |
left: 0; | |
pointer-events: none; | |
opacity: 0.5; | |
} | |
/* active */ | |
input:focus ~ .highlight { | |
animation: inputHighlighter 0.3s ease; | |
} | |
/* Animations */ | |
@keyframes inputHighlighter { | |
from { background: #4a89dc; } | |
to { width: 0; background: transparent; } | |
} | |
</script> | |
</body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
form { | |
width: 380px; | |
margin: 4em auto; | |
padding: 3em 2em 2em 2em; | |
background: #fafafa; | |
border: 1px solid #ebebeb; | |
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px; | |
} | |
.group { | |
position: relative; | |
margin-bottom: 45px; | |
} | |
input { | |
font-size: 18px; | |
padding: 10px 10px 10px 5px; | |
-webkit-appearance: none; | |
display: block; | |
background: #fafafa; | |
color: #636363; | |
width: 100%; | |
border: none; | |
border-radius: 0; | |
border-bottom: 1px solid #757575; | |
} | |
input:focus { outline: none; } | |
/* Label */ | |
label { | |
color: #999; | |
font-size: 18px; | |
font-weight: normal; | |
position: absolute; | |
pointer-events: none; | |
left: 5px; | |
top: 10px; | |
transition: all 0.2s ease; | |
} | |
/* active */ | |
input:focus ~ label, input.used ~ label { | |
top: -20px; | |
transform: scale(.75); left: -2px; | |
/* font-size: 14px; */ | |
color: #4a89dc; | |
} | |
/* Underline */ | |
.bar { | |
position: relative; | |
display: block; | |
width: 100%; | |
} | |
.bar:before, .bar:after { | |
content: ''; | |
height: 2px; | |
width: 0; | |
bottom: 1px; | |
position: absolute; | |
background: #4a89dc; | |
transition: all 0.2s ease; | |
} | |
.bar:before { left: 50%; } | |
.bar:after { right: 50%; } | |
/* active */ | |
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } | |
/* Highlight */ | |
.highlight { | |
position: absolute; | |
height: 60%; | |
width: 100px; | |
top: 25%; | |
left: 0; | |
pointer-events: none; | |
opacity: 0.5; | |
} | |
/* active */ | |
input:focus ~ .highlight { | |
animation: inputHighlighter 0.3s ease; | |
} | |
/* Animations */ | |
@keyframes inputHighlighter { | |
from { background: #4a89dc; } | |
to { width: 0; background: transparent; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
UI Concept for data capturing application