SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: adjust timeline sizings for mobile, cleanup component styling

Browse source
This commit is contained in:
Sebin Nyshkim 2023-03-23 13:26:08 +01:00
parent 35d5232575
commit f7ae855221
3 changed files with 47 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/TimelineItem.vue
View file

@ -28,34 +28,21 @@
&:not(:last-child):before {
content: "";
position: absolute;
top: var(--timeline-stroke-position-top);
left: var(--timeline-stroke-position-horizontal);
inset: var(--timeline-stroke-position-odd);
height: var(--timeline-stroke-length);
border-left: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
}
@media (min-width: 64em) {
&:nth-child(odd) {
margin: var(--timeline-item-margin-odd);
}
&:nth-child(odd) {
margin: var(--timeline-item-margin-odd);
}
&:nth-child(even) {
margin: var(--timeline-item-margin-even);
&:nth-child(even) {
margin: var(--timeline-item-margin-even);
&:before {
left: auto;
right: var(--timeline-stroke-position-horizontal);
}
.timeline-item__icon {
order: 1;
}
.timeline-item__content {
text-align: right;
margin: 0 1rem 0 0;
}
&:before {
inset: var(--timeline-stroke-position-even);
}
}
@ -82,9 +69,19 @@
}
}
&:nth-child(even) &__icon {
order: var(--timeline-item-flex-order);
}
&__content {
flex: 1 0 0;
margin: 0 0 0 1rem;
margin: 0;
padding: var(--timeline-item-content-padding-odd);
}
&:nth-child(even) &__content {
text-align: var(--timeline-item-text-align-even);
padding: var(--timeline-item-content-padding-even);
}
&__headline {

2
src/components/TimelineList.vue
View file

@ -6,7 +6,7 @@
<style lang="scss">
.timeline {
max-width: calc(var(--timeline-circle-size) * 15);
max-width: var(--timeline-max-width);
position: relative;
margin: 0 auto;