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

update ColorPicker style

Browse source
This commit is contained in:
梁灏 2018-05-22 09:24:01 +08:00
parent 653d12ac9b
commit 3cf3629f3b
2 changed files with 34 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/routers/color-picker.vue
View file

@ -8,6 +8,7 @@
size="large" size="large"
@on-change="c1" @on-change="c1"
@on-active-change="c2"></color-picker> @on-active-change="c2"></color-picker>
<Input value="hello" style="display: inline-block" />
<Date-picker <Date-picker
transfer transfer
type="date" type="date"

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

@ -1,5 +1,13 @@
@color-picker-prefix-cls: ~'@{css-prefix}color-picker'; @color-picker-prefix-cls: ~'@{css-prefix}color-picker';
.circle-dot(){
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
}
.@{color-picker-prefix-cls} { .@{color-picker-prefix-cls} {
display: inline-block; display: inline-block;
&-hide { &-hide {
@ -9,14 +17,11 @@
} }
} }
&-disabled { &-disabled {
background-color: @input-disabled-bg; .disabled();
opacity: 1;
cursor: @cursor-disabled;
color: #ccc;
} }
& > div:first-child:hover { & > div:first-child:hover {
.ivu-input { .ivu-input {
border-color: @input-hover-border-color; .hover();
} }
} }
& > div:first-child.@{color-picker-prefix-cls}-disabled:hover { & > div:first-child.@{color-picker-prefix-cls}-disabled:hover {
@ -27,8 +32,12 @@
& .@{select-dropdown-prefix-cls} { & .@{select-dropdown-prefix-cls} {
padding: 0; padding: 0;
} }
&-input.ivu-input:focus{
box-shadow: none;
}
&-focused { &-focused {
box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%); .active();
} }
&-rel { &-rel {
line-height: 0; line-height: 0;
@ -55,7 +64,7 @@
} }
} }
&-focused { &-focused {
box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%); .active();
} }
} }
&-large &-color { &-large &-color {
@ -98,14 +107,10 @@
&-colors { &-colors {
margin-top: 8px; margin-top: 8px;
overflow: hidden; overflow: hidden;
outline: 0; border-radius: 2px;
border: 1px solid @input-border-color;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out; transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:hover {
border: 1px solid @input-hover-border-color;
}
&:focus { &:focus {
box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%); .active();
} }
&-wrapper { &-wrapper {
display: inline; display: inline;
@ -122,25 +127,14 @@
margin: 2px; margin: 2px;
cursor: pointer; cursor: pointer;
border-radius: 2px; border-radius: 2px;
border: 1px solid @input-border-color; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:hover {
border: 1px solid @input-hover-border-color;
}
&:focus {
box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%);
}
} }
&-circle { &-circle {
cursor: pointer; .circle-dot();
position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
position: absolute; cursor: pointer;
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
} }
} }
} }
@ -154,16 +148,11 @@
width: 100%; width: 100%;
padding-bottom: 75%; padding-bottom: 75%;
position: relative; position: relative;
overflow: hidden; //overflow: hidden;
outline: 0;
border: 1px solid @input-border-color;
box-shadow: @shadow-base;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out; transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:hover {
border: 1px solid @input-hover-border-color;
}
&:focus { &:focus {
box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%); .active();
} }
} }
&, &,
@ -187,11 +176,7 @@
position: absolute; position: absolute;
} }
&-circle { &-circle {
width: 4px; .circle-dot();
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
} }
} }
@ -203,15 +188,11 @@
left: 0; left: 0;
border-radius: 2px; border-radius: 2px;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
outline: 0;
border: 1px solid @input-border-color;
box-shadow: @shadow-base;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out; transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:hover {
border: 1px solid @input-hover-border-color;
}
&:focus { &:focus {
box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%); .active();
} }
&-container { &-container {
cursor: pointer; cursor: pointer;
@ -241,15 +222,12 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
outline: 0; border-radius: 2px;
border: 1px solid @input-border-color;
box-shadow: @shadow-base;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out; transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:hover {
border: 1px solid @input-hover-border-color;
}
&:focus { &:focus {
box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%); .active();
} }
&-checkboard-wrap { &-checkboard-wrap {
position: absolute; position: absolute;