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

iButton add some func

Browse source 
iButton add some func
This commit is contained in:
梁灏 2016-11-01 17:01:59 +08:00
parent 72493927e1
commit 698e3b614d
7 changed files with 96 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/styles/components/button.less
View file

@ -4,6 +4,10 @@
.btn;
.btn-default;
& > .ivu-icon + span, & > span + .ivu-icon{
margin-left: 4px;
}
&-primary {
.btn-primary;
@ -34,6 +38,14 @@
.btn-ghost;
}
&-dashed{
.btn-dashed;
}
&-text{
.btn-text;
}
//&-dashed {
// .btn-dashed;
//}

63
src/styles/mixins/button.less
View file

@ -93,7 +93,8 @@
user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
.transform(translate3d(0, 0, 0));
.transition(all @transition-time linear);
//.transition(all @transition-time linear);
.transition3(color @transition-time linear, background-color @transition-time linear, border @transition-time linear);
> .@{css-prefix-iconfont} {
line-height: 1;
@ -189,19 +190,59 @@
}
}
// Circle for Icon
.btn-circle(@btnClassName: ivu-btn) {
.square(@btn-circle-size);
.button-size(0; @font-size-base + 2; 50%);
// Text
.btn-text() {
.button-variant(@link-color, @btn-ghost-bg, transparent);
&.@{btnClassName}-large {
.square(@btn-circle-size-large);
.button-size(0; @btn-font-size-large + 2; 50%);
// for disabled
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
.button-color(@btn-disable-color; @btn-ghost-bg; transparent);
}
}
&.@{btnClassName}-small {
.square(@btn-circle-size-small);
.button-size(0; @font-size-base; 50%);
&:hover
//&:focus
{
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
}
}
// Circle for Icon
.btn-circle(@btnClassName: ivu-btn) {
border-radius: 28px;
&.@{btnClassName}-large{
border-radius: 36px;
}
&.@{btnClassName}-size{
border-radius: 24px;
}
&.@{btnClassName}-icon-only{
.square(@btn-circle-size);
.button-size(0; @font-size-base + 2; 50%);
&.@{btnClassName}-large{
.square(@btn-circle-size-large);
.button-size(0; @btn-font-size-large + 2; 50%);
}
&.@{btnClassName}-small{
.square(@btn-circle-size-small);
.button-size(0; @font-size-base; 50%);
}
}
}

4
src/styles/themes/default/custom.less
View file

@ -47,8 +47,8 @@
// Button
@btn-font-weight : 400;
@btn-padding-base : 4px 15px;
@btn-padding-large : 4px 15px 5px 15px;
@btn-padding-small : 1px 7px;
@btn-padding-large : 6px 15px 7px 15px;
@btn-padding-small : 2px 7px;
@btn-font-size : 12px;
@btn-font-size-large : 14px;
@btn-border-radius : 4px;