mediawiki-extensions-TabberNeue/modules/ext.tabberNeue.less

@width-bounce-dot: 12px;

.tabber {
	position: relative;
	display: flex;

	/* establish primary containing box */
	overflow: hidden;
	flex-direction: column;

	&__tabs {
		display: flex;
		overflow: auto hidden;
		box-shadow: inset 0 -1px 0 0 #a2a9b1;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
	}

	&__section {
		display: grid;
		overflow: hidden;
		block-size: 100%;
		grid-auto-columns: 100%;
		grid-auto-flow: column;
	}

	&__header {
		position: relative;
		display: flex;
		/* defend against <section> needing 100% */
		flex-shrink: 0;
		/* fixes cross browser quarks */
		min-block-size: fit-content;

		&__prev {
			left: 0;
		}

		&__next {
			right: 0;
		}

		&__prev,
		&__next {
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
			display: none;
			width: 20px;
			border-radius: 4px;
			cursor: pointer;

			&:after {
				position: absolute;
				top: 0;
				bottom: 0;
				width: inherit;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 14px;
				content: '';
			}
		}

		&--prev-visible .tabber__tabs {
			-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20% );
			mask-image: linear-gradient( 90deg, transparent, #000 20% );
		}

		&--next-visible .tabber__tabs {
			-webkit-mask-image: linear-gradient( 90deg, #000 80%, transparent );
			mask-image: linear-gradient( 90deg, #000 80%, transparent );
		}

		&--prev-visible.tabber__header--next-visible .tabber__tabs {
			-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
			mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
		}

		&--prev-visible .tabber__header__prev,
		&--next-visible .tabber__header__next {
			display: block;
		}
	}

	&__header,
	&__section {
		/* prevent scroll chaining on x scroll */
		overscroll-behavior-x: contain;
		/* scrolling should snap children on x */
		scroll-snap-type: x mandatory;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
	}

	&__tab {
		display: inline-flex;
		align-items: center;
		padding: 5px 12px;
		color: #54595d;
		font-weight: bold;
		scroll-snap-align: start;
		text-decoration: none;
		white-space: nowrap;

		&:visited {
			color: #54595d;
		}

		&:hover,
		&:active,
		&:focus {
			text-decoration: none;
		}

		&--active,
		&--active:visited {
			box-shadow: inset 0 -2px 0 0 #36c;
			color: #36c;
		}
	}

	&__panel {
		// Somehow it breaks without important
		/* stylelint-disable-next-line declaration-no-important */
		height: max-content !important;
		/* be pushy about consuming all space */
		block-size: 100%;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		scroll-snap-align: start;
	}

	&__transclusion {
		/*
		 * Animation based on dots indicators from Wikimedia
		 * T266028
		 */
		&--loading {
			margin: 0.5em 0; // based on Vector
			text-align: center;
			white-space: nowrap;

			.tabber__loading-indicator,
			&:before,
			&:after {
				display: inline-block;
				width: @width-bounce-dot;
				height: @width-bounce-dot;
				animation: bounce-delay 1600ms infinite ease-in-out both;
				animation-delay: -160ms;
				background-color: #36c;
				border-radius: 100%;
				content: '';
			}

			&:before {
				margin-right: @width-bounce-dot / 4;
				animation-delay: -330ms;
			}

			&:after {
				margin-left: @width-bounce-dot / 4;
				animation-delay: 0ms;
			}
		}
	}
}

// Animations
@keyframes bounce-delay {
	0%,
	50%,
	100% {
		transform: scale( 0.625 );
	}

	20% {
		opacity: 0.87;
		transform: scale( 1 );
	}
}

@media ( hover: hover ) {
	.tabber {
		&__tab {
			&:hover {
				box-shadow: inset 0 -2px 0 0 #447ff5;
				color: #447ff5;
			}

			&:active {
				box-shadow: inset 0 -2px 0 0 #2a4b8d;
				color: #2a4b8d;
			}
		}

		&__header {
			&__prev,
			&__next {
				&:hover {
					background-color: rgba( 0, 24, 73, 0.03 );
				}

				&:active {
					background-color: rgba( 0, 24, 73, 0.05 );
				}
			}
		}
	}
}

// Smooth scrolling through a large number of panels hurt performance on mobile
// Also it will trigger unnessecary lazyloading as lazyload content show up momentarily
@media ( prefers-reduced-motion: no-preference ) and ( min-width: 720px ) {
	.tabber {
		&__header,
		&__section,
		&__tabs {
			scroll-behavior: smooth;
		}
	}
}