5:1c231df1a171
Anton Shestakov <engored@ya.ru>, Wed, 15 May 2013 18:12:07 +0900
Filter input wrap: ability to reliably set width: 100% without box-sizing.

next change 10:c770f7dc8d69
previous change 3:cd531665699b

demo.html

Permissions: -rw-r--r--

Other formats: Feeds:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lensy Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.lensy.js"></script>
<style id="page-niceties">
select {
margin-bottom: 19px;
}
.container {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.example {
position: relative;
margin: 15px 0;
padding: 39px 19px 0;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.example:after,
pre#css:after,
pre#js:after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
pre#css,
pre#js {
position: relative;
font-family: monospace;
font-size: 13px;
padding: 29px 8px 8px 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#live-select:after {
content: 'Live clickable <select>';
}
pre#css:after {
content: 'CSS';
}
pre#js:after {
content: 'JS';
}
</style>
<style id="lensy-css">
.lensy-modal {
color: #eee;
background: rgba(0, 0, 0, 0.75);
position: fixed;
top: 100px;
right: 30%;
left: 30%;
padding: 15px;
border: 1px solid transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.lensy-widget {
list-style: none;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
margin: 0 0 20px;
padding: 0;
min-height: 28px;
position: relative;
*zoom: 1;
}
.lensy-widget:before,
.lensy-widget:after {
display: table;
line-height: 0;
content: "";
}
.lensy-widget:after {
clear: both;
}
.lensy-widget .lensy-item {
margin: 5px 0 0 4px;
}
.lensy-widget .lensy-item span {
color: white;
padding: 0 2px;
margin: 0;
border: 1px solid transparent;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.lensy-filter-wrap {
padding-right: 6px;
}
.lensy-filter {
width: 100%;
}
.lensy-container {
list-style: none;
margin: 0;
padding: 0;
*zoom: 1;
}
.lensy-container:before,
.lensy-container:after {
display: table;
line-height: 0;
content: "";
}
.lensy-container:after {
clear: both;
}
.lensy-item {
float: left;
cursor: pointer;
margin-top: 5px;
margin-right: 20px;
}
.lensy-item.active {
box-shadow: 0px 0px 6px 1px white;
}
.lensy-button {
cursor: pointer;
color: white;
}
.lensy-button:hover {
color: white;
}
</style>
</head>
<body>
<div class="container">
<section>
<div class="page-header">
<h2>Lensy Demo</h2>
</div>
<div class="example">
<form>
<select multiple name="colors">
<option selected>#0e90d2</option>
<option>#4bb1cf</option>
<option>#5eb95e</option>
<option>#faa732</option>
<option selected>#dd514c</option>
</select>
</form>
<script id="lensy-js">
$(function() {
$('select').lensy({
itemFn: function(value, text) {
var colorbox = $('<div>').css({width: '64px', height: '64px', background: text});
return $('<div>')
.text(text)
.prepend(colorbox);
},
widgetItemFn: function(value, text) {
// If you don't define this function,
// itemFn will be used for widget items.
return $('<span>')
.css({background: text})
.text(value);
}
});
});
</script>
<script>
$(function() {
$('select').appendTo('#live-select').show();
$('pre#css').text($('#lensy-css').text().trim().replace(/^ {6}/gm, '').replace(/}/g, '}\n'));
$('pre#js').text($('#lensy-js').text().trim().replace(/^ {12}/gm, ''));
});
</script>
</div>
<div id="live-select" class="example"></div>
<pre id="css" class="prettyprint lang-css"></pre>
<pre id="js" class="prettyprint lang-js"></pre>
</section>
</div>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</body>
</html>