$timeline-border: 3px; $timeline-dot-width: 16px; $timeline-m-left-padding: 1.5rem; $timeline-m-right-padding: 2.5rem; $timeline-dt-size: 11.5rem; $timeline-dt-left-padding: .5rem; $timeline-dt-right-padding: 5rem; dl.timeline { width: 100%; padding: 0; .timeline-slot { display: grid; position: relative; grid-template-columns: [item-start] 1fr; @include desktop { grid-template-columns: span(2 of 12) [title-start] 16rem [item-start] 1fr span(1 of 12); } // Alternating timeline-slots get another background color. &:nth-child(2n+1) { @include theme('background-color', 'color-primary--lighten-5', 'timeline-slot-alternating-background'); // Fix for video on alternating timeline-slots. > dd .video-wrapper::after { @include theme('background-color', 'color-primary--lighten-5', 'timeline-slot-alternating-background'); } } // First timeline-slot specific styling. &:first-of-type { // First definition description inside the first timeline-slot. > dd:first-of-type { @include desktop { padding-top: 2rem; } // Fix whitespace. .timeline-slot-header { margin-top: -.4rem; padding-top: 0; } } > dt:first-of-type { padding-bottom: 1.2rem; @include desktop { margin-bottom: 0; padding-top: 1.6rem; } &::before { content: none; } } } // Last timeline-slot last definition description specific styling. &:last-of-type { > dd:last-of-type { padding-bottom: 2rem; // Horizontal timeline end. &::before { @include theme('border-color', 'color-primary', 'timeline-line-color'); position: absolute; bottom: 2rem; left: calc(#{$timeline-m-left-padding} - .5rem - 1px); width: 1rem; border-bottom: $timeline-border solid; content: ''; @include desktop { left: calc(#{$timeline-dt-left-padding} - .5rem - 1px); } } &::after { bottom: 2rem; } } } // Timeline-slot title styling. &-title { &::before, button::after { @include theme('background-color', 'color-secondary', 'timeline-slot-indicator-background'); @include theme('border-color', 'color-primary', 'timeline-slot-indicator-border-color'); display: block; position: absolute; top: .2rem; left: calc(-#{$timeline-m-right-padding} - #{$timeline-dot-width} / 2); width: $timeline-dot-width; height: $timeline-dot-width; transition: background-color .2s ease-in-out; border: $timeline-border solid; border-radius: 100%; content: ''; z-index: z('timeline', 'dots'); @include desktop { left: calc(-#{$timeline-dt-right-padding} - #{$timeline-dot-width} / 2); } } button { width: 100%; margin-left: -2em; padding-left: 2em; color: inherit; font-size: inherit; &::before { position: absolute; left: 0; padding-left: .2em; font-size: 1.2rem; line-height: .9; } &::after { left: calc(-#{$timeline-m-right-padding} - #{$timeline-dot-width} / 2 + 2em); @include desktop { left: calc(-#{$timeline-dt-right-padding} - #{$timeline-dot-width} / 2 + 2em); } } } position: relative; width: 100%; margin: .2rem 0; border: 0; background: transparent; line-height: 1.2; button:hover::after, button:focus::after { @include theme('background-color', 'color-primary--lighten-2', 'timeline-slot-active-indicator-background'); } button[aria-expanded=true]::after { @include theme('background-color', 'color-primary', 'timeline-slot-active-indicator-background'); } } &-date { display: block; width: 100%; } &-content, &-header { width: 100%; } &-header { margin-bottom: $gutter-width; padding-top: .5rem; @include desktop { padding-top: 2rem; } } &-content { *:last-of-type { margin-bottom: 0; } &::after { display: block; position: relative; height: 1.6rem; content: ''; } } > dt { @extend %h3; position: relative; top: 0; left: 0; width: 100%; margin: 0; padding: 1.5rem calc(#{$timeline-m-left-padding} - #{$timeline-dot-width} / 2) .5rem; grid-column-start: item-start; justify-self: end; @include desktop { width: $timeline-dt-size; padding: 2rem 1.2rem 0 0; text-align: right; grid-column-start: title-start; } &::before { @include theme('border-color', 'color-primary', 'timeline-line-color'); position: absolute; top: 0; left: calc(#{$timeline-m-left-padding} - 2px); height: 1rem; border-left: $timeline-border solid; content: ''; @include desktop { display: none; } } } > dd { @include theme('border-color', 'color-primary', 'timeline-line-color'); display: flex; position: relative; flex-wrap: wrap; width: 100%; max-width: none; margin: 0; padding: 0 calc(#{$gutter-width*.5}) 0 calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding}); grid-column-start: item-start; .accordion--content { margin-left: 0; } @include desktop { margin: 0; padding: 0 calc(#{$gutter-width*.5}) 0 calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding}); } &::after { @include theme('border-color', 'color-primary', 'timeline-line-color'); position: absolute; top: 0; bottom: 0; left: calc(#{$timeline-m-left-padding} - 2px); border-left: $timeline-border solid; content: ''; @include desktop { left: calc(#{$timeline-dt-left-padding} - 2px); } } &.active::before { @include theme('background-color', 'color-primary', 'timeline-slot-active-indicator-background'); } // Video component styling inside a timeline-slot. .video-wrapper { position: relative; width: 100%; margin-left: 0; padding-bottom: 2rem; // Fix to add whitespace to the video top and bottom areas. &::before, &::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index: z('timeline', 'video', 'background'); } &::after { @include theme('background-color', 'color-secondary', 'timeline-slot-default-background'); } .video { position: relative; padding-top: 2rem; border: 0; z-index: z('timeline', 'video', 'player'); .audio-description { min-height: 2rem; padding-left: 3rem; // Dots after a video intersection. &::after { bottom: .2rem; } } } } } } }