147 lines
2.5 KiB
SCSS
147 lines
2.5 KiB
SCSS
//
|
|
// Timeline
|
|
//
|
|
|
|
.timeline {
|
|
list-style: none;
|
|
position: relative;
|
|
padding: 50px 0 50px;
|
|
margin: 0;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
background: $timeline-border-color;
|
|
bottom: 0;
|
|
left: 50%;
|
|
top: 0;
|
|
content: "";
|
|
width: 3px;
|
|
margin-left: -1.5px;
|
|
}
|
|
}
|
|
|
|
.timeline-top:before,
|
|
.timeline-bottom:before {
|
|
background: $timeline-border-color;
|
|
position: absolute;
|
|
height: 3px;
|
|
width: 50px;
|
|
display: block;
|
|
content: "";
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -25px;
|
|
}
|
|
|
|
.timeline-top:before {
|
|
top: 0;
|
|
}
|
|
|
|
.timeline > li {
|
|
margin-bottom: 50px;
|
|
position: relative;
|
|
|
|
&:after,
|
|
&:before {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.timeline > li > .timeline-panel {
|
|
position: relative;
|
|
border: 1px solid $border-color;
|
|
background: $body-bg;
|
|
border-radius: $timeline-border-radius;
|
|
box-shadow: 0 0 60px 0 rgba(0, 0, 0, .07);
|
|
transition: 0.3s ease-in-out;
|
|
float: left;
|
|
width: 46%;
|
|
|
|
.timeline-preview img {
|
|
width: 100%;
|
|
}
|
|
|
|
.timeline-body {
|
|
padding: 40px 45px;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-10px);
|
|
|
|
&:before {
|
|
transform: translateY(10px);
|
|
}
|
|
}
|
|
|
|
*:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.timeline > li > .timeline-panel:before {
|
|
position: absolute;
|
|
background: $timeline-border-color;
|
|
right: -38px;
|
|
top: 40px;
|
|
transition: 0.3s ease-in-out;
|
|
content: " ";
|
|
width: 37px;
|
|
height: 3px;
|
|
display: block;
|
|
}
|
|
|
|
.timeline > li:nth-child(even) > .timeline-panel {
|
|
border: 1px solid $timeline-border-color;
|
|
float: right;
|
|
|
|
&:before {
|
|
right: auto;
|
|
left: -38px;
|
|
}
|
|
}
|
|
|
|
.timeline > li > .timeline-badge {
|
|
position: absolute;
|
|
background: #fff;
|
|
border: 3px solid $timeline-border-color;
|
|
border-radius: 100%;
|
|
height: 20px;
|
|
width: 20px;
|
|
margin-left: -10px;
|
|
text-align: center;
|
|
z-index: 1;
|
|
left: 50%;
|
|
top: 32px;
|
|
}
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
|
|
ul.timeline:before,
|
|
ul.timeline > li > .timeline-badge,
|
|
ul.timeline > li > .timeline-panel:before {
|
|
display: none;
|
|
}
|
|
|
|
ul.timeline > li > .timeline-panel {
|
|
border: 1px solid $timeline-border-color;
|
|
float: right;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|