lucid-ui/src/components/VerticalListMenu/VerticalListMenu.less

A UI component library from AppNexus.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@VerticalListMenu-size-itemHeight: 29px;
@VerticalListMenu-size-childSpacer: 8px;
@VerticalListMenu-size-childPadding: 12px;
@VerticalListMenu-step: 12;

.@{prefix}-VerticalListMenu {

	font-weight: @font-weight-medium;

	& & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 1);
	}

	& & & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 2);
	}

	& & & & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 3);
	}

	& & & & & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 4);
	}

	& & & & & & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 5);
	}

	& & & & & & & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 6);
	}

	& & & & & & & & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 7);
	}

	& & & & & & & & & .@{prefix}-VerticalListMenu-Item-content {
		padding-left: @VerticalListMenu-size-childPadding + (@VerticalListMenu-step * 8);
	}

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;

	&-Item {
		&-content {

			&-body {
				display: flex;
				align-items: center;
				border-bottom: 1px solid @color-neutral-4;
				width: 100%;
			}

			cursor: pointer;

			display: flex;
			align-items: center;

			color: @color-darkGray;
			font-size: 12px;
			line-height: 16px;

			&-is-selected {

				.@{prefix}-VerticalListMenu-Item-content-text {
					font-weight: @font-weight-semiBold;
				}
			}

			&-text {
				width: 100%;
				padding: @VerticalListMenu-size-childSpacer 0;
				padding-left: 15px;
			}

			&-is-expanded,
			&&-is-expanded {

				position: relative;

				& ::after {
					z-index: 2;
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: @size-XXS;
					background-color: @color-gray;
					content: '';
					transform-origin: 0 0;
					transition: transform @timing-animation-hover;
				}
			}

			&&-is-selected,
			&&-is-selected:hover,
			&&-is-actionable:hover,
			&&-is-actionable:focus {

				position: relative;

				& ::after {
					z-index: 2;
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: @size-XXS;
					background-color: @color-primary;
					content: '';
					transform-origin: 0 0;
					transition: transform @timing-animation-hover;
				}
			}
		}

		&-expander {
			align-self: flex-start;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			width: 20px;
			height: 20px;
			margin: 6px;

			.@{prefix}-ChevronIcon {
				stroke: @color-transparent-gray-35;
			}

			&:hover,
			&:focus {
				.box-sizing();

				background-color: @color-neutral-3;
				outline: none;

				.@{prefix}-ChevronIcon {
					stroke: @color-primary;
				}
			}
		}

		& .@{prefix}-Collapsible-content {


			& .@{prefix}-VerticalListMenu-Item-content.@{prefix}-VerticalListMenu-Item-content-is-not-selected {

					position: relative;

					& ::after {
						z-index: -1;
						position: absolute;
						left: 0;
						top: 0;
						height: 100%;
						width: @size-XXS;
						background-color: @color-gray;
						content: '';
						transform-origin: 0 0;
						transition: transform @timing-animation-hover;
					}

					&:hover {
						& ::after {
							background-color: @color-primary;
						}
					}

			}
		}

		// Any time we have a VerticalListMenu below a VerticalListMenu-Item
		.@{prefix}-VerticalListMenu {
			.@{prefix}-VerticalListMenu-Item-content {
				font-weight: @font-weight-medium;

				&::before {
					align-self: flex-start;
					flex-shrink: 0;
					display: inline-block;
					width: @VerticalListMenu-size-childSpacer;
					color: @color-gray;
					margin: @VerticalListMenu-size-childSpacer;
				}

				&:hover,
				&-is-selected {
					&::before {
						color: @color-darkGray;
					}
				}
			}
		}
	}
}