Difference between revisions of "Team:XMU-China/css/timelineCss"
| (26 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
h2 { | h2 { | ||
margin: 3em 0 0 0; | margin: 3em 0 0 0; | ||
| Line 13: | Line 5: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | |||
/* ------------------------------------- | /* ------------------------------------- | ||
* timeline | * timeline | ||
| Line 19: | Line 10: | ||
#timeline { | #timeline { | ||
list-style: none; | list-style: none; | ||
| − | margin: 20px 0 20px | + | margin: 20px 0 20px 100px; |
padding-left: 30px; | padding-left: 30px; | ||
| − | border-left: 8px solid # | + | border-left: 8px solid #FAEBD7; |
} | } | ||
#timeline li { | #timeline li { | ||
| − | margin: | + | margin: 30px 0; |
position: relative; | position: relative; | ||
} | } | ||
| Line 32: | Line 23: | ||
.date { | .date { | ||
| − | margin-top: - | + | margin-top:-20px; |
top: 50%; | top: 50%; | ||
| − | left: - | + | left: -120px; |
| − | font-size: | + | font-size: 1.3em; |
| − | line-height: | + | line-height: 16px; |
position: absolute; | position: absolute; | ||
| + | z-index:100; | ||
} | } | ||
| Line 47: | Line 39: | ||
height: 10px; | height: 10px; | ||
background: #48b379; | background: #48b379; | ||
| − | border: 5px solid # | + | border: 5px solid #FAEBD7; |
border-radius: 50%; | border-radius: 50%; | ||
display: block; | display: block; | ||
| Line 57: | Line 49: | ||
padding: 50px 20px 0; | padding: 50px 20px 0; | ||
border-color: transparent; | border-color: transparent; | ||
| − | border | + | border:2px solid #FAEBD7; |
| − | + | ||
border-radius: 0.5em; | border-radius: 0.5em; | ||
position: relative; | position: relative; | ||
| Line 93: | Line 84: | ||
label { | label { | ||
| − | font-size: 1. | + | font-size: 1.9em; |
| + | line-hight:2.2em; | ||
position: absolute; | position: absolute; | ||
z-index: 100; | z-index: 100; | ||
cursor: pointer; | cursor: pointer; | ||
top: 20px; | top: 20px; | ||
| − | transition: transform 0. | + | left:20px; |
| + | transition: transform 0.1s linear; | ||
} | } | ||
| Line 107: | Line 100: | ||
.radio:checked + .relative label { | .radio:checked + .relative label { | ||
cursor: auto; | cursor: auto; | ||
| − | transform: translateX( | + | transform: translateX(0px); |
} | } | ||
.radio:checked + .relative .circle { | .radio:checked + .relative .circle { | ||
background: #f98262; | background: #f98262; | ||
| + | } | ||
| + | .radio:checked ~ label{ | ||
| + | display:inline-block; | ||
| + | width:100%; | ||
| + | text-align:center !important; | ||
} | } | ||
.radio:checked ~ .content { | .radio:checked ~ .content { | ||
| − | max-height: | + | max-height: 3000px; |
| − | border-color: # | + | border-color: #FAEBD7; |
margin-right: 20px; | margin-right: 20px; | ||
transform: translateX(20px); | transform: translateX(20px); | ||
| − | transition: max-height 0. | + | 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: | + | max-height: 3000px; |
| − | color: # | + | color: #000000; |
transition: color 0.3s linear 0.3s; | transition: color 0.3s linear 0.3s; | ||
} | } | ||
| Line 150: | Line 148: | ||
.content { | .content { | ||
padding-top: 45px; | padding-top: 45px; | ||
| − | border-color: # | + | border-color: #FAEBD7; |
} | } | ||
.content:before, .content:after { | .content:before, .content:after { | ||
| Line 178: | Line 176: | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
| − | |||
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 * ------------------------------------- */
- timeline {
list-style: none; margin: 20px 0 20px 100px; padding-left: 30px; border-left: 8px solid #FAEBD7;
}
- timeline li {
margin: 30px 0; position: relative;
}
- 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;
}
