File: /home/crm/public_html/wwwroot/assets/scss/theme/_timeline-v.scss
/**=====================
42. Timeline CSS Start
==========================**/
.activity{
.media{
margin-bottom: 30px;
&:last-child{
margin-bottom: 0;
}
.gradient-round{
position: relative;
width: 53px;
height: 53px;
background-image: $gradient-primary;
border-radius: 100%;
top:-18px;
svg{
position: absolute;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 18px;
right: 0;
margin: 0 auto;
path, line, circle{
color: $white;
}
}
&.gradient-line-1{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 62px;
bottom: -77px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.small-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 19px;
bottom: -34px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.medium-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 53px;
bottom: -68px;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
.media-body{
h6{
font-weight: 600;
margin-bottom: 30px;
span{
font-weight: normal;
color: $light-text;
}
}
p{
width: 80%;
}
}
}
}
.timeline-small{
.media{
margin-bottom: 30px;
&:last-child{
margin-bottom: 0;
}
.timeline-round{
position: relative;
width: 53px;
height: 53px;
border-radius: 100%;
top:-18px;
svg{
position: absolute;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 18px;
right: 0;
margin: 0 auto;
path, line, circle{
color: $white;
}
}
&.timeline-line-1{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 62px;
bottom: -77px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.small-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 19px;
bottom: -34px;
left: 0;
right: 0;
margin: 0 auto;
}
}
&.medium-line{
&:after{
position: absolute;
content: '';
background-color: #e9e9e9;
width: 2px;
height: 53px;
bottom: -68px;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
.media-body{
h6{
font-weight: 600;
margin-bottom: 30px;
span{
font-weight: normal;
color: $light-text;
}
}
p{
width: 80%;
}
}
}
}
.cd-container {
width:90%;
max-width:1170px;
margin:0 auto;
z-index:1;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
// header {
// height: 200px;
// line-height: 200px;
// text-align: center;
// background: $dark-color;
// h1 {
// color: $white;
// font-size: 18px;
// }
// }
@media only screen and(min-width: 1170px) {
// header {
// height: 300px;
// line-height: 300px;
// h1 {
// font-size: 24px;
// }
// }
#cd-timeline::before {
left: 50% !important;
margin-left: -2px;
}
.cd-timeline-block {
margin: 4em 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&:nth-child(even) {
.cd-timeline-content {
float:right;
.cd-date {
left:auto;
right:122%;
text-align:right;
padding-right:15px;
}
}
.cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: $light-gray;
}
}
&:nth-child(odd){
.cd-timeline-content{
.cd-date{
padding-left:15px;
}
}
}
}
.cd-timeline-img {
width:50px;
height:50px;
left:50%;
margin-left: -30px;
> i{
font-size: 18px;
top: 50%;
left: 50%;
padding: 3px;
}
}
.cssanimations {
.cd-timeline-img {
&.is-hidden {
visibility: hidden;
}
&.bounce-in {
visibility: visible;
animation: cd-bounce-1 0.6s;
}
}
.cd-timeline-content {
&.is-hidden {
visibility: hidden;
}
&.bounce-in {
visibility: visible;
animation: cd-bounce-2 0.6s;
}
}
.cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
animation: cd-bounce-2-inverse 0.6s;
}
}
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
.cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
}
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color:$light-gray;
}
}
#cd-timeline {
position: relative;
padding: 2em 0;
}
#cd-timeline::before {
content: '';
position: absolute;
top: 0;
font-size: 1.5rem;
height: 100%;
width: 2px;
background: $light-gray;
left: -15px;
}
.cd-timeline-block {
position: relative;
margin: 30px 0;
&:after {
content: "";
display: table;
clear: both;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
border-radius: 4px;
i {
display: block;
position: relative;
left: 45%;
top: 44%;
margin-left: -12px;
margin-top: -12px;
font-size: 27px;
color: $white;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
transform: scale(0.5);
}
60% {
opacity: 1;
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
background-color:$light-background ;
border-radius: 4px;
padding: 30px;
border: 1px solid $light-gray;
p{
padding-top: 9px;
}
h4{
margin-bottom:0;
font-weight:700;
}
&:after {
content: "";
display: table;
clear: both;
}
audio{
width: 100%;
}
.cd-date {
font-weight:700;
font-size: 13px;
display: inline-block;
float: left;
padding: .8em 0 0;
opacity: .7;
}
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-left: 7px solid $light-gray;
}
@media only screen and(min-width: 768px) {
.cd-timeline-content {
.cd-date {
font-size: 14px;
padding-bottom: 0;
}
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@-moz-keyframes cd-bounce-2 {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
opacity: 1;
transform: translateX(20px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
transform: translateX(100px);
}
60% {
opacity: 1;
transform: translateX(-20px);
}
100% {
transform: translateX(0);
}
}
@media only screen and(max-width: 1169px){
.cd-timeline-block{
.cd-timeline-img{
left: -2px;
height: 30px;
width: 30px;
margin-left: -30px;
top: 14px;
z-index: 8;
> i{
font-size: 15px;
top: 16px;
left: 17px;
padding: 3px;
}
}
}
.landing-main{
#cd-timeline::before {
left: -39px;
}
.cd-timeline-block{
.cd-timeline-img{
left: -34px;
height: 50px;
width: 50px;
top: 1px;
z-index: 8;
> i{
font-size: 23px;
top: 21px;
left: 7px;
padding: 3px;
}
}
}
}
}
@media only screen and(max-width: 576px){
.cd-timeline-content {
padding: 15px;
h4{
font-size: 18px;
}
}
}
/**=====================
42. Timeline CSS Ends
==========================**/