Netsyms
/
tinyColorPicker
mirror of https://github.com/PitPik/tinyColorPicker
2
0
Fork 0
Code Issues Releases Wiki Activity

demo update

Browse Source
pull/53/head
peterd 8 years ago
parent 3e55b26d50
commit 2b1162fce4
3 changed files with 43 additions and 50 deletions
Show Stats Download Patch File Download Diff File

32
demo/index.html
Unescape Escape View File

@ -17,21 +17,23 @@
<title>tiny jQuery color picker demo</title> <title>tiny jQuery color picker demo</title>
</head> </head>
<body> <body>
<div id="content-wrapper"> <div id="content-wrapper">
<h1>Tiny jQuery colorPicker</h1> <h1>Tiny jQuery colorPicker</h1>
<p>This a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.</p> <p>This is a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.</p>
<a name="demo" id="demo" class="a-inline"></a> <a name="demo" id="demo" class="a-inline"></a>
<h2>Skinned dev-tools like, with RGB sliders</h2> <h2>Skinned dev-tools like, with RGB sliders</h2>
<div class="input-toggles"> <div class="input-toggles">
<input class="color no-alpha" value="#B6BD79" /> <input class="color no-alpha" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" /> <input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-alpha" value="hsl(32, 95%, 23%)" /> <input class="color no-alpha" value="hsl(32, 95%, 23%)" />
</div> </div>
<div class="div-toggles"> <div class="div-toggles">
<div class="trigger" value="#556B2F"><div><div></div></div></div> <div class="trigger" value="#556B2F"><div><div></div></div></div>
<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div> <div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div> <div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
</div>
<a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="../development/fmog.png" alt="Fork me on GitHub"></a> <a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="../development/fmog.png" alt="Fork me on GitHub"></a>
</div>
</body> </body>
</html> </html>

1
demo/index.js
Unescape Escape View File

@ -83,7 +83,6 @@ $(function(){
} }
}; };
window.myColorPicker = window.myColorPicker =
$('.color').colorPicker(options); $('.color').colorPicker(options);
$('.trigger').colorPicker(); $('.trigger').colorPicker();

60
demo/mod.css
Unescape Escape View File

@ -1,29 +1,3 @@
.cp-patch {
float: left;
margin: 9px 0 0;
height: 24px;
width: 24px;
border: 1px solid #aaa;
}
.cp-patch {
background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
}
.cp-patch div {
height: 24px;
width: 24px;
}
.cp-disp {
padding: 4px 0 4px 4px;
margin-top: 10px;
font-size: 12px;
height: 16px;
line-height: 16px;
color: #333;
}
.cp-color-picker { .cp-color-picker {
border: 1px solid #999; border: 1px solid #999;
padding: 8px; padding: 8px;
@ -34,7 +8,8 @@
margin: 5px 0 0; margin: 5px 0 0;
} }
.cp-color-picker:after { .cp-color-picker:after,
.cp-color-picker:before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -46,14 +21,7 @@
} }
.cp-color-picker:before { .cp-color-picker:before {
content: "";
display: block;
position: absolute;
top: -9px; top: -9px;
left: 8px;
border: 8px solid #eee;
border-width: 0px 8px 8px;
border-color: transparent transparent #999; border-color: transparent transparent #999;
} }
@ -99,6 +67,7 @@
box-sizing: border-box; box-sizing: border-box;
background-image: linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%); background-image: linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);
} }
.cp-alpha-cursor, .cp-alpha-cursor,
.cp-rgb-r-cursor, .cp-rgb-r-cursor,
.cp-rgb-g-cursor, .cp-rgb-g-cursor,
@ -147,3 +116,26 @@ div.cp-rgb-g {
div.cp-rgb-b { div.cp-rgb-b {
background-color: blue; background-color: blue;
} }
.cp-patch {
float: left;
margin: 9px 0 0;
height: 24px;
width: 24px;
border: 1px solid #aaa;
background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
}
.cp-patch div {
height: 24px;
width: 24px;
}
.cp-disp {
padding: 4px 0 4px 4px;
margin-top: 10px;
font-size: 12px;
height: 16px;
line-height: 16px;
color: #333;
}
Write Preview
Loading…
Cancel
Save