drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update ColorPicker

Browse source
This commit is contained in:
梁灏 2017-08-17 17:25:38 +08:00
parent dab3947668
commit e7893a68ed
12 changed files with 994 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/styles/components/color-picker.less
View file

@ -24,30 +24,31 @@
}
&-picker{
padding: 8px 8px 0;
padding: 4px 8px 0;
&-panel{
width: 200px;
height: 200px;
margin: 0 auto;
background: #47cb89;
border-radius: 50%;
box-sizing: initial;
position: relative;
}
&-hue-slider{
}
&-alpha-slider{
&-hue-slider, &-alpha-slider{
height: 10px;
margin-top: 8px;
position: relative;
}
&-colors{
margin-top: 8px;
overflow: hidden;
span{
display: inline-block;
width: 18px;
height: 18px;
width: 20px;
height: 20px;
float: left;
em{
display: block;
width: 16px;
height: 16px;
margin: 2px;
cursor: pointer;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
@ -58,4 +59,121 @@
margin-top: 8px;
}
}
&-saturation{
&-wrapper{
width: 100%;
padding-bottom: 75%;
position: relative;
overflow: hidden;
}
&, &--white, &--black{
cursor: pointer;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&--white{
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
&--black{
background: linear-gradient(to top, #000, rgba(0,0,0,0));
}
&-pointer{
cursor: pointer;
position: absolute;
}
&-circle{
cursor: head;
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
border-radius: 50%;
transform: translate(-2px, -2px);
}
}
&-hue{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 2px;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
&-container{
cursor: pointer;
margin: 0 2px;
position: relative;
height: 100%;
}
&-pointer{
z-index: 2;
position: absolute;
}
&-picker{
cursor: pointer;
margin-top: 1px;
width: 4px;
border-radius: 1px;
height: 8px;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
background: #fff;
transform: translateX(-2px);
}
}
&-alpha{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&-checkboard-wrap{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
&-checkerboard{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
&-gradient{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&-container{
cursor: pointer;
position: relative;
z-index: 2;
height: 100%;
margin: 0 3px;
}
&-pointer{
z-index: 2;
position: absolute;
}
&-picker{
cursor: pointer;
width: 4px;
border-radius: 1px;
height: 8px;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
background: #fff;
margin-top: 1px;
transform: translateX(-2px);
}
}
}