@import “timeline/variables”;
@import “timeline/mixins/timeline-element”; @import “timeline/mixins/timeline-event-variant”; @import “timeline/mixins/timeline-item-variant”; @import “timeline/mixins/timeline-label-variant”; @import “timeline/mixins/timeline-line-variant”; @import “timeline/mixins/timeline-point-color-variant”; @import “timeline/mixins/timeline-point-size-variant”; @import “timeline/mixins/timeline-responsive-variant”; @import “timeline/mixins/timeline-row-clearfix”; @import “timeline/mixins/timeline-single-column”;
.timeline {
@extend .timeline-line-solid; @include timeline-responsive-variant($timeline-item-width-offset, 0, 0, $timeline-item-width-offset); @include timeline-row-clearfix; position: relative; padding: map-get($timeline-container-paddings, vertical) map-get($timeline-container-paddings, horizontal); list-style: none; font-weight: 300; &:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 50%; height: 100% !important; margin-left: map-get($timeline-line, width) / 2; border-right: { width: map-get($timeline-line, width); style: solid; color: map-get($timeline-line, color) } } &.timeline-single-column { @include timeline-single-column($timeline-single-column-breakpoint); } @each $type, $style in map-get($timeline-line, styles) { &.timeline-line-#{$type} { @include timeline-line-variant($style); } } & .timeline-item { @extend .timeline-item-arrow-md; @include timeline-element; margin-bottom: $timeline-item-margin-bottom; &:nth-of-type(2) { margin-top: $timeline-second-item-margin-top; } &.timeline-item-left, &.timeline-item-right { @include timeline-item-start-margins(0, $timeline-second-item-margin-top); clear: both !important; & + .timeline-item:not(.timeline-item-left):not(.timeline-item-right) { clear: both; } } &.timeline-item-right, &:nth-of-type(even):not(.timeline-item-left) { float: right; clear: right; & > .timeline-point { left: -$timeline-point-width; &.timeline-point-blank { left: -$timeline-point-blank-width; } } } @each $size, $style in $timeline-item-arrow { &.timeline-item-arrow-#{$size} { @include timeline-item-variant(map-get($style, offset-top), map-get($style, width)); } } & > .timeline-event { @extend .timeline-event-default; position: relative; float: left; border-radius: $timeline-item-border-radius; @each $status, $color in $timeline-colors { &.timeline-event-#{$status} { @include timeline-event-variant( map-get($timeline-bg-colors, $status), map-get($timeline-desaturated-colors, $status), map-get($timeline-colors, $status) ); } } &:before, &:after { content: ""; display: inline-block; position: absolute; } & .timeline-heading, & .timeline-body, & .timeline-footer { padding: map-get($timeline-item-inner-padding, verical) map-get($timeline-item-inner-padding, horizontal); & p, & ul { margin-bottom: 0; } } & .timeline-heading { & h4 { font-weight: 400; } } & .timeline-footer { & a { cursor: pointer; text-decoration: none; } } & .panel, & .table, & .blankslate { margin: 0; border: none; border-radius: inherit; overflow: hidden; } & .table { & th { border-top: 0; } } } & > .timeline-point { @extend .timeline-point-default; @include timeline-point-size-variant($timeline-point-width, $timeline-point-height); position: absolute; z-index: 100; border: { width: $timeline-point-border-width; style: solid; radius: 100% } line-height: $timeline-point-height - ($timeline-point-border-width * 2); text-align: center; &.timeline-point-blank { @include timeline-point-size-variant($timeline-point-blank-width, $timeline-point-blank-height); @include timeline-point-color-variant(map-get($timeline-desaturated-colors, default), map-get($timeline-desaturated-colors, default)); } @each $status, $color in $timeline-colors { &.timeline-point-#{$status} { @include timeline-point-color-variant(map-get($timeline-bg-colors, default), map-get($timeline-desaturated-colors, $status)); } } } } & .timeline-label { @include timeline-element; @include timeline-item-start-margins(0, $timeline-second-item-margin-top); top: 1px; width: 100%; margin: { left: auto; right: auto; } padding: 0; text-align: center; @each $status, $color in $timeline-colors { & .label-#{$status} { @include timeline-label-variant(map-get($timeline-desaturated-colors, $status)); } } }
}
@media all and (orientation: portrait) {
.timeline { @include timeline-single-column; }
}
@media (max-width: $timeline-single-column-breakpoint) {
.timeline { @include timeline-single-column; }
}