5etools-mirror-2.github.io/scss/includes/nav.scss

@use "sass:color";

@use "vars";

// region Old
.nav {
	.ve-dropdown-menu--top {
		margin-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
}

@media screen and (width <= #{vars.$width-screen-sm}) {
	.nav > li > a {
		border: 1px solid vars.$rgb-border-grey;
	}

	.night-mode .nav > li > a {
		border-color: vars.$rgb-border-grey--night;
	}
}

.night-mode {
	.nav > li:not(.active) > a {
		color: vars.$rgb-font--night;
		background-color: vars.$rgb-bg--night;
		border: 1px solid vars.$rgb-border-grey--trans-night;
		border-top: 0;

		&:focus,
		&:hover {
			background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
			color: #fff;
		}
	}

	.nav > li.active > a {
		&:focus,
		&:hover {
			color: #fff;
		}
	}

	.nav li.open > a,
	.nav li.open > a:focus,
	.nav li.open > a:hover {
		background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
		border-left: 1px solid vars.$rgb-link-blue;
		border-right: 1px solid vars.$rgb-link-blue;
		border-color: vars.$rgb-link-blue;
	}

	.nav li.active.open > a,
	.nav li.active.open > a:focus,
	.nav li.active.open > a:hover {
		background-color: vars.$rgb-off-black;
	}
}

@media screen and (width <= #{vars.$width-screen-lg}) {
	.nav .caret--right {
		transform: none;
	}

	.nav .ve-dropdown-menu--side {
		top: 100%;
		left: 0;
	}
}
// endregion

// region New
.nav2 {
	&-list__ {
		&label {
			padding: 0 20px;
		}

		&disp-source {
			display: inline-block;
			height: 15px;
			border-left: 1px solid;
			position: relative;
			border-right: 1px solid;
			top: 2px;
			margin-right: 7px;
			margin-left: 4px;
		}
	}

	&-accord__ {
		&head {
			padding: 3px 7px 3px 20px;

			&:focus,
			&:hover {
				background-color: vars.$rgb-bg--alt;
			}

			&--active {
				background: vars.$rgb-active-blue;
				color: #fff;

				&:focus,
				&:hover {
					background: vars.$rgb-active-blue--light;
				}
			}
		}

		&body {
			padding: 3px 0 3px 35px;
			display: flex;
			flex-direction: column;
		}

		&lnk-item {
			padding: 3px 20px;
			color: vars.$rgb-off-black;

			&:focus,
			&:hover {
				background-color: vars.$rgb-bg--alt;
				text-decoration: none;
			}

			&--active {
				background: vars.$rgb-active-blue;
				color: #fff;

				&:focus,
				&:hover {
					background: vars.$rgb-active-blue--light;
					color: #fff;
				}
			}
		}
	}
}

.night-mode .nav2 {
	&-accord__ {
		&head {
			&:focus,
			&:hover {
				background-color: vars.$rgb-bg--alt-night;
				color: #fff;
			}

			&--active {
				color: #fff;

				&:focus,
				&:hover {
					background: vars.$rgb-active-blue--light;
				}
			}
		}

		&lnk-item {
			color: vars.$rgb-font--night;

			&:focus,
			&:hover {
				background-color: vars.$rgb-bg--alt-night;
				color: #fff;
			}

			&--active {
				color: #fff;

				&:focus,
				&:hover {
					background: vars.$rgb-active-blue--light;
				}
			}
		}
	}
}
// endregion