127 lines
2.4 KiB
SCSS
127 lines
2.4 KiB
SCSS
|
// Dropdowns
|
||
|
|
// *****************************************************************
|
||
|
|
|
||
|
|
// On hover outline
|
||
|
|
[data-trigger='hover'] {
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu {
|
||
|
|
box-shadow: $dropdown-box-shadow;
|
||
|
|
|
||
|
|
// Mega dropdown inside the dropdown menu
|
||
|
|
.mega-dropdown > & {
|
||
|
|
left: 0 !important;
|
||
|
|
right: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Badge within dropdown menu
|
||
|
|
.badge[class^='float-'],
|
||
|
|
.badge[class*=' float-'] {
|
||
|
|
position: relative;
|
||
|
|
top: 0.071em;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Dark style
|
||
|
|
@if $dark-style {
|
||
|
|
.list-group-item {
|
||
|
|
border-color: rgba-to-hex($dropdown-divider-bg, $dropdown-bg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// For RTL
|
||
|
|
@include rtl-style {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Dropdown item line height
|
||
|
|
.dropdown-item {
|
||
|
|
li:not(:first-child) &,
|
||
|
|
.dropdown-menu &:not(:first-child) {
|
||
|
|
margin-top: 2px;
|
||
|
|
}
|
||
|
|
border-radius: $dropdown-border-radius;
|
||
|
|
&.disabled .waves-ripple {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hidden dropdown toggle arrow
|
||
|
|
.dropdown-toggle.hide-arrow,
|
||
|
|
.dropdown-toggle-hide-arrow > .dropdown-toggle {
|
||
|
|
&::before,
|
||
|
|
&::after {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Dropdown caret icon
|
||
|
|
|
||
|
|
@if $enable-caret {
|
||
|
|
// Dropdown arrow
|
||
|
|
.dropdown-toggle::after {
|
||
|
|
@include caret-down($caret-width);
|
||
|
|
}
|
||
|
|
// Dropend arrow
|
||
|
|
.dropend .dropdown-toggle::after {
|
||
|
|
@include caret-right($caret-width);
|
||
|
|
}
|
||
|
|
// Dropstart arrow
|
||
|
|
.dropstart .dropdown-toggle::before {
|
||
|
|
@include caret-left($caret-width);
|
||
|
|
}
|
||
|
|
// Dropup arrow
|
||
|
|
.dropup .dropdown-toggle::after {
|
||
|
|
@include caret-up($caret-width);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropstart .dropdown-toggle::before,
|
||
|
|
.dropend .dropdown-toggle::after {
|
||
|
|
vertical-align: $caret-vertical-align;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include rtl-only {
|
||
|
|
.dropdown-toggle:not(.dropdown-toggle-split)::after {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-right: $caret-spacing;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@include ltr-only {
|
||
|
|
.dropdown-toggle-split:after {
|
||
|
|
margin-left: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@include rtl-only {
|
||
|
|
.dropdown-toggle-split:after {
|
||
|
|
margin-right: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include rtl-only {
|
||
|
|
// Dropdown menu alignment
|
||
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||
|
|
@include media-breakpoint-up($breakpoint) {
|
||
|
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||
|
|
|
||
|
|
.dropdown-menu#{$infix}-start {
|
||
|
|
--bs-position: start;
|
||
|
|
|
||
|
|
&[data-bs-popper] {
|
||
|
|
left: auto;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-menu#{$infix}-end {
|
||
|
|
--bs-position: end;
|
||
|
|
|
||
|
|
&[data-bs-popper] {
|
||
|
|
left: 0;
|
||
|
|
right: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|