test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 11:17:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Button: update text button style

Browse Source
This commit is contained in:
Leopoldthecoder 2016-11-07 10:47:51 +08:00
parent 858abf687f
commit 0162015c4c
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/docs/zh-cn/table.md
View File

@ -513,8 +513,11 @@
inline-template
fixed="right"
label="操作"
width="80">
<el-button type="text" size="small">编辑</el-button>
width="100">
<span>
<el-button type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</span>
</el-table-column>
</el-table>
</template>

33
packages/theme-default/src/button.css
View File

@ -17,6 +17,9 @@
outline: none;
margin: 0;
@utils-user-select none;
& + .el-button {
margin-left: 10px;
}
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
@ -71,6 +74,10 @@
border-color: var(--button-disabled-border);
}
&.el-button--text {
background-color: transparent;
}
&.is-plain {
&,
&:hover {
@ -112,18 +119,6 @@
@m info {
@mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
}
@m text {
border: none;
color: var(--color-primary);
background: transparent;
&:hover {
color: tint(var(--color-primary), var(--button-hover-tint-percent));
}
&:active {
color: shade(var(--color-primary), var(--button-active-shade-percent));
}
}
@m large {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
}
@ -133,6 +128,20 @@
@m mini {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
}
@m text {
border: none;
color: var(--color-primary);
background: transparent;
padding-left: 0;
padding-right: 0;
&:hover {
color: tint(var(--color-primary), var(--button-hover-tint-percent));
}
&:active {
color: shade(var(--color-primary), var(--button-active-shade-percent));
}
}
}
@b button-group {