mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(tree): shaking themed styles

Browse Source
This commit is contained in:
07akioni 2020-02-26 12:41:24 +08:00
parent b5ce2c509c
commit 7ae5398cd9
4 changed files with 113 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/tree/enUS/filter.md
View File

@ -1,7 +1,7 @@
# Search
Tree accept `pattern` and `filter` to do searching.
```html
<n-input v-model="pattern" placeholder="搜索" />
<n-input v-model="pattern" placeholder="Search" />
<n-tree
:pattern="pattern"
:data="data"

192
styles/Tree.scss
View File

@ -2,63 +2,73 @@
@include themes-mixin {
@include b(tree) {
font-size: 14px;
color: $--n-secondary-text-color;
transition: color .3s $--n-ease-in-out-cubic-bezier;
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
@include b(tree-children-wrapper) {
@include fade-in-height-expand-transition(fade-in-height-expand, .15s);
margin-left: 16px;
}
@include b(tree-node) {
padding: 3px 0 3px 0;
&:first-child {
padding-top: 6px;
@include once {
font-size: 14px;
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
&:last-child {
padding-bottom: 0;
@include b(tree-children-wrapper) {
@include fade-in-height-expand-transition(fade-in-height-expand, .15s);
margin-left: 16px;
}
@include b(tree-node) {
padding: 3px 0 3px 0;
&:first-child {
padding-top: 6px;
}
&:last-child {
padding-bottom: 0;
}
}
}
@include b(tree-node-switcher) {
cursor: pointer;
display: inline-flex;
height: 24px;
width: 24px;
align-items: center;
justify-content: center;
transition: transform .15s $--n-ease-in-out-cubic-bezier;
vertical-align: bottom;
@include once {
cursor: pointer;
display: inline-flex;
height: 24px;
width: 24px;
align-items: center;
justify-content: center;
transition: transform .15s $--n-ease-in-out-cubic-bezier;
vertical-align: bottom;
}
@include e(icon) {
position: relative;
height: 14px;
width: 14px;
display: flex;
@include b(icon) {
@include once {
position: relative;
height: 14px;
width: 14px;
font-size: 14px;
display: flex;
}
@include b(icon) {
@include once {
height: 14px;
width: 14px;
font-size: 14px;
@include icon-switch-transition;
}
fill: $--tree-node-switcher-color;
stroke: $--tree-node-switcher-color;
@include icon-switch-transition;
}
@include b(base-loading) {
position: absolute;
left: 1px;
top: 1px;
height: 12px;
width: 12px;
@include icon-switch-transition($left: 1px, $top: 1px);
@include once {
@include b(base-loading) {
position: absolute;
left: 1px;
top: 1px;
height: 12px;
width: 12px;
@include icon-switch-transition($left: 1px, $top: 1px);
}
}
}
@include m(hide) {
visibility: hidden
}
@include m(expanded) {
transform: rotate(90deg);
@include once {
@include m(hide) {
visibility: hidden
}
@include m(expanded) {
transform: rotate(90deg);
}
}
}
@include b(tree-node-checkbox) {
@ -71,60 +81,66 @@
margin-right: 4px;
}
@include b(tree-node-content) {
position: relative;
display: inline-flex;
height: 24px;
box-sizing: border-box;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
line-height: 24px;
align-items: center;
vertical-align: bottom;
padding: 0 6px;
cursor: pointer;
border-radius: 3px;
text-decoration-color: transparent;
text-decoration-line: underline;
transition:
text-decoration-color .3s $--n-ease-in-out-cubic-bezier,
background-color .3s $--n-ease-in-out-cubic-bezier,
border-color .3s $--n-ease-in-out-cubic-bezier;
@include once {
position: relative;
display: inline-flex;
height: 24px;
box-sizing: border-box;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
line-height: 24px;
align-items: center;
vertical-align: bottom;
padding: 0 6px;
cursor: pointer;
border-radius: 3px;
text-decoration-color: transparent;
text-decoration-line: underline;
transition:
color .3s $--n-ease-in-out-cubic-bezier,
text-decoration-color .3s $--n-ease-in-out-cubic-bezier,
background-color .3s $--n-ease-in-out-cubic-bezier,
border-color .3s $--n-ease-in-out-cubic-bezier;
&:last-child {
margin-bottom: 0;
}
@include e(padding-box) {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
}
@include e(text) {
line-height: 1.25em;
border-bottom: 1px solid transparent;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
@include m(block) {
width: calc(100% - 24px);
@include m(checkable) {
width: calc(100% - 48px);
}
}
}
color: map-get($--tree-node-content-text-color, 'default');
&:hover {
background-color: map-get($--tree-node-background-color, 'hover');
}
&:active {
background-color: map-get($--tree-node-background-color, 'active');
}
&:last-child {
margin-bottom: 0;
}
@include e(padding-box) {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
}
@include e(text) {
line-height: 1.25em;
border-bottom: 1px solid transparent;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
@include m(block) {
width: calc(100% - 24px);
@include m(checkable) {
width: calc(100% - 48px);
}
}
@include m(hightlight) {
@include e(text) {
border-bottom-color: $--n-secondary-text-color;
border-bottom-color: map-get($--tree-node-content-text-color, 'default');
}
}
@include m(pending) {
&:hover {
background-color: transparent;
@include once {
&:hover {
background-color: transparent;
}
}
@include m(pending-bottom) {
border-bottom: 3px solid map-get($--tree-node-background-color, 'hover');

4
styles/themes/dark/components/Tree.scss
View File

@ -5,4 +5,8 @@
'selected': change-color($--n-primary-color, $alpha: .15)
) !global;
$--tree-node-switcher-color: $--n-tertiary-text-color !global;
$--tree-node-content-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
)!global;
}

4
styles/themes/light/components/Tree.scss
View File

@ -5,4 +5,8 @@
'selected': change-color($--n-primary-color, $alpha: .1)
) !global;
$--tree-node-switcher-color: $--n-tertiary-text-color !global;
$--tree-node-content-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
)!global;
}