Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / tabMenu.scss

/* main tabs */
.tabMenu,
.menu {
	> ul {
		@include inlineList;

		> li {
			position: relative;

			&:not(:last-child) {
				margin-right: 20px;
			}

			&::before {
				border-top: 1px solid $wcfContentLink;
				bottom: 0;
				content: "";
				left: 50%;
				position: absolute;
				width: 0;
			}

			&.active {
				// this causes the item to stand above the fade-effect caused
				// by the overflow overlays
				z-index: 60;

				&::before {
					left: 0;
					transition: left 0.12s linear, width 0.12s linear;
					width: 100%;
				}

				> a {
					cursor: default;
				}
			}

			> a {
				display: block;
				padding: 5px 0;
			}
		}
	}

	@include screen-sm-down {
		padding-left: 15px;
		padding-right: 15px;
		position: relative;

		&::before {
			display: none;
		}

		> ul {
			flex-wrap: nowrap;
			overflow: auto;
			-webkit-overflow-scrolling: touch;

			> li {
				flex-shrink: 0;
				white-space: nowrap;
			}

			&.enableAnimation {
				transition: padding-left 0.24s linear;

				> li:first-child {
					transition: margin-left 0.24s linear;
				}
			}
		}
	}

	@include screen-md-up {
		> ul {
			border-bottom: 1px solid $wcfContentBorderInner;

			> li::before {
				bottom: -1px;
			}
		}
	}
}

.tabMenu {
	> ul > li > a {
		@include wcfFontSection;
	}
}

/* sub tabs */
.menu {
	margin-top: 10px;

	@include screen-md-up {
		> ul > li > a {
			@include wcfFontHeadline;
		}
	}

	& + .tabMenuContent {
		margin-top: 20px;
	}
}

.tabMenuOverlayLeft,
.tabMenuOverlayRight {
	align-items: center;
	bottom: 0;
	display: flex;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 0.24s linear, visibility 0s linear 0.24s;
	visibility: hidden;
	width: 30px;
	z-index: 50;

	&.active {
		opacity: 1;
		transition-delay: 0s;
		visibility: visible;
	}

	&::before {
		color: $wcfContentDimmedText;
	}
}

.tabMenuOverlayLeft {
	background: linear-gradient(to left, transparentize($wcfContentBackground, 100%) 0%, $wcfContentBackground 50%);
	left: 0;
}

.tabMenuOverlayRight {
	background: linear-gradient(
		to right,
		transparentize($wcfContentBackground, 100%) 0%,
		$wcfContentBackground 50%
	);
	justify-content: flex-end;
	right: 0;
}

.tabMenuContent.hidden {
	display: none;
}

.tabMenuContent {
	// remove upper border if containerList is the first child
	> .containerList:first-child > li:first-child {
		border-top-width: 0;
	}
}