@import "../../style/variables.less";
@import "../../style/mixins.less";

.colorpicker{
	.border-radius(2px);
    .box-shadow(0 3px 5px rgba(0,0,0,0.1));
    border: 1px solid #ddd;
    padding: 10px;
    width: 225px;
    position:absolute;
    left:-9999px;
    top:-9999px;
    -webkit-text-size-adjust: none;
   	background-color: #fff;
}

.colorpicker .colorpicker-hd{
	height: 59px;
	border: 1px solid #000;
	width:223px;
	overflow: hidden;
}
.colorpicker-hd ul{
	width: 226px;
	.clearfix;
}
.colorpicker-hd li{
	border: 1px solid #000;
	float: left;
	width: 13px;
	height: 14px;
	line-height: 14px;
	margin: -1px 0px 0 -1px;
	background-color: red;
	display: inline;
}

.colorpicker-hd li.selected{
	width: 9px;
	height: 10px;
	margin: 1px 2px 2px 1px;
	font-size: 10px;
	line-height: 10px;
	overflow: hidden;
}

.colorpicker .colorpicker-md{
	text-align: center;
	padding: 7px 0 9px;
	height: 10px;
	line-height: 10px;
}

.colorpicker-md .icon-arrow{
    font-size:10px;
    line-height: 10px;
    height: 10px;
    overflow: hidden;
    zoom:1;
    color: #999;
    cursor: pointer;
}

.colorpicker .colorpicker-bd{
	height: 196px;
	margin-bottom: 10px;
	position: relative;
}

.colorpicker .colorpicker-bd-min{
	height: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

.colorpicker-bd .picker-wrapper{
	position: relative;
	float: left;
}

.picker-wrapper .picker{
	width: 195px;
	height: 196px;
}

.picker-wrapper .icon-picker-indicator{
	position: absolute;
	font-size: 10px;
	line-height: 11px;
	color: #000;
	top:0px;
	left: 0px;
	cursor: pointer;
}

.colorpicker-bd .slide-wrapper{
	position: relative;
	margin-left: 10px;
	float: left;
}
.colorpicker-bd .slide{
	width: 20px;
	height: 196px;
}
.slide-wrapper .icon-slide-indicator{
	position: absolute;
	font-size: 10px;
	line-height: 11px;
	color: #000;
	right: -9px;
	top:0px;
	cursor: pointer;
}

.colorpicker .colorpicker-fd{
	height: 25px;
}

.colorpicker-fd .bg{
	width: 60px;
	height: 23px;
	line-height: 23px;
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
	border: 1px solid #ddd;

}
.colorpicker-fd {
	input{
		width: 60px;
		margin-right: 5px;
		margin-bottom: 0px;
		vertical-align: middle;
		padding: 2px 4px 3px 5px;
        line-height: 18px;
        color: #101010;
        border: 1px solid #dddddd;
        border-top-color: #bbbbbb;
        border-radius: 2px;
        @transition: border linear .2s, box-shadow linear .2s;
        .transition(@transition);
    }
    input:hover{
        border-color: #d0d0d0;
        border-top-color: #acacac;
        .box-shadow(~"inset 0 1px #f5f5f5");
    }
    input:focus{
        border-color: #488fcd;
        outline: 0;
        .box-shadow(~"0 0 8px rgba(72,143,205,.6)");
    }
}

.colorpicker-fd .btn-confirm{
	vertical-align: middle;
	cursor: pointer;

}
.colorpicker-fd .btn-confirm:hover{
    text-decoration: none;
}

