.btn.btn-dropdown {
[class^="icon-"] { font-size: 11px; color: #4f566b; margin-left: .7em; display: inline-block; } [class^="icon-"].no-text { margin-left: 0; }
} .heading-dropdown {
cursor: pointer; display: inline-block; .icon.icon-chevron-down { transition: .3s all; opacity: 0; margin-left: 7px; font-size: 80%; } &:hover .icon.icon-chevron-down { opacity: 1; }
} .dropdown-menu {
display: none; transition: .2s all; border-radius: 5px; .dropdown-menu-scrollable { max-height: 186px; overflow-y: scroll; -webkit-overflow-scrolling: touch; } z-index: 1; padding: 8px 0; &.no-padding { padding: 0; } position: absolute; background-color: #fff; box-shadow: 0 0 0 1px rgba(136, 152, 170, .1), 0 15px 35px 0 rgba(49, 49, 93, .1), 0 5px 15px 0 rgba(0, 0, 0, .08); .dropdown-divider { border-bottom: 1px solid #d8d8d8; margin: 10px 0; } .dropdown-item { min-width: 160px; padding: 7px 20px; font-size: 14px; color: #5469d4; display: block; text-decoration: none; &:hover { background-color: #f7fafc; } } &.no-arrow:after { display: none; } &:after { content: ' '; display: block; border: 0; border-top-left-radius: 4px; @include size(12px); background-color: #fff; position: absolute; transform: rotate(45deg); } &[data-place="top"]:after { bottom: -6px; left: 0; right: 0; margin-left: auto; margin-right: auto; } &[data-place="bottom"]:after { top: -6px; left: 0; right: 0; margin-left: auto; margin-right: auto; } &[data-place="left"]:after { right: -6px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } &[data-place="right"]:after { left: -6px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } &[data-place="top"][data-align="left"]:after { bottom: -6px; left: 20px; right: auto; } &[data-place="bottom"][data-align="left"]:after { top: -6px; left: 20px; right: auto; } &[data-place="top"][data-align="right"]:after { bottom: -6px; left: auto; right: 20px; } &[data-place="bottom"][data-align="right"]:after { top: -6px; left: auto; right: 20px; } &[data-place="left"][data-align="top"]:after { right: -6px; top: 14px; bottom: auto; } &[data-place="right"][data-align="top"]:after { left: -6px; top: 14px; bottom: auto; } &[data-place="left"][data-align="bottom"]:after { right: -6px; top: auto; bottom: 14px; } &[data-place="right"][data-align="bottom"]:after { left: -6px; top: auto; bottom: 14px; }
}
.dropdown-menu-title {
padding: 7px 14px; font-weight: 500; background-color: #f7fafc;
} .dropdown-menu-content {
padding: 14px; font-size: .9rem;
}
.dropdown-menu .dropdown-submenu .dropdown-item {
padding: .4rem 1.2rem .4rem 1.2rem;
} .dropdown-heading {
font-size: 14px; padding: 0 15px; font-weight: 900; color: #40468a;
}