github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #866 from Leopoldthecoder/master 

Button: update text button style
pull/879/head
baiyaaaaa 2016-11-07 11:52:24 +08:00 committed by GitHub
parent 9a3aa1b580 0162015c4c
commit ca6637d5ba
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -17,6 +17,9 @@
outline: none; outline: none;
margin: 0; margin: 0;
@utils-user-select none; @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); @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); border-color: var(--button-disabled-border);
} }
&.el-button--text {
background-color: transparent;
}
&.is-plain { &.is-plain {
&, &,
&:hover { &:hover {
@ -112,18 +119,6 @@
@m info { @m info {
@mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border); @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 { @m large {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius); @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 { @m mini {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius); @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 { @b button-group {