bootstrap-colorpicker-rails 0.1

Sign up to get free protection for your applications and to get access to all the features.
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'http://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in bootstrap-rails.gemspec
4
+ gemspec
@@ -0,0 +1,46 @@
1
+ bootstrap-colorpicker-rails
2
+ ===========================
3
+
4
+ A Colorpicker for Twitter Bootstrap, integrated with Rails assets pipeline
5
+
6
+ Bootstrap colorpicker for Rails
7
+ Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
8
+
9
+ http://twitter.github.com/bootstrap/
10
+
11
+ Bootstrap colorpicker is a plugin for Bootstrap designed by Stefan Petre. It provides a stylish date picker for Bootstrap.
12
+
13
+ http://www.eyecon.ro/bootstrap-colorpicker/
14
+
15
+ bootstrap-colorpicker-rails project integrates colorpicker with Rails 3 assets pipeline.
16
+
17
+ http://github.com/alessani/bootstrap-colorpicker-rails
18
+
19
+
20
+ Rails > 3.1
21
+ Include bootstrap-colorpicker-rails in Gemfile;
22
+
23
+ gem 'bootstrap-colorpicker-rails'
24
+
25
+ or you can install from latest build;
26
+
27
+ gem 'bootstrap-colorpicker-rails', :require => 'bootstrap-colorpicker-rails',
28
+ :git => 'git://github.com/alessani/bootstrap-colorpicker-rails.git'
29
+ and run bundle install.
30
+
31
+ Stylesheets
32
+ Add necessary stylesheet file to app/assets/stylesheets/application.css
33
+
34
+ *= require bootstrap-colorpicker
35
+
36
+ Javascripts
37
+ Add necessary javascript(s) files to app/assets/javascripts/application.js
38
+
39
+ //= require bootstrap-colorpicker
40
+
41
+ Using bootstrap-colorpicker-rails
42
+ Just call colorpicker() with any selector.
43
+
44
+ $('.colorpicker').colorpicker()
45
+
46
+ There are some options you can pass to colorpicker(). They are documented at http://www.eyecon.ro/bootstrap-colorpicker/
@@ -0,0 +1,12 @@
1
+ #!/usr/bin/env rake
2
+ require File.expand_path('../lib/bootstrap-colorpicker-rails/version', __FILE__)
3
+
4
+ desc "Build the gem"
5
+ task "build" do
6
+ system("gem build bootstrap-colorpicker-rails.gemspec")
7
+ end
8
+
9
+ desc "Publish the gem"
10
+ task 'publish' do
11
+ system("gem push bootstrap-colorpicker-rails-#{BootstrapColorpickerRails::Rails::VERSION}.gem")
12
+ end
@@ -0,0 +1,19 @@
1
+ # -*- encoding: utf-8 -*-
2
+ require File.expand_path('../lib/bootstrap-colorpicker-rails/version', __FILE__)
3
+
4
+ Gem::Specification.new do |gem|
5
+ gem.authors = ["Matteo Alessani"]
6
+ gem.email = ["alessani@gmail.com"]
7
+ gem.description = %q{A color picker for Twitter Bootstrap}
8
+ gem.homepage = "https://github.com/alessani/bootstrap-colorpicker-rails"
9
+ gem.summary = gem.description
10
+
11
+ gem.name = "bootstrap-colorpicker-rails"
12
+ gem.require_paths = ["lib"]
13
+ gem.files = `git ls-files`.split("\n")
14
+ gem.version = BootstrapColorpickerRails::Rails::VERSION
15
+
16
+ gem.add_dependency "railties", ">= 3.0"
17
+ gem.add_development_dependency "bundler", ">= 1.0"
18
+ gem.add_development_dependency "rake"
19
+ end
@@ -0,0 +1,12 @@
1
+ require "rails"
2
+ require "bootstrap-colorpicker-rails/version"
3
+
4
+ module BootstrapDatepickerRails
5
+ module Rails
6
+ if ::Rails.version < "3.1"
7
+ require "bootstrap-colorpicker-rails/railtie"
8
+ else
9
+ require "bootstrap-colorpicker-rails/engine"
10
+ end
11
+ end
12
+ end
@@ -0,0 +1,6 @@
1
+ module BootstrapColorpickerRails
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -0,0 +1,5 @@
1
+ module BootstrapColorpickerRails
2
+ module Rails
3
+ class Railtie < ::Rails::Railtie; end
4
+ end
5
+ end
@@ -0,0 +1,5 @@
1
+ module BootstrapColorpickerRails
2
+ module Rails
3
+ VERSION = "0.1"
4
+ end
5
+ end
@@ -0,0 +1,520 @@
1
+ /* =========================================================
2
+ * bootstrap-colorpicker.js
3
+ * http://www.eyecon.ro/bootstrap-colorpicker
4
+ * =========================================================
5
+ * Copyright 2012 Stefan Petre
6
+ *
7
+ * Licensed under the Apache License, Version 2.0 (the "License");
8
+ * you may not use this file except in compliance with the License.
9
+ * You may obtain a copy of the License at
10
+ *
11
+ * http://www.apache.org/licenses/LICENSE-2.0
12
+ *
13
+ * Unless required by applicable law or agreed to in writing, software
14
+ * distributed under the License is distributed on an "AS IS" BASIS,
15
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
+ * See the License for the specific language governing permissions and
17
+ * limitations under the License.
18
+ * ========================================================= */
19
+
20
+ !function( $ ) {
21
+
22
+ // Color object
23
+
24
+ var Color = function(val) {
25
+ this.value = {
26
+ h: 1,
27
+ s: 1,
28
+ b: 1,
29
+ a: 1
30
+ };
31
+ this.setColor(val);
32
+ };
33
+
34
+ Color.prototype = {
35
+ constructor: Color,
36
+
37
+ //parse a string to HSB
38
+ setColor: function(val){
39
+ val = val.toLowerCase();
40
+ var that = this;
41
+ $.each( CPGlobal.stringParsers, function( i, parser ) {
42
+ var match = parser.re.exec( val ),
43
+ values = match && parser.parse( match ),
44
+ space = parser.space||'rgba';
45
+ if ( values ) {
46
+ if (space == 'hsla') {
47
+ that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
48
+ } else {
49
+ that.value = CPGlobal.RGBtoHSB.apply(null, values);
50
+ }
51
+ return false;
52
+ }
53
+ });
54
+ },
55
+
56
+ setHue: function(h) {
57
+ this.value.h = 1- h;
58
+ },
59
+
60
+ setSaturation: function(s) {
61
+ this.value.s = s;
62
+ },
63
+
64
+ setLightness: function(b) {
65
+ this.value.b = 1- b;
66
+ },
67
+
68
+ setAlpha: function(a) {
69
+ this.value.a = parseInt((1 - a)*100, 10)/100;
70
+ },
71
+
72
+ // HSBtoRGB from RaphaelJS
73
+ // https://github.com/DmitryBaranovskiy/raphael/
74
+ toRGB: function(h, s, b, a) {
75
+ if (!h) {
76
+ h = this.value.h;
77
+ s = this.value.s;
78
+ b = this.value.b;
79
+ }
80
+ h *= 360;
81
+ var R, G, B, X, C;
82
+ h = (h % 360) / 60;
83
+ C = b * s;
84
+ X = C * (1 - Math.abs(h % 2 - 1));
85
+ R = G = B = b - C;
86
+
87
+ h = ~~h;
88
+ R += [C, X, 0, 0, X, C][h];
89
+ G += [X, C, C, X, 0, 0][h];
90
+ B += [0, 0, X, C, C, X][h];
91
+ return {
92
+ r: Math.round(R*255),
93
+ g: Math.round(G*255),
94
+ b: Math.round(B*255),
95
+ a: a||this.value.a
96
+ };
97
+ },
98
+
99
+ toHex: function(h, s, b, a){
100
+ var rgb = this.toRGB(h, s, b, a);
101
+ return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
102
+ },
103
+
104
+ toHSL: function(h, s, b, a){
105
+ if (!h) {
106
+ h = this.value.h;
107
+ s = this.value.s;
108
+ b = this.value.b;
109
+ }
110
+ var H = h,
111
+ L = (2 - s) * b,
112
+ S = s * b;
113
+ if (L > 0 && L <= 1) {
114
+ S /= L;
115
+ } else {
116
+ S /= 2 - L;
117
+ }
118
+ L /= 2;
119
+ if (S > 1) {
120
+ S = 1;
121
+ }
122
+ return {
123
+ h: H,
124
+ s: S,
125
+ l: L,
126
+ a: a||this.value.a
127
+ };
128
+ }
129
+ };
130
+
131
+ // Picker object
132
+
133
+ var Colorpicker = function(element, options){
134
+ this.element = $(element);
135
+ var format = options.format||this.element.data('color-format')||'hex';
136
+ this.format = CPGlobal.translateFormats[format];
137
+ this.isInput = this.element.is('input');
138
+ this.component = this.element.is('.color') ? this.element.find('.add-on') : false;
139
+
140
+ this.picker = $(CPGlobal.template)
141
+ .appendTo('body')
142
+ .on('mousedown', $.proxy(this.mousedown, this));
143
+
144
+ if (this.isInput) {
145
+ this.element.on({
146
+ 'focus': $.proxy(this.show, this),
147
+ 'keyup': $.proxy(this.update, this)
148
+ });
149
+ } else if (this.component){
150
+ this.component.on({
151
+ 'click': $.proxy(this.show, this)
152
+ });
153
+ } else {
154
+ this.element.on({
155
+ 'click': $.proxy(this.show, this)
156
+ });
157
+ }
158
+ if (format == 'rgba' || format == 'hsla') {
159
+ this.picker.addClass('alpha');
160
+ this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
161
+ }
162
+
163
+ if (this.component){
164
+ this.picker.find('.colorpicker-color').hide();
165
+ this.preview = this.element.find('i')[0].style;
166
+ } else {
167
+ this.preview = this.picker.find('div:last')[0].style;
168
+ }
169
+
170
+ this.base = this.picker.find('div:first')[0].style;
171
+ this.update();
172
+ };
173
+
174
+ Colorpicker.prototype = {
175
+ constructor: Colorpicker,
176
+
177
+ show: function(e) {
178
+ this.picker.show();
179
+ this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
180
+ this.place();
181
+ $(window).on('resize', $.proxy(this.place, this));
182
+ if (!this.isInput) {
183
+ if (e) {
184
+ e.stopPropagation();
185
+ e.preventDefault();
186
+ }
187
+ }
188
+ $(document).on({
189
+ 'mousedown': $.proxy(this.hide, this)
190
+ });
191
+ this.element.trigger({
192
+ type: 'show',
193
+ color: this.color
194
+ });
195
+ },
196
+
197
+ update: function(){
198
+ this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
199
+ this.picker.find('i')
200
+ .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
201
+ .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
202
+ .eq(2).css('top', 100 * (1 - this.color.value.a));
203
+ this.previewColor();
204
+ },
205
+
206
+ hide: function(){
207
+ this.picker.hide();
208
+ $(window).off('resize', this.place);
209
+ if (!this.isInput) {
210
+ $(document).off({
211
+ 'mousedown': this.hide
212
+ });
213
+ if (this.component){
214
+ this.element.find('input').prop('value', this.format.call(this));
215
+ }
216
+ this.element.data('color', this.format.call(this));
217
+ } else {
218
+ this.element.prop('value', this.format.call(this));
219
+ }
220
+ this.element.trigger({
221
+ type: 'hide',
222
+ color: this.color
223
+ });
224
+ },
225
+
226
+ place: function(){
227
+ var offset = this.component ? this.component.offset() : this.element.offset();
228
+ this.picker.css({
229
+ top: offset.top + this.height,
230
+ left: offset.left
231
+ });
232
+ },
233
+
234
+ //preview color change
235
+ previewColor: function(){
236
+ this.preview.backgroundColor = this.format.call(this);
237
+ //set the color for brightness/saturation slider
238
+ this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
239
+ //set te color for alpha slider
240
+ if (this.alpha) {
241
+ this.alpha.backgroundColor = this.color.toHex();
242
+ }
243
+ },
244
+
245
+ pointer: null,
246
+
247
+ slider: null,
248
+
249
+ mousedown: function(e){
250
+ e.stopPropagation();
251
+ e.preventDefault();
252
+
253
+ var target = $(e.target);
254
+
255
+ //detect the slider and set the limits and callbacks
256
+ var zone = target.closest('div');
257
+ if (!zone.is('.colorpicker')) {
258
+ if (zone.is('.colorpicker-saturation')) {
259
+ this.slider = $.extend({}, CPGlobal.sliders['saturation']);
260
+ }
261
+ else if (zone.is('.colorpicker-hue')) {
262
+ this.slider = $.extend({}, CPGlobal.sliders['hue']);
263
+ }
264
+ else if (zone.is('.colorpicker-alpha')) {
265
+ this.slider = $.extend({}, CPGlobal.sliders['alpha']);
266
+ }
267
+ var offset = zone.offset();
268
+ //reference to knob's style
269
+ this.slider.knob = zone.find('i')[0].style;
270
+ this.slider.left = e.pageX - offset.left;
271
+ this.slider.top = e.pageY - offset.top;
272
+ this.pointer = {
273
+ left: e.pageX,
274
+ top: e.pageY
275
+ };
276
+ //trigger mousemove to move the knob to the current position
277
+ $(document).on({
278
+ mousemove: $.proxy(this.mousemove, this),
279
+ mouseup: $.proxy(this.mouseup, this)
280
+ }).trigger('mousemove');
281
+ }
282
+ return false;
283
+ },
284
+
285
+ mousemove: function(e){
286
+ e.stopPropagation();
287
+ e.preventDefault();
288
+ var left = Math.max(
289
+ 0,
290
+ Math.min(
291
+ this.slider.maxLeft,
292
+ this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
293
+ )
294
+ );
295
+ var top = Math.max(
296
+ 0,
297
+ Math.min(
298
+ this.slider.maxTop,
299
+ this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
300
+ )
301
+ );
302
+ this.slider.knob.left = left + 'px';
303
+ this.slider.knob.top = top + 'px';
304
+ if (this.slider.callLeft) {
305
+ this.color[this.slider.callLeft].call(this.color, left/100);
306
+ }
307
+ if (this.slider.callTop) {
308
+ this.color[this.slider.callTop].call(this.color, top/100);
309
+ }
310
+ this.previewColor();
311
+ this.element.trigger({
312
+ type: 'changeColor',
313
+ color: this.color
314
+ });
315
+ return false;
316
+ },
317
+
318
+ mouseup: function(e){
319
+ e.stopPropagation();
320
+ e.preventDefault();
321
+ $(document).off({
322
+ mousemove: this.mousemove,
323
+ mouseup: this.mouseup
324
+ });
325
+ return false;
326
+ }
327
+ }
328
+
329
+ $.fn.colorpicker = function ( option ) {
330
+ return this.each(function () {
331
+ var $this = $(this),
332
+ data = $this.data('colorpicker'),
333
+ options = typeof option == 'object' && option;
334
+ if (!data) {
335
+ $this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
336
+ }
337
+ if (typeof option == 'string') data[option]();
338
+ });
339
+ };
340
+
341
+ $.fn.colorpicker.defaults = {
342
+ };
343
+
344
+ $.fn.colorpicker.Constructor = Colorpicker;
345
+
346
+ var CPGlobal = {
347
+
348
+ // translate a format from Color object to a string
349
+ translateFormats: {
350
+ 'rgb': function(){
351
+ var rgb = this.color.toRGB();
352
+ return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
353
+ },
354
+
355
+ 'rgba': function(){
356
+ var rgb = this.color.toRGB();
357
+ return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
358
+ },
359
+
360
+ 'hsl': function(){
361
+ var hsl = this.color.toHSL();
362
+ return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
363
+ },
364
+
365
+ 'hsla': function(){
366
+ var hsl = this.color.toHSL();
367
+ return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
368
+ },
369
+
370
+ 'hex': function(){
371
+ return this.color.toHex();
372
+ }
373
+ },
374
+
375
+ sliders: {
376
+ saturation: {
377
+ maxLeft: 100,
378
+ maxTop: 100,
379
+ callLeft: 'setSaturation',
380
+ callTop: 'setLightness'
381
+ },
382
+
383
+ hue: {
384
+ maxLeft: 0,
385
+ maxTop: 100,
386
+ callLeft: false,
387
+ callTop: 'setHue'
388
+ },
389
+
390
+ alpha: {
391
+ maxLeft: 0,
392
+ maxTop: 100,
393
+ callLeft: false,
394
+ callTop: 'setAlpha'
395
+ }
396
+ },
397
+
398
+ // HSBtoRGB from RaphaelJS
399
+ // https://github.com/DmitryBaranovskiy/raphael/
400
+ RGBtoHSB: function (r, g, b, a){
401
+ r /= 255;
402
+ g /= 255;
403
+ b /= 255;
404
+
405
+ var H, S, V, C;
406
+ V = Math.max(r, g, b);
407
+ C = V - Math.min(r, g, b);
408
+ H = (C == 0 ? null :
409
+ V == r ? (g - b) / C :
410
+ V == g ? (b - r) / C + 2 :
411
+ (r - g) / C + 4
412
+ );
413
+ H = ((H + 360) % 6) * 60 / 360;
414
+ S = C == 0 ? 0 : C / V;
415
+ return {h: H||1, s: S, b: V, a: a||1};
416
+ },
417
+
418
+ HueToRGB: function (p, q, h) {
419
+ if (h < 0)
420
+ h += 1;
421
+ else if (h > 1)
422
+ h -= 1;
423
+
424
+ if ((h * 6) < 1)
425
+ return p + (q - p) * h * 6;
426
+ else if ((h * 2) < 1)
427
+ return q;
428
+ else if ((h * 3) < 2)
429
+ return p + (q - p) * ((2 / 3) - h) * 6;
430
+ else
431
+ return p;
432
+ },
433
+
434
+ HSLtoRGB: function (h, s, l, a)
435
+ {
436
+
437
+ if (s < 0)
438
+ s = 0;
439
+
440
+ if (l <= 0.5)
441
+ var q = l * (1 + s);
442
+ else
443
+ var q = l + s - (l * s);
444
+
445
+ var p = 2 * l - q;
446
+
447
+ var tr = h + (1 / 3);
448
+ var tg = h;
449
+ var tb = h - (1 / 3);
450
+
451
+ var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
452
+ var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
453
+ var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
454
+ return [r, g, b, a||1];
455
+ },
456
+
457
+ // a set of RE's that can match strings and generate color tuples.
458
+ // from John Resig color plugin
459
+ // https://github.com/jquery/jquery-color/
460
+ stringParsers: [
461
+ {
462
+ re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
463
+ parse: function( execResult ) {
464
+ return [
465
+ execResult[ 1 ],
466
+ execResult[ 2 ],
467
+ execResult[ 3 ],
468
+ execResult[ 4 ]
469
+ ];
470
+ }
471
+ }, {
472
+ re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
473
+ parse: function( execResult ) {
474
+ return [
475
+ 2.55 * execResult[1],
476
+ 2.55 * execResult[2],
477
+ 2.55 * execResult[3],
478
+ execResult[ 4 ]
479
+ ];
480
+ }
481
+ }, {
482
+ re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
483
+ parse: function( execResult ) {
484
+ return [
485
+ parseInt( execResult[ 1 ], 16 ),
486
+ parseInt( execResult[ 2 ], 16 ),
487
+ parseInt( execResult[ 3 ], 16 )
488
+ ];
489
+ }
490
+ }, {
491
+ re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
492
+ parse: function( execResult ) {
493
+ return [
494
+ parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
495
+ parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
496
+ parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
497
+ ];
498
+ }
499
+ }, {
500
+ re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
501
+ space: 'hsla',
502
+ parse: function( execResult ) {
503
+ return [
504
+ execResult[1]/360,
505
+ execResult[2] / 100,
506
+ execResult[3] / 100,
507
+ execResult[4]
508
+ ];
509
+ }
510
+ }
511
+ ],
512
+ template: '<div class="colorpicker dropdown-menu">'+
513
+ '<div class="colorpicker-saturation"><i><b></b></i></div>'+
514
+ '<div class="colorpicker-hue"><i></i></div>'+
515
+ '<div class="colorpicker-alpha"><i></i></div>'+
516
+ '<div class="colorpicker-color"><div /></div>'+
517
+ '</div>'
518
+ };
519
+
520
+ }( window.jQuery )
@@ -0,0 +1,127 @@
1
+ /*!
2
+ * Colorpicker for Bootstrap
3
+ *
4
+ * Copyright 2012 Stefan Petre
5
+ * Licensed under the Apache License v2.0
6
+ * http://www.apache.org/licenses/LICENSE-2.0
7
+ *
8
+ */
9
+ .colorpicker-saturation {
10
+ width: 100px;
11
+ height: 100px;
12
+ background-image: url(saturation.png);
13
+ cursor: crosshair;
14
+ float: left;
15
+ }
16
+ .colorpicker-saturation i {
17
+ display: block;
18
+ height: 5px;
19
+ width: 5px;
20
+ border: 1px solid #000;
21
+ -webkit-border-radius: 5px;
22
+ -moz-border-radius: 5px;
23
+ border-radius: 5px;
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ margin: -4px 0 0 -4px;
28
+ }
29
+ .colorpicker-saturation i b {
30
+ display: block;
31
+ height: 5px;
32
+ width: 5px;
33
+ border: 1px solid #fff;
34
+ -webkit-border-radius: 5px;
35
+ -moz-border-radius: 5px;
36
+ border-radius: 5px;
37
+ }
38
+ .colorpicker-hue, .colorpicker-alpha {
39
+ width: 15px;
40
+ height: 100px;
41
+ float: left;
42
+ cursor: row-resize;
43
+ margin-left: 4px;
44
+ margin-bottom: 4px;
45
+ }
46
+ .colorpicker-hue i, .colorpicker-alpha i {
47
+ display: block;
48
+ height: 1px;
49
+ background: #000;
50
+ border-top: 1px solid #fff;
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+ width: 100%;
55
+ margin-top: -1px;
56
+ }
57
+ .colorpicker-hue {
58
+ background-image: url(hue.png);
59
+ }
60
+ .colorpicker-alpha {
61
+ background-image: url(alpha.png);
62
+ display: none;
63
+ }
64
+ .colorpicker {
65
+ *zoom: 1;
66
+ top: 0;
67
+ left: 0;
68
+ padding: 4px;
69
+ min-width: 120px;
70
+ margin-top: 1px;
71
+ -webkit-border-radius: 4px;
72
+ -moz-border-radius: 4px;
73
+ border-radius: 4px;
74
+ }
75
+ .colorpicker:before, .colorpicker:after {
76
+ display: table;
77
+ content: "";
78
+ }
79
+ .colorpicker:after {
80
+ clear: both;
81
+ }
82
+ .colorpicker:before {
83
+ content: '';
84
+ display: inline-block;
85
+ border-left: 7px solid transparent;
86
+ border-right: 7px solid transparent;
87
+ border-bottom: 7px solid #ccc;
88
+ border-bottom-color: rgba(0, 0, 0, 0.2);
89
+ position: absolute;
90
+ top: -7px;
91
+ left: 6px;
92
+ }
93
+ .colorpicker:after {
94
+ content: '';
95
+ display: inline-block;
96
+ border-left: 6px solid transparent;
97
+ border-right: 6px solid transparent;
98
+ border-bottom: 6px solid #ffffff;
99
+ position: absolute;
100
+ top: -6px;
101
+ left: 7px;
102
+ }
103
+ .colorpicker div {
104
+ position: relative;
105
+ }
106
+ .colorpicker.alpha {
107
+ min-width: 140px;
108
+ }
109
+ .colorpicker.alpha .colorpicker-alpha {
110
+ display: block;
111
+ }
112
+ .colorpicker-color {
113
+ height: 10px;
114
+ margin-top: 5px;
115
+ clear: both;
116
+ background-image: url(alpha.png);
117
+ background-position: 0 100%;
118
+ }
119
+ .colorpicker-color div {
120
+ height: 10px;
121
+ }
122
+ .input-append.color .add-on i, .input-prepend.color .add-on i {
123
+ display: block;
124
+ cursor: pointer;
125
+ width: 16px;
126
+ height: 16px;
127
+ }
metadata ADDED
@@ -0,0 +1,92 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: bootstrap-colorpicker-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: '0.1'
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Matteo Alessani
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2012-05-10 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: railties
16
+ requirement: &70360315494160 !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: '3.0'
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: *70360315494160
25
+ - !ruby/object:Gem::Dependency
26
+ name: bundler
27
+ requirement: &70360315493660 !ruby/object:Gem::Requirement
28
+ none: false
29
+ requirements:
30
+ - - ! '>='
31
+ - !ruby/object:Gem::Version
32
+ version: '1.0'
33
+ type: :development
34
+ prerelease: false
35
+ version_requirements: *70360315493660
36
+ - !ruby/object:Gem::Dependency
37
+ name: rake
38
+ requirement: &70360315493280 !ruby/object:Gem::Requirement
39
+ none: false
40
+ requirements:
41
+ - - ! '>='
42
+ - !ruby/object:Gem::Version
43
+ version: '0'
44
+ type: :development
45
+ prerelease: false
46
+ version_requirements: *70360315493280
47
+ description: A color picker for Twitter Bootstrap
48
+ email:
49
+ - alessani@gmail.com
50
+ executables: []
51
+ extensions: []
52
+ extra_rdoc_files: []
53
+ files:
54
+ - Gemfile
55
+ - README.md
56
+ - Rakefile
57
+ - bootstrap-colorpicker-rails-0.1.gem
58
+ - bootstrap-colorpicker-rails.gemspec
59
+ - lib/bootstrap-colorpicker-rails.rb
60
+ - lib/bootstrap-colorpicker-rails/engine.rb
61
+ - lib/bootstrap-colorpicker-rails/railtie.rb
62
+ - lib/bootstrap-colorpicker-rails/version.rb
63
+ - vendor/assets/images/alpha.png
64
+ - vendor/assets/images/hue.png
65
+ - vendor/assets/images/saturation.png
66
+ - vendor/assets/javascripts/bootstrap-colorpicker.js
67
+ - vendor/assets/stylesheets/bootstrap-colorpicker.css
68
+ homepage: https://github.com/alessani/bootstrap-colorpicker-rails
69
+ licenses: []
70
+ post_install_message:
71
+ rdoc_options: []
72
+ require_paths:
73
+ - lib
74
+ required_ruby_version: !ruby/object:Gem::Requirement
75
+ none: false
76
+ requirements:
77
+ - - ! '>='
78
+ - !ruby/object:Gem::Version
79
+ version: '0'
80
+ required_rubygems_version: !ruby/object:Gem::Requirement
81
+ none: false
82
+ requirements:
83
+ - - ! '>='
84
+ - !ruby/object:Gem::Version
85
+ version: '0'
86
+ requirements: []
87
+ rubyforge_project:
88
+ rubygems_version: 1.8.6
89
+ signing_key:
90
+ specification_version: 3
91
+ summary: A color picker for Twitter Bootstrap
92
+ test_files: []