From e96a3c09878a0686ad76f6bb73bcdbbdabb2bae2 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 13 Dec 2019 22:34:00 +0800 Subject: [PATCH] refactor(timeline): code clean, default type item style change --- .../components/timeline/enUS/basic.md | 8 +- .../components/timeline/enUS/index.md | 2 + .../components/timeline/enUS/itemPlacement.md | 32 ++++ .../components/timeline/enUS/size.md | 31 ++++ styles/Timeline.scss | 145 +++++++++++++----- styles/themes/dark/components/Timeline.scss | 12 +- styles/themes/light/components/Timeline.scss | 4 +- 7 files changed, 180 insertions(+), 54 deletions(-) create mode 100644 demo/documentation/components/timeline/enUS/itemPlacement.md create mode 100644 demo/documentation/components/timeline/enUS/size.md diff --git a/demo/documentation/components/timeline/enUS/basic.md b/demo/documentation/components/timeline/enUS/basic.md index 885db3012..68ba17f83 100644 --- a/demo/documentation/components/timeline/enUS/basic.md +++ b/demo/documentation/components/timeline/enUS/basic.md @@ -6,24 +6,24 @@ /> diff --git a/demo/documentation/components/timeline/enUS/index.md b/demo/documentation/components/timeline/enUS/index.md index 3193bae27..e3e227250 100644 --- a/demo/documentation/components/timeline/enUS/index.md +++ b/demo/documentation/components/timeline/enUS/index.md @@ -1,4 +1,6 @@ # Timeline ```demo basic +size +item-placement ``` \ No newline at end of file diff --git a/demo/documentation/components/timeline/enUS/itemPlacement.md b/demo/documentation/components/timeline/enUS/itemPlacement.md new file mode 100644 index 000000000..bccd6876c --- /dev/null +++ b/demo/documentation/components/timeline/enUS/itemPlacement.md @@ -0,0 +1,32 @@ +# Item Placement +Left. .thgiR +```html + + + + + + + +``` \ No newline at end of file diff --git a/demo/documentation/components/timeline/enUS/size.md b/demo/documentation/components/timeline/enUS/size.md new file mode 100644 index 000000000..49b915cc8 --- /dev/null +++ b/demo/documentation/components/timeline/enUS/size.md @@ -0,0 +1,31 @@ +# Size +```html + + + + + + + +``` \ No newline at end of file diff --git a/styles/Timeline.scss b/styles/Timeline.scss index 437c6b8c3..ddc20dc82 100644 --- a/styles/Timeline.scss +++ b/styles/Timeline.scss @@ -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; } } diff --git a/styles/themes/dark/components/Timeline.scss b/styles/themes/dark/components/Timeline.scss index 39d1a1d82..8e2830941 100644 --- a/styles/themes/dark/components/Timeline.scss +++ b/styles/themes/dark/components/Timeline.scss @@ -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; } \ No newline at end of file diff --git a/styles/themes/light/components/Timeline.scss b/styles/themes/light/components/Timeline.scss index ebdc00073..1057028c0 100644 --- a/styles/themes/light/components/Timeline.scss +++ b/styles/themes/light/components/Timeline.scss @@ -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; } \ No newline at end of file