Wiki Law School will soon be moving! Please update your bookmarks. Our future address is www.wikilawschool.org |
Template:Timeline/styles.css: Difference between revisions
From wikilawschool.net. Wiki Law School does not provide legal advice. For educational purposes only.
Lost Student (talk | contribs) mNo edit summary |
Lost Student (talk | contribs) No edit summary |
||
(12 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.timeline- | .timeline { | ||
width: 100%; | |||
height: 412px; | |||
padding: 20px; | |||
position:relative; | |||
box-sizing: border-box; | |||
background: #c8ccd1; | |||
overflow: auto; | |||
display: flex; | |||
} | |||
.timieline-title { | |||
font-size: 1.5em; | |||
font-weight: bold; | |||
} | } | ||
. | .timeline-content { | ||
max-width: 300px; | |||
height: 125px; | |||
padding: 20px; | |||
flex-shrink: 0; | |||
flex-grow: 0; | |||
align-self: flex-start; | |||
background: #FFF; | |||
position: relative; | |||
border-radius: 10px; | |||
margin-right: 10px; | |||
box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2); | |||
} | } | ||
.timeline-content:before { | |||
position: absolute; | position: absolute; | ||
width: calc(100% + 14px); | |||
height: 4px; | |||
top: calc(100% + 10px); | |||
top: | background: #FFF; | ||
content: ""; | |||
left: -7px; | |||
border-radius: 5px; | |||
} | } | ||
. | |||
.timeline-content:after { | |||
position: absolute; | |||
width: 4px; | |||
height: 25px; | |||
top: 100%; | |||
left: calc(50% - 10px); | |||
background: #FFF; | |||
content: ""; | |||
} | } | ||
. | .timeline-period { | ||
position: absolute; | position: absolute; | ||
top: calc(100% + 25px); | |||
background: #FFF; | |||
padding: 10px; | |||
width: 100px; | |||
text-align:center; | |||
border-radius: 10px; | |||
left: calc(50% - 70px); | |||
box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2); | |||
} | } | ||
.timeline- | .timeline-period:before { | ||
width: 15px; | |||
height: 15px; | |||
background: #FFF; | |||
border-radius: 50%; | |||
content: ""; | |||
border-radius: | |||
position: absolute; | position: absolute; | ||
top: | top: -20px; | ||
left: - | left: calc(50% - 5.5px); | ||
z-index: 2; | |||
} | } | ||
.timeline- | |||
.timeline-content:nth-child(even) { | |||
align-self: flex-end; | |||
} | } | ||
.timeline- | .timeline-content:nth-child(even):before { | ||
top: -15px; | |||
} | } | ||
.timeline- | .timeline-content:nth-child(even):after { | ||
top: -25px; | |||
} | } | ||
.timeline- | .timeline-content:nth-child(even) .timeline-period { | ||
bottom: 115.25%; | |||
top: unset; | |||
} | } | ||
.timeline-content:nth-child(even) .timeline-period:before { | |||
top: calc(100% + 5px); | |||
} | } |
Latest revision as of 02:07, December 16, 2023
.timeline {
width: 100%;
height: 412px;
padding: 20px;
position:relative;
box-sizing: border-box;
background: #c8ccd1;
overflow: auto;
display: flex;
}
.timieline-title {
font-size: 1.5em;
font-weight: bold;
}
.timeline-content {
max-width: 300px;
height: 125px;
padding: 20px;
flex-shrink: 0;
flex-grow: 0;
align-self: flex-start;
background: #FFF;
position: relative;
border-radius: 10px;
margin-right: 10px;
box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
.timeline-content:before {
position: absolute;
width: calc(100% + 14px);
height: 4px;
top: calc(100% + 10px);
background: #FFF;
content: "";
left: -7px;
border-radius: 5px;
}
.timeline-content:after {
position: absolute;
width: 4px;
height: 25px;
top: 100%;
left: calc(50% - 10px);
background: #FFF;
content: "";
}
.timeline-period {
position: absolute;
top: calc(100% + 25px);
background: #FFF;
padding: 10px;
width: 100px;
text-align:center;
border-radius: 10px;
left: calc(50% - 70px);
box-shadow: 0px 0px 2px 2px rgba(0,0,0, 0.2);
}
.timeline-period:before {
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
content: "";
position: absolute;
top: -20px;
left: calc(50% - 5.5px);
z-index: 2;
}
.timeline-content:nth-child(even) {
align-self: flex-end;
}
.timeline-content:nth-child(even):before {
top: -15px;
}
.timeline-content:nth-child(even):after {
top: -25px;
}
.timeline-content:nth-child(even) .timeline-period {
bottom: 115.25%;
top: unset;
}
.timeline-content:nth-child(even) .timeline-period:before {
top: calc(100% + 5px);
}