Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-07-02 07:34:29 -06:00
Code Issues Releases Wiki Activity

demo update

Browse Source
This commit is contained in:
peterd 2016-02-17 19:35:21 +01:00
parent 3e55b26d50
commit 2b1162fce4
3 changed files with 43 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demo/index.html
View File

@ -17,21 +17,23 @@
<title>tiny jQuery color picker demo</title>
</head>
<body>
<div id="content-wrapper">
<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>
<a name="demo" id="demo" class="a-inline"></a>
<h2>Skinned dev-tools like, with RGB sliders</h2>
<div class="input-toggles">
<input class="color no-alpha" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
<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="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
<div id="content-wrapper">
<h1>Tiny jQuery colorPicker</h1>
<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>
<h2>Skinned dev-tools like, with RGB sliders</h2>
<div class="input-toggles">
<input class="color no-alpha" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
<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="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>
</html>

1
demo/index.js
View File

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

60
demo/mod.css
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 {
border: 1px solid #999;
padding: 8px;
@ -34,7 +8,8 @@
margin: 5px 0 0;
}
.cp-color-picker:after {
.cp-color-picker:after,
.cp-color-picker:before {
content: "";
display: block;
position: absolute;
@ -46,14 +21,7 @@
}
.cp-color-picker:before {
content: "";
display: block;
position: absolute;
top: -9px;
left: 8px;
border: 8px solid #eee;
border-width: 0px 8px 8px;
border-color: transparent transparent #999;
}
@ -99,6 +67,7 @@
box-sizing: border-box;
background-image: linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);
}
.cp-alpha-cursor,
.cp-rgb-r-cursor,
.cp-rgb-g-cursor,
@ -147,3 +116,26 @@ div.cp-rgb-g {
div.cp-rgb-b {
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;
}