purty-color-picker 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 50d5ce52cc9c8a0f65af3f99642394d338f3fcc0
+  data.tar.gz: 9996a342d82248a95d4c284abbc3273d683909f3
+SHA512:
+  metadata.gz: accb1baf4f95e1a9303a50320da95dd8f27183ffcc0826d845487f1bda08577a9bea07a0ae688671fa06fe16920c49d86bbef0748ae7d3eb97472cf14be3ac3b
+  data.tar.gz: ccc5891c0f57df53109fa05acd9f699d2a9bf5a30aa32778362a17552c52da77c748576eca3a7c330b991c78fa6e56efad68b54881718139bc717ca5a00db26a

data/.gitignore

@@ -0,0 +1,50 @@
+*.gem
+*.rbc
+/.config
+/coverage/
+/InstalledFiles
+/pkg/
+/spec/reports/
+/spec/examples.txt
+/test/tmp/
+/test/version_tmp/
+/tmp/
+
+# Used by dotenv library to load environment variables.
+# .env
+
+## Specific to RubyMotion:
+.dat*
+.repl_history
+build/
+*.bridgesupport
+build-iPhoneOS/
+build-iPhoneSimulator/
+
+## Specific to RubyMotion (use of CocoaPods):
+#
+# We recommend against adding the Pods directory to your .gitignore. However
+# you should judge for yourself, the pros and cons are mentioned at:
+# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control
+#
+# vendor/Pods/
+
+## Documentation cache and generated files:
+/.yardoc/
+/_yardoc/
+/doc/
+/rdoc/
+
+## Environment normalization:
+/.bundle/
+/vendor/bundle
+/lib/bundler/man/
+
+# for a library or gem, you might want to ignore these files since the code is
+# intended to run in multiple environments; otherwise, check them in:
+# Gemfile.lock
+# .ruby-version
+# .ruby-gemset
+
+# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
+.rvmrc

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at norbert.forman@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in purty-color-picker.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,35 @@
+PATH
+  remote: .
+  specs:
+    purty-color-picker (0.1.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    diff-lcs (1.2.5)
+    rake (10.5.0)
+    rspec (3.5.0)
+      rspec-core (~> 3.5.0)
+      rspec-expectations (~> 3.5.0)
+      rspec-mocks (~> 3.5.0)
+    rspec-core (3.5.3)
+      rspec-support (~> 3.5.0)
+    rspec-expectations (3.5.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.5.0)
+    rspec-mocks (3.5.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.5.0)
+    rspec-support (3.5.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (~> 1.13)
+  purty-color-picker!
+  rake (~> 10.0)
+  rspec (~> 3.0)
+
+BUNDLED WITH
+   1.13.1

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Norbert Forman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Norbert Forman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,42 @@
+# Purty Color Picker
+
+This gem embeddes the Purty Color Picker in the Rails asset pipeline.
+
+A super lightweight visual HSL, RGB and hex color picker with a responsive, touch-friendly and customizable UI. Based on the Lightweight & Touch-enabled jQuery Color Picker Plugin - Purty Picker from [jaydenseric](https://github.com/jaydenseric/Purty-Picker)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'purty-color-picker'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install purty-color-picker
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Browser Support
+
+For modern browsers (IE10+ and recent versions of Chrome, Safari, Firefox), mostly due to the use of CSS3 linear gradients. Support for older browsers should be possible with a few modifications.
+
+## Dependencies
+
+Requires [jQuery](https://github.com/jquery/jquery) or [Zepto](https://github.com/madrobby/zepto) with core and event modules.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/norbertforman/purty-color-picker. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "purty/color/picker"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/purty/color/picker.rb

@@ -0,0 +1,9 @@
+require "purty/color/picker/version"
+
+module Purty
+  module Color
+    module Picker
+      class Engine < ::Rails::Engine; end
+    end
+  end
+end

data/lib/purty/color/picker/version.rb

@@ -0,0 +1,7 @@
+module Purty
+  module Color
+    module Picker
+      VERSION = "0.1.0"
+    end
+  end
+end

data/purty-color-picker.gemspec

@@ -0,0 +1,27 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'purty/color/picker/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "purty-color-picker"
+  spec.version       = Purty::Color::Picker::VERSION
+  spec.authors       = ["Norbert Forman"]
+  spec.email         = ["norbert.forman@gmail.com"]
+
+  spec.summary       = %q{This gem embeddes the Purty Color Picker in the Rails asset pipeline.}
+  spec.description   = %q{A super lightweight visual HSL, RGB and hex color picker with a responsive, touch-friendly and customizable UI.}
+  spec.homepage      = "https://github.com/norbertforman/purty-color-picker"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.13"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec", "~> 3.0"
+end

data/vendor/assets/javascripts/color-picker.js

@@ -0,0 +1,281 @@
+/*
+
+Purty Picker Copyright 2013 Jayden Seric (MIT license).
+
+A super lightweight visual HSL, RGB and hex color picker with a responsive, touch-friendly and customizable UI.
+
+Requires jQuery or Zepto with core and event modules.
+
+https://github.com/jaydenseric/Purty-Picker
+
+*/
+
+// DOM ready
+$(function() {
+	'use strict';
+
+//-------------------------------------------- Color conversions
+
+//---------------------- Convert HSL to RGB
+
+// Source: http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
+
+	function HSLToRGB(h, s, l) {
+		h /= 360;
+		s /= 100;
+		l /= 100;
+		var r, g, b;
+		if (s == 0) {
+			r = g = b = l; // Achromatic
+		} else {
+			var hueToRGB = function(p, q, t) {
+				if (t < 0) t += 1;
+				if (t > 1) t -= 1;
+				if (t < 1/6) return p + (q - p) * 6 * t;
+				if (t < 1/2) return q;
+				if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+				return p;
+			};
+			var	q = l < 0.5 ? l * (1 + s) : l + s - l * s,
+				p = 2 * l - q;
+			r = hueToRGB(p, q, h + 1/3);
+			g = hueToRGB(p, q, h);
+			b = hueToRGB(p, q, h - 1/3);
+		}
+		return {
+			red		: Math.round(r * 255),
+			green	: Math.round(g * 255),
+			blue	: Math.round(b * 255)
+		};
+	}
+
+//---------------------- Convert RGB to HSL
+
+// Source: http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
+
+	function RGBToHSL(r, g, b) {
+		r /= 255,
+		g /= 255,
+		b /= 255;
+		var	max = Math.max(r, g, b),
+			min = Math.min(r, g, b);
+		var h, s, l = (max + min) / 2;
+		if (max == min) {
+			h = s = 0; // Achromatic
+		} else {
+			var d = max - min;
+			s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+			switch(max) {
+				case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+				case g: h = (b - r) / d + 2; break;
+				case b: h = (r - g) / d + 4; break;
+			}
+			h /= 6;
+		}
+		return {
+			hue			: Math.round(h * 360),
+			saturation	: Math.round(s * 100),
+			luminosity	: Math.round(l * 100)
+		};
+	}
+
+//---------------------- Convert RGB to Hex
+
+// Source: http://stackoverflow.com/a/5624139
+
+	function RGBToHex(r, g, b) {
+		return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+	}
+
+//---------------------- Convert hex to RGB
+
+// Source: http://stackoverflow.com/a/11508164
+
+	function hexToRGB(hex) {
+		var bigInt	= parseInt(hex.replace('#', ''), 16),
+			r		= (bigInt >> 16) & 255,
+			g		= (bigInt >> 8) & 255,
+			b		= bigInt & 255;
+		return {
+			red		: r,
+			green	: g,
+			blue	: b
+		};
+	}
+
+//---------------------- Convert hex to HSL
+
+	function hexToHSL(hex) {
+		var RGB = hexToRGB(hex);
+		return RGBToHSL(RGB.red, RGB.green, RGB.blue);
+	}
+
+//---------------------- Convert HSL to hex
+
+	function HSLToHex(h, s, l) {
+		var RGB = HSLToRGB(h, s, l);
+		return RGBToHex(RGB.red, RGB.green, RGB.blue);
+	}
+
+//-------------------------------------------- Setup each color picker
+
+	$.each($('.color-picker'), function() {
+
+//---------------------- Find componenets
+
+		var	$picker				= $(this),
+			$formatInput		= $picker.find('.format'),
+			$colorInput			= $picker.find('.color'),
+			$luminosityInput	= $picker.find('input[type=range]'),
+			$spectrum			= $picker.find('.spectrum'),
+			$pin				= $picker.find('.pin');
+
+//---------------------- Get current color in HSL
+
+		function getHSL() {
+			var	position	= $picker.find('.pin').position(),
+				width		= $spectrum.width(),
+				height		= $spectrum.height();
+			return {
+				hue			: Math.round(position.left / width * 360),
+				saturation	: Math.round(position.top / height * 100),
+				luminosity	: $luminosityInput.val()
+			};
+		}
+
+//---------------------- Output color in desired format
+
+		function updateColorInput() {
+			var	HSL = getHSL();
+			switch ($formatInput.val()) {
+				case 'HSL':
+					$colorInput.val('hsl(' + HSL.hue + ', ' + HSL.saturation + '%, ' + HSL.luminosity + '%)');
+					break;
+				case 'RGB':
+					var RGB = HSLToRGB(HSL.hue, HSL.saturation, HSL.luminosity);
+					$colorInput.val('rgb(' + RGB.red + ', ' + RGB.green + ', ' + RGB.blue + ')');
+					break;
+				case 'Hex':
+					$colorInput.val(HSLToHex(HSL.hue, HSL.saturation, HSL.luminosity));
+					break;
+			}
+			// Trigger color picker change event for custom callbacks
+			$picker.trigger('change');
+		}
+
+//---------------------- Set color format
+
+		$formatInput.on('change', function() {
+			updateColorInput();
+		});
+
+//---------------------- Set color
+
+		$colorInput.on('change', function() {
+			// Get the color values in HSL format
+			var HSL;
+			switch ($formatInput.val()) {
+				case 'HSL':
+					var values = $(this).val().match(/\d+/g);
+					HSL = {
+						hue			: values[0],
+						saturation	: values[1],
+						luminosity	: values[2]
+					};
+					break;
+				case 'RGB':
+					var values = $(this).val().match(/\d+/g);
+					HSL = RGBToHSL(values[0], values[1], values[2]);
+					break;
+				case 'Hex':
+					HSL = hexToHSL($(this).val());
+					break;
+			}
+			// Set the luminosity
+			$luminosityInput.val(HSL.luminosity);
+			setLuminosity(HSL.luminosity);
+			// Place the pin
+			$pin.css({
+				left	: HSL.hue / 360 * 100 + '%',
+				top		: HSL.saturation + '%'
+			});
+			// Trigger color picker change event for custom callbacks
+			$picker.trigger('change');
+		});
+
+//---------------------- Set luminosity
+
+//---------- Set the luminosity spectrum overlay
+
+		function setLuminosity(luminosity) {
+			var color,
+				alpha;
+			if (luminosity <= 50) {
+				color = '0, 0, 0';
+				alpha = 1 - luminosity / 100 * 2;
+			} else {
+				color = '255, 255, 255';
+				alpha = luminosity / 100 * 2 - 1;
+			}
+			// Apply luminosity to the spectrum
+			$spectrum.children().css('background-color', 'rgba(' + color + ', ' + alpha + ')');
+		}
+
+//---------- Luminosity input interaction
+
+		$luminosityInput.on('change', function() {
+			setLuminosity($(this).val());
+			updateColorInput();
+		});
+
+//---------------------- Set hue, saturation via pin
+
+//---------- Move the pin
+
+		var movePin = function(event) {
+			var	bounds	= $spectrum[0].getBoundingClientRect(),
+				x		= event.clientX - bounds.left,
+				y		= event.clientY - bounds.top;
+			// Prevent dragging pin outside spectrum area horizontally
+			if (x < 0) x = 0;
+			else if (x > bounds.width) x = bounds.width;
+			// Prevent dragging pin outside spectrum area vertically
+			if (y < 0) y = 0;
+			else if (y > bounds.height) y = bounds.height;
+			// Place the pin
+			$pin.css({
+				left	: x / bounds.width * 100 + '%',
+				top		: y / bounds.height * 100 + '%'
+			});
+			// Output new color value
+			updateColorInput();
+		};
+
+//---------- Pin interaction
+
+		$spectrum.on('mousedown', function(event) {
+			event.preventDefault();
+			movePin(event);
+			$spectrum.addClass('active');
+			$(document).on('mousemove', movePin);
+		});
+
+		$(document).on('mouseup', function() {
+			$spectrum.removeClass('active');
+			$(document).off('mousemove', movePin);
+		});
+
+		$spectrum.on('touchmove touchstart', movePin);
+
+//---------------------- Output color preview
+
+		$picker.on('change', function() {
+			$colorInput.css('background-color', $colorInput.val()).toggleClass('dark', $luminosityInput.val() <= 50);
+		});
+
+//---------------------- Initialize this color picker
+
+		$colorInput.trigger('change');
+
+	});
+});

data/vendor/assets/stylesheets/color-picker.css

@@ -0,0 +1,90 @@
+/* Purty Picker Copyright 2013 Jayden Seric (MIT license): https://github.com/jaydenseric/Purty-Picker */
+/* Core: No touchy! */
+.color-picker .spectrum {
+  position: relative;
+  /* To position pin, luminosity filter */
+  background: linear-gradient(gray, transparent), linear-gradient(90deg, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d4ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d4ff, #00aaff, #007fff, #0055ff, #002bff, blue, #2a00ff, #5500ff, #7f00ff, #aa00ff, #d400ff, magenta, #ff00d4, #ff00aa, #ff0080, #ff0055, #ff002b, red);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* Prevent pin interaction causing content selection */
+  cursor: crosshair;
+}
+.color-picker .spectrum.active {
+  cursor: none;
+}
+.color-picker .spectrum.active .pin {
+  cursor: none;
+}
+.color-picker .spectrum > div {
+  /* Luminosity filter */
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.color-picker .spectrum .pin {
+  position: absolute;
+  cursor: move;
+}
+
+/* Customization: Default skin */
+.color-picker {
+  margin: 20px;
+  padding: 11px;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+}
+.color-picker .color,
+.color-picker .luminosity {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+}
+.color-picker .format {
+  display: block;
+  margin: 0 auto 10px auto;
+}
+.color-picker .color {
+  -webkit-appearance: none;
+  border: 0;
+  border-radius: 2px;
+  padding: 10px;
+  text-align: center;
+  font-size: 11px;
+  letter-spacing: 1px;
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
+  color: rgba(0, 0, 0, 0.6);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: color 0.2s;
+}
+.color-picker .color.dark {
+  color: rgba(255, 255, 255, 0.7);
+}
+.color-picker .spectrum {
+  height: 150px;
+  /* Arbitary but required */
+  overflow: hidden;
+  /* Prevent pin overflowing container */
+  border-radius: 2px;
+  margin: 10px 0;
+}
+.color-picker .spectrum > div {
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.color-picker .spectrum .pin {
+  margin-left: -4px;
+  margin-top: -4px;
+  width: 4px;
+  height: 4px;
+  border: 2px solid white;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  border-radius: 100%;
+}
+.color-picker .luminosity {
+  margin: 0;
+}

metadata

@@ -0,0 +1,102 @@
+--- !ruby/object:Gem::Specification
+name: purty-color-picker
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Norbert Forman
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-09-17 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: A super lightweight visual HSL, RGB and hex color picker with a responsive,
+  touch-friendly and customizable UI.
+email:
+- norbert.forman@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- Gemfile.lock
+- LICENSE
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- lib/purty/color/picker.rb
+- lib/purty/color/picker/version.rb
+- purty-color-picker.gemspec
+- vendor/assets/javascripts/color-picker.js
+- vendor/assets/stylesheets/color-picker.css
+homepage: https://github.com/norbertforman/purty-color-picker
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.3
+signing_key: 
+specification_version: 4
+summary: This gem embeddes the Purty Color Picker in the Rails asset pipeline.
+test_files: []