@layer components {
.dropdown-menu {
border: 0;
}
.dropdown-menu {
@apply tw-rounded-lg tw-bg-white tw-shadow-md tw-ring-1 tw-ring-neutral-900/10 tw-ring-opacity-5 focus:tw-outline-none tw-z-[9000] tw-mt-3;
}
.dropdown-menu .divider {
@apply tw-bg-neutral-100 tw-my-1;
}
.dropdown-menu > li > a {
@apply tw-px-4 tw-py-1.5 tw-text-neutral-900 tw-w-full tw-break-words tw-whitespace-normal tw-font-medium;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
@apply tw-bg-neutral-100 tw-text-neutral-900 tw-outline-none;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
@apply tw-bg-neutral-100 tw-text-neutral-900;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
@apply tw-text-neutral-500;
}
.dropdown-header {
@apply tw-text-neutral-500 tw-text-base tw-font-medium tw-px-3.5;
}
/* sub */
.dropdown-submenu {
@apply tw-relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
border-radius: 0 6px 6px 6px;
max-height: 500px;
overflow-y: auto;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.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: theme("colors.neutral.400");
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: theme("colors.neutral.500");
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
border-radius: 6px;
margin-top: 0.2px;
border-top-left-radius: 0;
}
.dropdown-submenu.pull-left > .dropdown-menu li.active a:hover,
.dropdown-submenu.pull-left > .dropdown-menu li a:hover,
.dropdown-submenu.pull-left > .dropdown-menu li.active a {
border-top-left-radius: 0;
}
.dropdown-menu li > a > i {
margin-right: 6px;
text-align: center;
width: 1.25em;
}
}