tab_switcher.scss
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

tab_switcher.scss
View Options

	@import '../../_variables.scss';

	.tab-switcher {
	.contents {
	.hidden {
	display: none;
	}
	}
	.tabs {
	display: flex;
	position: relative;
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	padding-top: 5px;
	box-sizing: border-box;

	&::after, &::before {
	display: block;
	content: '';
	flex: 1 1 auto;
	border-bottom: 1px solid;
	border-bottom-color: $fallback--border;
	border-bottom-color: var(--border, $fallback--border);
	}

	.tab-wrapper {
	height: 28px;
	position: relative;
	display: flex;
	flex: 0 0 auto;

	.tab {
	width: 100%;
	min-width: 1px;
	position: relative;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: 6px 1em;
	padding-bottom: 99px;
	margin-bottom: 6px - 99px;
	white-space: nowrap;

	&:not(.active) {
	z-index: 4;

	&:hover {
	z-index: 6;
	}
	}

	&.active {
	background: transparent;
	z-index: 5;
	}
	}

	&:not(.active) {
	&::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 7;
	border-bottom: 1px solid;
	border-bottom-color: $fallback--border;
	border-bottom-color: var(--border, $fallback--border);
	}
	}
	}

	}
	}