119 lines
2.2 KiB
SCSS
119 lines
2.2 KiB
SCSS
.timeline_container{
|
|
|
|
max-width:800px;
|
|
margin:auto;
|
|
.timeline_line{
|
|
min-height:200px;
|
|
border-left:4px solid rgba(88,88,88,1);
|
|
margin-left:220px;
|
|
|
|
|
|
padding-top:10px;
|
|
|
|
}
|
|
|
|
.timeline_block{
|
|
|
|
position:relative;
|
|
margin-bottom:40px;
|
|
|
|
.tm_date{
|
|
position:absolute;
|
|
left:-77px;
|
|
top:-1px;
|
|
width:50px;
|
|
text-align:right;
|
|
}
|
|
.tm_point{
|
|
top:5px;
|
|
width:12px;
|
|
height:12px;
|
|
border:4px solid $orange;
|
|
background:white;
|
|
border-radius:50%;
|
|
position:absolute;
|
|
left:-12px;
|
|
top:0;
|
|
}
|
|
.tm_content{
|
|
margin-bottom:40px;
|
|
position:relative;
|
|
top:-10px;
|
|
ul{
|
|
padding:0;
|
|
|
|
}
|
|
li{
|
|
margin-left:40px;
|
|
//max-width:700px;
|
|
position:relative;
|
|
box-shadow:0 0 20px rgba(0,0,0,0.1);
|
|
padding-bottom:10px ;
|
|
background:rgba(250,250,250,1);
|
|
border-bottom:4px solid rgba(230,230,230,1);
|
|
border-left:4px solid rgba(230,230,230,1);
|
|
border-radius:5px;
|
|
list-style:none;
|
|
margin-bottom:20px;
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
border: 11px solid transparent;
|
|
top: 10px;
|
|
left: auto;
|
|
right: 100%;
|
|
border-color: transparent;
|
|
border-right-color: rgba(230,230,230,1);
|
|
|
|
|
|
}
|
|
.inner{
|
|
top:0;
|
|
|
|
}
|
|
.images{
|
|
img.small{
|
|
width:190px;
|
|
margin:10px;
|
|
|
|
position:absolute;
|
|
top:0px;
|
|
left:-270px;
|
|
&.first{
|
|
top:30px;
|
|
}
|
|
}
|
|
&:hover{
|
|
|
|
img.large{
|
|
display:block;
|
|
}
|
|
}
|
|
img.large{
|
|
position:absolute;
|
|
display:none;
|
|
top:-1%;
|
|
left:-1%;
|
|
width:102%;
|
|
max-width:102%;
|
|
z-index:2;
|
|
|
|
}}
|
|
p{
|
|
margin:auto;
|
|
max-width:380px;
|
|
}
|
|
p:first-child{
|
|
|
|
margin-top:0;
|
|
padding-top:16px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|