139 lines
3 KiB
SCSS
139 lines
3 KiB
SCSS
@use '../../../style/include' as *;
|
|
|
|
@mixin q-dependent-line-container($vars, $q) {
|
|
.line {
|
|
height: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
|
|
|
|
&:before {
|
|
height: calc(100% - #{$q} - #{map_get($vars, $icon-size)} / 2);
|
|
}
|
|
&:after {
|
|
top: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
|
|
}
|
|
}
|
|
.date {
|
|
top: calc(#{$q} - 0.5ch);
|
|
}
|
|
}
|
|
|
|
@include responsive() using ($vars) {
|
|
section.timeline-element {
|
|
display: flex;
|
|
width: map_get($vars, $body-width);
|
|
margin: auto;
|
|
|
|
.line-container {
|
|
position: relative;
|
|
@include q-dependent-line-container($vars, 33%);
|
|
min-width: 160px;
|
|
|
|
.line {
|
|
border-left: map_get($vars, $line-width) solid
|
|
map_get($vars, $accent-color);
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
|
|
&:before {
|
|
left: 0;
|
|
bottom: 0;
|
|
border-left: map_get($vars, $line-width) solid
|
|
map_get($vars, $accent-color);
|
|
}
|
|
|
|
&:after {
|
|
@include square(map_get($vars, $icon-size));
|
|
border-radius: 1000px;
|
|
border: map_get($vars, $line-width) solid
|
|
map_get($vars, $accent-color);
|
|
left: -1 * map_get($vars, $icon-size) / 2 +
|
|
map_get($vars, $line-width) / 2;
|
|
}
|
|
}
|
|
|
|
.date {
|
|
@include special-text-font($vars);
|
|
position: absolute;
|
|
transform-origin: left center;
|
|
transform: rotate(30deg)
|
|
translateX(map_get($vars, $icon-size) / 2 + 6px) translateY(-10%);
|
|
|
|
padding-right: map_get($vars, $normal-margin);
|
|
}
|
|
}
|
|
|
|
@include on-large-screen {
|
|
&:not(:first-of-type) .card {
|
|
margin-top: map_get($vars, $large-margin);
|
|
}
|
|
}
|
|
|
|
@include on-small-screen {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.line-container {
|
|
@include q-dependent-line-container($vars, 50%);
|
|
height: 150px;
|
|
width: 50%;
|
|
|
|
.date {
|
|
transform: translateX(map_get($vars, $icon-size) / 2 + 12px)
|
|
translateY(-10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
@include card-base($vars);
|
|
border-radius: map_get($vars, $border-radius);
|
|
background-color: map_get($vars, $card-color);
|
|
|
|
& > *:not(:first-child) {
|
|
margin-top: map_get($vars, $line-height);
|
|
}
|
|
|
|
.content {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h2 {
|
|
@include sub-title-font($vars);
|
|
}
|
|
|
|
& > p {
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
.more {
|
|
overflow: hidden;
|
|
height: 0;
|
|
transition: height map_get($vars, $transition-time);
|
|
}
|
|
|
|
.buttons {
|
|
position: relative;
|
|
margin-top: map_get($vars, $line-height);
|
|
|
|
.show-more,
|
|
.show-less {
|
|
transition: opacity map_get($vars, $transition-time);
|
|
}
|
|
|
|
.show-more {
|
|
opacity: 1;
|
|
}
|
|
|
|
.show-less {
|
|
@include absolute-center();
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|