Skip to content

E
Element
Commit 5e8dfd07 authored by Dreamacro's avatar Dreamacro Committed by 杨奕
Browse files
Options

Tree: add chalk theme (#6901) 

* Playground: bump to new theme

* Tree: update chalk theme

* update doc

* Update var.scss
parent e62f8c14
Hide whitespace changes
Inline Side-by-side
Showing with 36 additions and 40 deletions
examples/docs/en-US/tree.md
View file @ 5e8dfd07
......@@ -248,13 +248,13 @@
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
},
......@@ -764,13 +764,13 @@ The content of tree nodes can be customized, so you can add icons or buttons as
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
}
......
examples/docs/zh-CN/tree.md
View file @ 5e8dfd07
......@@ -248,13 +248,13 @@
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
},
......@@ -763,13 +763,13 @@
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
}
......
examples/play.js
View file @ 5e8dfd07
import Vue from 'vue';
import Element from 'main/index.js';
import App from './play/index.vue';
import 'packages/theme-default/src/index.css';
import 'packages/theme-chalk/src/index.scss';
Vue.use(Element);
......
packages/theme-chalk/src/common/var.scss
View file @ 5e8dfd07
......@@ -533,6 +533,12 @@ $--tag-danger-fill: rgba(255,73,73,0.10);
$--tag-danger-border: rgba(255,73,73,0.20);
$--tag-danger-color: $--color-danger;
/* Tree
-------------------------- */
$--tree-node-hover-color: $--background-color-base;
$--tree-text-color: $--color-text-regular;
$--tree-expand-icon-color: $--color-text-placeholder;
/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-light;
......
packages/theme-chalk/src/tree.scss
View file @ 5e8dfd07
......@@ -4,7 +4,7 @@
@include b(tree) {
cursor: default;
background: $--color-white;
border: 1px solid $--color-black;
color: $--tree-text-color;
@include e(empty-block) {
position: relative;
......@@ -27,41 +27,35 @@
white-space: nowrap;
@include e(content) {
line-height: 36px;
height: 36px;
display: flex;
align-items: center;
height: 26px;
cursor: pointer;
& > .el-checkbox,
& > .el-tree-node__expand-icon {
margin-right: 8px;
margin: 0 8px;
}
& > .el-checkbox {
vertical-align: middle;
margin-right: 8px;
}
&:hover {
background: $--color-black;
background-color: $--tree-node-hover-color;
}
}
@include e(expand-icon) {
display: inline-block;
cursor: pointer;
width: 0;
height: 0;
vertical-align: middle;
margin-left: 10px;
border: 6px solid transparent;
border: 3.5px solid transparent;
border-right-width: 0;
border-left-color: $--color-black;
border-left-width: 7px;
border-left-color: $--tree-expand-icon-color;
border-left-width: 6px;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
&:hover {
border-left-color: #999;
}
&.expanded {
transform: rotate(90deg);
}
......@@ -74,16 +68,12 @@
@include e(label) {
font-size: $--font-size-base;
vertical-align: middle;
display: inline-block;
}
@include e(loading-icon) {
display: inline-block;
vertical-align: middle;
margin-right: 4px;
margin-right: 8px;
font-size: $--font-size-base;
color: $--color-black;
color: $--tree-expand-icon-color;
}
& > .el-tree-node__children {
......
packages/tree/src/tree.vue
View file @ 5e8dfd07
......@@ -88,7 +88,7 @@
accordion: Boolean,
indent: {
type: Number,
default: 16
default: 18
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment