|
|
| (2 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | <style> | + | <includeonly> |
| − | .timeline-steps {
| + | <div class="timeline-step"> |
| − | display: flex;
| + | <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="Milestone<!--{$date}-->" data-original-title="<!--{$date}-->"> |
| − | justify-content: center;
| + | <div class="inner-circle"></div ><a href="<!--{$link}-->"> |
| − | flex-wrap: wrap
| + | <p class="h6 mt-3 mb-1"><!--{$date}--></p> |
| − | }
| + | <p class="h6 text-muted mb-0 mb-lg-0"><!--{$title}--></p></ a> |
| − | | + | </div> |
| − | .timeline-steps .timeline-step {
| |
| − | align-items: center;
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | position: relative;
| |
| − | margin: 1rem
| |
| − | }
| |
| − | | |
| − | @media (min-width:768px) {
| |
| − | .timeline-steps .timeline-step:not(:last-child):after {
| |
| − | content: "";
| |
| − | display: block;
| |
| − | border-top: .25rem dotted #3b82f6;
| |
| − | width: 3.46rem;
| |
| − | position: absolute;
| |
| − | left: 7.5rem;
| |
| − | top: .3125rem
| |
| − | }
| |
| − | .timeline-steps .timeline-step:not(:first-child):before {
| |
| − | content: "";
| |
| − | display: block;
| |
| − | border-top: .25rem dotted #3b82f6;
| |
| − | width: 3.8125rem;
| |
| − | position: absolute;
| |
| − | right: 7.5rem;
| |
| − | top: .3125rem
| |
| − | }
| |
| − | }
| |
| − | | |
| − | .timeline-steps .timeline-content {
| |
| − | width: 10rem;
| |
| − | text-align: center
| |
| − | }
| |
| − | | |
| − | .timeline-steps .timeline-content .inner-circle {
| |
| − | border-radius: 1.5rem;
| |
| − | height: 1rem;
| |
| − | width: 1rem;
| |
| − | display: inline-flex;
| |
| − | align-items: center;
| |
| − | justify-content: center;
| |
| − | background-color: #3b82f6
| |
| − | }
| |
| − | | |
| − | .timeline-steps .timeline-content .inner-circle:before {
| |
| − | content: "";
| |
| − | background-color: #3b82f6;
| |
| − | display: inline-block;
| |
| − | height: 3rem;
| |
| − | width: 3rem;
| |
| − | min-width: 3rem;
| |
| − | border-radius: 6.25rem;
| |
| − | opacity: .5
| |
| − | }
| |
| − | </style>
| |
| − | | |
| − | <div class="container">
| |
| − | <div class="row">
| |
| − | <div class="col">
| |
| − | <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
| |
| − | <!--{foreach from=$milestone key=key item=item}-->
| |
| − | <div class="timeline-step"> | |
| − | <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" | |
| − | title="" data-content="Milestone<!--{$item.date}-->"
| |
| − | data-original-title="<!--{$item.date}-->">
| |
| − | <div class="inner-circle"></div> | |
| − | <p class="h6 mt-3 mb-1"><!--{$ item.date}--></p> | |
| − | <p class="h6 text-muted mb-0 mb-lg-0"><!--{$ item.title}--></p></ div> | |
| − | </div>
| |
| − | <!--{/foreach}-->
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| | </div> | | </div> |
| | + | </includeonly> |
