Difference between revisions of "Template:Harvard BioDesign/CSS"

Revision as of 13:25, 2 July 2015

           div {
               font-family: Helvetica, Arial, sans-serif;
               box-sizing: border-box;
           }
           .timeline {
               width: 400px;
           }
           .timeline .timeline-item {
               width: 100%;
           }
           .timeline .timeline-item .info, .timeline .timeline-item .year {
               color: #eee;
               display: block;
               float:left;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
           }
           .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
               color: #ccc;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
           }
           .timeline .timeline-item .year {
               font-size: 24px;
               font-weight: bold;
               width: 22%;
           }
           .timeline .timeline-item .info {
               width: 100%;
               width: 78%;
               margin-left: -2px;
               padding: 0 0 40px 35px;
               border-left: 4px solid #aaa;
               font-size: 14px;
               line-height: 20px;
           }
           .timeline .timeline-item .marker {
               background-color: #fff;
               border: 4px solid #aaa;
               height: 20px;
               width: 20px;
               border-radius: 100px;
               display: block;
               float: right;
               margin-right: -14px;
               z-index: 2000;
               position: relative;
           }
           .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
               color: #444;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
           }
           .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
               color: #9DB668;
           }
           .timeline .timeline-item .marker .dot {
               background-color: white;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
               display: block;
               border: 4px solid white;
               height: 12px;
               width: 12px;
               border-radius: 100px;
               float: right;
               z-index: 2000;
               position: relative;
           }
           .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
               background-color: #9DB668;
               box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
           }

Here is the JQuery:

           $(".timeline-item").hover(function () {
               $(".timeline-item").removeClass("active");
               $(this).toggleClass("active");
               $(this).prev(".timeline-item").toggleClass("close");
               $(this).next(".timeline-item").toggleClass("close");
           });