"
Team:Aalto-Helsinki/timeline.css
From 2014.igem.org
(Difference between revisions)
Vaakapallo (Talk | contribs) (Created page with "- →* timeline panels *: .timeline li .timeline-panel { width: 46%; float: left; background: #fff; border: 1px solid #d4d4d4; padding: 20px; position: relative; -web...") |
Vaakapallo (Talk | contribs) |
||
| Line 1: | Line 1: | ||
| + | body { background: #333; } | ||
| + | |||
| + | img { border: 0; max-width: 100%; } | ||
| + | |||
| + | .page-header h1 { | ||
| + | font-size: 3.26em; | ||
| + | text-align: center; | ||
| + | color: #efefef; | ||
| + | text-shadow: 1px 1px 0 #000; | ||
| + | } | ||
| + | |||
| + | /** timeline box structure **/ | ||
| + | .timeline { | ||
| + | list-style: none; | ||
| + | padding: 20px 0 20px; | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | .timeline:before { | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | position: absolute; | ||
| + | content: " "; | ||
| + | width: 3px; | ||
| + | background-color: #eee; | ||
| + | left: 50%; | ||
| + | margin-left: -1.5px; | ||
| + | } | ||
| + | |||
| + | .tldate { | ||
| + | display: block; | ||
| + | width: 200px; | ||
| + | background: #414141; | ||
| + | border: 3px solid #212121; | ||
| + | color: #ededed; | ||
| + | margin: 0 auto; | ||
| + | padding: 3px 0; | ||
| + | font-weight: bold; | ||
| + | text-align: center; | ||
| + | -webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35); | ||
| + | } | ||
| + | |||
| + | .timeline li { | ||
| + | margin-bottom: 25px; | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | .timeline li:before, .timeline li:after { | ||
| + | content: " "; | ||
| + | display: table; | ||
| + | } | ||
| + | .timeline li:after { | ||
| + | clear: both; | ||
| + | } | ||
| + | .timeline li:before, .timeline li:after { | ||
| + | content: " "; | ||
| + | display: table; | ||
| + | } | ||
| + | |||
/** timeline panels **/ | /** timeline panels **/ | ||
.timeline li .timeline-panel { | .timeline li .timeline-panel { | ||
| Line 14: | Line 73: | ||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); | ||
} | } | ||
| - | + | ||
/** panel arrows **/ | /** panel arrows **/ | ||
.timeline li .timeline-panel:before { | .timeline li .timeline-panel:before { | ||
| Line 27: | Line 86: | ||
content: " "; | content: " "; | ||
} | } | ||
| - | + | ||
.timeline li .timeline-panel:after { | .timeline li .timeline-panel:after { | ||
position: absolute; | position: absolute; | ||
| Line 45: | Line 104: | ||
border: 0; | border: 0; | ||
} | } | ||
| - | + | ||
.timeline li.timeline-inverted .timeline-panel { | .timeline li.timeline-inverted .timeline-panel { | ||
float: right; | float: right; | ||
} | } | ||
| - | + | ||
.timeline li.timeline-inverted .timeline-panel:before { | .timeline li.timeline-inverted .timeline-panel:before { | ||
border-left-width: 0; | border-left-width: 0; | ||
| Line 56: | Line 115: | ||
right: auto; | right: auto; | ||
} | } | ||
| - | + | ||
.timeline li.timeline-inverted .timeline-panel:after { | .timeline li.timeline-inverted .timeline-panel:after { | ||
border-left-width: 0; | border-left-width: 0; | ||
| Line 64: | Line 123: | ||
} | } | ||
| - | |||
| - | + | /** timeline circle icons **/ | |
| - | + | .timeline li .tl-circ { | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | /** timeline | + | |
| - | .timeline | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
position: absolute; | position: absolute; | ||
| - | + | top: 23px; | |
| - | + | ||
| - | + | ||
left: 50%; | left: 50%; | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
text-align: center; | text-align: center; | ||
| - | - | + | background: #6a8db3; |
| + | color: #fff; | ||
| + | width: 35px; | ||
| + | height: 35px; | ||
| + | line-height: 35px; | ||
| + | margin-left: -16px; | ||
| + | border: 3px solid #90acc7; | ||
| + | border-top-right-radius: 50%; | ||
| + | border-top-left-radius: 50%; | ||
| + | border-bottom-right-radius: 50%; | ||
| + | border-bottom-left-radius: 50%; | ||
| + | z-index: 99999; | ||
} | } | ||
| - | + | ||
| - | + | ||
| - | margin-bottom: | + | /** timeline content **/ |
| - | + | ||
| + | .tl-heading h4 { | ||
| + | margin: 0; | ||
| + | color: #c25b4e; | ||
| + | } | ||
| + | |||
| + | .tl-body p, .tl-body ul { | ||
| + | margin-bottom: 0; | ||
| + | } | ||
| + | |||
| + | .tl-body > p + p { | ||
| + | margin-top: 5px; | ||
} | } | ||
| Line 117: | Line 166: | ||
} | } | ||
} | } | ||
| - | + | ||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
.page-header h1 { font-size: 1.8em; } | .page-header h1 { font-size: 1.8em; } | ||
| - | + | ||
ul.timeline:before { | ul.timeline:before { | ||
left: 40px; | left: 40px; | ||
} | } | ||
| - | + | ||
.tldate { width: 140px; } | .tldate { width: 140px; } | ||
| - | + | ||
ul.timeline li .timeline-panel { | ul.timeline li .timeline-panel { | ||
width: calc(100% - 90px); | width: calc(100% - 90px); | ||
| Line 132: | Line 181: | ||
width: -webkit-calc(100% - 90px); | width: -webkit-calc(100% - 90px); | ||
} | } | ||
| - | + | ||
ul.timeline li .tl-circ { | ul.timeline li .tl-circ { | ||
top: 22px; | top: 22px; | ||
left: 22px; | left: 22px; | ||
margin-left: 0; | margin-left: 0; | ||
| - | + | ||
} | } | ||
ul.timeline > li > .tldate { | ul.timeline > li > .tldate { | ||
margin: 0; | margin: 0; | ||
} | } | ||
| - | + | ||
ul.timeline > li > .timeline-panel { | ul.timeline > li > .timeline-panel { | ||
float: right; | float: right; | ||
} | } | ||
| - | + | ||
ul.timeline > li > .timeline-panel:before { | ul.timeline > li > .timeline-panel:before { | ||
border-left-width: 0; | border-left-width: 0; | ||
| Line 153: | Line 202: | ||
right: auto; | right: auto; | ||
} | } | ||
| - | + | ||
ul.timeline > li > .timeline-panel:after { | ul.timeline > li > .timeline-panel:after { | ||
border-left-width: 0; | border-left-width: 0; | ||
Revision as of 08:08, 20 August 2014
body { background: #333; }
img { border: 0; max-width: 100%; }
.page-header h1 {
font-size: 3.26em; text-align: center; color: #efefef; text-shadow: 1px 1px 0 #000;
}
/** timeline box structure **/ .timeline {
list-style: none; padding: 20px 0 20px; position: relative;
}
.timeline:before {
top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eee; left: 50%; margin-left: -1.5px;
}
.tldate {
display: block; width: 200px; background: #414141; border: 3px solid #212121; color: #ededed; margin: 0 auto; padding: 3px 0; font-weight: bold; text-align: center; -webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);
}
.timeline li {
margin-bottom: 25px; position: relative;
}
.timeline li:before, .timeline li:after {
content: " "; display: table;
} .timeline li:after {
clear: both;
} .timeline li:before, .timeline li:after {
content: " "; display: table;
}
/** timeline panels **/ .timeline li .timeline-panel {
width: 46%; float: left; background: #fff; border: 1px solid #d4d4d4; padding: 20px; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
/** panel arrows **/ .timeline li .timeline-panel:before {
position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " ";
}
.timeline li .timeline-panel:after {
position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " ";
} .timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
top:0; right:0; display: none; border: 0;
}
.timeline li.timeline-inverted .timeline-panel {
float: right;
}
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0; border-right-width: 15px; left: -15px; right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0; border-right-width: 14px; left: -14px; right: auto;
}
/** timeline circle icons **/
.timeline li .tl-circ {
position: absolute; top: 23px; left: 50%; text-align: center; background: #6a8db3; color: #fff; width: 35px; height: 35px; line-height: 35px; margin-left: -16px; border: 3px solid #90acc7; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; z-index: 99999;
}
/** timeline content **/
.tl-heading h4 {
margin: 0; color: #c25b4e;
}
.tl-body p, .tl-body ul {
margin-bottom: 0;
}
.tl-body > p + p {
margin-top: 5px;
}
/** media queries **/ @media (max-width: 991px) {
.timeline li .timeline-panel {
width: 44%;
}
}
@media (max-width: 700px) {
.page-header h1 { font-size: 1.8em; }
ul.timeline:before {
left: 40px;
}
.tldate { width: 140px; }
ul.timeline li .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline li .tl-circ {
top: 22px;
left: 22px;
margin-left: 0;
}
ul.timeline > li > .tldate {
margin: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
