Skip to content

Commit

Permalink
pf5: Remove custom RTL overrides
Browse files Browse the repository at this point in the history
  • Loading branch information
@garrett @jelly
garrett authored and jelly committed Oct 6, 2023
1 parent 7836ff4 commit b906b2c
Showing 1 changed file with 0 additions and 214 deletions.
214 changes: 0 additions & 214 deletions pkg/lib/patternfly/patternfly-5-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,220 +331,6 @@ select.pf-v5-c-form-control {
margin-inline: 0 var(--pf-v5-c-button__icon--m-start--MarginRight);
}

// RTL fix: Masthead actions should be on the far side
.pf-v5-c-masthead__content {
margin-inline: auto var(--pf-v5-c-masthead__content--MarginLeft);
}

// RTL fix: Menu direction should take direction into consideration
.pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right,
.pf-v5-c-dropdown__menu.pf-m-align-right {
inset-inline: auto 0;
}

// RTL fix: Modal close button
.pf-v5-c-modal {
&-box__header {
padding-inline: var(--pf-v5-c-modal-box__header--PaddingRight) var(--pf-v5-c-modal-box__header--PaddingLeft);
}

&-box__close {
text-align: end;
inset-inline: auto var(--pf-v5-c-modal-box__close--Right);

+ * {
margin-inline: 0 var(--pf-v5-c-modal-box__close--sibling--MarginRight);
}
}
}

// RTL fix: Menu item alignment
.pf-v5-c-menu__item-main {
text-align: start;
}

// RTL fix: inline button alignment
.pf-v5-c-button.pf-m-link.pf-m-inline {
text-align: start;
}

// RTL fix: alert icons
.pf-v5-c-alert__icon {
margin-inline: 0 var(--pf-v5-c-alert__icon--MarginRight);
}

// RTL fix: card
.pf-v5-c-card__actions {
padding-inline: var(--pf-v5-c-card__actions--PaddingLeft) 0;
}

// RTL fix: table
.pf-v5-c-table tr > * {
padding-inline: var(--pf-v5-c-table--cell--PaddingLeft) var(--pf-v5-c-table--cell--PaddingRight);
}

// RTL fix: description lists
.pf-v5-c-description-list__term, .pf-v5-c-description-list__description {
text-align: start;
}

// RTL fix: about modal
.pf-v5-c-about-modal-box__close {
padding-inline: 0 var(--pf-v5-c-about-modal-box__close--PaddingRight);
}

// RTL fix: card toggle
.pf-v5-c-card__header-toggle {
margin-inline: var(--pf-v5-c-card__header-toggle--MarginLeft) var(--pf-v5-c-card__header-toggle--MarginRight);

[dir="rtl"] & {
transform: scaleX(-1);
}
}

// RTL fix: Select toggle
.pf-v5-c-select__toggle {
padding-inline: var(--pf-v5-c-select__toggle--PaddingLeft) var(--pf-v5-c-select__toggle--PaddingRight);

* + &-arrow {
margin-inline: var(--pf-v5-c-select__toggle-arrow--MarginLeft) var(--pf-v5-c-select__toggle-arrow--MarginRight);
}

.pf-v5-c-select__toggle-clear {
padding-inline: var(--pf-v5-c-select__toggle-clear--PaddingLeft) var(--pf-v5-c-select__toggle-clear--PaddingRight);
}
}

// RTL fix: Menu item
.pf-v5-c-select__menu-item {
padding-inline: var(--pf-v5-c-select__menu-item--PaddingLeft) var(--pf-v5-c-select__menu-item--PaddingRight);
text-align: start;

&-icon {
inset-inline: auto var(--pf-v5-c-select__menu-item-icon--Right);
}
}

// RTL fix: Input group padding and icons
.pf-v5-c-text-input-group {
&__text-input {
padding-inline: var(--pf-v5-c-text-input-group__text-input--PaddingLeft) var(--pf-v5-c-text-input-group__text-input--PaddingRight);
}

&__icon {
inset-inline: var(--pf-v5-c-text-input-group__icon--Left) 0;
}
}

// RTL fix: List item actions
.pf-v5-c-data-list__item-action {
margin-inline: var(--pf-v5-c-data-list__item-action--MarginLeft) 0;
}

// RTL fix: Align right utilities in flexes
.pf-v5-l-flex > .pf-m-align-right {
margin-inline: auto 0;
}

// Override PF to fix Right to Left languages
[dir="rtl"] {
// Flip outlines for buttons
.pf-m-split-button {
button::before {
transform: scaleX(-1);
}
}

// Flip submit button icons (they're often arrows or direction related)
.pf-v5-c-button > .pf-v5-svg {
transform: scaleX(-1);
}

// Flip expandable buttons
.pf-v5-c-expandable-section__toggle-icon {
transform: scaleX(-1);
}

// Swap image padding in buttons
.pf-v5-c-dropdown__toggle-image {
margin-inline-end: unset;
gap: var(--pf-v5-c-dropdown__toggle-image--MarginRight);
}

// PatternFly and us are setting text-align to the left.
// It needs to be to the start.
// We should change it to start where we can.
// Meanwhile, here's an override just for RTL.
body, td, th {
text-align: start;
}

// Swap side of selected nav's blue line
.pf-v5-c-nav__link.pf-m-current {
&, &:hover, &:not(.pf-m-expanded) .pf-v5-c-nav__link {
&::after {
inline-size: 100%;
transform: scaleX(-1);
}
}
}

// Toolbar content (as seen in the shell) should be left aligned in RTL
// See: https://github.com/patternfly/patternfly/issues/3812
.pf-v5-c-toolbar__content {
margin-inline: 0 auto;
}

// Dropdown toggles: Swap image margins to be on left instead
.pf-v5-c-dropdown__toggle {
&-image {
margin-inline: var(--pf-v5-c-dropdown__toggle-image--MarginRight) 0;
}

&-icon {
margin-inline: var(--pf-v5-c-dropdown__toggle-icon--MarginRight) var(--pf-v5-c-dropdown__toggle-icon--MarginLeft);
}
}

// Flip popup directions, part 1 of 2
.pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right,
.pf-v5-c-dropdown__menu.pf-m-align-right {
inset-inline: 0 unset;
}

// Flip popup directions, part 2 of 2
.pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left,
.pf-v5-c-dropdown__menu.pf-m-align-left {
inset-inline: unset 0;
}

// Another case of aligning to the left instead of start
.pf-v5-c-dropdown__menu-item {
text-align: start;
}

// Fix spacing around menu icons
.pf-v5-c-dropdown__menu-item-icon {
margin-inline: 0 var(--pf-v5-c-dropdown__menu-item-icon--MarginRight);
}

// Flip external icons
a[target] svg {
transform: scaleX(-1);
}

// Fix spacing in link icons
.pf-v5-c-button__icon.pf-m-end {
margin-inline: var(--pf-v5-c-button__icon--m-end--MarginLeft) 0;
}

// Flip breadcrum divider
.pf-v5-c-breadcrumb__item-divider {
transform: scaleX(-1);
margin-inline: 0 var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
}
}

// Drop side padding in mobile mode,
// intended mainly for PF PageSection elements (pf-v5-c-page__main-section).
// It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
Expand Down

0 comments on commit b906b2c

Please sign in to comment.