* Copyright (C) 2023 Red Hat, Inc.
* SPDX-License-Identifier: LGPL-2.1-or-later
*/
// Adjust menu height for smaller screens
@media (max-height: 768px) {
.pf-v6-c-menu.pf-m-scrollable {
--pf-v6-c-menu--m-scrollable__content--MaxHeight: 12rem;
}
}
// Search input spacing
[class$="-search"] {
margin-bottom: var(--pf-t--global--spacer--sm);
}
// Menu border styling
[class$="-menu"] {
border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--brand--default);
}
While this is something that needs to be fixed globally in an overrides,
we're only using the component here, so we have a local, namespaced fix,
to prevent surprises elsewhere. However, if we use the widget elsewhere,
it would also need this fix, so this is definitely a fix for PF
overrides, not a local fix.
*/
[id$="-menu"] {
// Oddly, the spacing here isn't consistent with the reference on the website;
// it should be balanced on the top and bottom, not all just on the top
.pf-v6-c-menu__group-title {
padding-block: var(--pf-t--global--spacer--sm);
// As the top is smaller, it needs a little more space between it and
// the rest of the elements. The first one doesn't need this, however,
// so we only apply it to all headings that aren't the first one
.pf-v6-c-menu__group:not(:first-of-type) & {
margin-block-start: var(--pf-t--global--spacer--sm);
}
}
}
