@import “functions/desaturated-lighten”; @import “functions/map-deep-get”; @import “functions/map-set”; @import “functions/mutate-colors”;
$timeline-single-column-breakpoint: 768px;
$timeline-color-main-bg: fff;
$timeline-color-gray: #555;
$timeline-colors: (
default: $timeline-color-gray, primary: $timeline-color-gray, success: #3F8100, info: #0062A7, warning: #ac7e00, danger: #B71500
);
$timeline-color-gray-light: f5f5f5; $timeline-color-gray-lighter: call(get-function(“desaturated-lighten”), map-get($timeline-colors, default));
$timeline-bg-colors: (
default: $timeline-color-main-bg, primary: $timeline-color-gray-light, success: #F3F8ED, info: #F0F8FD, warning: #FFF9E9, danger: #FFC4BC
);
$timeline-desaturated-colors: mutate-colors($timeline-colors, get-function(“desaturated-lighten”));
$timeline-container-paddings: (
vertical: 1px, horizontal: 0
);
$timeline-line: (
width: 2px, color: $timeline-color-gray-lighter, styles: ( solid: solid, dotted: dotted, dashed: dashed, hidden: none )
);
$timeline-single-column-line-offset: 42px;
$timeline-item-margin-bottom: 20px; $timeline-second-item-margin-top: 40px;
$timeline-item-border-radius: 3px;
$timeline-item-arrow: (
sm: ( offset-top: 4px, width: 10px ), md: ( offset-top: 10px, width: 15px ), lg: ( offset-top: 10px, width: 18px )
);
$timeline-point-border-width: 2px;
$timeline-point-width: 24px; $timeline-point-height: $timeline-point-width;
$timeline-point-blank-width: 12px; $timeline-point-blank-height: $timeline-point-blank-width;
$timeline-item-width-offset: map-deep-get($timeline-item-arrow, md, width) + 15px; $timeline-item-width-offset-single-column: $timeline-single-column-line-offset +
map-deep-get($timeline-item-arrow, md, width) + ($timeline-point-width / 2) + 3px;
$timeline-item-inner-padding: (
vertical: 4px, horizontal: 10px
);