update Switch style

This commit is contained in:
梁灏 2018-06-21 19:51:38 +08:00
parent 3f611f57ed
commit ac2f8493b1
2 changed files with 49 additions and 25 deletions

View file

@ -2,10 +2,10 @@
.@{switch-prefix-cls} {
display: inline-block;
width: 48px;
height: 24px;
line-height: 22px;
border-radius: 24px;
width: 44px;
height: 22px;
line-height: 20px;
border-radius: 22px;
vertical-align: middle;
border: 1px solid #ccc;
background-color: #ccc;
@ -18,7 +18,7 @@
color: #fff;
font-size: @font-size-small;
position: absolute;
left: 25px;
left: 23px;
i {
width: 12px;
@ -29,9 +29,9 @@
&:after {
content: '';
width: 20px;
height: 20px;
border-radius: 20px;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: #fff;
position: absolute;
left: 1px;
@ -54,14 +54,12 @@
}
&-small {
width: 24px;
height: 12px;
line-height: 10px;
width: 28px;
height: 16px;
line-height: 14px;
&:after {
width: 10px;
height: 10px;
top: 0;
left: 0;
width: 12px;
height: 12px;
}
&:active:after {
width: 14px;
@ -69,30 +67,30 @@
}
&-small&-checked:after {
left: 12px;
left: 13px;
}
&-small:active&-checked:after {
left: 8px;
left: 11px;
}
&-large{
width: 60px;
width: 56px;
&:active:after {
width: 26px;
}
}
&-large:active:after {
width: 32px;
width: 30px;
}
&-large&-checked:after {
left: 37px;
left: 35px;
}
&-large:active&-checked:after {
left: 25px;
left: 23px;
}
&-checked {
@ -100,15 +98,15 @@
background-color: @primary-color;
.@{switch-prefix-cls}-inner {
left: 8px;
left: 7px;
}
&:after {
left: 25px;
left: 23px;
}
&:active:after {
left: 19px;
left: 15px;
}
}