Difference between revisions of "Team:XMU-China/css/timelineCss"

Revision as of 02:52, 2 November 2017

h2 {

 margin: 3em 0 0 0;
 font-size: 1.5em;
 letter-spacing: 2px;
 text-transform: uppercase;

} /* -------------------------------------

* timeline
* ------------------------------------- */

1. timeline {

 list-style: none;
 margin: 20px 0 20px 100px;
 padding-left: 30px;
 border-left: 8px solid #FAEBD7;

}

1. timeline li {

 margin: 30px 0;
 position: relative;

}

1. timeline p {

 margin: 0 0 15px;

}

.date {

 margin-top:-20px;
 top: 50%;
 left: -120px;
 font-size: 1.3em;
 line-height: 16px;
 position: absolute;
 z-index:100;

}

.circle {

 margin-top: -10px;
 top: 50%;
 left: -44px;
 width: 10px;
 height: 10px;
 background: #48b379;
 border: 5px solid #FAEBD7;
 border-radius: 50%;
 display: block;
 position: absolute;

}

.content {

 max-height: 20px;
 padding: 50px 20px 0;
 border-color: transparent;
 border:2px solid #FAEBD7;
 border-radius: 0.5em;
 position: relative;

} .content:before, .content:after {

 content: "";
 width: 0;
 height: 0;
 border: solid transparent;
 position: absolute;
 pointer-events: none;
 right: 100%;

} .content:before {

 border-right-color: inherit;
 border-width: 20px;
 top: 50%;
 margin-top: -20px;

} .content:after {

 border-right-color: #48b379;
 border-width: 17px;
 top: 50%;
 margin-top: -17px;

} .content p {

 max-height: 0;
 color: transparent;
 text-align: justify;
 word-break: break-word;
 hyphens: auto;
 overflow: hidden;

}

label {

 font-size: 1.9em;
 line-hight:2.2em;
 position: absolute;
 z-index: 100;
 cursor: pointer;
 top: 20px;
 left:20px;
 transition: transform 0.1s linear;

}

.radio {

 display: none;

}

.radio:checked + .relative label {

 cursor: auto;
 transform: translateX(0px);

} .radio:checked + .relative .circle {

 background: #f98262;

} .radio:checked ~ label{

 display:inline-block;
 width:100%;
 text-align:center !important;

} .radio:checked ~ .content {

 max-height: 3000px;
 border-color: #FAEBD7;
 margin-right: 20px;
 transform: translateX(20px);
 transition: max-height 0.3s linear, border-color 0.2s linear, transform 0.1s linear;

} .radio:checked ~ .content p {

 max-height: 3000px;
 color: #000000;
 transition: color 0.3s linear 0.3s;

}

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

* mobile phones (vertical version only)
* ------------------------------------- */

@media screen and (max-width: 767px) {

 #timeline {
   margin-left: 0;
   padding-left: 0;
   border-left: none;
 }
 #timeline li {
   margin: 50px 0;
 }

 label {
   width: 85%;
   font-size: 1.1em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
   transform: translateX(18px);
 }

 .content {
   padding-top: 45px;
   border-color: #FAEBD7;
 }
 .content:before, .content:after {
   border: solid transparent;
   bottom: 100%;
 }
 .content:before {
   border-bottom-color: inherit;
   border-width: 17px;
   top: -16px;
   left: 50px;
   margin-left: -17px;
 }
 .content:after {
   border-bottom-color: #48b379;
   border-width: 20px;
   top: -20px;
   left: 50px;
   margin-left: -20px;
 }
 .content p {
   font-size: 0.9em;
   line-height: 1.4;
 }

 .circle, .date {
   display: none;
 }