box-search/box-search.html at develop · SamianSoft/box-search · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link rel="import" href="../polymer/polymer-element.html"/>
<link rel="import" href="../paper-icon-button/paper-icon-button.html"/>
<link rel="import" href="../paper-input/paper-input.html"/>
<link rel="import" href="../iron-icons/iron-icons.html"/>
<link rel="import" href="../paper-icon-button/paper-icon-button.html"/>

<!--
@demo demo/index.html
-->

<dom-module id="box-search">
	<template>
		<style>
			.boxclearbutton{
				opacity: 0;
				position: absolute;
				top: -10px;
				right: -50px;
				transition: all ease-out 300ms;
			}
			#boxsearch{
				position: relative;
			}
		</style>

		<paper-input id="boxsearch" on-focus="showClearButt" on-blur="hideClearButt" value="" placeholder="Search ... ">
			<iron-icon icon="search" prefix></iron-icon>
			<paper-icon-button on-tap="clearInput" icon="clear" id="clearButt" alt="clear" title="clear" class="boxclearbutton" suffix>
			</paper-icon-button>
		</paper-input>


	</template>

	<script type="text/javascript" src="box-search.js"></script>
</dom-module>