1#@!#!123s

32759 1#@!#!123s
: / home / aissorg / www / scss / custom-styles / plugins /
Filename : _nav-custom.scss
back
//
// Nav custom
// 

// 
// Table of Contents:
//
// Tabs Corporate
// Tabs Line
//

// Corporate style
$tabs-corporate-color: $body-color;
$tabs-corporate-background: transparent;
$tabs-corporate-active-color: $white;
$tabs-corporate-active-background: $primary;
$tabs-corporate-border: #e5e7e9;

$tabs-line-border: $gray-200;
$tabs-line-color: $body-color;
$tabs-line-background: $tabs-corporate-background;
$tabs-line-active-color: $gray-700;

.nav {
	display: block;
}

// Base styles
.tabs-custom {
	text-align: left;
	.nav-tabs {
		font-size: 0;
		line-height: 0;
		word-spacing: 0;
		border: 0;

		&:before,
		&:after {
			display: none;
		}
	}

	.nav-item {
		float: none;
		border: 0;
		cursor: pointer;
		transition: .33s all ease;
	}

	.nav-link {
		margin: 0;
		border-radius: 0;
		border: 0;
	}

	.nav-link.active {
		cursor: default;
		border: 0;
	}
}

.tab-content > .tab-pane {
	display: block;
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

.tab-content > .active {
	visibility: visible;
	height: auto;
	overflow: visible;
}

// Tabs line
.tabs-line {
	.nav-tabs {
		position: relative;
	}

	.nav-link {
		font-size: 16px;
		line-height: 1.4;
		text-align: center;
		vertical-align: middle;
	}

	* + .tab-content {
		margin-top: 20px;
	}

	@include media-breakpoint-down(sm) {
		.nav-tabs {
			max-width: 100%;
			border: 1px solid $tabs-line-border;
		}

		.nav-item {
			margin: -1px;
		}

		.nav-link {
			padding: 7px 10px;
			color: $tabs-line-color;
			background: $tabs-line-background;
		}
		
		.nav-item + .nav-item .nav-link {
			border-top: 1px solid $tabs-line-border;
		}

		.nav-link:hover,
		.nav-link.active {
			color: $white;
			background: $primary;
			border-color: $primary;
		}
	}
}

* + .tabs-line { margin-top: 30px; }

// Tabs corporate style
.tabs-corporate {
	.nav-tabs {
		position: relative;
		border: 1px solid $tabs-corporate-border;
	}

	.nav-item {
		margin: -1px;
	}

	.nav-link {
		padding: 10px 10px;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.4;
		color: $tabs-corporate-color;
		background: $tabs-corporate-background;
		border-bottom: 1px solid $tabs-corporate-border;
		text-align: center;
		vertical-align: middle;

		&:first-child {
			border-top: 1px solid $tabs-corporate-border;
		}
	}

	.nav-link:hover,
	.nav-link.active {
		color: $tabs-corporate-active-color;
		background: $tabs-corporate-active-background;
		border-color: $tabs-corporate-active-background;
	}

	.tab-content {
		padding: 30px 0 0;
	}
}

@include media-breakpoint-up(md) {
	* + .tabs-line { margin-top: 40px; }
	
	//
	// Horizontal tabs
	// 
	.tabs-horizontal {
		&.tabs-corporate {
			.nav-tabs {
				position: relative;
				width: 100%;
				display: block;
				@include spacing(10px);
				text-align: center;
				border: 0;
				will-change: transform;
			}

			.nav-item {
				display: inline-block;
				will-change: transform;
			}

			.nav-link {
				display: block;
				position: relative;
				z-index: 1;
				min-width: 130px;
				letter-spacing: .1em;
				padding: 13px 20px;
				border: 2px solid $tabs-corporate-border;

				&,
				&::before {
					transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
				}

				&::before {
					content: '';
					position: absolute;
					top: -1px;
					left: -1px;
					width: calc(100% + 2px);
					height: calc(100% + 2px);
					z-index: -1;
					opacity: 0;
					transform: scale3d(0.7, 1, 1);
					transition: transform 0.4s, opacity 0.4s;
					transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
					background: $tabs-corporate-active-background;
				}
			}

			.nav-link.active,
			.nav-link:hover {
				color: $tabs-corporate-active-color;
				border-color: $tabs-corporate-active-background;
				background-color: transparent;

				&::before {
					opacity: 1;
					transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
				}
			}
		}

		&.tabs-line {
			.nav-tabs {
				transform: translateY(-20px);
				margin-bottom: -20px;
				border: 0;
				border-bottom: 1px solid $gray-200;
			}

			.nav-item {
				display: inline-block;
				margin-top: 20px;
				
				&:not(:last-child) {
					margin-right: 52px;
				}
			}

			.nav-link {
				position: relative;
				padding: 0 0 13px 0;
				font-size: 20px;
				background-color: transparent;
				color: $gray-500;
				border: 0;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					right: 0;
					height: 1px;
					width: 0;
					background: $primary;
					transition: .22s ease;
				}
			}

			.nav-link.active,
			.nav-link:hover {
				color: $tabs-line-active-color;
			}

			.nav-link.active {
				&::after {
					right: auto;
					left: 0;
					width: 100%;
				}
			}

			* + .tab-content {
				margin-top: 25px;
			}
		}
	}

	// 
	// Vertical tabs
	// 
	.tabs-vertical {
		display: flex;
		align-items: flex-start;

		.nav-tabs {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			flex-shrink: 0;
			max-width: 50%;
		}

		.nav-item {
			border: 0;
			width: 100%;
			text-align: left;
		}

		.nav-link.active,
		.nav-link:hover {
			box-shadow: 0 9px 21px 0 rgba(#1e1e1e, .13);
		}

		.tab-content {
			flex-grow: 1;
		}

		// Tabs corporate
		&.tabs-corporate {
			.nav-tabs {
				width: auto;
				min-width: 260px;
				border: 0;
			}

			.nav-item {
				margin: 0;
			}

			.nav-link {
				position: relative;
				padding: 17px 30px;
				border: 0;
				overflow: hidden;
				text-align: left;
			}

			.nav-item + .nav-item {
				margin-top: 2px;
			}

			.tab-content {
				padding: 0 0 0 30px;
			}
		}
	}
}

@include media-breakpoint-up(lg) {
	//
	// Horizontal tabs
	// 
	.tabs-horizontal {

		// Tabs Corporate
		&.tabs-corporate {
			.tab-content {
				padding: 60px 30px 0;
			}
		}
	}

	// 
	// Vertical tabs
	// 
	.tabs-vertical {

		// Tabs corporate
		&.tabs-corporate {
			.tab-content {
				padding: 0 0 0 45px;
			}
		}
	}
}