diff --git a/demo/index.html b/demo/index.html index 32421b0..6ab2508 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,21 +17,23 @@ tiny jQuery color picker demo -
-

Tiny jQuery colorPicker

-

This a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.

- -

Skinned dev-tools like, with RGB sliders

-
- - - -
-
-
-
-
+
+

Tiny jQuery colorPicker

+

This is a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.

+ +

Skinned dev-tools like, with RGB sliders

+
+ + + +
+
+
+
+
+
-Fork me on GitHub + Fork me on GitHub +
\ No newline at end of file diff --git a/demo/index.js b/demo/index.js index e915d0d..4faaa9a 100644 --- a/demo/index.js +++ b/demo/index.js @@ -83,7 +83,6 @@ $(function(){ } }; - window.myColorPicker = $('.color').colorPicker(options); $('.trigger').colorPicker(); diff --git a/demo/mod.css b/demo/mod.css index d12d2be..4b399fe 100644 --- a/demo/mod.css +++ b/demo/mod.css @@ -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; +} \ No newline at end of file