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..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 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..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 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/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 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 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 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

    +     +