diff --git a/src/patternfly/components/ContextSelector/context-selector.scss b/src/patternfly/components/ContextSelector/context-selector.scss index 79a3700b23..a4c761267b 100644 --- a/src/patternfly/components/ContextSelector/context-selector.scss +++ b/src/patternfly/components/ContextSelector/context-selector.scss @@ -7,6 +7,7 @@ --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm); --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element); --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm); --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm); --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300); --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300); @@ -34,8 +35,8 @@ --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md); // Toggle icon arrow - --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md); + --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm); --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -194,8 +195,8 @@ .pf-c-context-selector__toggle { position: relative; display: flex; + column-gap: var(--pf-c-context-selector__toggle--ColumnGap); align-items: center; - justify-content: space-between; width: 100%; padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft); color: var(--pf-c-context-selector__toggle--Color); @@ -279,15 +280,17 @@ .pf-c-context-selector__toggle-text { @include pf-text-overflow; + flex: 1 1 auto; font-size: var(--pf-c-context-selector__toggle-text--FontSize); font-weight: var(--pf-c-context-selector__toggle-text--FontWeight); line-height: var(--pf-c-context-selector__toggle-text--LineHeight); + text-align: left; } } .pf-c-context-selector__toggle-icon { - margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight); - margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft); + padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight); + padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft); color: var(--pf-c-context-selector__toggle-icon--Color, inherit); } diff --git a/src/patternfly/components/Dropdown/dropdown.scss b/src/patternfly/components/Dropdown/dropdown.scss index ecccab5972..227cdf5f33 100644 --- a/src/patternfly/components/Dropdown/dropdown.scss +++ b/src/patternfly/components/Dropdown/dropdown.scss @@ -6,6 +6,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm); --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element); --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm); --pf-c-dropdown__toggle--MinWidth: 0; --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md); --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal); @@ -110,8 +111,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " // Toggle Arrow --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md); - --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md); + --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-dropdown__toggle-icon--MarginLeft: 0; --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg; --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -161,16 +163,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal); --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200); - // Image - --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change - --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change - --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm); - // Divider --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm); --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm); // badge toggle icon + --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0; + --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0; --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs); --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0; @@ -245,8 +244,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " .pf-c-dropdown__toggle { position: relative; display: flex; + column-gap: var(--pf-c-dropdown__toggle--ColumnGap); align-items: center; - justify-content: space-between; min-width: var(--pf-c-dropdown__toggle--MinWidth); max-width: 100%; padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft); @@ -287,6 +286,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } &.pf-m-split-button { + --pf-c-dropdown__toggle--ColumnGap: 0; + padding: 0; &:not(.pf-m-disabled) { @@ -596,8 +597,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } > .pf-c-badge { + --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight); + --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft); --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft); - --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight); } .pf-c-dropdown__toggle-text { @@ -606,11 +608,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " } .pf-c-dropdown__toggle-text { - flex: 0 1 auto; + flex: 1 1 auto; + text-align: left; } .pf-c-dropdown__toggle-icon { - margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight); + padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight); + padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft); margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft); line-height: var(--pf-c-dropdown__toggle-icon--LineHeight); color: var(--pf-c-dropdown__toggle-icon--Color, inherit); @@ -626,14 +630,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " display: inline-flex; flex-shrink: 0; align-self: center; - margin-top: var(--pf-c-dropdown__toggle-image--MarginTop); - margin-right: var(--pf-c-dropdown__toggle-image--MarginRight); - margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom); line-height: 1; - - &:last-child { - --pf-c-dropdown__toggle-image--MarginRight: 0; - } } // Loading spinner diff --git a/src/patternfly/components/OptionsMenu/options-menu.scss b/src/patternfly/components/OptionsMenu/options-menu.scss index 933ed74598..3946766833 100644 --- a/src/patternfly/components/OptionsMenu/options-menu.scss +++ b/src/patternfly/components/OptionsMenu/options-menu.scss @@ -5,6 +5,7 @@ --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm); --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element); --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm); + --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm); --pf-c-options-menu__toggle--MinWidth: 0; --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm); --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300); @@ -27,8 +28,8 @@ --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md); // Toggle arrow - --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm); - --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md); + --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm); --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg; --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200); --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100); @@ -136,8 +137,8 @@ .pf-c-options-menu__toggle { position: relative; display: flex; + column-gap: var(--pf-c-options-menu__toggle--ColumnGap); align-items: center; - justify-content: space-between; min-width: var(--pf-c-options-menu__toggle--MinWidth); max-width: 100%; padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft); @@ -206,6 +207,9 @@ .pf-c-options-menu__toggle-text { @include pf-text-overflow; + + flex: 1 1 auto; + text-align: left; } .pf-c-options-menu__toggle-icon, @@ -214,8 +218,8 @@ } .pf-c-options-menu__toggle-icon { - margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight); - margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft); + padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight); + padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft); .pf-c-options-menu.pf-m-top.pf-m-expanded & { transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));