From 66055cd96af572187495fe5c75fa2a51be438f3d Mon Sep 17 00:00:00 2001 From: Aleksandr Rogozin Date: Fri, 16 Aug 2019 17:23:57 +0300 Subject: [PATCH 1/6] Migration the timeline component to "bootstrap 4". --- build/scss/_mixins.scss | 2 +- build/scss/_timeline.scss | 50 ++- pages/UI/timeline.html | 754 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 777 insertions(+), 29 deletions(-) create mode 100644 pages/UI/timeline.html diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss index 95fcd6fb1..fa4bb833b 100644 --- a/build/scss/_mixins.scss +++ b/build/scss/_mixins.scss @@ -267,7 +267,7 @@ // Background Variant @mixin background-variant($name, $color) { .bg-#{$name} { - background-color: #{$color}; + background-color: #{$color} !important; &, > a { diff --git a/build/scss/_timeline.scss b/build/scss/_timeline.scss index e80e81c69..c334a4125 100644 --- a/build/scss/_timeline.scss +++ b/build/scss/_timeline.scss @@ -3,11 +3,9 @@ // .timeline { - list-style: none; - margin: 0 0 30px; + margin: 0 0 45px; padding: 0; position: relative; - // The line &::before { @include border-radius($border-radius); @@ -20,13 +18,17 @@ top: 0; width: 4px; } + // Element + > div { + &::before, + &::after { + content: ""; + display: table; + } - > li { - @include clearfix; margin-bottom: 15px; margin-right: 10px; position: relative; - // The content > .timeline-item { @include box-shadow($card-shadow); @@ -38,7 +40,6 @@ margin-top: 0; padding: 0; position: relative; - // The time and header > .time { color: #999; @@ -46,7 +47,7 @@ font-size: 12px; padding: 10px; } - + // Header > .timeline-header { border-bottom: 1px solid $card-border-color; color: $gray-700; @@ -54,21 +55,30 @@ line-height: 1.1; margin: 0; padding: 10px; - + // Link in header > a { font-weight: 600; } } - // Item body and footer > .timeline-body, > .timeline-footer { padding: 10px; } - } + > .timeline-body { + > img { + margin: 10px; + } + } - // The icons + > .timeline-footer { + > a { + color: $white; + } + } + } + // The icons at line > .fa, > .fas, > .far, @@ -87,12 +97,10 @@ width: 30px; } } - // Time label > .time-label { > span { @include border-radius(4px); - background-color: $white; display: inline-block; font-weight: 600; @@ -100,17 +108,3 @@ } } } - -.timeline-inverse { - > li { - > .timeline-item { - @include box-shadow(none); - background: $gray-100; - border: 1px solid $gray-300; - - > .timeline-header { - border-bottom-color: $gray-300; - } - } - } -} diff --git a/pages/UI/timeline.html b/pages/UI/timeline.html new file mode 100644 index 000000000..87f1b62d0 --- /dev/null +++ b/pages/UI/timeline.html @@ -0,0 +1,754 @@ + + + + + + AdminLTE 3 | Timeline + + + + + + + + + + + +
+ + + + + + + + +
+ +
+
+
+
+

Timeline

+
+
+
    +
  1. Home
    2. +
  2. Timeline
    3. +
+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+ 10 Feb. 2014 +
+ + +
+ +
+ 12:05 +

Support Team sent you an email

+ +
+ Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, + weebly ning heekya handango imeem plugg dopplr jibjab, movity + jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle + quora plaxo ideeli hulu weebly balihoo... +
+
+ Read more + Delete +
+
+
+ + +
+ +
+ 5 mins ago +

Sarah Young accepted your friend request

+
+
+ + +
+ +
+ 27 mins ago +

Jay White commented on your post

+
+ Take me to your leader! + Switzerland is small and neutral! + We are more like Germany, ambitious and misunderstood! +
+
+ View comment +
+
+
+ + +
+ 3 Jan. 2014 +
+ + +
+ +
+ 2 days ago +

