Team:Evry/CSS/timeline

From 2014.igem.org

(Difference between revisions)
Line 102: Line 102:
     -moz-animation: cd-bounce-1 0.6s;
     -moz-animation: cd-bounce-1 0.6s;
     animation: cd-bounce-1 0.6s;
     animation: cd-bounce-1 0.6s;
 +
  }
 +
 +
.cssanimations .cd-timeline-content.is-hidden {
 +
    visibility: hidden;
 +
  }
 +
  .cssanimations .cd-timeline-content.bounce-in {
 +
    visibility: visible;
 +
    -webkit-animation: cd-bounce-2 0.6s;
 +
    -moz-animation: cd-bounce-2 0.6s;
 +
    animation: cd-bounce-2 0.6s;
   }
   }
    
    

Revision as of 23:06, 19 August 2014

  1. cd-timeline h2 {

color: #000; font-weight: bold; }

  1. timeline {

color: #262829 !important; background-color: #e9f0f5 !important; }

/* --------------------------------

Primary style

*/

img { 

 max-width: 100%;

}

h1, h2 { 

 font-family: "Open Sans", sans-serif;
 font-weight: bold;

}

/* --------------------------------

Modules - reusable parts of our design

*/

.cd-container { 

 /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 width: 90%;
 max-width: 1170px;
 margin: 0 auto;

} .cd-container::after { 

 /* clearfix */
 content: ;
 display: table;
 clear: both;

}

/* --------------------------------

Main components

*/
  1. cd-timeline { 
 position: relative;
 padding: 2em 0;
 margin-top: 2em;
 margin-bottom: 2em;
 text-align:left !important;

}

  1. cd-timeline::before { 
 /* this is the vertical line */
 content: ;
 position: absolute;
 top: 0;
 left: 18px;
 height: 100%;
 width: 4px;
 background: #d7e4ed;

}

.cd-timeline-block { 

 position: relative;
 margin: 2em 0;

} .cd-timeline-block:after { 

 content: "";
 display: table;
 clear: both;

} .cd-timeline-block:first-child { 

 margin-top: 0;

} .cd-timeline-block:last-child { 

 margin-bottom: 0;

}

.cd-timeline-img { 

 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;

}

.cssanimations .cd-timeline-img.is-hidden { 

   visibility: hidden;
 }
 .cssanimations .cd-timeline-img.bounce-in {
   visibility: visible;
   -webkit-animation: cd-bounce-1 0.6s;
   -moz-animation: cd-bounce-1 0.6s;
   animation: cd-bounce-1 0.6s;
 }

.cssanimations .cd-timeline-content.is-hidden { 

   visibility: hidden;
 }
 .cssanimations .cd-timeline-content.bounce-in {
   visibility: visible;
   -webkit-animation: cd-bounce-2 0.6s;
   -moz-animation: cd-bounce-2 0.6s;
   animation: cd-bounce-2 0.6s;
 }

.cd-timeline-img img { 

 display: block;
 width: 24px;
 height: 24px;
 position: relative;
 left: 50%;
 top: 50%;
 margin-left: -12px;
 margin-top: -12px;

} .cd-timeline-img.cd-picture { 

 background: #75ce66;

} .cd-timeline-img.cd-movie { 

 background: #c03b44;

} .cd-timeline-img.cd-location { 

 background: #f0ca45;

}


@-webkit-keyframes cd-bounce-1 { 

 0% {
   opacity: 0;
   -webkit-transform: scale(0.5);
 }

 60% {
   opacity: 1;
   -webkit-transform: scale(1.2);
 }

 100% {
   -webkit-transform: scale(1);
 }

} @-moz-keyframes cd-bounce-1 { 

 0% {
   opacity: 0;
   -moz-transform: scale(0.5);
 }

 60% {
   opacity: 1;
   -moz-transform: scale(1.2);
 }

 100% {
   -moz-transform: scale(1);
 }

} @keyframes cd-bounce-1 { 

 0% {
   opacity: 0;
   -webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
   -o-transform: scale(0.5);
   transform: scale(0.5);
 }

 60% {
   opacity: 1;
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
 }

 100% {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} .cd-timeline-content { 

 position: relative;
 margin-left: 60px;
 background: white;
 border-radius: 0.25em;
 padding: 1em;
 box-shadow: 0 3px 0 #d7e4ed;

} .cd-timeline-content:after { 

 content: "";
 display: table;
 clear: both;

} .cd-timeline-content h2 { 

 color: #303e49;
 margin-top: 0px !important;

} .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { 

 font-size: 13px;
 font-size: 0.8125rem;

} .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { 

 display: inline-block;
 color: #000;

} .cd-timeline-content p { 

 margin: 1em 0;
 line-height: 1.6;

} .cd-timeline-content .cd-read-more { 

 float: right;
 padding: .8em 1em;
 background: #acb7c0;
 color: white;
 border-radius: 0.25em;

} .no-touch .cd-timeline-content .cd-read-more:hover { 

 background-color: #bac4cb;

} .cd-timeline-content .cd-date { 

 float: left;
 padding: .8em 0;
 opacity: .7;

} .cd-timeline-content::before { 

 content: ;
 position: absolute;
 top: 16px;
 right: 100%;
 height: 0;
 width: 0;
 border: 7px solid transparent;
 border-right: 7px solid white;

} @media only screen and (min-width: 768px) { 

 .cd-timeline-content h2 {
   font-size: 20px;
   font-size: 1.25rem;
 }
 .cd-timeline-content p {
   font-size: 16px;
   font-size: 1rem;
 }
 .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
   font-size: 14px;
   font-size: 0.875rem;
 }

}

@-webkit-keyframes cd-bounce-2 { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(-100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(20px);
 }

 100% {
   -webkit-transform: translateX(0);
 }

} @-moz-keyframes cd-bounce-2 { 

 0% {
   opacity: 0;
   -moz-transform: translateX(-100px);
 }

 60% {
   opacity: 1;
   -moz-transform: translateX(20px);
 }

 100% {
   -moz-transform: translateX(0);
 }

} @keyframes cd-bounce-2 { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(-100px);
   -moz-transform: translateX(-100px);
   -ms-transform: translateX(-100px);
   -o-transform: translateX(-100px);
   transform: translateX(-100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
   -ms-transform: translateX(20px);
   -o-transform: translateX(20px);
   transform: translateX(20px);
 }

 100% {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }

} @-webkit-keyframes cd-bounce-2-inverse { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(-20px);
 }

 100% {
   -webkit-transform: translateX(0);
 }

} @-moz-keyframes cd-bounce-2-inverse { 

 0% {
   opacity: 0;
   -moz-transform: translateX(100px);
 }

 60% {
   opacity: 1;
   -moz-transform: translateX(-20px);
 }

 100% {
   -moz-transform: translateX(0);
 }

} @keyframes cd-bounce-2-inverse { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(100px);
   -moz-transform: translateX(100px);
   -ms-transform: translateX(100px);
   -o-transform: translateX(100px);
   transform: translateX(100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(-20px);
   -moz-transform: translateX(-20px);
   -ms-transform: translateX(-20px);
   -o-transform: translateX(-20px);
   transform: translateX(-20px);
 }

 100% {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }

}

Retrieved from "http://2014.igem.org/Team:Evry/CSS/timeline"