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

update Button style

Browse source
This commit is contained in:
梁灏 2018-07-02 14:57:54 +08:00
parent b12fa3968a
commit 5fc37ce45b
3 changed files with 58 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
examples/routers/button.vue
View file

@ -1,5 +1,36 @@
<template>
<div>
<Button icon="logo-github" size="small" shape="circle"></Button>
<Button icon="logo-github" size="large" shape="circle"></Button>
<Button icon="logo-github" shape="circle"></Button>
<Button icon="logo-github" size="small"></Button>
<Button size="small">EN</Button>
<Button icon="logo-github"></Button>
<Button>EN</Button>
<Button icon="logo-github" size="large"></Button>
<Button size="large">EN</Button>
<ButtonGroup size="small">
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
<Button>
EN
</Button>
</ButtonGroup>
<ButtonGroup>
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
<Button>
EN
</Button>
</ButtonGroup>
<ButtonGroup size="large">
<Button icon="logo-github"></Button>
<Button icon="logo-twitter"></Button>
<Button >
EN
</Button>
</ButtonGroup>
<br><br><br>
<Button type="default">Default</Button>
<Button type="primary">Primary</Button>
<Button type="dashed">Dashed</Button>

9
src/styles/custom.less
View file

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

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

@ -68,17 +68,17 @@
& .@{btnClassName}-icon-only .ivu-icon {
font-size: 14px;
position: relative;
top: 1px;
//top: 1px;
}
&-large .@{btnClassName}-icon-only .ivu-icon{
font-size: 16px;
top: 2px;
//top: 2px;
}
&-small .@{btnClassName}-icon-only .ivu-icon{
font-size: 12px;
top: 0;
//top: 0;
}
&-circle .@{btnClassName} {
@ -106,6 +106,13 @@
}
}
}
&-small .@{btnClassName}-icon-only{
.button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
}
&-large .@{btnClassName}-icon-only{
.button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
}
}
.button-group-vertical-base(@btnClassName) {
@ -142,7 +149,7 @@
vertical-align: middle;
}
&-icon-only > .@{css-prefix-iconfont}{
&-icon-only&-circle > .@{css-prefix-iconfont}{
vertical-align: baseline;
}
@ -180,6 +187,16 @@
&-small {
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
}
&-icon-only{
.button-size(@btn-padding-base-icon; @btn-font-size; @btn-border-radius);
}
&-icon-only&-small{
.button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
}
&-icon-only&-large{
.button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
}
}
// Default