diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss index 11b08986d..38fba643d 100644 --- a/build/scss/_mixins.scss +++ b/build/scss/_mixins.scss @@ -301,7 +301,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..7f0e43437 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; @@ -102,7 +110,7 @@ } .timeline-inverse { - > li { + > div { > .timeline-item { @include box-shadow(none); background: $gray-100; diff --git a/docs/_config.yml b/docs/_config.yml index 1524159af..731828151 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: Ribbons url: components/ribbons.html - title: JavaScript diff --git a/docs/components/timeline.md b/docs/components/timeline.md new file mode 100644 index 000000000..d519bf15c --- /dev/null +++ b/docs/components/timeline.md @@ -0,0 +1,59 @@ +--- +layout: page +title: Timeline Component +--- + +The timeline component displays an event history. +You can use it for descriptions of events that occurred in a particular time section. + +##### Default + +```html + +
+ +
+ 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 +
+ +
+``` diff --git a/index.html b/index.html index 5e4d9c4f3..4fa40899a 100644 --- a/index.html +++ b/index.html @@ -339,6 +339,12 @@

Navbar & Tabs

+
  • + + +

    Timeline

    +     +
  • diff --git a/index2.html b/index2.html index b28fcd1bf..66c11ef88 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 0d0a333d2..f76406c81 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/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. +
    + + + + +
    + + + + + + + + + + + + + + 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 368bbeae0..19ae506d1 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 a18b4c7ec..802cec51e 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 edf7dd57c..d3432f91c 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 1af78d8f4..736d876dc 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 ad43c2b8b..eacbc8ec2 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 a99c056eb..eec139473 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 5f76a1665..4c336e634 100644 --- a/pages/examples/profile.html +++ b/pages/examples/profile.html @@ -329,6 +329,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • @@ -810,16 +816,16 @@
    -
    -
  • +
    @@ -850,10 +856,10 @@

    Sarah Young accepted your friend request

    -
    • + -
  • +
    @@ -870,17 +876,17 @@ View comment
    -
    • + -
  • +
    3 Jan. 2014 -
    • + -
  • +
    @@ -889,18 +895,18 @@

    Mina Lee uploaded new photos

    - ... - ... - ... - ... + ... + ... + ... + ...
    -
    • + -
  • +
    -
    • - + + diff --git a/pages/examples/project_add.html b/pages/examples/project_add.html index e17471a26..090ab3b3d 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 021e9a8bd..a1b109928 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 095c63ab0..b7b6e1796 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 6e4a273fb..d276650c4 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 62bffb517..d0137e784 100644 --- a/pages/forms/advanced.html +++ b/pages/forms/advanced.html @@ -342,6 +342,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +
  • diff --git a/pages/forms/editors.html b/pages/forms/editors.html index 68ffbac81..fe60b27ac 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 7e04ff1a6..286a24900 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 4033ba27f..5243b23af 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 e831f7764..bf3026907 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 900dbe0ca..e2d0d3d2a 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 c89c7d830..2ef3fc3fd 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 be35e1c05..ea0981518 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 ddafbe28c..5b096877a 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 938f0ed9c..4e22fe639 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 508285117..5f840986f 100644 --- a/pages/widgets.html +++ b/pages/widgets.html @@ -328,6 +328,12 @@

    Navbar & Tabs

    • +
  • + + +

    Timeline

    +     +