uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
376 lines (283 loc) • 14.8 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Search - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Search</h1>
<h2>Default</h2>
<div class="uk-margin">
<form class="uk-search uk-search-default">
<input class="uk-search-input" type="search" placeholder="Search" autofocus>
</form>
</div>
<div class="uk-margin" uk-margin>
<form class="uk-search uk-search-default">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Icon...">
</form>
<form class="uk-search uk-search-default">
<span class="uk-search-icon-flip" uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Flip...">
</form>
</div>
<div class="uk-margin" uk-margin>
<form class="uk-search uk-search-default">
<a href="#" uk-search-icon></a>
<input class="uk-search-input" type="search" placeholder="Link...">
</form>
<form class="uk-search uk-search-default">
<button class="uk-search-icon-flip" uk-search-icon></button>
<input class="uk-search-input" type="search" placeholder="Button...">
</form>
</div>
<h2>Navbar</h2>
<div class="uk-margin uk-navbar-container uk-navbar">
<div class="uk-navbar-left">
<div class="uk-navbar-item">
<form class="uk-search uk-search-navbar">
<input class="uk-search-input" type="search" placeholder="Search">
</form>
</div>
</div>
</div>
<div class="uk-margin uk-navbar-container uk-navbar">
<div class="uk-navbar-left">
<div class="uk-navbar-item">
<form class="uk-search uk-search-navbar">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Icon...">
</form>
</div>
</div>
<div class="uk-navbar-right">
<div class="uk-navbar-item">
<form class="uk-search uk-search-navbar">
<span class="uk-search-icon-flip" uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Flip...">
</form>
</div>
</div>
</div>
<div class="uk-margin uk-navbar-container uk-navbar">
<div class="uk-navbar-left">
<div class="uk-navbar-item">
<form class="uk-search uk-search-navbar">
<a href="#" uk-search-icon></a>
<input class="uk-search-input" type="search" placeholder="Link...">
</form>
</div>
</div>
<div class="uk-navbar-right">
<div class="uk-navbar-item">
<form class="uk-search uk-search-navbar">
<button class="uk-search-icon-flip" uk-search-icon></button>
<input class="uk-search-input" type="search" placeholder="Button...">
</form>
</div>
</div>
</div>
<h2>Large</h2>
<div class="uk-margin">
<form class="uk-search uk-search-large">
<input class="uk-search-input" type="search" placeholder="Search">
</form>
</div>
<div class="uk-margin" uk-margin>
<form class="uk-search uk-search-large">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Icon...">
</form>
<form class="uk-search uk-search-large">
<span class="uk-search-icon-flip" uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Flip...">
</form>
</div>
<div class="uk-margin" uk-margin>
<form class="uk-search uk-search-large">
<a href="#" uk-search-icon></a>
<input class="uk-search-input" type="search" placeholder="Link...">
</form>
<form class="uk-search uk-search-large">
<button class="uk-search-icon-flip" uk-search-icon></button>
<input class="uk-search-input" type="search" placeholder="Button...">
</form>
</div>
<h2>Toggle</h2>
<a class="uk-search-toggle" href="#" uk-search-icon></a>
<h2>Navbar Toggle + Layouts</h2>
<nav class="uk-navbar-container uk-margin" uk-navbar>
<div class="test-overlay uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Overlay</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="test-overlay uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Item</a></li>
</ul>
<a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>
</div>
<div class="uk-navbar-left uk-flex-1 test-overlay" hidden>
<div class="uk-navbar-item uk-width-expand">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search" autofocus>
</form>
</div>
<a class="uk-navbar-toggle" uk-close uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>
</div>
</nav>
<nav class="uk-navbar-container uk-margin" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Drop</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Item</a></li>
</ul>
<div>
<a class="uk-navbar-toggle" uk-search-icon href="#"></a>
<div uk-drop="mode: click; pos: left-center; offset: 0">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search" autofocus>
</form>
</div>
</div>
</div>
</nav>
<nav class="uk-navbar-container uk-margin" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Dropdown</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Item</a></li>
</ul>
<div>
<a class="uk-navbar-toggle" href="#" uk-search-icon></a>
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search" autofocus>
</form>
</div>
<div class="uk-width-auto">
<a class="uk-navbar-dropdown-close" href="#" uk-close></a>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="uk-navbar-container uk-margin" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Justify</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Item</a></li>
</ul>
<div>
<a class="uk-navbar-toggle" href="#" uk-search-icon></a>
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search" autofocus>
</form>
</div>
<div class="uk-width-auto">
<a class="uk-navbar-dropdown-close" href="#" uk-close></a>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Item</a></li>
</ul>
<div>
<a class="uk-navbar-toggle" href="#" uk-search-icon></a>
<div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<form class="uk-search uk-search-navbar uk-width-1-1">
<input class="uk-search-input" type="search" placeholder="Search" autofocus>
</form>
</div>
<div class="uk-width-auto">
<a class="uk-navbar-dropdown-close" href="#" uk-close></a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="uk-navbar-dropbar"></div>
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Modal</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Item</a></li>
</ul>
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input class="uk-search-input uk-text-center" type="search" placeholder="Search" autofocus>
</form>
</div>
</div>
</div>
</body>
</html>