@patternslib/patternslib
Version:
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
245 lines (222 loc) • 7.87 kB
HTML
<html>
<head>
<title>Zoom pattern demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
</head>
<body>
<form class="slide-collection">
<fieldset class="pat-zoom pat-checklist slide-group">
<fieldset class="slide">
<label>
<span class="figure">
<img
src="images/slide.032.jpg"
alt="Designers and developers"
/>
</span>
<input
type="checkbox"
name="slide-id"
checked="checked"
/>
<em class="title">Slide 1</em>
</label>
</fieldset>
<fieldset class="slide">
<label>
<span class="figure">
<img
src="images/slide.002.jpg"
alt="Designers and developers"
/>
</span>
<input type="checkbox" name="slide-id" />
<em class="title">Slide 2</em>
</label>
</fieldset>
<fieldset class="slide">
<label>
<span class="figure">
<img
src="images/slide.003.jpg"
alt="Designers and developers"
/>
</span>
<input type="checkbox" name="slide-id" />
<em class="title">Slide 3</em>
</label>
</fieldset>
<fieldset class="slide">
<label>
<span class="figure">
<img src="images/slide.019.jpg" alt="017" />
</span>
<input type="checkbox" name="slide-id" />
<em class="title">Slide 4</em>
</label>
</fieldset>
<fieldset class="slide">
<label>
<span class="figure">
<img src="images/slide.018.jpg" alt="021" />
</span>
<input type="checkbox" name="slide-id" />
<em class="title">Slide 5</em>
</label>
</fieldset>
</fieldset>
</form>
<style>
input[type="range"] {
width: 34%;
margin-bottom: 2em;
}
.slide-collection {
padding-top: 30px;
}
.slide-collection .control-bar {
margin-bottom: 30px;
}
.slide-collection .control-bar button.download {
float: right;
margin-top: -6px;
margin-right: 30px;
}
.slide-collection .control-bar select {
float: left;
margin-right: 20px;
}
.slide-collection .slide {
float: left;
margin-right: 26px;
margin-bottom: 40px;
height: 260px;
width: 260px;
position: relative;
}
.slide-collection .slide .figure {
height: 147px;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid silver;
border-top-color: #989898;
border-bottom-color: #e9e9e9;
vertical-align: baseline;
line-height: 141px;
display: block;
background-color: rgba(0, 0, 0, 0.13);
width: 220px;
}
.slide-collection .slide .figure img {
width: 100%;
height: auto;
float: none;
vertical-align: middle;
display: inline;
}
.slide-collection label:before {
content: " ";
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
display: block;
height: 149px;
position: absolute;
z-index: 2;
width: 220px;
top: 50px;
left: 21px;
}
.slide-collection label {
padding: 50px 20px;
width: 220px;
height: 160px;
float: left;
border-radius: 8px;
background: white;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.slide-collection label.checked {
box-shadow: 0 0 0 5px dodgerblue;
}
.slide-collection label .title {
color: #9d9d9d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
position: absolute;
left: 20px;
right: 20px;
font-size: 20px;
line-height: 34px;
}
.slide-collection label.checked .title {
color: gray;
}
.slide-collection label input {
opacity: 0;
position: absolute;
}
.slide-collection .slide .button-bar {
height: 30px;
width: 30px;
padding: 0;
background-color: transparent;
margin-bottom: 0;
float: right;
margin-right: 20px;
margin-top: -45px;
}
.slide-collection .slide .button-bar .preview {
float: right;
text-indent: -1000px;
padding: 0;
width: 29px;
height: 30px;
overflow: hidden;
position: relative;
}
.slide-collection .slide .button-bar .preview:before {
content: "\e70a";
display: block;
position: absolute;
top: 0;
left: 0;
text-indent: 0;
color: silver;
font: 22px/33px fontello;
}
.slide-collection .slide .button-bar .preview:hover:before {
color: white;
}
.slide-collection .slide .checked .button-bar .preview:before {
color: gray;
}
.slide-collection .group {
position: relative;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.04);
padding: 15px 0 15px 15px;
margin-right: 5px;
}
.slide-collection .slide-group {
padding-top: 15px;
margin-right: -40px;
}
.slide-collection .group input[type="range"] {
position: absolute;
top: -33px;
left: 0;
width: 200px;
}
img.pat-zoom {
clear: both;
margin-top: 10px;
}
</style>
</body>
</html>