Torq/css/navbar.css

/* Variables */
:root {
	/* Dimensions */
	--navbar-height: 40px;

	/* Colors - Component Specific */
	--navbar-active: var(--color-blue);
	--navbar-active-bg: transparent;
	--navbar-bg: var(--color-white-off);
	--navbar-bg-highlight: var(--color-gray-lightest);
	--navbar-border: var(--color-gray-light);
	--navbar-brand-color: var(--color-gray-dark);
	--navbar-dropdown-bg: var(--color-white);
	--navbar-dropdown-divider: var(--color-gray-lighter);
	--navbar-dropdown-header: var(--color-gray-medium);
	--navbar-dropdown-link: var(--color-gray-darkest);
	--navbar-hover-bg-end: var(--color-blue-dark);
	--navbar-hover-bg-start: var(--color-blue);
	--navbar-hover-text: var(--color-white);
	--navbar-item-active-bg: var(--color-gray-lighter);
	--navbar-link: var(--color-gray-dark);
	--navbar-link-active: var(--color-gray-darker);
	--navbar-link-hover: var(--color-gray-darkest);
	--navbar-shadow: var(--color-black-transparent-1);
	--navbar-shadow-inset: var(--color-black-transparent-2);
	--navbar-text-shadow: var(--color-white);
}

/* Navbar Base */
.navbar {
	background-color: var(--navbar-bg);
	background-image: linear-gradient(to bottom, var(--color-white), var(--navbar-bg-highlight));
	border: 1px solid var(--navbar-border);
	border-radius: 4px;
	box-shadow: 0 1px 4px var(--navbar-shadow);
	display: flex;
	justify-content: space-between;
	margin: 1.25rem 0;
	min-height: var(--navbar-height);
	padding: 0 1.25rem;
}

.navbar .brand {
	align-items: center;
	color: var(--navbar-brand-color);
	display: flex;
	font-size: 20px;
	height: 100%;
	margin-right: 1.25rem;
	text-shadow: 0 1px 0 var(--navbar-text-shadow);

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

.navbar .nav-group {
	align-items: center;
	display: flex;
	min-height: 100%;
}

.navbar .nav-menu {
	align-items: center;
	display: flex;
	height: 100%;

	li {
		align-items: center;
		display: inline-flex;
		height: 100%;
		margin-right: 0.5rem;
		padding: 0 0.5rem;

		a {
			color: var(--navbar-link);
			text-shadow: 0 1px 0 var(--navbar-text-shadow);
			white-space: nowrap;
		}

		&:hover a {
			color: var(--navbar-link-hover);
		}
	}

	li.active {
		background-color: var(--navbar-item-active-bg);
		box-shadow: inset 0 3px 8px var(--navbar-shadow-inset);

		a {
			color: var(--navbar-link-active);
		}
	}

	/* Dropdown */
	li.dropdown {
		position: relative;

		&:has(i.caret) {
			align-items: center;
			display: inline-flex;
		}

		i.caret {
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid currentColor;
			bottom: 3px;
			display: inline-block;
			height: 0;
			position: relative;
			width: 0;
		}
	}

	li.dropdown .dropdown-menu {
		background-color: var(--navbar-dropdown-bg);
		border: 1px solid var(--color-black-transparent-3);
		border-radius: 4px;
		box-shadow: 0 5px 10px var(--color-black-transparent-3);
		display: none;
		font-size: 0.88rem;
		left: 0;
		list-style: none;
		min-width: 160px;
		padding: 0.5rem 0;
		position: absolute;
		top: 100%;

		li {
			margin-right: 0;
			padding: 0.3rem 1rem;
			width: 100%;

			/* Link items in the dropdown */
			&:has(> a:first-child):hover {
				background-image: linear-gradient(to bottom, var(--navbar-hover-bg-start), var(--navbar-hover-bg-end));

				a {
					color: var(--navbar-hover-text);
					text-shadow: none;
				}
			}

			a {
				color: var(--navbar-dropdown-link);
				display: inline-block;
				width: 100%;
			}

			&:last-child {
				margin-bottom: 0;
			}

			&.divider {
				background-color: var(--navbar-dropdown-divider);
				display: block;
				height: 1px;
				margin: 0.5rem 0;
				overflow: hidden;
				padding: 0;
			}

			&.nav-header {
				color: var(--navbar-dropdown-header);
				display: block;
				font-size: 0.7rem;
				font-weight: bold;
				text-shadow: 0 1px 0 var(--color-white-transparent);
				text-transform: uppercase;
			}
		}

		&.caret::before {
			background-color: var(--navbar-dropdown-bg);
			border-color: var(--color-black-transparent-3) var(--navbar-dropdown-bg) var(--navbar-dropdown-bg) var(--color-black-transparent-3);
			border-style: solid;
			border-width: 1px;
			content: '';
			height: 10px;
			left: 9px;
			position: absolute;
			top: -5px;
			transform: rotate(45deg);
			width: 10px;
		}
	}

	li.dropdown.open .dropdown-menu {
		display: block;
	}
}