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

 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
 
 
h2 {
 
h2 {
 
   margin: 3em 0 0 0;
 
   margin: 3em 0 0 0;
Line 6: Line 5:
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
}
 
}
−
 
 
/* -------------------------------------
 
/* -------------------------------------
 
  * timeline
 
  * timeline
Line 25: Line 23:
  
 
.date {
 
.date {
−
   margin-top: -10px;
+
   margin-top:-20px;
 
   top: 50%;
 
   top: 50%;
−
   left: -170px;
+
   left: -120px;
−
   font-size: 0.90em;
+
   font-size: 1.3em;
−
   line-height: 15px;
+
   line-height: 16px;
 
   position: absolute;
 
   position: absolute;
 
   z-index:100;
 
   z-index:100;
Line 86: Line 84:
  
 
label {
 
label {
−
   font-size: 1.2em;
+
   font-size: 1.9em;
−
   line-hight:1.3em;
+
   line-hight:2.2em;
 
   position: absolute;
 
   position: absolute;
 
   z-index: 100;
 
   z-index: 100;
 
   cursor: pointer;
 
   cursor: pointer;
 
   top: 20px;
 
   top: 20px;
−
   left:10px;
+
   left:20px;
−
   transition: transform 0.2s linear;
+
   transition: transform 0.1s linear;
 
}
 
}
  
Line 102: Line 100:
 
.radio:checked + .relative label {
 
.radio:checked + .relative label {
 
   cursor: auto;
 
   cursor: auto;
−
   transform: translateX(42px);
+
   transform: translateX(0px);
 
}
 
}
 
.radio:checked + .relative .circle {
 
.radio:checked + .relative .circle {
Line 110: Line 108:
 
   display:inline-block;
 
   display:inline-block;
 
   width:100%;
 
   width:100%;
−
   text-align:center;
+
   text-align:center !important;
 
}
 
}
 
.radio:checked ~ .content {
 
.radio:checked ~ .content {
−
   max-height: 1200px;
+
   max-height: 3000px;
 
   border-color: #FAEBD7;
 
   border-color: #FAEBD7;
 
   margin-right: 20px;
 
   margin-right: 20px;
 
   transform: translateX(20px);
 
   transform: translateX(20px);
−
   transition: max-height 0.7s linear, border-color 0.4s linear, transform 0.2s linear;
+
   transition: max-height 0.2s linear, border-color 0.15s linear, transform 0.1s linear;
 
}
 
}
 
.radio:checked ~ .content p {
 
.radio:checked ~ .content p {
−
   max-height: 1200px;
+
   max-height: 3000px;
 
   color: #000000;
 
   color: #000000;
 
   transition: color 0.3s linear 0.3s;
 
   transition: color 0.3s linear 0.3s;

Latest revision as of 03:01, 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.2s linear, border-color 0.15s 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;
 }