@bigfishtv/cockpit/styles/components/dropdown.less

/*
 * Defintions
 */

// Dropdown Menu
// @dropdown-menu-z-index: 99999;
@dropdown-menu-margin: 2px 0px;
@dropdown-menu-padding: 0;
@dropdown-menu-min-width: 160px;
@dropdown-menu-max-height: 300px;
@dropdown-menu-background: @white;
@dropdown-menu-border: @input-border;
@dropdown-menu-shadow: 0px 1px 5px fade(@black, 3.5%);

// Dropdown Menu Item
@dropdown-menu-item-padding: @padding-small;
@dropdown-menu-item-font-family: @regular-font-family;
@dropdown-menu-item-font-weight: @regular-font-weight;
@dropdown-menu-item-color: @body-color;
@dropdown-menu-item-line-height: @line-height-medium;

// Dropdown Menu Item Hover
@dropdown-menu-item-hover-color: @button-hover-color;
@dropdown-menu-item-hover-background: @button-hover-background;

// Dropdown divider
@dropdown-divider-background: @light-grey;

/*
 * Dropdown
 */

.dropup,
.dropdown {
	position: relative;

	ul {
		list-style: none;
		text-align: left;
		overflow: hidden;
	}

	ul:not(.dropdown-menu) {
		margin: 0;
		padding: 0;
	}

	& > button {
		display: block;
	}
}

// Dropdown Toggle
.dropdown-toggle {
	&:focus {
		outline: 0;
	}

	&:active {
		+ .dropdown-menu {
			display: block;
		}
	}
}

// Dropdown Menu
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	float: left;
	padding: @dropdown-menu-padding;
	margin: @dropdown-menu-margin;
	min-width: @dropdown-menu-min-width;
	max-height: @dropdown-menu-max-height;
	background: @dropdown-menu-background;
	border: @dropdown-menu-border;
	border-radius: @border-radius;
	box-shadow: @dropdown-menu-shadow;
	background-clip: padding-box;
	.overflow-scroll();

	&.open {
		display: block;
	}

	// Divider
	.divider {
		margin: 0;
		padding: 0;
		height: 1px;
		background: @dropdown-divider-background;
	}
}

// Dropdown Positioning
.dropdown-menu-right {
	left: auto;
	right: 0;
}

.dropdown-menu-left {
	left: 0;
	right: auto;
}

.dropdown-menu-block {
	left: 0;
	right: 0;
}

// Dropdown Menu Title
.dropdown-menu-title {
	margin: 0;
	padding: @padding-xsmall;
	.medium-font();
	.font-size(1);
	color: @mid-grey;
	.uppercase();
	border-bottom: @dropdown-menu-border;
}

.dropup,
.navbar-fixed-bottom .dropdown {
	// Reverse the caret
	.caret {
		border-top: 0;
		border-bottom: @caret-size dashed;
		content: '';
	}

	// Different positioning for bottom up menu
	.dropdown-menu {
		top: auto;
		bottom: 100%;
	}
}

// Dropdown Menu Item
.dropdown-menu-item {
	display: block;
	margin: 0;
	padding: @dropdown-menu-item-padding;
	font-family: @dropdown-menu-item-font-family;
	font-weight: @dropdown-menu-item-font-weight;
	color: @dropdown-menu-item-color;
	line-height: @dropdown-menu-item-line-height;
	cursor: pointer;
	white-space: nowrap;

	.status {
		display: inline-block;
	}

	&.disabled {
		color: @light-grey;
		cursor: default;
	}

	&.focused,
	&:not(.disabled):hover,
	&:not(.disabled):focus {
		color: @dropdown-menu-item-hover-color;
		background-color: @dropdown-menu-item-hover-background;
	}

	&.selected {
		color: @dropdown-menu-item-hover-color;
		background-color: @dropdown-menu-item-hover-background;
	}
}