overleaf/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss

143 lines
2.7 KiB
SCSS
Raw Normal View History

.dropdown {
display: inline-flex;
}
.dropdown-header {
@include body-xs;
padding: var(--spacing-05) var(--spacing-06) var(--spacing-02)
var(--spacing-04);
}
.dropdown-menu {
@include shadow-md;
min-width: 240px;
}
.dropdown-item {
@include body-sm;
--bs-dropdown-item-border-radius: var(--border-radius-base);
display: grid;
grid-auto-flow: column;
justify-content: start;
align-content: center;
min-height: 44px; // a minimum height of 44px to be accessible for touch screens
position: relative;
&:active {
background-color: var(--bg-accent-03);
}
&,
&:active,
&:visited {
color: var(--neutral-90);
}
&:hover:not(.active),
&:focus:not(.active) {
background-color: var(--bg-light-secondary);
cursor: pointer;
text-decoration: none;
}
&[variant='danger'] {
color: var(--content-danger);
&:hover:not(.active),
&:focus:not(.active) {
background-color: var(--bg-danger-03);
}
}
&.active {
background-color: var(--bg-accent-03);
color: var(--green-70);
}
&.btn-link {
text-decoration: none;
&:hover,
&:focus {
color: inherit;
}
}
}
.dropdown-divider {
border-top-color: var(--border-divider);
margin: var(--spacing-01) var(--spacing-03);
}
.dropdown-item-description {
@include body-xs;
color: var(--content-secondary);
margin-top: var(--spacing-01);
}
.dropdown-item-description-container {
grid-auto-flow: row;
min-height: 60px;
}
.dropdown-item-trailing-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.dropdown-item-leading-icon {
padding-right: var(--spacing-04);
}
// description text should look disabled when the dropdown item is disabled
.dropdown-item.disabled .dropdown-item-description,
.dropdown-item[aria-disabled='true'] .dropdown-item-description {
background-color: transparent;
color: var(--content-disabled);
}
// override disabled styles when the state is active
.dropdown-item.active .dropdown-item-description {
background-color: initial;
color: var(--green-70);
}
.dropdown-button-toggle {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-right: var(--spacing-05);
padding-left: var(--spacing-05);
&.btn-primary,
&.btn-danger {
border-left: 1px solid rgb($neutral-90, 0.16);
}
&.btn-secondary {
border-left: 1px solid var(--neutral-60);
}
&[disabled],
&[aria-disabled='true'] {
border-left: 1px solid var(--neutral-10);
}
}
.select-dropdown-menu {
top: 100%;
margin-top: var(--spacing-04);
width: 100%;
max-height: 200px;
overflow: auto;
overflow-x: hidden;
}
.dropdown-item--highlighted {
background-color: var(--bg-light-secondary);
}