// Pull in variables (for breakpoints)
@use "../global-variables" as *;
$phone: 767px;
// PF Select is deprecated - no issue reported upstream - this needs to be removed from our codebase
// Make select have the expected width
// REVIEW @Venefilyn: Check if still relevant
.pf-v6-c-select[data-popper-reference-hidden="false"] {
inline-size: auto;
}
*/
.pf-v6-c-form-control > select {
for all browsers */
--pf-v6-c-form-control--PaddingInlineEnd: calc(
var(--pf-t--global--font--size--body--default) + var(--pf-t--global--spacer--lg)
);
@-moz-document url-prefix() { // stylelint-disable-line at-rule-no-vendor-prefix
spacing with others; this can be removed after PatternFly removes it */
--pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
}
}
// Fix the double-spacing issue in the non-deprecated split buttons
// https://github.com/patternfly/patternfly/issues/6632
// REVIEW @Venefilyn: not fixed upstream
.pf-m-split-button .pf-v6-c-menu-toggle__controls {
margin: 0;
}
// Fix menus cropping contents
// https://github.com/patternfly/patternfly/issues/6565
// NOTE @Venefilyn: Might need to migrate to some other component
.pf-v6-c-menu__item-text {
overflow: visible;
}
// The default gap between the rows in horizontal lists is too large
.pf-v6-c-description-list.pf-m-horizontal-on-sm,
.pf-v6-c-description-list.pf-m-horizontal {
--pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--300); // 1rem
}
.pf-v6-c-modal-box.pf-m-align-top {
// We utilize custom footers in dialogs
// Make sure that the buttons always appear in the next line from the inline alerts
.pf-v6-c-modal-box__footer {
flex-wrap: wrap;
row-gap: var(--pf-t--global--spacer--sm);
> div:not(.pf-v6-c-button):not(.dialog-wait-ct) {
flex: 0 0 100%;
}
}
}
// don't hide long dialog titles
.pf-v6-c-modal-box__title-text {
white-space: normal;
}
// Modals should accommodate content width, as languages can make elements (especially buttons) too long
// https://github.com/patternfly/patternfly/issues/7440
.pf-v6-c-modal-box {
min-inline-size: min-content;
}
.pf-v6-c-card {
// FIXME: Using an expandable content within a card would cause the card to be scrollable while nothing
// would be in view. Makes it look like there is something to scroll to when there isn't anything.
// PF deliberately makes expandable `[hidden]` content have `display: revert` which would make them have
// `display: block` or whatever is default from the browser. They do this to make animations work.
// Until fixed upstream we revert their `display: revert` rule.
// https://github.com/patternfly/patternfly/issues/7746
.pf-v6-c-expandable-section__content:where([hidden]) {
display: none;
}
// https://github.com/patternfly/patternfly/issues/3959
// TODO @Venefilyn: Change so we use .pf-m-no-offset, then remove this
// --pf-v6-c-card__header-toggle--MarginTop: 0;
.pf-v6-c-card__header:not(.ct-card-expandable-header),
.pf-v6-c-card__header:not(.ct-card-expandable-header) .pf-v6-c-card__header-main {
// upstream fix (pending): https://github.com/patternfly/patternfly/pull/3714
display: flex;
flex-wrap: wrap;
row-gap: var(--pf-t--global--spacer--sm);
justify-content: space-between;
}
.pf-v6-c-card__header:not(.ct-card-expandable-header) {
> .pf-v6-c-card__actions {
flex-wrap: wrap;
row-gap: var(--pf-t--global--spacer--sm);
// PF4 CardActions act up when using buttons while the title is large of font
// https://github.com/patternfly/patternfly/issues/3713
// https://github.com/patternfly/patternfly/issues/4362
margin: unset;
padding-inline: var(--pf-v6-c-card__actions--PaddingLeft) unset;
}
}
}
// Add some spacing to nested form groups - PF4 does not support these yet
// https://github.com/patternfly/patternfly-design/issues/1012
.pf-v6-c-form__group-control {
.pf-v6-c-form__group,
.pf-v6-c-form__section {
padding-block-start: var(--pf-t--global--spacer--md);
}
}
// Alerts use elements that have fonts set in other frameworks (including PF3);
// generally, this is an H4 that often has a font size and sometimes family set.
// Therefore, it should inherit from the alert font set at the pf-v6-c-alert level.
// https://github.com/patternfly/patternfly/issues/4206
.pf-v6-c-alert__title {
font-size: inherit;
font-family: inherit;
}
.pf-v6-c-toolbar {
// Make summary content use the same vertical space as the filter toggle,
// when possible.
// https://github.com/patternfly/patternfly-design/issues/1055
&.ct-compact {
@media screen and (max-width: $pf-v6-global--breakpoint--lg - 1) {
display: flex;
flex-wrap: wrap;
> .pf-v6-c-toolbar__content:first-child {
flex: auto;
}
.pf-v6-c-toolbar__content-section {
inline-size: auto;
}
}
}
}
// When there is an Alert above the Form add some spacing
.pf-v6-c-modal-box .pf-v6-c-alert + .pf-v6-c-form {
padding-block-start: var(--pf-t--global--font--size--sm);
}
// HACK: Not possible to specify text, so needs some hacks, see https://github.com/patternfly/patternfly-react/issues/6140
.pf-v6-c-toolbar__toggle {
.pf-v6-c-button.pf-m-plain {
color: var(--pf-v6-c-button--m-link--Color);
.pf-v6-c-button__icon {
margin-inline-end: var(--pf-t--global--spacer--sm);
}
}
}
// Flex should use gap, not a margin hack
// https://github.com/patternfly/patternfly/issues/4523
// Override default spacing from lg -> md
.pf-v6-l-flex {
gap: var(--pf-v6-l-flex--spacer-base);
&:not([class*="pf-m-space-items-"]) {
gap: var(--pf-v6-l-flex--spacer--md);
> * {
--pf-v6-l-flex--spacer--column: 0;
}
}
// Negate the margin hack used by immediate flex children
// (except for nested flex, as we want to mind the gap)
> :not(.pf-v6-l-flex) {
--pf-v6-l-flex--spacer-base: 0;
}
// Undo all spacer modification adjustments
&[class*="pf-m-space-items-"] {
> * {
--pf-v6-l-flex--spacer--column: 0;
}
}
// Re-add spacer modification adjustments on the flex layout widget
// (using class attribute matching for handling breakpoint -on- also)
@each $size in (none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl) {
&[class*="pf-m-space-items-#{$size}"] {
--pf-v6-l-flex--spacer-base: var(--pf-v6-l-flex--spacer--#{$size});
}
}
}
// PF Modals has a brighter background than normal pages in dark mode.
// Tables are made to match the background but since modals change background
// this is something we need to change ourselves
// https://github.com/patternfly/patternfly/issues/5278
.pf-v6-c-modal-box .pf-v6-c-table {
background-color: inherit;
}
// Breadcrumb links should have the correct pointing hand cursor.
//
// PatternFly requires a "to" attribute for an actual link, but we use some
// funky onClick JS for navigating and override it with a className.
//
// Therefore, instead of having a proper <a href="..."> being rendered, we need
// to override the link. This is a problem with a (correct) assumption in PF
// and our (incorrect) way of not using links (but using JavaScript) for
// linking.
//
// Nevertheless, Cockpit needs to be adapted for this to work as expected.
.pf-v6-c-breadcrumb__link {
cursor: pointer;
}
// Dark mode fixes for several PF components
.pf-v6-theme-dark {
// FIXME: https://github.com/patternfly/patternfly/issues/5278
.pf-v6-c-modal-box .pf-v6-c-table {
background-color: inherit;
}
// FIXME: Force FormSelect's to get a readable background.
// https://github.com/patternfly/patternfly/issues/7593
// https://issues.redhat.com/browse/RHEL-97180
.pf-v6-c-form-control select:not(:disabled) {
background-color: var(--pf-t--global--background--color--floating--default);
}
}
@media screen and (max-width: $pf-v6-global--breakpoint--md) {
// Reduce side padding in mobile mode,
// intended mainly for PF PageSection elements (pf-v6-c-page__main-section).
// It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
// except this only affects the sides, not the top and bottom.
.pf-v6-c-page__main>section.pf-v6-c-page__main-section:not(.pf-m-padding) {
padding-inline: var(--pf-t--global--spacer--xs);
}
}
// Override as PF Page doesn't allow empty masthead and sidebar
@media (min-width: 75rem) {
// Please use .pf-m-no-sidebar instead as it is the new class name in PF for this
.pf-v6-c-page.no-masthead-sidebar {
--pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
}
}
.pf-v6-c-card.pf-m-plain {
// Plain PF Cards just remove the border color and background, but we should also make sure that the radius is
// removed so that tables etc. don't get weird borders on the first and last cell.
// This mostly happens when we're not using card body
border-radius: 0;
.pf-v6-c-card__header, > .pf-v6-c-card__title {
padding-inline: 0;
}
.pf-v6-c-card__body.contains-list {
padding: 0;
}
}
// FIXME: Temporary rework table cards in mobile/small view to have row dividers between each row.
.pf-v6-c-card.ct-small-table-card {
border-block-start: var(--pf-t--global--border--width--100) solid var(--pf-t--global--border--color--default);
border-radius: var(--pf-t--global--border--radius--0);
}
// NOTEs @Venefilyn: Expandable table has an alignment issue with the expand button and the text
// Tracked upstream here https://github.com/patternfly/patternfly/issues/7423
.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle:has(.pf-v6-c-button:not(.pf-m-small)) {
--pf-v6-c-table--m-compact__action--PaddingBlockStart: 0
}
// HACK: Patternfly has a weird issue with modals and skip to content
// button not being hidden as it should on rtl mode. Instead, it will make the
// page extremely wide and cause modals to be very offset. Changing from
// `absolute` to `fixed` makes sure that it all works as it should.
//
// Only applicable to Firefox, works fine in Chrome. Might also be fine outside
// of Firefox Responsive Design Mode. Verified to be an issue in PF v6.2.0
//
// https://github.com/patternfly/patternfly/issues/7463
.pf-v6-c-skip-to-content {
position: fixed;
}
// FIXME @Venefilyn: Due to a Patternfly bug when it comes to showing the
// scrollbars of subnavs, we have to workaround it by just making it wrap
// instead of scroll. (ugly but functional).
// Issue found in PF 6.2.0
// https://github.com/patternfly/patternfly-react/issues/11751
.services-header .pf-m-subnav {
--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--200);
.pf-v6-c-nav__list {
flex-wrap: wrap;
}
}
// NOTE: PF6 workaround, when table is in the small screen layout PF sets too big font-weight
// https://github.com/patternfly/patternfly/issues/7526
.pf-v6-c-table .pf-v6-c-table__tbody :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
font-weight: var(--pf-t--global--font--weight--body--bold);
}
// NOTE: Though Patternfly includes the icon content important severity color
// it is primarily used for severity icons that are not exposed in PF React but
// instead part of a different PF Component Group
// https://www.patternfly.org/patterns/status-and-severity/#severity-icons
// https://www.patternfly.org/component-groups/status-and-state-indicators/severity
.pf-v6-c-icon.pf-m-important {
--pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--severity--important--default);
}
// HACK: Patternfly 6.6.0 migrated from the deprecated word-break to overflow-wrap
// incorrectly and did a text-replace from `word-break: break-word` to
// `overflow-wrap: break-word`. According to MDN the behaviour is different and
// should instead be `overflow-wrap: anywhere`.
// Reverts https://github.com/patternfly/patternfly/commit/fff5587739106601d9c1e4b27f090c16603ce3a1
// Bug report https://github.com/patternfly/patternfly/issues/8484
// MDN note https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break#break-word
.pf-v6-c-alert__title,
.pf-v6-c-clipboard-copy__text,
.pf-v6-c-menu__item-description,
.pf-v6-c-modal-box__body,
.pf-v6-c-notification-drawer__group-toggle-title,
.pf-v6-c-notification-drawer__list-item-description,
.pf-v6-c-notification-drawer__list-item-header-title,
.pf-v6-c-progress__description,
.pf-v6-c-progress__status,
.pf-v6-c-title,
.pf-v6-c-tooltip__content,
.pf-v6-c-wizard__main,
.pf-v6-c-wizard__nav-link,
.pf-v6-c-wizard__toggle-list-item {
overflow-wrap: anywhere;
}