Mina Lee uploaded new photos

+
+ ... + ... + ... + ... + ... +
+
+
+ + +
+ + +
+ 5 days ago + +

Mr. Doe shared a video

+ +
+
+ +
+
+
+ See comments +
+
+
+ +
+ +
+
+
+ +
+
+ + +
+ +
+ + +
+
+ Version 3.0.0-beta.2 +
+ Copyright © 2014-2019 AdminLTE.io. All rights + reserved. +
+ + + + +
+ + + + + + + + + + + + + + From acdbe25cfad92fcf238251eebdd32051ccf888e7 Mon Sep 17 00:00:00 2001 From: Aleksandr Rogozin Date: Sat, 17 Aug 2019 01:03:58 +0300 Subject: [PATCH 2/6] Update profile page -> timeline part --- pages/examples/profile.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/pages/examples/profile.html b/pages/examples/profile.html index 5f76a1665..b7c13448b 100644 --- a/pages/examples/profile.html +++ b/pages/examples/profile.html @@ -810,16 +810,16 @@
-
    +
    -
  • +
    10 Feb. 2014 -
    • +
    -
  • +
    @@ -838,10 +838,10 @@ Delete
    -
    • +
-
  • +
    @@ -850,10 +850,10 @@

    Sarah Young accepted your friend request

    -
    • + -
  • +
    @@ -870,17 +870,17 @@ View comment
    -
    • + -
  • +
    3 Jan. 2014 -
    • + -
  • +
    @@ -895,12 +895,12 @@ ...
    -
    • + -
  • +
    -
    • - + + From 02fe8249195fa9b240bba8cd1aff4672482bdacf Mon Sep 17 00:00:00 2001 From: Aleksandr Rogozin Date: Sat, 17 Aug 2019 12:20:47 +0300 Subject: [PATCH 3/6] Returned timeline-inverse css class. --- build/scss/_timeline.scss | 14 ++++++++++++++ pages/examples/profile.html | 10 +++++----- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/build/scss/_timeline.scss b/build/scss/_timeline.scss index c334a4125..7f0e43437 100644 --- a/build/scss/_timeline.scss +++ b/build/scss/_timeline.scss @@ -108,3 +108,17 @@ } } } + +.timeline-inverse { + > div { + > .timeline-item { + @include box-shadow(none); + background: $gray-100; + border: 1px solid $gray-300; + + > .timeline-header { + border-bottom-color: $gray-300; + } + } + } +} diff --git a/pages/examples/profile.html b/pages/examples/profile.html index b7c13448b..cbe7672c7 100644 --- a/pages/examples/profile.html +++ b/pages/examples/profile.html @@ -810,7 +810,7 @@
    -
    +
    @@ -889,10 +889,10 @@

    Mina Lee uploaded new photos

    - ... - ... - ... - ... + ... + ... + ... + ...
    From d27aa490264a5b9c3edd74b8d320cf2d75028c56 Mon Sep 17 00:00:00 2001 From: Aleksandr Rogozin Date: Wed, 21 Aug 2019 23:58:55 +0300 Subject: [PATCH 4/6] Add a sidebar link across all demo pages --- index.html | 6 ++++++ index2.html | 6 ++++++ index3.html | 6 ++++++ pages/UI/buttons.html | 6 ++++++ pages/UI/general.html | 6 ++++++ pages/UI/icons.html | 6 ++++++ pages/UI/modals.html | 6 ++++++ pages/UI/navbar.html | 6 ++++++ pages/UI/sliders.html | 6 ++++++ pages/calendar.html | 6 ++++++ pages/charts/chartjs.html | 6 ++++++ pages/charts/flot.html | 6 ++++++ pages/charts/inline.html | 6 ++++++ pages/examples/404.html | 6 ++++++ pages/examples/500.html | 6 ++++++ pages/examples/blank.html | 6 ++++++ pages/examples/contacts.html | 6 ++++++ pages/examples/e_commerce.html | 6 ++++++ pages/examples/invoice.html | 6 ++++++ pages/examples/language-menu.html | 6 ++++++ pages/examples/legacy-user-menu.html | 6 ++++++ pages/examples/profile.html | 6 ++++++ pages/examples/project_add.html | 6 ++++++ pages/examples/project_detail.html | 6 ++++++ pages/examples/project_edit.html | 6 ++++++ pages/examples/projects.html | 6 ++++++ pages/forms/advanced.html | 6 ++++++ pages/forms/editors.html | 6 ++++++ pages/forms/general.html | 6 ++++++ pages/layout/boxed.html | 6 ++++++ pages/layout/collapsed-sidebar.html | 6 ++++++ pages/layout/fixed-footer.html | 6 ++++++ pages/layout/fixed-sidebar.html | 6 ++++++ pages/layout/fixed-topnav.html | 6 ++++++ pages/mailbox/compose.html | 6 ++++++ pages/mailbox/mailbox.html | 6 ++++++ pages/mailbox/read-mail.html | 6 ++++++ pages/tables/data.html | 6 ++++++ pages/tables/jsgrid.html | 6 ++++++ pages/tables/simple.html | 6 ++++++ pages/widgets.html | 6 ++++++ 41 files changed, 246 insertions(+) diff --git a/index.html b/index.html index 4bb41c1b9..6e31e786a 100644 --- a/index.html +++ b/index.html @@ -339,6 +339,12 @@

    Navbar & Tabs

    +
  • + + +

    Timeline

    +     +
  • diff --git a/index2.html b/index2.html index ee820de6a..7626c75f2 100644 --- a/index2.html +++ b/index2.html @@ -326,6 +326,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/index3.html b/index3.html index 62e0b3427..41dd46fd0 100644 --- a/index3.html +++ b/index3.html @@ -336,6 +336,12 @@ to get the desired effect

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html index 66a2cfea1..f04aa0e9d 100644 --- a/pages/UI/buttons.html +++ b/pages/UI/buttons.html @@ -328,6 +328,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/UI/general.html b/pages/UI/general.html index 89f7683f0..cf0a051c0 100644 --- a/pages/UI/general.html +++ b/pages/UI/general.html @@ -374,6 +374,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/UI/icons.html b/pages/UI/icons.html index 38aeda921..0eae2c6a3 100644 --- a/pages/UI/icons.html +++ b/pages/UI/icons.html @@ -328,6 +328,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/UI/modals.html b/pages/UI/modals.html index 3ec390d4a..dc3c32201 100644 --- a/pages/UI/modals.html +++ b/pages/UI/modals.html @@ -332,6 +332,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/UI/navbar.html b/pages/UI/navbar.html index bc5f8a4f2..323ad16a5 100644 --- a/pages/UI/navbar.html +++ b/pages/UI/navbar.html @@ -334,6 +334,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/UI/sliders.html b/pages/UI/sliders.html index ef8c29869..a84da7e55 100644 --- a/pages/UI/sliders.html +++ b/pages/UI/sliders.html @@ -333,6 +333,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/calendar.html b/pages/calendar.html index 3177bc40c..2669d0efb 100644 --- a/pages/calendar.html +++ b/pages/calendar.html @@ -334,6 +334,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/charts/chartjs.html b/pages/charts/chartjs.html index 8e3c0d35c..a457d3b1a 100644 --- a/pages/charts/chartjs.html +++ b/pages/charts/chartjs.html @@ -328,6 +328,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/charts/flot.html b/pages/charts/flot.html index e7db66353..4554d5340 100644 --- a/pages/charts/flot.html +++ b/pages/charts/flot.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/charts/inline.html b/pages/charts/inline.html index 7ef88d8ea..6247b8ce5 100644 --- a/pages/charts/inline.html +++ b/pages/charts/inline.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/404.html b/pages/examples/404.html index d48432146..e2e154eee 100644 --- a/pages/examples/404.html +++ b/pages/examples/404.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/500.html b/pages/examples/500.html index f05a46a55..0acda8f55 100644 --- a/pages/examples/500.html +++ b/pages/examples/500.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/blank.html b/pages/examples/blank.html index 380c2f122..3633b10bf 100644 --- a/pages/examples/blank.html +++ b/pages/examples/blank.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/contacts.html b/pages/examples/contacts.html index b6d58e0d4..9317a5b80 100644 --- a/pages/examples/contacts.html +++ b/pages/examples/contacts.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/e_commerce.html b/pages/examples/e_commerce.html index a764c760c..196854a88 100644 --- a/pages/examples/e_commerce.html +++ b/pages/examples/e_commerce.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/invoice.html b/pages/examples/invoice.html index eb1169273..9d65baffb 100644 --- a/pages/examples/invoice.html +++ b/pages/examples/invoice.html @@ -328,6 +328,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/language-menu.html b/pages/examples/language-menu.html index 2e1cf92c2..9bf3a472a 100644 --- a/pages/examples/language-menu.html +++ b/pages/examples/language-menu.html @@ -342,6 +342,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/legacy-user-menu.html b/pages/examples/legacy-user-menu.html index 5355e86fc..b491958e4 100644 --- a/pages/examples/legacy-user-menu.html +++ b/pages/examples/legacy-user-menu.html @@ -357,6 +357,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/profile.html b/pages/examples/profile.html index cbe7672c7..4c336e634 100644 --- a/pages/examples/profile.html +++ b/pages/examples/profile.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/project_add.html b/pages/examples/project_add.html index dad182deb..eff7cc6a9 100644 --- a/pages/examples/project_add.html +++ b/pages/examples/project_add.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/project_detail.html b/pages/examples/project_detail.html index 1b8b5c557..1ded4de6c 100644 --- a/pages/examples/project_detail.html +++ b/pages/examples/project_detail.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/project_edit.html b/pages/examples/project_edit.html index 8eb49f884..8ffc42c1d 100644 --- a/pages/examples/project_edit.html +++ b/pages/examples/project_edit.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/examples/projects.html b/pages/examples/projects.html index cb3a32c3e..98fc55719 100644 --- a/pages/examples/projects.html +++ b/pages/examples/projects.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/forms/advanced.html b/pages/forms/advanced.html index fff5c1970..4a90f38c2 100644 --- a/pages/forms/advanced.html +++ b/pages/forms/advanced.html @@ -341,6 +341,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/forms/editors.html b/pages/forms/editors.html index 39114c6f6..d19ffbfe7 100644 --- a/pages/forms/editors.html +++ b/pages/forms/editors.html @@ -331,6 +331,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/forms/general.html b/pages/forms/general.html index 86d33d1bb..9c45e37bb 100644 --- a/pages/forms/general.html +++ b/pages/forms/general.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/layout/boxed.html b/pages/layout/boxed.html index 6bc1485a8..00586d69d 100644 --- a/pages/layout/boxed.html +++ b/pages/layout/boxed.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/layout/collapsed-sidebar.html b/pages/layout/collapsed-sidebar.html index 0cd19250c..0ddc2d10f 100644 --- a/pages/layout/collapsed-sidebar.html +++ b/pages/layout/collapsed-sidebar.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/layout/fixed-footer.html b/pages/layout/fixed-footer.html index 112c9700d..c1e8ad67d 100644 --- a/pages/layout/fixed-footer.html +++ b/pages/layout/fixed-footer.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/layout/fixed-sidebar.html b/pages/layout/fixed-sidebar.html index 2bcb0927b..0801e9316 100644 --- a/pages/layout/fixed-sidebar.html +++ b/pages/layout/fixed-sidebar.html @@ -331,6 +331,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/layout/fixed-topnav.html b/pages/layout/fixed-topnav.html index 6fe997510..3c901d19d 100644 --- a/pages/layout/fixed-topnav.html +++ b/pages/layout/fixed-topnav.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/mailbox/compose.html b/pages/mailbox/compose.html index de1ba96eb..a6881c73c 100644 --- a/pages/mailbox/compose.html +++ b/pages/mailbox/compose.html @@ -331,6 +331,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/mailbox/mailbox.html b/pages/mailbox/mailbox.html index 87ef09d3f..a605fa314 100644 --- a/pages/mailbox/mailbox.html +++ b/pages/mailbox/mailbox.html @@ -330,6 +330,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/mailbox/read-mail.html b/pages/mailbox/read-mail.html index c549389a3..2c54eb91e 100644 --- a/pages/mailbox/read-mail.html +++ b/pages/mailbox/read-mail.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/tables/data.html b/pages/tables/data.html index 258f9ec47..2607e5420 100644 --- a/pages/tables/data.html +++ b/pages/tables/data.html @@ -331,6 +331,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/tables/jsgrid.html b/pages/tables/jsgrid.html index a23130bbe..6c481a0c8 100644 --- a/pages/tables/jsgrid.html +++ b/pages/tables/jsgrid.html @@ -332,6 +332,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/tables/simple.html b/pages/tables/simple.html index 950558ff8..6425ea578 100644 --- a/pages/tables/simple.html +++ b/pages/tables/simple.html @@ -328,6 +328,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/widgets.html b/pages/widgets.html index f60a0563c..c600bdc04 100644 --- a/pages/widgets.html +++ b/pages/widgets.html @@ -328,6 +328,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • From 2d36befc0479c4acf035fe77e4b8515e2b1924f1 Mon Sep 17 00:00:00 2001 From: REJack Date: Thu, 22 Aug 2019 15:14:32 +0200 Subject: [PATCH 5/6] added docs preset for timeline --- docs/_config.yml | 2 ++ docs/components/timeline.md | 11 +++++++++++ 2 files changed, 13 insertions(+) create mode 100644 docs/components/timeline.md diff --git a/docs/_config.yml b/docs/_config.yml index e93d253b0..a07ac9728 100755 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -52,6 +52,8 @@ navigation: url: components/boxes.html - title: Direct Chat url: components/direct-chat.html + - title: Timeline + url: components/timeline.html - title: JavaScript icon: fas fa-code url: javascript diff --git a/docs/components/timeline.md b/docs/components/timeline.md new file mode 100644 index 000000000..869286f02 --- /dev/null +++ b/docs/components/timeline.md @@ -0,0 +1,11 @@ +--- +layout: page +title: Timeline Component +--- + +INTOTEXT + +```html +HTML MARKUP +``` +{: .max-height-300} From a5241489f828d228d20922f2e6375a818cfd7a36 Mon Sep 17 00:00:00 2001 From: Aleksandr Rogozin Date: Fri, 23 Aug 2019 13:18:21 +0300 Subject: [PATCH 6/6] Timeline component docs --- docs/components/timeline.md | 52 +++++++++++++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/docs/components/timeline.md b/docs/components/timeline.md index 869286f02..d519bf15c 100644 --- a/docs/components/timeline.md +++ b/docs/components/timeline.md @@ -3,9 +3,57 @@ layout: page title: Timeline Component --- -INTOTEXT +The timeline component displays an event history. +You can use it for descriptions of events that occurred in a particular time section. + +##### Default ```html -HTML MARKUP + +
    + +
    + 23 Aug. 2019 +
    +
    + + + +
    + + 12:05 + +

    Support Team sent you an email

    + +
    + Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, + weebly ning heekya handango imeem plugg dopplr jibjab, movity + jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle + quora plaxo ideeli hulu weebly balihoo... +
    + +
    + Read more + Delete +
    +
    +
    + +
    + +
    +
    ``` {: .max-height-300} + +##### Extra style + +There is an additional class for styling. +It darkens the elements, highlighting it against the general background. +You can use it with adding `.timeline-inverse` to `.timeline`. + +```html +
    + +
    +```