search-course/public/assets/global/scss/shared/pages/_timelines.scss

/* ------------------------------------------------------------------------------
 *
 *  # Timeline
 *
 *  Styles for timeline in 3 layouts: left, right and centered
 *
 * ---------------------------------------------------------------------------- */

// Check if component is enabled
@if $enable-timeline {

	// Base
	.timeline {
		position: relative;

		// Dots base
		&:before,
		&:after {
			content: "";
			position: absolute;
			left: 50%;
			margin-left: -($timeline-line-width);
			background-color: $timeline-line-color;
			z-index: 1;
			@include size($timeline-line-width * 2);
			@include border-radius($border-radius-circle);
		}

		// Top dot
		&:before {
			top: 0;
		}

		// Bottom dot
		&:after {
			bottom: 0;
		}
	}

	// Container
	.timeline-container {
		position: relative;
		padding-top: ($spacer / 2);
		margin-top: -($spacer / 2);
		padding-bottom: 1px;

		// Vertical line
		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -($timeline-line-width / 2);
			background-color: $timeline-line-color;
			height: 100%;
			width: $timeline-line-width;
			z-index: -1;
		}
	}

	// Row
	.timeline-row {
		position: relative;
	}

	// Date
	.timeline-date {
		text-align: center;
		background-color: $body-bg;
		position: relative;
		z-index: 1;
		padding-top: $spacer;
		padding-bottom: $spacer;
		margin-bottom: $spacer;

		// Dots base
		&:before,
		&:after {
			content: "";
			position: absolute;
			left: 50%;
			margin-left: -($timeline-line-width);
			background-color: $timeline-line-color;
			z-index: 1;
			@include size($timeline-line-width * 2);
			@include border-radius($border-radius-circle);
		}

		// Top dot
		&:before {
			top: 0;
		}

		// Bottom dot
		&:after {
			bottom: 0;
		}

		// Change bg color to card bg if inside card
		.card & {
			background-color: $card-bg;
		}
	}

	// Time
	.timeline-time {
		text-align: center;
		padding-top: $spacer;
		padding-bottom: $spacer;
		background-color: $body-bg;
		position: relative;
		margin-bottom: $spacer;

		// Dots base
		&:before,
		&:after {
			content: "";
			position: absolute;
			left: 50%;
			margin-left: -($timeline-line-width);
			background-color: $timeline-line-color;
			@include size($timeline-line-width * 2);
			@include border-radius($border-radius-circle);
		}

		// Top dot
		&:before {
			top: 0;
		}

		// Bottom dot
		&:after {
			bottom: 0;
		}

		// Change bg color to card bg if inside card
		.card & {
			background-color: $card-bg;
		}

		// Hide dots no desktop
		@include media-breakpoint-up(md) {
			&:before,
			&:after {
				content: none;
			}
		}
	}

	// Icon and image
	.timeline-icon {
		margin: 0 auto $spacer auto;
		background-color: $timeline-icon-bg;
		border: $timeline-icon-border-width solid $body-bg;
		@include size($timeline-icon-size);
		@include border-radius($border-radius-circle);

		// Change border color if it's inside card
		.card & {
			border-color: $card-bg;
		}

		// Icon
		div {
			height: 100%;
			display: flex;
		    align-items: center;
		    justify-content: center;
			box-shadow: 0 0 0 $timeline-line-width $timeline-line-color inset;
			@include border-radius($border-radius-circle);

			// Hide border if icon wrapper has dark color
			&[class*=bg-]:not(.bg-white):not(.bg-light):not(.bg-transparent) {
				box-shadow: none;
			}

			// Icon
			> i {
				top: 0;
			}
		}

		// Image
		img {
			@include size($timeline-icon-size - rem-calc($timeline-icon-border-width * 2));
			@include border-radius($border-radius-circle);
		}
	}


	//
	// Responsive config
	//

	@include media-breakpoint-up(md) {


		// Positions
		// ------------------------------

		// Center layout
		.timeline-center {

			// Left blocks
			.timeline-row-left {
				margin-right: 50%;
				padding-right: $timeline-icon-size - rem-calc($timeline-icon-border-width);
			}

			// Right blocks
			.timeline-row-right {
				margin-left: 50%;
				padding-left: $timeline-icon-size - rem-calc($timeline-icon-border-width);
			}
		}

		// Left layout
		.timeline-left {

			// Vertical line
			.timeline-container:after,
			&:before,
			&:after,
			.timeline-date:before,
			.timeline-date:after {
				left: ($timeline-icon-size / 2);
			}

			// Content padding
			.timeline-row,
			.timeline-date {
				padding-left: ($timeline-icon-size + $timeline-content-padding-x);
			}
		}

		// Right layout
		.timeline-right {

			// Vertical line
			.timeline-container:after,
			&:before,
			&:after,
			.timeline-date:before,
			.timeline-date:after {
				left: auto;
				right: ($timeline-icon-size / 2);
				margin-left: 0;
				margin-right: -($timeline-line-width);
			}
			.timeline-container:after {
				margin-right: -($timeline-line-width / 2);
			}

			// Content padding
			.timeline-row,
			.timeline-date {
				padding-right: ($timeline-icon-size + $timeline-content-padding-x);
			}
		}

		// Reduce date vertical spacing in both
		.timeline-left .timeline-date,
		.timeline-right .timeline-date {
			padding-top: ($spacer / 2);
			padding-bottom: ($spacer / 2);
		}


		// Icon
		// ------------------------------

		// Base
		.timeline-icon {
			position: absolute;
			top: ($spacer / 2);

			// Horizontal line base
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				margin-top: -($timeline-line-width / 2);
				height: $timeline-line-width;
				width: ($timeline-icon-size / 2) - rem-calc($timeline-icon-border-width * 2);
				background-color: $timeline-line-color;
				z-index: 1;
			}
		}

		// In left layout
		.timeline-left {
			.timeline-icon {
				left: 0;

				// Right line
				&:after {
					left: 100%;
					margin-left: $timeline-icon-border-width;
				}
			}
		}

		// In right layout
		.timeline-right {
			.timeline-icon {
				right: 0;

				// Left line
				&:after {
					right: 100%;
					margin-right: $timeline-icon-border-width;
				}
			}
		}

		// In centered layout
		.timeline-center {

			// In left block
			.timeline-row-left {
				.timeline-icon {
					left: 100%;
					margin-left: -($timeline-icon-size / 2);

					// Left horizontal line
					&:after {
						right: 100%;
						margin-right: $timeline-icon-border-width;
					}
				}
			}

			// In right block
			.timeline-row-right {
				.timeline-icon {
					right: 100%;
					margin-right: -($timeline-icon-size / 2);

					// Right horizontal line
					&:after {
						left: 100%;
						margin-left: $timeline-icon-border-width;
					}
				}
			}

			// Full width post
			.timeline-row-full .timeline-icon {
				position: static;

				// Remove horizontal line
				&:after {
					content: none;
				}
			}
		}


		// Time
		// ------------------------------

		.timeline-time {
			padding: 0;
			text-align: inherit;
			background-color: transparent;

			// Hide dots
			&:before {
				content: none;
			}
		}

		// In left and right layouts
		.timeline-left,
		.timeline-right {
			.timeline-time {
				padding-top: ($spacer / 2);
				margin-bottom: $spacer;
				padding-left: ($timeline-content-padding-x / 2);
			}
		}
		.timeline-right .timeline-time {
			text-align: right;
			padding-left: 0;
			padding-right: ($timeline-content-padding-x / 2);
		}

		// In center layout
		.timeline-center {
			.timeline-time,
			.timeline-row-full .timeline-time {
				position: absolute;
				left: 100%;
				top: ($spacer / 2) + rem-calc($timeline-icon-border-width);
				width: 100%;
				padding-left: $timeline-icon-size - rem-calc($timeline-icon-border-width);
			}

			// Right aligned post
			.timeline-row-right,
			.timeline-row-full {
				.timeline-time {
					left: auto;
					right: 100%;
					padding-left: 0;
					padding-right: $timeline-icon-size - rem-calc($timeline-icon-border-width);
					text-align: right;
				}
			}

			// Full width post
			.timeline-row-full .timeline-time {
				right: 50%;
				top: $timeline-icon-border-width;
			}
		}
	}
}