colorpicker.less 2.03 KB
/**
 * @package         Regular Labs Library
 * @version         18.2.10140
 * 
 * @author          Peter van Westen <info@regularlabs.com>
 * @link            http://www.regularlabs.com
 * @copyright       Copyright © 2018 Regular Labs All Rights Reserved
 * @license         http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */
/**
 * LOOSELY BASED ON:
 * Very simple jQuery Color Picker
 * Copyright (C) 2012 Tanguy Krotoff
 * Licensed under the MIT license
 */
@import "init.less";

.rl_colorpicker-swatch {
	cursor:         pointer;
	position:       relative;
	width:          20px;
	height:         20px;
	text-align:     left;
	background:     url(../images/minicolors.png) -80px 0;
	border:         solid 1px #cccccc;
	vertical-align: middle;
	display:        inline-block;
	.border-radius(3px);
	overflow:       hidden;
}

.rl_colorpicker-swatch span {
	position:   absolute;
	width:      100%;
	height:     100%;
	background: none;
	.box-shadow(~"inset 0 9px 0 rgba(255, 255, 255, .1)");
	display:    inline-block;
}

.rl_colorpicker-panel .rl_colorpicker-swatch {
	margin: 0 4px 4px 0;
}

.rl_colorpicker-swatch.active,
.rl_colorpicker-swatch:hover,
.rl_colorpicker-swatch:focus,
.rl_colorpicker-swatch span:focus {
	outline: 0;
	outline: thin dotted \9; /* IE6-9 */
}

.rl_colorpicker-swatch:hover,
.rl_colorpicker-swatch.active {
	border-color: rgba(82, 168, 236, 0.8);
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}

.rl_colorpicker-panel {
	position:              absolute;
	top:                   100%;
	left:                  0;
	z-index:               10;
	display:               none;
	float:                 left;
	padding:               6px 2px 2px 6px;
	margin:                1px 0 0;
	list-style:            none;
	background-color:      #ffffff;
	border:                1px solid #dddddd;
	*border-right-width:   2px;
	*border-bottom-width:  2px;
	-webkit-border-radius: 5px;
	-moz-border-radius:    5px;
	border-radius:         5px;
	.box-shadow(~"0 5px 10px rgba(0, 0, 0, 0.2)");
	.background-clip(padding-box);
}