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

add Checkbox UI

Browse source 
add Checkbox UI
This commit is contained in:
梁灏 2016-09-20 22:00:16 +08:00
parent 4925f85fea
commit 6c5fbd8b04
13 changed files with 216 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/mixins/button.less
View file

@ -93,7 +93,7 @@
user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
.transform(translate3d(0, 0, 0));
.transition(all @animation-time linear);
.transition(all @transition-time linear);
> .@{css-prefix-iconfont} {
line-height: 1;

158
styles/mixins/checkbox.less Normal file
View file

@ -0,0 +1,158 @@
.checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
// 普通状态
.@{checkbox-prefix-cls} {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
outline: none;
line-height: 1;
position: relative;
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: #bcbcbc;
}
}
&-inner {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 0;
left: 0;
border: 1px solid @border-color-base;
border-radius: 3px;
background-color: #fff;
.transition2(border-color @transition-time @ease-in-out,background-color @transition-time @ease-in-out);
&:after {
content: '';
display: table;
width: 5px;
height: 8px;
position: absolute;
top: 2px;
left: 4px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
.transform(rotate(45deg) scale(0));
.transition(all @transition-time @ease-in-out);
}
}
&-input {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
}
}
// 选中状态
.@{checkbox-prefix-cls}-checked {
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
}
}
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
background-color: @primary-color;
&:after {
content: '';
display: table;
width: 5px;
height: 8px;
position: absolute;
top: 2px;
left: 4px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
.transform(rotate(45deg) scale(1));
.transition(all @transition-time @ease-in-out .1s);
}
}
}
// 禁用
.@{checkbox-prefix-cls}-disabled {
&.@{checkbox-prefix-cls}-checked {
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{checkbox-inner-prefix-cls} {
background-color: #f3f3f3;
border-color: @border-color-base;
&:after {
animation-name: none;
border-color: #ccc;
}
}
}
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
background-color: #f3f3f3;
&:after {
animation-name: none;
border-color: #f3f3f3;
}
}
.@{checkbox-inner-prefix-cls}-input {
cursor: default;
}
& + span {
color: #ccc;
cursor: @cursor-disabled;
}
}
.@{checkbox-prefix-cls}-wrapper {
cursor: pointer;
font-size: @font-size-base;
display: inline-block;
& + & {
margin-left: 8px;
}
}
.@{checkbox-prefix-cls}-wrapper + span,
.@{checkbox-prefix-cls} + span {
margin-left: 8px;
margin-right: 8px;
}
.@{checkbox-prefix-cls}-group {
font-size: @font-size-base;
&-item {
display: inline-block;
}
}
}

3
styles/mixins/index.less
View file

@ -7,4 +7,5 @@
@import "layout";
@import "size";
@import "loading";
@import "close";
@import "close";
@import "checkbox";

5
styles/mixins/transition.less
View file

@ -2,4 +2,9 @@
-webkit-transition: @string;
-moz-transition: @string;
transition: @string;
}
.transition2 (@string1, @string2) {
-webkit-transition: @string1 , @string2;
-moz-transition: @string1 , @string2;
transition: @string1 , @string2;
}