From 5e8dfd07385e4c8b305a5de9d95d6eac711cd917 Mon Sep 17 00:00:00 2001 From: Dreamacro Date: Thu, 14 Sep 2017 11:34:26 +0800 Subject: [PATCH] Tree: add chalk theme (#6901) * Playground: bump to new theme * Tree: update chalk theme * update doc * Update var.scss --- examples/docs/en-US/tree.md | 16 +++++------ examples/docs/zh-CN/tree.md | 16 +++++------ examples/play.js | 2 +- packages/theme-chalk/src/common/var.scss | 6 +++++ packages/theme-chalk/src/tree.scss | 34 +++++++++--------------- packages/tree/src/tree.vue | 2 +- 6 files changed, 36 insertions(+), 40 deletions(-) diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index a8dfb2370..e5d0476dd 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -248,13 +248,13 @@ renderContent(h, { node, data, store }) { return ( - + {node.label} - - this.append(store, data) }>Append - this.remove(store, node, data) }>Delete + + this.append(store, data) }>Append + this.remove(store, node, data) }>Delete ); }, @@ -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 ( - + {node.label} - - this.append(store, data) }>Append - this.remove(store, node, data) }>Delete + + this.append(store, data) }>Append + this.remove(store, node, data) }>Delete ); } diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index c20346363..e140ba361 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -248,13 +248,13 @@ renderContent(h, { node, data, store }) { return ( - + {node.label} - - this.append(store, data) }>Append - this.remove(store, node, data) }>Delete + + this.append(store, data) }>Append + this.remove(store, node, data) }>Delete ); }, @@ -763,13 +763,13 @@ renderContent(h, { node, data, store }) { return ( - + {node.label} - - this.append(store, data) }>Append - this.remove(store, node, data) }>Delete + + this.append(store, data) }>Append + this.remove(store, node, data) }>Delete ); } diff --git a/examples/play.js b/examples/play.js index e6452bb53..77f4e92bf 100644 --- a/examples/play.js +++ b/examples/play.js @@ -1,7 +1,7 @@ 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); diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 2e857bc98..0aebc0198 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -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; diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss index ed1aec1f7..6e3f8de5b 100644 --- a/packages/theme-chalk/src/tree.scss +++ b/packages/theme-chalk/src/tree.scss @@ -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 { diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue index e6fab6d30..75f5c7bb7 100644 --- a/packages/tree/src/tree.vue +++ b/packages/tree/src/tree.vue @@ -88,7 +88,7 @@ accordion: Boolean, indent: { type: Number, - default: 16 + default: 18 } },