bootstrap-colorpicker-rails 0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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: []