2017-08-15 16:39:07 +08:00
|
|
|
@color-picker-prefix-cls: ~"@{css-prefix}color-picker";
|
|
|
|
|
|
|
|
.@{color-picker-prefix-cls} {
|
2017-08-16 13:52:50 +08:00
|
|
|
&-rel{
|
|
|
|
line-height: 0;
|
|
|
|
}
|
|
|
|
&-color{
|
2017-08-16 16:36:17 +08:00
|
|
|
width: 18px;
|
|
|
|
height: 18px;
|
2017-08-16 13:52:50 +08:00
|
|
|
border: 1px solid @text-color;
|
2017-08-16 16:36:17 +08:00
|
|
|
position: relative;
|
|
|
|
top: 2px;
|
|
|
|
}
|
|
|
|
&-large &-color{
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
top: 1px;
|
|
|
|
}
|
|
|
|
&-small &-color{
|
|
|
|
width: 14px;
|
|
|
|
height: 14px;
|
|
|
|
top: 3px;
|
2017-08-16 13:52:50 +08:00
|
|
|
}
|
2017-08-17 10:18:38 +08:00
|
|
|
|
|
|
|
&-picker{
|
|
|
|
padding: 8px 8px 0;
|
|
|
|
&-panel{
|
|
|
|
width: 200px;
|
|
|
|
height: 200px;
|
|
|
|
margin: 0 auto;
|
|
|
|
background: #47cb89;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
&-hue-slider{
|
|
|
|
|
|
|
|
}
|
|
|
|
&-alpha-slider{
|
|
|
|
|
|
|
|
}
|
|
|
|
&-colors{
|
|
|
|
margin-top: 8px;
|
|
|
|
span{
|
|
|
|
display: inline-block;
|
|
|
|
width: 18px;
|
|
|
|
height: 18px;
|
|
|
|
em{
|
|
|
|
display: block;
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
border: 1px solid transparent;
|
|
|
|
cursor: pointer;
|
|
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-colors-recommended{
|
|
|
|
span:last-child em{
|
|
|
|
border: 1px solid #6b6f78;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.@{picker-prefix-cls}-confirm{
|
|
|
|
margin-top: 8px;
|
|
|
|
}
|
|
|
|
}
|
2017-08-15 16:39:07 +08:00
|
|
|
}
|