961 lines
32 KiB
SCSS
961 lines
32 KiB
SCSS
.mui-theme:root {
|
|
// Alert
|
|
--mui-alert--BoxShadow: none;
|
|
--mui-alert-warning-text: #663c00;
|
|
--mui-alert-warning-font-weight: 400;
|
|
--mui-alert--PaddingBlockStart: 6px;
|
|
--mui-alert--PaddingBlockEnd: 6px;
|
|
--mui-alert--PaddingInlineStart: 16px;
|
|
--mui-alert--PaddingInlineEnd: 16px;
|
|
--mui-alert__icon--MarginInlineEnd: 12px;
|
|
--mui-alert__icon--MarginBlockStart: 7px;
|
|
--mui-alert__icon--MarginBlockStart: 7px;
|
|
--mui-alert__icon--MarginBlockEnd: 7px;
|
|
--mui-alert__icon--FontSize: 22px;
|
|
|
|
// Button
|
|
--mui-button-font-weight: 500;
|
|
--mui-button--BorderWidth: 1px;
|
|
--mui-button--hover--BorderWidth: 1px;
|
|
--mui-button--PaddingBlockStart: 6px;
|
|
--mui-button--PaddingBlockEnd: 6px;
|
|
--mui-button--PaddingInlineStart: 16px;
|
|
--mui-button--PaddingInlineEnd: 16px;
|
|
--mui-button--LineHeight: 1.75;
|
|
--mui-link-underlineColor: rgba(33, 150, 243, 0.4);
|
|
|
|
// Drawer
|
|
--mui-drawer-BorderLeft: var(--mui-palette-grey-300);
|
|
|
|
// Menu item
|
|
--mui-menu__item--PaddingBlockStart: 6px;
|
|
--mui-menu__item--PaddingBlockEnd: 6px;
|
|
--mui-menu__item--PaddingInlineStart: 16px;
|
|
--mui-menu__item--PaddingInlineEnd: 16px;
|
|
--mui-menu__item--FontSize: 1rem;
|
|
|
|
// Menu toggle
|
|
--mui-menu-toggle__toggle-icon--MinHeight: auto;
|
|
--mui-menu-toggle__controls--MinWidth: 0;
|
|
--mui-menu-toggle--expanded--BackgroundColor: none;
|
|
--mui-menu-toggle--expanded--BorderColor: none;
|
|
--mui-menu-toggle--LineHeight: 1.75;
|
|
--mui-menu-toggle--PaddingBlockStart: 6px;
|
|
--mui-menu-toggle--PaddingBlockEnd: 6px;
|
|
--mui-menu-toggle--PaddingInlineStart: 16px;
|
|
--mui-menu-toggle--PaddingInlineEnd: 16px;
|
|
--mui-menu-toggle--ColumnGap: 0;
|
|
--mui-menu-toggle--expanded--Color: black;
|
|
--mui-menu-toggle--hover--BorderColor: none;
|
|
--mui-menu-toggle--BorderColor: none;
|
|
--mui-menu-toggle--PaddingInlineStart: 10px;
|
|
--mui-menu-toggle--PaddingInlineEnd: 10px;
|
|
|
|
// Radio
|
|
--mui-radio--margin: 10px 0;
|
|
--mui-radio-PaddingLeft: 30px;
|
|
--mui-radio__label--Width: 20px;
|
|
--mui-radio__label--Height: 20px;
|
|
--mui-radio__input--Width: 10px;
|
|
--mui-radio__input--Height: 10px;
|
|
|
|
// Sidebar from https://github.com/kubeflow/kubeflow/blob/4275d99754ac91f6cf5654b03824a73825e9fe55/components/centraldashboard/public/components/main-page.css#L7C1-L13C51
|
|
--kf-central-primary-background-color: #0a3b71;
|
|
--kf-central-sidebar-default-color: #ffffff90;
|
|
--kf-central-app-drawer-width: 240px;
|
|
--kf-central-app-bar-height: 24px;
|
|
|
|
// Table
|
|
--mui-table__button--BackgroundColor: none;
|
|
--mui-table__button--hover--BackgroundColor: none;
|
|
--mui-table__button--Color: var(--pf-v6-c-table--cell--Color);
|
|
--mui-table__button--PaddingBlockStart: 0;
|
|
--mui-table__button--PaddingBlockEnd: 0;
|
|
--mui-table__button--PaddingInlineStart: 0;
|
|
--mui-table__button--PaddingInlineEnd: 0;
|
|
--mui-table--cell--PaddingInlineStart: 16px;
|
|
--mui-table--cell--PaddingInlineEnd: 16px;
|
|
--mui-table--cell--PaddingBlockStart: 16px;
|
|
--mui-table--cell--PaddingBlockEnd: 16px;
|
|
--mui-table--cell--first-last-child--PaddingInline: 8px;
|
|
--mui-table__thead--cell--FontSize: 14px;
|
|
--mui-table__sort-indicator--MarginInlineStart: 4px;
|
|
|
|
letter-spacing: 0.01071em;
|
|
|
|
// Tabs
|
|
--mui-tabs__link--hover--BackgroundColor: transparent;
|
|
--mui-tabs__item--PaddingBlockStart: 0;
|
|
--mui-tabs__item--PaddingBlockEnd: 0;
|
|
--mui-tabs__item--PaddingInlineStart: 0;
|
|
--mui-tabs__item--PaddingInlineEnd: 0;
|
|
--mui-tabs__link--PaddingBlockStart: 12px;
|
|
--mui-tabs__link--PaddingBlockEnd: 12px;
|
|
--mui-tabs__link--PaddingInlineStart: 16px;
|
|
--mui-tabs__link--PaddingInlineEnd: 16px;
|
|
--mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
|
|
--mui-tabs__item--m-current__link--after--BorderWidth: 2px;
|
|
--mui-tabs__link--FontSize: 0.875rem;
|
|
|
|
--mui-text-transform: uppercase;
|
|
|
|
--mui-spacing-4px: calc(0.5 * var(--mui-spacing));
|
|
--mui-spacing-8px: var(--mui-spacing);
|
|
--mui-spacing-16px: calc(2 * var(--mui-spacing));
|
|
|
|
--pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
|
|
--pf-t--global--border--width--box--status--default: 1px;
|
|
--pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
|
|
--pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);
|
|
|
|
--pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
|
|
--pf-t--global--text--color--inverse: var(--mui-palette-common-white);
|
|
|
|
--pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
|
|
--pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
|
|
--pf-t--global--font--family--300: Roboto, Courier, monospace;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
|
|
--pf-v6-c-button--PaddingInlineStart: none;
|
|
--pf-v6-c-button--PaddingInlineEnd: none;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-alert {
|
|
--pf-v6-c-alert--m-warning__title--Color: var(
|
|
--pf-t--global--text--color--status--warning--default
|
|
);
|
|
--pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
|
|
--pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
|
|
--pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize);
|
|
--pf-v6-c-alert--BoxShadow: var(--mui-alert--BoxShadow);
|
|
--pf-v6-c-alert--PaddingBlockStart: var(--mui-alert--PaddingBlockStart);
|
|
--pf-v6-c-alert--PaddingBlockEnd: var(--mui-alert--PaddingBlockEnd);
|
|
--pf-v6-c-alert--PaddingInlineStart: var(--mui-alert--PaddingInlineStart);
|
|
--pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-alert__title {
|
|
padding-block: var(--mui-spacing);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-alert__icon {
|
|
--pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-brand.kubeflow_brand {
|
|
padding: var(--pf-t--global--spacer--md);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-button {
|
|
--pf-v6-c-button--FontWeight: var(--mui-button-font-weight);
|
|
--pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
|
|
--pf-v6-c-button--PaddingBlockEnd: var(--mui-button--PaddingBlockEnd);
|
|
--pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
|
|
--pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
|
|
--pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
|
|
letter-spacing: 0.02857em;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
--pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
|
|
text-decoration-color: var(--mui-link-underlineColor);
|
|
|
|
&:hover {
|
|
text-decoration-color: initial;
|
|
}
|
|
|
|
&.workspace-kind-summary-button {
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
|
|
// Keep icon color the same on hover
|
|
color: inherit;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-button.pf-m-secondary:hover {
|
|
--pf-v6-c-button--BorderWidth: var(--mui-button--hover--BorderWidth);
|
|
--pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-card {
|
|
--pf-v6-c-card--BorderWidth: 1px;
|
|
--pf-v6-c-card--BorderRadius: var(--mui-shape-borderRadius);
|
|
--pf-v6-c-card--BorderColor: var(--mui-palette-divider);
|
|
}
|
|
|
|
.pf-v6-c-card__selectable-actions
|
|
:is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
|
|
--pf-v6-c-card--BorderColor: var(--mui-palette-grey-300);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-card:hover {
|
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-100);
|
|
--pf-v6-c-card--BorderColor: var(--mui-palette-grey-200);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-card.pf-m-selected {
|
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-200);
|
|
--pf-v6-c-card--m-selectable--m-selected--BorderColor: none;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-card.pf-m-selected:hover {
|
|
--pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-300);
|
|
--pf-v6-c-card--m-selectable--m-selected--BorderColor: none;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-description-list__term {
|
|
font: var(--mui-font-subtitle2);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
|
|
align-content: center;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-drawer {
|
|
--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
|
|
--mui-drawer-BorderLeft
|
|
);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form__group {
|
|
position: relative;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
|
|
.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
|
|
padding-block-start: 10px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
|
|
color: var(--mui-palette-text-disabled);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form__helper-text.path-helper-text {
|
|
margin-inline-start: var(--pf-t--global--spacer--lg);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form__section-title {
|
|
--pf-v6-c-form__section-title--MarginBlockStart: 0px;
|
|
--pf-v6-c-form__section-title--MarginInlineStart: 0px;
|
|
--pf-v6-c-form__section-title--MarginBlockEnd: 0.35em;
|
|
--pf-v6-c-form__section-title--MarginInlineEnd: 0px;
|
|
}
|
|
|
|
// Base form label styles
|
|
.mui-theme .pf-v6-c-form__label {
|
|
color: var(--mui-palette-grey-600);
|
|
pointer-events: none;
|
|
transition: all 0.2s ease;
|
|
--pf-v6-c-form__label-required--Color: currentColor;
|
|
}
|
|
|
|
// Text input labels (text fields, textareas, selects)
|
|
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-form-control) .pf-v6-c-form__label,
|
|
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-text-input-group) .pf-v6-c-form__label {
|
|
position: absolute;
|
|
top: 35%;
|
|
left: 12px;
|
|
font-size: 14px;
|
|
transform-origin: left center;
|
|
transform: translateY(-50%) scale(0.75);
|
|
background-color: var(--mui-palette-common-white);
|
|
padding: 0 4px;
|
|
z-index: 1;
|
|
}
|
|
|
|
// Form controls with number inputs - specific styling overrides
|
|
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-number-input) {
|
|
.pf-v6-c-form__label {
|
|
top: 30%;
|
|
font-size: 16px;
|
|
left: 0;
|
|
}
|
|
|
|
.pf-v6-c-form-control {
|
|
// Override default form control padding to match button padding in this context
|
|
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
|
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
|
|
|
|
&.workspace-kind-unit-select {
|
|
--pf-v6-c-form-control--PaddingInlineEnd: calc(
|
|
var(--pf-v6-c-form-control__select--PaddingInlineEnd) +
|
|
var(--pf-v6-c-form-control__icon--FontSize)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form-control input::placeholder {
|
|
--pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form-control {
|
|
--pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
|
|
--pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form-control {
|
|
// Resize is disabled in MUI.
|
|
resize: none;
|
|
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
|
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);
|
|
|
|
#text-file-simple-filename {
|
|
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
|
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
|
|
}
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form__section {
|
|
--pf-v6-c-form__section--Gap: 0px;
|
|
}
|
|
|
|
.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
|
|
padding: 8px 14px;
|
|
}
|
|
|
|
.mui-theme .tr-fieldset-wrapper .form-fieldset {
|
|
inset: 0px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form-control {
|
|
// Using CSS property here since PF vars for input padding do not exist.
|
|
// PF can add custom vars for padding on text input, text area, and form select
|
|
|
|
--pf-v6-c-form-control--PaddingBlockStart: 16.5px;
|
|
--pf-v6-c-form-control--PaddingBlockEnd: 16.5px;
|
|
--pf-v6-c-form-control--PaddingInlineStart: 14px;
|
|
--pf-v6-c-form-control--PaddingInlineEnd: 14px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-text-input-group {
|
|
--pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
|
|
--pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-text-input-group {
|
|
--pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form__group-control textarea {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-form-control > :is(input, select, textarea):focus {
|
|
--pf-v6-c-form-control--OutlineOffset: none;
|
|
outline: none;
|
|
}
|
|
|
|
.mui-theme .workspacekind-form-resource-input,
|
|
.custom-resource-type-input {
|
|
// Make sure input and select have the same height in ResourceInputWrapper
|
|
.pf-v6-c-form-control {
|
|
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
|
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
|
|
|
|
&:has(select) {
|
|
--pf-v6-c-form-control--PaddingInlineEnd: calc(
|
|
var(--pf-v6-c-form-control__select--PaddingInlineEnd) +
|
|
var(--pf-v6-c-form-control__icon--FontSize)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-text-input-group__text-input:focus {
|
|
--pf-v6-c-form-control--OutlineOffset: none;
|
|
outline: none;
|
|
}
|
|
|
|
.form-fieldset-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.pf-v6-c-form__group .form-fieldset-legend {
|
|
float: unset;
|
|
width: auto;
|
|
overflow: hidden;
|
|
display: block;
|
|
padding: 0;
|
|
height: 11px;
|
|
font-size: 0.75em;
|
|
visibility: hidden;
|
|
max-width: 0.01px;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.form-fieldset-wrapper:hover .form-fieldset {
|
|
border-color: black;
|
|
}
|
|
|
|
.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
|
|
border-color: rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
.form-fieldset-wrapper:focus-within .form-fieldset {
|
|
border-color: var(--mui-palette-primary-main);
|
|
border-width: 2px;
|
|
padding: 7px 7px;
|
|
}
|
|
|
|
.form-fieldset-legend {
|
|
float: unset;
|
|
width: auto;
|
|
overflow: hidden;
|
|
display: block;
|
|
padding: 0 5px 0 5px;
|
|
font-size: 0.75em;
|
|
max-width: 0.01px;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.form-fieldset-wrapper:focus-within {
|
|
color: var(--mui-palette-primary-main);
|
|
}
|
|
|
|
.form-fieldset-wrapper,
|
|
.toolbar-fieldset-wrapper,
|
|
.tr-fieldset-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-fieldset-wrapper .form-fieldset:hover {
|
|
border-color: var(--mui-palette-common-black);
|
|
}
|
|
|
|
.toolbar-fieldset-wrapper:focus-within .form-fieldset,
|
|
.tr-fieldset-wrapper:focus-within .form-fieldset {
|
|
border-color: var(--mui-palette-primary-main);
|
|
border-width: 2px;
|
|
padding: 7px 7px;
|
|
}
|
|
|
|
.toolbar-fieldset-wrapper .form-fieldset,
|
|
.form-fieldset {
|
|
text-align: left;
|
|
position: absolute;
|
|
inset: -5px 0px 0px;
|
|
margin: 0;
|
|
padding: 0 8px;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
overflow: hidden;
|
|
min-width: 0%;
|
|
border-color: rgba(0, 0, 0, 0.23);
|
|
border-radius: var(--mui-shape-borderRadius);
|
|
}
|
|
|
|
.toolbar-fieldset-wrapper .form-fieldset-legend {
|
|
float: unset;
|
|
width: auto;
|
|
overflow: hidden;
|
|
display: block;
|
|
padding: 0 5px 0 5px;
|
|
font-size: 0.75em;
|
|
max-width: 0.01px;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.toolbar-fieldset-wrapper .form-fieldset-legend span {
|
|
font-weight: var(--pf-t--global--font--weight--200);
|
|
}
|
|
|
|
.toolbar-fieldset-wrapper:focus-within {
|
|
color: var(--mui-palette-primary-main);
|
|
}
|
|
|
|
.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
|
|
color: var(--mui-palette-primary-main);
|
|
}
|
|
|
|
.tr-fieldset-wrapper .pf-v6-c-form-control,
|
|
.toolbar-fieldset-wrapper .pf-v6-c-form-control,
|
|
.form-fieldset-wrapper .pf-v6-c-form-control {
|
|
--pf-v6-c-form-control--before--BorderColor: transparent !important;
|
|
--pf-v6-c-form-control--after--BorderColor: transparent !important;
|
|
}
|
|
|
|
.pf-v6-c-form__field-group-body {
|
|
--pf-v6-c-form__field-group-body--PaddingBlockStart: 8px;
|
|
}
|
|
|
|
.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
|
|
.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
|
|
color: var(--mui-palette-primary-main);
|
|
}
|
|
|
|
.pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
|
|
--pf-v6-c-form-control--after--BorderWidth: 2px;
|
|
--pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
|
|
}
|
|
|
|
.pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
|
|
// Using CSS property here since --pf-v6-c-form__label--Color does not exist.
|
|
|
|
/* Change color of the label when the input is focused */
|
|
color: var(--mui-palette-primary-main);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu {
|
|
--pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
|
|
--pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);
|
|
--pf-v6-c-menu--PaddingBlockStart: none;
|
|
--pf-v6-c-menu--PaddingBlockEnd: none;
|
|
--pf-v6-c-menu--PaddingInlineStart: var(--mui-spacing);
|
|
--pf-v6-c-menu--PaddingInlineEnd: var(--mui-spacing);
|
|
--pf-v6-c-menu__item--PaddingBlockStart: var(--mui-menu__item--PaddingBlockStart);
|
|
--pf-v6-c-menu__item--PaddingBlockEnd: var(--mui-menu__item--PaddingBlockEnd);
|
|
--pf-v6-c-menu__item--PaddingInlineStart: var(--mui-menu__item--PaddingInlineStart);
|
|
--pf-v6-c-menu__item--PaddingInlineEnd: var(--mui-menu__item--PaddingInlineEnd);
|
|
--pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle {
|
|
--pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
|
|
--pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
|
|
--pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
|
|
--mui-menu-toggle--expanded--BackgroundColor
|
|
);
|
|
--pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
|
|
--pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
|
|
--pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
|
|
--pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap);
|
|
--pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
|
|
--pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
|
|
--pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
|
|
--pf-v6-c-menu-toggle--hover--BackgroundColor: var(
|
|
--pf-t--global--background--color--action--plain--hover
|
|
);
|
|
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
|
|
--pf-t--global--color--brand--default
|
|
);
|
|
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
|
|
--mui-palette-primary-dark
|
|
);
|
|
|
|
font-weight: var(--mui-button-font-weight);
|
|
letter-spacing: 0.02857em;
|
|
height: 37px;
|
|
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle__button {
|
|
font-weight: var(--mui-button-font-weight);
|
|
letter-spacing: 0.02857em;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle.pf-m-primary {
|
|
--pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-white);
|
|
--pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
|
|
--pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-primary-dark);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
|
|
--pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
|
|
}
|
|
|
|
.mui-theme
|
|
.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
|
|
.pf-v6-c-menu-toggle__button[aria-expanded='true'] {
|
|
--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
|
|
--mui-palette-primary-dark
|
|
);
|
|
}
|
|
|
|
.pf-v6-c-menu-toggle.pf-m-secondary.pf-m-split-button {
|
|
--pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-primary-main);
|
|
--pf-v6-c-menu-toggle--BorderWidth: var(--mui-button--BorderWidth);
|
|
--pf-v6-c-menu-toggle--BorderStyle: solid;
|
|
--pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-primary-dark);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
|
|
--pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-spacing-4);
|
|
--pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-spacing-4);
|
|
--pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
|
|
--pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
|
|
vertical-align: revert;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle__toggle-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
|
|
margin-right: calc(var(--mui-spacing) * -1 + 4px);
|
|
margin-left: var(--mui-spacing);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-menu-toggle__icon {
|
|
display: block;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-nav {
|
|
padding-block-start: 0;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-nav__link {
|
|
--pf-v6-c-nav__link--BorderRadius: 0px;
|
|
--pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
|
|
--pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
|
|
--pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
|
|
--pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
|
|
|
|
&.pf-m-current {
|
|
border-left: 3px solid var(--mui-palette-common-white);
|
|
--pf-v6-c-nav__link--m-current--BackgroundColor: #ffffff1b;
|
|
--pf-v6-c-nav__link--m-current--Color: var(--mui-palette-common-white);
|
|
}
|
|
|
|
&.pf-v6-c-brand {
|
|
--pf-v6-c-nav__link--hover--BackgroundColor: none;
|
|
}
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-nav__link:focus {
|
|
--pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-nav__list {
|
|
row-gap: none;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-page__sidebar {
|
|
--pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-page__sidebar-body {
|
|
--pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
|
|
--pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
|
|
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-primary-main);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
|
|
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-success-main);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-radio.pf-m-standalone:not(.workspace-kind-form-radio) .pf-v6-c-radio__input {
|
|
display: none;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-table {
|
|
--pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
|
|
--pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);
|
|
--pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
|
|
--pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
|
|
--pf-v6-c-table--cell--Color: var(--mui-palette-text-primary);
|
|
--pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor);
|
|
--pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
|
|
--pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
|
|
--pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
|
|
--pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
|
|
--pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd);
|
|
--pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart);
|
|
--pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
|
|
--pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
|
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
|
|
--pf-v6-c-table--cell--first-last-child--PaddingInline: var(
|
|
--mui-table--cell--first-last-child--PaddingInline
|
|
);
|
|
--pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
|
|
--pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
|
|
--pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
|
|
--pf-v6-c-table__sort-indicator--MarginInlineStart: var(
|
|
--mui-table__sort-indicator--MarginInlineStart
|
|
);
|
|
|
|
letter-spacing: 0.01071em;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-table .pf-m-align-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-table__sort-indicator {
|
|
font-size: 18px;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
|
|
transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
transform-origin: center center;
|
|
align-self: start;
|
|
}
|
|
|
|
/* CSS workaround for spacing in labels in Workspace Kind */
|
|
.form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
|
|
padding-block-start: 0px;
|
|
}
|
|
|
|
/* CSS workaround to use MUI icon for sort icon */
|
|
.mui-theme .pf-v6-c-table__sort-indicator::before {
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ArrowDownwardIcon'%3E%3Cpath d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Hide PF's default icon for the CSS workaround to use MUI's icon */
|
|
.mui-theme .pf-v6-c-table__sort-indicator svg {
|
|
display: none;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator,
|
|
.mui-theme .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
|
|
transform: rotate(180deg);
|
|
align-self: end;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
|
|
align-self: start;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-tab-content {
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
}
|
|
|
|
.pf-v6-c-tab-content__body.pf-m-padding {
|
|
--pf-v6-c-tab-content__body--PaddingInlineStart: 0px;
|
|
--pf-v6-c-tab-content__body--PaddingInlineEnd: 0px;
|
|
--pf-v6-c-tab-content__body--PaddingBlockStart: var(--mui-spacing-8px);
|
|
--pf-v6-c-tab-content__body--PaddingBlockEnd: var(--mui-spacing-8px);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-tabs {
|
|
--pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
|
|
--pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
|
|
--pf-v6-c-tabs__item--PaddingBlockEnd: var(--mui-tabs__item--PaddingBlockEnd);
|
|
--pf-v6-c-tabs__item--PaddingInlineStart: none;
|
|
--pf-v6-c-tabs__item--PaddingInlineEnd: var(--mui-tabs__item--PaddingInlineEnd);
|
|
--pf-v6-c-tabs__link--PaddingBlockStart: var(--mui-tabs__link--PaddingBlockStart);
|
|
--pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd);
|
|
--pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
|
|
--pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
|
|
--pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
|
|
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
|
|
--mui-tabs__item--m-current__link--after--BorderWidth
|
|
);
|
|
--pf-v6-c-tabs__link--FontSize: 0.875rem;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-tabs__link {
|
|
font-weight: var(--mui-button-font-weight);
|
|
line-height: var(--mui-button-line-height);
|
|
letter-spacing: 0.02857em;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-tab-content {
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-table__td.pf-v6-c-table__action.pf-m-width-10 {
|
|
align-content: center;
|
|
}
|
|
|
|
// Updates the expand button to be 36.5px wide to match menu toggle button width
|
|
.mui-theme .pf-v6-c-table__td.pf-v6-c-table__toggle .pf-v6-c-button.pf-m-plain {
|
|
--pf-v6-c-button--PaddingInlineStart: 6px;
|
|
--pf-v6-c-button--PaddingInlineEnd: 6px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-label {
|
|
--pf-v6-c-label--BorderRadius: 16px;
|
|
--pf-v6-c-label--FontSize: 0.8125rem;
|
|
--pf-v6-c-label--PaddingInlineEnd: var(--mui-spacing-8px);
|
|
--pf-v6-c-label--PaddingInlineStart: var(--mui-spacing-8px);
|
|
--pf-v6-c-label--PaddingBlockStart: 0;
|
|
--pf-v6-c-label--PaddingBlockEnd: 0;
|
|
height: 24px;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-label.pf-m-overflow {
|
|
border: 1px solid var(--mui-palette-grey-400);
|
|
|
|
.pf-v6-c-label__text {
|
|
color: var(--mui-palette-common-black);
|
|
}
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
|
|
--pf-v6-c-button__icon--Color: var(--mui-palette-common-white);
|
|
--pf-v6-c-button--PaddingInlineStart: var(--mui-spacing-4px);
|
|
--pf-v6-c-button--PaddingInlineEnd: var(--mui-spacing-4px);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-label {
|
|
--pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--inverse);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-label-group.pf-m-category {
|
|
--pf-v6-c-label-group--m-category--BorderWidth: 0px;
|
|
--pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius);
|
|
box-shadow: var(--mui-shadows-1);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-label.pf-m-outline {
|
|
--pf-v6-c-label--BorderColor: none;
|
|
--pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-masthead {
|
|
--pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
|
|
box-shadow: var(--mui-shadows-1);
|
|
min-height: var(--kf-central-app-bar-height);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-modal-box {
|
|
--pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius);
|
|
--pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-page__main-container {
|
|
--pf-v6-c-page__main-container--BorderWidth: 0px;
|
|
--pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
|
|
box-shadow: var(--mui-shadows-1);
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-page__main-group.pf-m-sticky-top {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
// TODO: Remove when https://github.com/patternfly/patternfly-react/issues/11826 is resolved.
|
|
.pf-v6-c-page__main-section .pf-v6-c-page__main-body {
|
|
height: 100%;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-pagination {
|
|
--pf-v6-c-pagination__total-items--Display: block;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-pagination__total-items b {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-pagination__page-menu {
|
|
order: -1;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
|
|
--pf-v6-c-menu-toggle--expanded--BackgroundColor: none;
|
|
--pf-v6-c-menu-toggle--hover--BackgroundColor: none;
|
|
text-transform: none;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-pagination__page-menu::before {
|
|
content: 'Rows per page:';
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-page__sidebar {
|
|
position: absolute;
|
|
--pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
|
|
/* Sidebar width */
|
|
height: 100vh;
|
|
/* Take full height of viewport */
|
|
z-index: 300;
|
|
/* Position sidebar above the masthead */
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-page__main-container {
|
|
margin-top: var(--kf-central-app-bar-height);
|
|
/* Move content area below the app bar */
|
|
}
|
|
|
|
/* Hide Masthead Toggle by default */
|
|
.mui-theme .pf-v6-c-masthead__toggle {
|
|
display: none;
|
|
}
|
|
|
|
/* Show Masthead Toggle on viewports below 1270px */
|
|
@media (max-width: 1270px) {
|
|
.mui-theme .pf-v6-c-masthead__toggle {
|
|
display: block;
|
|
padding-block-start: var(--mui-spacing-4px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1270px) {
|
|
.mui-theme .pf-v6-c-masthead {
|
|
padding-left: var(--kf-central-app-drawer-width);
|
|
}
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-form-control {
|
|
// Override default form control padding to match button padding in this context
|
|
--pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
|
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
|
|
}
|
|
|
|
// Fix hover state margin issue by removing problematic padding
|
|
.mui-theme .pf-v6-c-menu__list {
|
|
--pf-v6-c-content--list--PaddingInlineStart: 0;
|
|
}
|
|
|
|
.mui-theme .pf-v6-c-expandable-section .pf-v6-c-expandable-section__content {
|
|
margin-block-end: var(--mui-spacing-16px);
|
|
}
|
|
|
|
.mui-theme .workspacekind-file-upload {
|
|
height: 100%;
|
|
|
|
.pf-v6-c-file-upload__file-details {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
/* Workaround for Toggle group header in Workspace Kind Form */
|
|
.mui-theme .workspace-kind-form-header .pf-v6-c-toggle-group__button.pf-m-selected {
|
|
background-color: #e0f0ff;
|
|
color: var(--pf-t--color--black);
|
|
}
|
|
|
|
|
|
.mui-theme .pf-v6-c-menu__item {
|
|
&.pf-m-selected {
|
|
--pf-v6-c-menu__item--BackgroundColor: rgba(
|
|
var(--mui-palette-primary-mainChannel, 25 118 210) /
|
|
var(--mui-palette-action-selectedOpacity, 0.08)
|
|
);
|
|
--pf-v6-c-menu__item--FontWeight: var(--mui-button-font-weight);
|
|
|
|
.pf-v6-c-menu__item-select-icon {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mui-theme button.pf-v6-c-menu-toggle {
|
|
// Use box-shadow to create a border effect without affecting the layout
|
|
&.pf-m-expanded,
|
|
&:focus {
|
|
box-shadow: 0 0 0 2px var(--mui-palette-primary-main);
|
|
outline: none; // Remove default browser outline
|
|
}
|
|
}
|