You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
3.6 KiB
189 lines
3.6 KiB
// Variables
|
|
//------------------------------------------------------
|
|
$timeline-division-background-color: $mediumgray-light !default;
|
|
$timeline-years-background-color: $mediumgray-dark !default;
|
|
$timeline-years-color: $white !default;
|
|
$timeline-dotted-color: $aqua-light !default;
|
|
$timeline-dotted-border-color: $lightgray-light !default;
|
|
|
|
$timeline-radius: 4px !default;
|
|
|
|
// Exports
|
|
//------------------------------------------------------
|
|
|
|
@include exports("timeline") {
|
|
|
|
/**
|
|
* timeline
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
.timeline {
|
|
& dl {
|
|
position: relative;
|
|
top: 0;
|
|
margin: 0;
|
|
padding: 20px 0;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -1px;
|
|
width: 2px;
|
|
content: '';
|
|
background-color: $timeline-division-background-color;
|
|
z-index: 100;
|
|
}
|
|
|
|
& dt {
|
|
position: relative;
|
|
top: 30px;
|
|
padding: 3px 5px;
|
|
margin: 0 auto 30px;
|
|
text-align: center;
|
|
@include radius($type: border-radius, $value: $timeline-radius);
|
|
background-color: $timeline-years-background-color;
|
|
font-weight: normal;
|
|
color: $timeline-years-color;
|
|
width: 120px;
|
|
z-index: 200;
|
|
}
|
|
|
|
& dd {
|
|
position: relative;
|
|
z-index: 200;
|
|
& .circ {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 50%;
|
|
margin-left: -11px;
|
|
border: 4px solid $timeline-dotted-border-color;
|
|
width: 22px;
|
|
height: 22px;
|
|
@include radius($type: border-radius, $value: 50%);
|
|
background-color: $timeline-dotted-color;
|
|
z-index: 200;
|
|
}
|
|
|
|
& .time {
|
|
position: absolute;
|
|
top: 31px;
|
|
left: 50%;
|
|
padding: 10px 20px;
|
|
width: 100px;
|
|
display: inline-block;
|
|
color: $timeline-dotted-color;
|
|
}
|
|
|
|
& .events {
|
|
position: relative;
|
|
margin-top: 31px;
|
|
padding: 10px 10px 0;
|
|
@include radius($type: border-radius, $value: $timeline-radius);
|
|
background-color: $white;
|
|
width: 47%;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 12px;
|
|
width: 0;
|
|
height: 0;
|
|
content: '';
|
|
border-width: 6px;
|
|
border-style: solid;
|
|
}
|
|
|
|
& .events-object {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
& .events-body {
|
|
overflow: hidden;
|
|
zoom: 1;
|
|
|
|
& .events-heading {
|
|
margin: 0 0 10px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.pos-right {
|
|
|
|
& .time {
|
|
margin-left: -100px;
|
|
text-align: right;
|
|
}
|
|
& .events {
|
|
float: right;
|
|
|
|
&:before {
|
|
left: -12px;
|
|
border-color: transparent $white transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
&.pos-left {
|
|
& .time {
|
|
margin-left: 0;
|
|
text-align: left;
|
|
}
|
|
& .events {
|
|
float: left;
|
|
&:before {
|
|
right: -12px;
|
|
border-color: transparent transparent transparent $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.timeline dl {
|
|
&:before {
|
|
left: 60px;
|
|
}
|
|
& dt {
|
|
margin: 0 0 30px;
|
|
}
|
|
& dd {
|
|
& .circ {
|
|
left: 60px;
|
|
}
|
|
& .time {
|
|
left: 0;
|
|
}
|
|
&.pos-left {
|
|
& .time {
|
|
margin-left: 0;
|
|
padding: 10px 0;
|
|
text-align: left;
|
|
}
|
|
& .events {
|
|
float: right;
|
|
width: 84%;
|
|
&:before {
|
|
left: -12px;
|
|
border-color: transparent $white transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
&.pos-right {
|
|
& .time {
|
|
margin-left: 0;
|
|
padding: 10px 0;
|
|
text-align: left;
|
|
}
|
|
& .events {
|
|
float: right;
|
|
width: 84%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|