Torq/css/dropdowns.css

/*
	Dropdown menus
	========================================
*/

/* Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns */
.dropup,
.dropdown {
	position: relative;
}

.dropdown-toggle {
	/* The caret makes the toggle a bit too tall in IE7 */
	margin-bottom: -3px;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
	outline: 0;
}

/* Dropdown arrow/caret
   -------------------- */
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: top;
	border-top: 4px solid var(--black);
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
}

/* Place the caret */
.dropdown .caret {
	margin-top: 8px;
	margin-left: 2px;
}

/* The dropdown menu (ul)
   ---------------------- */
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--zindex-dropdown);
	display: none; /* none by default, but block on "open" of the menu */
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0; /* override default ul */
	list-style: none;
	background-color: var(--dropdown-background);
	border: 1px solid #ccc; /* Fallback for IE7-8 */
	border: 1px solid var(--dropdown-border);
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-radius: 6px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
}

/* Aligns the dropdown menu to right */
.dropdown-menu.pull-right {
	right: 0;
	left: auto;
}

/* Dividers (basically an hr) within the dropdown */
.dropdown-menu .divider {
	height: 1px;
	margin: 8px 1px;
	overflow: hidden;
	background-color: var(--dropdown-divider-top);
	border-bottom: 1px solid var(--dropdown-divider-bottom);
}

/* Links within the dropdown menu */
.dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: var(--base-line-height);
	color: var(--dropdown-link-color);
	white-space: nowrap;
}

/* Hover/Focus state
   --------------- */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
	text-decoration: none;
	color: var(--dropdown-link-color-hover);
	background-color: var(--dropdown-link-background-hover);
	background-image: linear-gradient(to bottom, var(--dropdown-link-background-hover), #0077b3);
}

/* Active state
   ------------ */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	color: var(--dropdown-link-color-active);
	text-decoration: none;
	outline: 0;
	background-color: var(--dropdown-link-background-active);
	background-image: linear-gradient(to bottom, var(--dropdown-link-background-active), #0077b3);
}

/* Disabled state
   -------------- */
/* Gray out text and ensure the hover/focus state remains gray */
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
	color: var(--gray-light);
}

/* Nuke hover/focus effects */
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
	text-decoration: none;
	background-color: transparent;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	cursor: default;
}

/* Open state for the dropdown
   --------------------------- */
.open {
	/* IE7's z-index only goes to the nearest positioned ancestor, which would
	   make the menu appear below buttons that appeared later on the page */
	z-index: var(--zindex-dropdown);
}

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

/* Backdrop to catch body clicks on mobile, etc.
   --------------------------- */
.dropdown-backdrop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: calc(var(--zindex-dropdown) - 10);
}

/* Right aligned dropdowns
   --------------------------- */
.pull-right > .dropdown-menu {
	right: 0;
	left: auto;
}

/* Allow for dropdowns to go bottom up (aka, dropup-menu)
   ------------------------------------------------------ */
/* Just add .dropup after the standard .dropdown class and you're set, bro.
   TODO: abstract this so that the navbar fixed styles are not placed here? */
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
	border-top: 0;
	border-bottom: 4px solid var(--black);
	content: "";
}

/* Different positioning for bottom up menu */
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
	top: auto;
	bottom: 100%;
	margin-bottom: 1px;
}

/* Sub menus
   --------------------------- */
.dropdown-submenu {
	position: relative;
}

/* Default dropdowns */
.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

/* Dropups */
.dropup .dropdown-submenu > .dropdown-menu {
	top: auto;
	bottom: 0;
	margin-top: 0;
	margin-bottom: -2px;
	border-radius: 5px 5px 5px 0;
}

/* Caret to indicate there is a submenu */
.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #cccccc;
	margin-top: 5px;
	margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
	border-left-color: var(--dropdown-link-color-hover);
}

/* Left aligned submenus */
.dropdown-submenu.pull-left {
	/* Undo the float
	   Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. */
	float: none;
}

/* Positioning the submenu */
.dropdown-submenu.pull-left > .dropdown-menu {
	left: -100%;
	margin-left: 10px;
	border-radius: 6px 0 6px 6px;
}

/* Tweak nav headers
   ----------------- */
/* Increase padding from 15px to 20px on sides */
.dropdown .dropdown-menu .nav-header {
	padding-left: 20px;
	padding-right: 20px;
}

/* Typeahead
   --------- */
.typeahead {
	z-index: 1051;
	margin-top: 2px; /* give it some space to breathe */
	border-radius: var(--base-border-radius);
}