From 66055cd96af572187495fe5c75fa2a51be438f3d Mon Sep 17 00:00:00 2001 From: Aleksandr Rogozin Date: Fri, 16 Aug 2019 17:23:57 +0300 Subject: [PATCH] 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. +
+ + + + +
+ + + + + + + + + + + + + +