mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(timeline): code clean, default type item style change

Browse Source
This commit is contained in:
07akioni 2019-12-13 22:34:00 +08:00
parent ebb1dd817b
commit e96a3c0987
7 changed files with 180 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo/documentation/components/timeline/enUS/basic.md
View File

@ -6,24 +6,24 @@
/>
<n-timeline-item
type="success"
title="success"
title="Success"
content="success content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="error"
content="error content"
content="Error content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="warning"
title="warning"
title="Warning"
content="warning content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="info"
title="info"
title="Info"
content="info content"
timestamp="2018-04-03 20:46"
/>

2
demo/documentation/components/timeline/enUS/index.md
View File

@ -1,4 +1,6 @@
# Timeline
```demo
basic
size
item-placement
```

32
demo/documentation/components/timeline/enUS/itemPlacement.md Normal file
View File

@ -0,0 +1,32 @@
# Item Placement
Left. .thgiR
```html
<n-timeline item-placement="left">
<n-timeline-item
content="Oops"
/>
<n-timeline-item
type="success"
title="Success"
content="success content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="error"
content="Error content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="warning"
title="Warning"
content="warning content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="info"
title="Info"
content="info content"
timestamp="2018-04-03 20:46"
/>
</n-timeline>
```

31
demo/documentation/components/timeline/enUS/size.md Normal file
View File

@ -0,0 +1,31 @@
# Size
```html
<n-timeline size="large">
<n-timeline-item
content="Oops"
/>
<n-timeline-item
type="success"
title="Success"
content="success content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="error"
content="Error content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="warning"
title="Warning"
content="warning content"
timestamp="2018-04-03 20:46"
/>
<n-timeline-item
type="info"
title="Info"
content="info content"
timestamp="2018-04-03 20:46"
/>
</n-timeline>
```

145
styles/Timeline.scss
View File

@ -1,6 +1,16 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
$--timeline-header-font-size: (
'medium': 14px,
'large': 16px
);
$--timeline-header-margin-top: (
'medium': 0,
'large': -1px
);
@mixin timeline-type-mixin ($type) {
@include m($type + '-type') {
@include b(timeline-item-timeline) {
@ -11,73 +21,124 @@
}
}
@mixin timeline-size-mixin ($size) {
@include m($size + '-size') {
@include b(timeline-item) {
@include b(timeline-item-content) {
@include e(title) {
margin-top: map-get($--timeline-header-margin-top, $size)
}
@include e(title) {
font-size: map-get($--timeline-header-font-size, $size);
}
}
}
}
}
@include themes-mixin {
@include b(timeline) {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
@include b(timeline-item) {
@include once {
@include timeline-size-mixin ("medium");
@include timeline-size-mixin ("large");
position: relative;
width: 100%;
display: flex;
flex-direction: column;
@include m(left-placement) {
@include b(timeline-item) {
@include b(timeline-item-content) {
text-align: right;
margin-right: 26px;
}
@include b(timeline-item-timeline) {
width: 14px;
right: 0;
}
}
}
@include m(right-placement) {
@include b(timeline-item) {
@include b(timeline-item-content) {
margin-left: 26px;
}
@include b(timeline-item-timeline) {
left: 0;
}
}
}
}
@include b(timeline-item) {
@include timeline-type-mixin('default');
@include timeline-type-mixin('success');
@include timeline-type-mixin('info');
@include timeline-type-mixin('warning');
@include timeline-type-mixin('error');
&:last-child {
@include b(timeline-item-timeline) {
@include e(line) {
display: none;
@include once {
position: relative;
&:last-child {
@include b(timeline-item-timeline) {
@include e(line) {
display: none;
}
}
}
}
@include b(timeline-item-content) {
@include e(title) {
transition: color .3s $default-cubic-bezier;
font-size: 14px;
font-weight: 700;
@include once {
transition: color .3s $default-cubic-bezier;
font-size: 14px;
font-weight: 700;
margin-bottom: 6px;
}
color: $--timeline-item-title-color;
margin-left: 26px;
margin-bottom: 6px;
}
@include e(content) {
transition: color .3s $default-cubic-bezier;
font-size: 14px;
@include once {
transition: color .3s $default-cubic-bezier;
font-size: 14px;
}
color: $--timeline-item-content-color;
margin-left: 26px;
}
@include e(meta) {
transition: color .3s $default-cubic-bezier;
font-size: 12px;
@include once {
transition: color .3s $default-cubic-bezier;
font-size: 12px;
margin-top: 6px;
margin-bottom: 20px;
}
color: $--timeline-item-meta-color;
margin-top: 6px;
margin-left: 26px;
margin-bottom: 20px;
}
}
@include b(timeline-item-timeline) {
width: 26px;
position: absolute;
left: 0;
top: 2px;
bottom: 0;
height: 100%;
@include e(circle) {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;;
width: 14px;
height: 14px;
border-radius: 7px;
box-sizing: border-box;
border-style: solid;
border-width: 2px;
@include once {
width: 26px;
position: absolute;
top: 2px;
bottom: 0;
height: 100%;
}
@include once {
@include e(circle) {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
width: 14px;
height: 14px;
border-radius: 7px;
box-sizing: border-box;
border-style: solid;
border-width: 2px;
}
}
@include e(line) {
transition: background-color .3s $default-cubic-bezier;
position: absolute;
top: 14px;
left: 6px;
bottom: 0px;
width: 2px;
@include once {
transition: background-color .3s $default-cubic-bezier;
position: absolute;
top: 14px;
left: 6px;
bottom: 0px;
width: 2px;
}
background-color: $--timeline-line-background-color;
}
}

12
styles/themes/dark/components/Timeline.scss
View File

@ -1,13 +1,13 @@
@mixin setup-dark-timeline {
$--timeline-item-circle-border-color: (
'default': $--n-primary-color,
'info': $--info-6,
'error': $--error-6,
'success': $--success-6,
'warning': $--warning-6
'default': $--n-meta-text-color,
'info': $--info-hs,
'error': $--error-hs,
'success': $--success-hs,
'warning': $--warning-hs
) !global;
$--timeline-item-title-color: $--n-text-color !global;
$--timeline-item-content-color: $--n-secondary-text-color !global;
$--timeline-item-meta-color: rgba(255, 255, 255, .45) !global;
$--timeline-item-meta-color: $--n-meta-text-color !global;
$--timeline-line-background-color: rgba(255, 255, 255, .2) !global;
}

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

@ -1,6 +1,6 @@
@mixin setup-light-timeline {
$--timeline-item-circle-border-color: (
'default': $--n-primary-color,
'default': $--n-meta-text-color,
'info': $--info-6,
'error': $--error-6,
'success': $--success-6,
@ -8,6 +8,6 @@
) !global;
$--timeline-item-title-color: $--n-text-color !global;
$--timeline-item-content-color: $--n-secondary-text-color !global;
$--timeline-item-meta-color: rgba(0, 0, 0, .45) !global;
$--timeline-item-meta-color: $--n-meta-text-color !global;
$--timeline-line-background-color: rgba(0, 0, 0, .15) !global;
}