discourse/app/assets/stylesheets/common/float-kit/d-menu-modal.scss
Kris b1d73bbbcc
DEV: move mobile d-menu styles to common directory (#39049)
Moves the float-kit d-menu-modal styles to a separate file in the common
directory so we don't need the mobile directory. Considered integrating
these into the existing d-menu stylesheet, but this is a clear separate
mode so it makes sense for this case to continue existing on its own.
2026-04-02 12:15:25 -04:00

62 lines
1.2 KiB
SCSS
Vendored

// used when @modalForMobile={{true}} is set on the d-menu component
.fk-d-menu-modal {
z-index: z("modal", "content");
&__grip {
position: absolute;
top: 2.5px;
left: 50%;
transform: translateX(-50%);
background: var(--primary-medium);
height: 5px;
width: 15vw;
max-width: 100px;
border-radius: 10px;
}
.d-modal__body {
padding: 1em 0;
}
h3 {
padding-top: 0.25em;
}
.dropdown-menu {
li a:focus-visible {
outline: 0;
}
&__item {
.btn {
border-radius: 0; // overruling the general border-radius var on all btns
// all specific overrules to make sure touch devices don't show focus states, which we apply on opening of the menu
&:focus-visible,
&:active {
.discourse-touch & {
background: transparent;
color: var(--primary);
.d-icon {
color: inherit;
}
&.btn-danger {
background: transparent;
color: var(--danger);
.d-icon {
color: var(--danger-hover);
}
}
}
}
}
}
li > .btn,
li > a {
padding: 0.75em 1rem;
}
}
}