diff --git a/src/pages/UI/timeline.html b/src/pages/UI/timeline.html new file mode 100644 index 000000000..6b83ede86 --- /dev/null +++ b/src/pages/UI/timeline.html @@ -0,0 +1,162 @@ + + + + + + @@include('./_head.html', { + "path": "../..", + "title": "AdminLTE 4 | Timeline Elements" + }) + + +
+ @@include('./dashboard/_topbar.html', { + "path": "../.." + }) + + @@include('./dashboard/_sidenav.html', { + "mainPage": "forms", + "page": "general", + "path": "../.." + }) + +
+
+
+
+
+

Timeline

+
+
+
    +
  1. Home
    2. +
  2. Timeline
    3. +
+
+
+
+
+ +
+
+ +
+
+ +
+ +
+ 10 Feb. 2023 +
+ + +
+ +
+ 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. 2023 +
+ + +
+ +
+ 2 days ago +

Mina Lee uploaded new photos

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

Mr. Doe shared a video

+ +
+
+ +
+
+
+ See comments +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +
+ + + @@include('./dashboard/_footer.html', { + "path": "../.." + }) +
+ + + @@include('./_scripts.html', { + "path": "../.." + }) + + diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html index 338b16e84..ff88e75ce 100644 --- a/src/partials/dashboard/_sidenav.html +++ b/src/partials/dashboard/_sidenav.html @@ -95,6 +95,23 @@ +
  • + + +

    + UI Elements + +

    +     + +
  • diff --git a/src/scss/_timeline.scss b/src/scss/_timeline.scss new file mode 100644 index 000000000..12b1d7fc3 --- /dev/null +++ b/src/scss/_timeline.scss @@ -0,0 +1,151 @@ +// +// Component: Timeline +// + +.timeline { + position: relative; + padding: 0; + margin: 0 0 45px; + // The line + &::before { + @include border-radius($border-radius); + position: absolute; + top: 0; + bottom: 0; + left: 31px; + width: 4px; + margin: 0; + content: ""; + background-color: $gray-300; + } + // Element + > div { + &::before, + &::after { + display: table; + content: ""; + } + + position: relative; + margin-right: 10px; + margin-bottom: 15px; + // The content + > .timeline-item { + @include box-shadow($lte-card-shadow); + @include border-radius($border-radius); + position: relative; + padding: 0; + margin-top: 0; + margin-right: 15px; + margin-left: 60px; + color: $gray-700; + background-color: $white; + // The time and header + > .time { + float: right; + padding: 10px; + font-size: 12px; + color: #999; + } + // Header + > .timeline-header { + padding: 10px; + margin: 0; + font-size: 16px; + line-height: 1.1; + color: $gray-700; + border-bottom: 1px solid $card-border-color; + // Link in header + > a { + font-weight: 600; + } + } + // Item body and footer + > .timeline-body, + > .timeline-footer { + padding: 10px; + } + + > .timeline-body { + > img { + margin: 10px; + } + > dl, + ol, + ul { + margin: 0; + } + } + + + } + + /* stylelint-disable selector-class-pattern */ + // The icons at line + > i, + > svg, + > img, + > object, + > iframe { + position: absolute; + top: 0; + left: 18px; + width: 30px; + height: 30px; + font-size: 16px; + line-height: 30px; + text-align: center; + background-color: $gray-500; + border-radius: 50%; // stylelint-disable-line property-disallowed-list + } + > .svg-inline--fa { + padding: 7px; + } + /* stylelint-enable selector-class-pattern */ + } + // Time label + > .time-label { + > span { + @include border-radius(4px); + display: inline-block; + padding: 5px; + font-weight: 600; + background-color: $white; + } + } +} + +.timeline-inverse { + > div { + > .timeline-item { + @include box-shadow(none); + background-color: $gray-100; + border: 1px solid $gray-300; + + > .timeline-header { + border-bottom-color: $gray-300; + } + } + } +} + +// @include dark-mode () { +// .timeline { +// &::before { +// background-color: $gray-600; +// } +// > div > .timeline-item { +// color: $white; +// background-color: $dark; +// border-color: $gray-600; + +// > .timeline-header { +// color: $gray-400; +// border-color: $gray-600; +// } +// > .time { +// color: $gray-400; +// } +// } +// } +// } diff --git a/src/scss/parts/_extra-components.scss b/src/scss/parts/_extra-components.scss index 0b1543e97..af17b7d36 100644 --- a/src/scss/parts/_extra-components.scss +++ b/src/scss/parts/_extra-components.scss @@ -4,6 +4,7 @@ @import "../small-box"; @import "../info-box"; -@import "../direct-chat"; +@import "../timeline"; @import "../products"; +@import "../direct-chat"; @import "../users-list";