blackbeard420/terminal.css
1
0
Fork 0
mirror of https://github.com/Gioni06/terminal.css synced 2025-03-09 17:19:04 -04:00
Code Issues Projects Releases Wiki Activity

Add timeline component

Browse Source
This commit is contained in:
Ben 2019-07-15 18:48:21 +01:00
parent dc5b43ece2
commit 5f9c04fe7f
4 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
lib/terminal.css
View File

@ -764,6 +764,39 @@ select:-webkit-autofill:focus {
padding: var(--global-space);
}
.terminal-timeline {
position: relative;
padding-left: 70px;
}
.terminal-timeline:before {
content: ' ';
background: var(--secondary-color);
display: inline-block;
position: absolute;
left: 35px;
width: 2px;
height: 100%;
z-index: 400;
}
.terminal-timeline .terminal-card {
margin-bottom: 25px;
}
.terminal-timeline .terminal-card:before {
content: ' ';
background: var(--invert-font-color);
border: 2px solid var(--secondary-color);
display: inline-block;
position: absolute;
margin-top: 25px;
left: 26px;
width: 15px;
height: 15px;
z-index: 400;
}
.terminal-alert {
color: var(--font-color);
padding: 1em;

1
src/partials/aside.ejs
View File

@ -18,6 +18,7 @@
<li><a href="#Forms">Forms</a></li>
<li><a href="#Progress">Progress Bar</a></li>
<li><a href="#Cards">Cards</a></li>
<li><a href="#Timeline">Timeline</a></li>
<li><a href="#Alerts">Alerts</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#Figure">Image with caption</a></li>

2
src/partials/components.ejs
View File

@ -20,6 +20,8 @@
<hr />
<%- include('components/card') %>
<hr />
<%- include('components/timeline') %>
<hr />
<%- include('components/alerts') %>
<hr />
<%- include('components/figure') %>

22
src/partials/components/timeline.ejs Normal file
View File

@ -0,0 +1,22 @@
<section>
<header><h2 id="Timeline">Timeline</h2></header>
<div class="terminal-timeline">
<div class="terminal-card">
<header>Card Title</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas
ex vero enim in doloribus officiis ullam vel nam esse sapiente velit
incidunt. Eaque quod et, aut maiores excepturi sint.
</div>
</div>
<div class="terminal-card">
<header>Card Title</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas
ex vero enim in doloribus officiis ullam vel nam esse sapiente velit
incidunt. Eaque quod et, aut maiores excepturi sint.
</div>
</div>
</div>
<br />
</section>