react-dropdown-animated/src/components/style.css

A customizable dropdown menu button with simple animations for React. For those who like a little animation on your React app for some *pizzaz*.

.dropdown-container {
    position: relative;
}

.dropdown-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 0.25rem;
	user-select: none;
	transition: 0.15s ease-in-out;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1rem;
	outline: 1px solid;
}

.dropdown-button p {
	margin: 0;
	padding: 0;
	margin-right: 0.75rem;
}

.dropdown-button svg {
	width: 1rem !important;
	margin-top: 0rem !important;
}

.dropdown-button svg path {
	transition: 0.2s ease-in-out;
}

.dropdown-options {
	position: absolute;
	border-radius: 7px;
	background-color: white;
    border: 1px solid rgba(128, 128, 128, 0.493);
	z-index: 50;
	left: 0;
    white-space:nowrap;
}

.dropdown-options ul {
	list-style: none;
	padding: 0rem;
    margin: 0.5rem 0rem;
}

.dropdown-options li {
    text-align: start;
	user-select: none;
	padding: 0.35rem 1rem;
	align-items: center;
	cursor: pointer;
	transition: 0.25s;
}

.dropdown-options li:hover {
	background-color: rgba(225, 224, 224, 0.30);
}

.dropdown-options a {
	text-decoration: none;
	color: inherit;
}