elemental/less/components/Dropdown.less

React UI Framework

//
// Dropdowns
// ==============================

// Inspired by https://github.com/twbs/bootstrap




// Wrapper
// ------------------------------

.Dropdown {
	display: inline-block;
	position: relative;
}




// Menu
// ------------------------------


// base

.Dropdown-menu {
	.animation-duration( 100ms );
	.animation-timing-function( cubic-bezier(0.77, 0, 0.175, 1) );
	background-color: @dropdown-bg;
	border-radius: @border-radius-base;
	box-shadow: 0 0 0 1px rgba(0,0,0,.175), 0 3px 8px rgba(0,0,0,.175);
	font-size: @font-size-base;
	left: 0;
	list-style: none;
	margin: 4px 0 0; // override default ul
	min-width: 160px;
	padding: 5px 0;
	position: absolute;
	text-align: left; // ensures proper alignment if parent has alternative alignment
	top: 100%;
	z-index: @zindex-dropdown;

	// fix height and scroll
	max-height: @dropdown-menu-height;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

	.align-right & {
		left: auto;
		right: 0;
	}
}
.Dropdown-menu-enter {
	.animation-name( dropdownMenuEnter );
}
.Dropdown-menu-leave {
	.animation-name( dropdownMenuLeave );
}


// common

.Dropdown-menu__item,
.Dropdown-menu__header {
	white-space: nowrap;
}


// list item 

.Dropdown-menu__action {
	clear: both;
	color: @dropdown-link-color;
	cursor: pointer;
	display: block;
	font-weight: normal;
	line-height: @line-height-base;
	padding: 3px 20px;
	
	&:hover,
	&:focus {
		background-color: @dropdown-link-hover-bg;
		color: @dropdown-link-hover-color;
		text-decoration: none;
	}

	// active state
	&.active {
		&,
		&:hover,
		&:focus {
			background-color: @dropdown-link-active-bg;
			color: @dropdown-link-active-color;
			outline: 0;
			text-decoration: none;
		}
	}
}


// dividers

.Dropdown-menu__divider {
	background-color: @dropdown-divider-bg;
	height: 1px;
	margin-bottom: .25em;
	margin-top: .25em;
	overflow: hidden;
}


// headers

.Dropdown-menu__header {
	color: @dropdown-header-color;
	display: block;
	font-size: @font-size-sm;
	font-weight: 500;
	line-height: @line-height-base;
	margin-top: 1em;
	padding: 3px 20px;
	white-space: nowrap;

	// margin looks clumsy when preceeded by a divider
	.Dropdown-menu__divider + & {
		margin-top: 0;
	}
}


// background

.blockout, // catchall
.Dropdown-menu-backdrop {
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: @zindex-dropdown-backdrop;
}




// Animation
// --------------------

@-webkit-keyframes dropdownMenuEnter {
	from { opacity: 0; -webkit-transform: translate3d(0, -5px, 0); }
	to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes dropdownMenuEnter {
	from { opacity: 0; transform: translate3d(0, -5px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes dropdownMenuLeave {
	from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
	to   { opacity: 0; -webkit-transform: translate3d(0, -5px, 0); }
}
@keyframes dropdownMenuLeave {
	from { opacity: 1; transform: translate3d(0, 0, 0); }
	to   { opacity: 0; transform: translate3d(0, -5px, 0); }
}