apostrophe/lib/modules/apostrophe-ui/public/css/components/dropdown.less

The Apostrophe Content Management System.

.apos-dropdown
{
	position: relative;
	display: inline-block;
  .apos-no-select;
	& > * { position: relative; }
	.apos-drop-shadow;
}

.apos-dropdown .apos-button
{
	z-index: 5; // todo bo
	.apos-transition--bounce;
	.apos-drop-shadow(0, 0, 0, 0);
}

.apos-dropdown.apos-active
{
	.apos-button { z-index: @apos-z-index-7; }

	.apos-dropdown-items
  {
  	visibility: visible;
    opacity: 1;
    transform: translateX(0%);
    transition-delay: 0s;
		z-index: @apos-z-index-6;
  }
}

.apos-dropdown-items
{
	position: absolute;
	left: 0;
	display: inline-block;
	color: @apos-dark;
	min-width: 200px;
	background-color: @apos-white;
	// .apos-rounded;
	.apos-drop-shadow;
	visibility: hidden;
  opacity: 0;
  transform: translateZ(0);
  transform: translateY(10%);
  .apos-transition--bounce;
  z-index: 3; // todo bo
}

.apos-dropdown-item
{
	padding: @apos-padding-2;
	// .apos-text-small;
	&:hover
	{
		cursor: pointer;
		background-color: @apos-light;
	}
}

.apos-dropdown--down .apos-dropdown-items { top: 100%; }
.apos-dropdown--up .apos-dropdown-items { bottom: 100%; }

.apos-dropdown--down
{
	.apos-dropdown-items
	{
		overflow: hidden;
		height: 0;
		.apos-rounded-bl;
		.apos-rounded-br;
	}

	&.apos-active .apos-dropdown-items {
		overflow: auto;
		height: auto;
	}

	&.apos-active>.apos-button
	{
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.apos-dropdown--up
{
	.apos-dropdown-items
	{
		.apos-rounded-tl;
		.apos-rounded-tr;
	}
	&.apos-active>.apos-button
	{
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
}

.apos-dropdown--arrow-down
{
	.apos-button
	{
		&::after
		{
			position: absolute;
	    content: "\f0d7";
	    top: 10px;
	    right: 0px;
	    font-family: "FontAwesome";
	    .apos-transition--bounce;
		}
	}
	&.apos-active .apos-button::after{ right: 18px;}
}