diff --git a/src/patternfly/assets/images/pf_logo.svg b/src/patternfly/assets/images/pf_logo.svg index efca381b55..c88664af40 100644 --- a/src/patternfly/assets/images/pf_logo.svg +++ b/src/patternfly/assets/images/pf_logo.svg @@ -3,31 +3,31 @@ - - - - - - + + + - - - - + + + - dual-list-selector-status}} {{#> dual-list-selector-status-text}} - 1 of 5 items selected + 3 of 5 items selected {{/dual-list-selector-status-text}} {{/dual-list-selector-status}} {{#> dual-list-selector-menu}} diff --git a/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss new file mode 100644 index 0000000000..97b11910b5 --- /dev/null +++ b/src/patternfly/components/DualListSelector/themes/dark/dual-list-selector.scss @@ -0,0 +1,9 @@ +@import "../../../../sass-utilities/themes/dark/all"; + +@mixin pf-v5-theme-dark-dual-list-selector() { + .#{$dual-list-selector} { + --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + } +} diff --git a/src/patternfly/components/FormControl/themes/dark/form-control.scss b/src/patternfly/components/FormControl/themes/dark/form-control.scss index ac96895350..83aaef5d9d 100644 --- a/src/patternfly/components/FormControl/themes/dark/form-control.scss +++ b/src/patternfly/components/FormControl/themes/dark/form-control.scss @@ -8,7 +8,7 @@ --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); --#{$form-control}--BorderLeftColor: transparent; --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$form-control}--disabled--Color: var(--#{$pf-global}--palette--black-300); + --#{$form-control}--disabled--Color: var(--#{$pf-global}--disabled-color--300); --#{$form-control}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); --#{$form-control}--readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200); diff --git a/src/patternfly/components/InputGroup/input-group-item.hbs b/src/patternfly/components/InputGroup/input-group-item.hbs index 43223727c3..ee571c21ed 100644 --- a/src/patternfly/components/InputGroup/input-group-item.hbs +++ b/src/patternfly/components/InputGroup/input-group-item.hbs @@ -2,6 +2,7 @@ {{#if input-group-item--IsBox}} pf-m-box{{/if}} {{#if input-group-item--IsPlain}} pf-m-plain{{/if}} {{#if input-group-item--IsFill}} pf-m-fill{{/if}} + {{#if input-group-item--IsDisabled}} pf-m-disabled{{/if}} {{#if input-group-item--modifier}} {{input-group-item--modifier}}{{/if}}" {{#if input-group-item--attribute}} {{{input-group-item--attribute}}} diff --git a/src/patternfly/components/InputGroup/input-group-text.hbs b/src/patternfly/components/InputGroup/input-group-text.hbs index 201b39e547..3cb832780f 100644 --- a/src/patternfly/components/InputGroup/input-group-text.hbs +++ b/src/patternfly/components/InputGroup/input-group-text.hbs @@ -1,4 +1,4 @@ -<{{#if input-group-text--type}}{{input-group-text--type}}{{else}}span{{/if}} class="{{pfv}}input-group__text{{#if input-group-text--IsDisabled}} pf-m-disabled{{/if}}{{#if input-group-text--modifier}} {{input-group-text--modifier}}{{/if}}" +<{{#if input-group-text--type}}{{input-group-text--type}}{{else}}span{{/if}} class="{{pfv}}input-group__text{{#if input-group-text--modifier}} {{input-group-text--modifier}}{{/if}}" {{#if aria-label}} aria-label="{{aria-label}}" {{/if}} diff --git a/src/patternfly/components/InputGroup/themes/dark/input-group.scss b/src/patternfly/components/InputGroup/themes/dark/input-group.scss index 811ecdbe54..a9f0707900 100644 --- a/src/patternfly/components/InputGroup/themes/dark/input-group.scss +++ b/src/patternfly/components/InputGroup/themes/dark/input-group.scss @@ -11,7 +11,7 @@ --#{$input-group}__item--m-box--BorderLeftColor: transparent; --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); --#{$input-group}__item--m-disabled--BorderBottomColor: transparent; - --#{$input-group}__text--m-disabled--Color: var(--#{$pf-global}--palette--black-100); + --#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--300); > * + * { --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderLeftColor); diff --git a/src/patternfly/components/Label/themes/dark/label.scss b/src/patternfly/components/Label/themes/dark/label.scss index 229aed627d..24b9899c48 100644 --- a/src/patternfly/components/Label/themes/dark/label.scss +++ b/src/patternfly/components/Label/themes/dark/label.scss @@ -9,6 +9,7 @@ --#{$label}--m-red--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$label}--m-purple--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$label}--m-cyan--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); + --#{$label}--m-gold--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$label}__content--before--BorderWidth: 0; --#{$label}__content--before--BorderColor: transparent; --#{$label}__content--link--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); @@ -43,5 +44,10 @@ --#{$label}--m-outline--m-cyan__content--before--BorderColor: var(--#{$pf-global}--palette--cyan-100); --#{$label}--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--cyan-100); --#{$label}--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--cyan-100); + --#{$label}--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300); + --#{$label}--m-outline--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300); + --#{$label}--m-outline--m-gold__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100); + --#{$label}--m-outline--m-gold__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100); + --#{$label}--m-outline--m-gold__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100); } } diff --git a/src/patternfly/components/Menu/themes/dark/menu.scss b/src/patternfly/components/Menu/themes/dark/menu.scss index ee7dac37fe..420ad381ea 100644 --- a/src/patternfly/components/Menu/themes/dark/menu.scss +++ b/src/patternfly/components/Menu/themes/dark/menu.scss @@ -5,6 +5,5 @@ --#{$menu}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$menu}__list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); --#{$menu}__list-item--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}__list-item--m-disabled__item--Color: var(--#{$pf-global}--Color--200); // global var? } } diff --git a/src/patternfly/components/MenuToggle/menu-toggle.scss b/src/patternfly/components/MenuToggle/menu-toggle.scss index dfcea2eca4..777986c9f1 100644 --- a/src/patternfly/components/MenuToggle/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/menu-toggle.scss @@ -120,7 +120,7 @@ // Split button, child --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); - --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--Color--dark-200); + --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--100); --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300); --#{$menu-toggle}--m-split-button--first-child--PaddingRight: var(--#{$pf-global}--spacer--sm); --#{$menu-toggle}--m-split-button--last-child--PaddingLeft: 0; @@ -363,6 +363,7 @@ --#{$menu-toggle}--PaddingRight: 0; --#{$check}__input--MarginTop: 0; --#{$check}__label--Color: currentcolor; + --#{$check}__label--disabled--Color: currentcolor; align-items: center; align-self: stretch; @@ -469,8 +470,6 @@ // disable accent border &.pf-m-disabled, &:disabled { - --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor); - --#{$menu-toggle}--m-split-button--child--Color: var(--#{$menu-toggle}--m-split-button--child--disabled--Color); --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: transparent; &::before, diff --git a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss index 83a19f0b85..29146cbade 100644 --- a/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/themes/dark/menu-toggle.scss @@ -1,20 +1,23 @@ @import "../../../../sass-utilities/themes/dark/all"; @mixin pf-v5-theme-dark-menu-toggle() { - .#{$menu}-toggle { - --#{$menu}-toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); - --#{$menu}-toggle--before--BorderTopColor: transparent; - --#{$menu}-toggle--before--BorderRightColor: transparent; - --#{$menu}-toggle--before--BorderBottomColor: transparent; - --#{$menu}-toggle--before--BorderLeftColor: transparent; - --#{$menu}-toggle--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); - --#{$menu}-toggle--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-500); - --#{$menu}-toggle--disabled--Color: var(--#{$pf-global}--palette--black-100); - --#{$menu}-toggle--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); + .#{$menu-toggle} { + --#{$menu-toggle}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$menu-toggle}--before--BorderTopColor: transparent; + --#{$menu-toggle}--before--BorderRightColor: transparent; + --#{$menu-toggle}--before--BorderBottomColor: transparent; + --#{$menu-toggle}--before--BorderLeftColor: transparent; + --#{$menu-toggle}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); + --#{$menu-toggle}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); + --#{$menu-toggle}--disabled--Color: var(--#{$pf-global}--disabled-color--300); + --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300); + --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); &.pf-m-plain { background: transparent; diff --git a/src/patternfly/components/Nav/nav.scss b/src/patternfly/components/Nav/nav.scss index 6c610f50fd..9842e05fa9 100644 --- a/src/patternfly/components/Nav/nav.scss +++ b/src/patternfly/components/Nav/nav.scss @@ -91,7 +91,7 @@ --#{$nav}--m-horizontal__link--lg--PaddingBottom: var(--#{$pf-global}--spacer--lg); --#{$nav}--m-horizontal__link--Right: var(--#{$pf-global}--spacer--md); --#{$nav}--m-horizontal__link--Left: var(--#{$pf-global}--spacer--md); - --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-300); + --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-200); --#{$nav}--m-horizontal__link--hover--Color: var(--#{$pf-global}--active-color--400); --#{$nav}--m-horizontal__link--focus--Color: var(--#{$pf-global}--active-color--400); --#{$nav}--m-horizontal__link--active--Color: var(--#{$pf-global}--active-color--400); diff --git a/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss b/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss index 36b58a879a..0159793b66 100644 --- a/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss +++ b/src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss @@ -3,6 +3,7 @@ @mixin pf-v5-theme-dark-notification-badge() { .#{$notification-badge} { --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400); --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--300); --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--palette--black-900); } diff --git a/src/patternfly/components/Panel/panel.scss b/src/patternfly/components/Panel/panel.scss index 2faf49cadc..9f61715342 100644 --- a/src/patternfly/components/Panel/panel.scss +++ b/src/patternfly/components/Panel/panel.scss @@ -18,6 +18,7 @@ // raised --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md); --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm); + --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); // header --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md); @@ -71,6 +72,7 @@ } &.pf-m-raised { + --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor); --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow); --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex); } @@ -99,3 +101,10 @@ padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft); box-shadow: var(--#{$panel}__footer--BoxShadow); } + +// stylelint-disable no-invalid-position-at-import-rule +@import "themes/dark/panel"; + +@include pf-v5-theme-dark { + @include pf-v5-theme-dark-panel; +} diff --git a/src/patternfly/components/Panel/themes/dark/panel.scss b/src/patternfly/components/Panel/themes/dark/panel.scss new file mode 100644 index 0000000000..c5667bbd0f --- /dev/null +++ b/src/patternfly/components/Panel/themes/dark/panel.scss @@ -0,0 +1,7 @@ +@import "../../../../sass-utilities/themes/dark/all"; + +@mixin pf-v5-theme-dark-panel() { + .#{$panel} { + --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); + } +} diff --git a/src/patternfly/components/Popover/themes/dark/popover.scss b/src/patternfly/components/Popover/themes/dark/popover.scss index b3bb62e08f..0df73ca3ec 100644 --- a/src/patternfly/components/Popover/themes/dark/popover.scss +++ b/src/patternfly/components/Popover/themes/dark/popover.scss @@ -4,7 +4,7 @@ .#{$popover} { --#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); --#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300); - --#{$popover}--m-default__title-text--Color: var(--#{$pf-global}--custom-color--200); + --#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--200); --#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--100); --#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--100); } diff --git a/src/patternfly/components/ProgressStepper/progress-stepper.scss b/src/patternfly/components/ProgressStepper/progress-stepper.scss index 17ce7420fe..aebc0146c9 100644 --- a/src/patternfly/components/ProgressStepper/progress-stepper.scss +++ b/src/patternfly/components/ProgressStepper/progress-stepper.scss @@ -3,183 +3,183 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map(); // Default layout is vertical @mixin pf-v5-c-progress-stepper--m-vertical { - --#{$progress}-stepper--GridAutoFlow: var(--#{$progress}-stepper--m-vertical--GridAutoFlow); - --#{$progress}-stepper--GridTemplateColumns: var(--#{$progress}-stepper--m-vertical--GridTemplateColumns); - --#{$progress}-stepper__step-connector--before--Top: var(--#{$progress}-stepper--m-vertical__step-connector--before--Top); - --#{$progress}-stepper__step-connector--before--Left: var(--#{$progress}-stepper--m-vertical__step-connector--before--Left); - --#{$progress}-stepper__step-connector--before--Width: var(--#{$progress}-stepper--m-vertical__step-connector--before--Width); - --#{$progress}-stepper__step-connector--before--Height: var(--#{$progress}-stepper--m-vertical__step-connector--before--Height); - --#{$progress}-stepper__step-connector--before--BorderRightWidth: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderRightWidth); - --#{$progress}-stepper__step-connector--before--BorderRightColor: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderRightColor); - --#{$progress}-stepper__step-connector--before--BorderBottomWidth: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomWidth); - --#{$progress}-stepper__step-connector--before--BorderBottomColor: var(--#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomColor); - --#{$progress}-stepper__step-connector--before--Transform: var(--#{$progress}-stepper--m-vertical__step-connector--before--Transform); - --#{$progress}-stepper__step-main--MarginTop: var(--#{$progress}-stepper--m-vertical__step-main--MarginTop); - --#{$progress}-stepper__step-main--MarginRight: var(--#{$progress}-stepper--m-vertical__step-main--MarginRight); - --#{$progress}-stepper__step-main--MarginBottom: var(--#{$progress}-stepper--m-vertical__step-main--MarginBottom); - --#{$progress}-stepper__step-main--MarginLeft: var(--#{$progress}-stepper--m-vertical__step-main--MarginLeft); + --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-vertical--GridAutoFlow); + --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-vertical--GridTemplateColumns); + --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-vertical__step-connector--before--Top); + --#{$progress-stepper}__step-connector--before--Left: var(--#{$progress-stepper}--m-vertical__step-connector--before--Left); + --#{$progress-stepper}__step-connector--before--Width: var(--#{$progress-stepper}--m-vertical__step-connector--before--Width); + --#{$progress-stepper}__step-connector--before--Height: var(--#{$progress-stepper}--m-vertical__step-connector--before--Height); + --#{$progress-stepper}__step-connector--before--BorderRightWidth: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth); + --#{$progress-stepper}__step-connector--before--BorderRightColor: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor); + --#{$progress-stepper}__step-connector--before--BorderBottomWidth: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomWidth); + --#{$progress-stepper}__step-connector--before--BorderBottomColor: var(--#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomColor); + --#{$progress-stepper}__step-connector--before--Transform: var(--#{$progress-stepper}--m-vertical__step-connector--before--Transform); + --#{$progress-stepper}__step-main--MarginTop: var(--#{$progress-stepper}--m-vertical__step-main--MarginTop); + --#{$progress-stepper}__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginBottom: var(--#{$progress-stepper}--m-vertical__step-main--MarginBottom); + --#{$progress-stepper}__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical__step-main--MarginLeft); // Compact vertical - --#{$progress}-stepper--m-compact--GridTemplateColumns: var(--#{$progress}-stepper--m-vertical--m-compact--GridTemplateColumns); - --#{$progress}-stepper--m-compact__step-connector--GridRow: var(--#{$progress}-stepper--m-vertical--m-compact__step-connector--GridRow); - --#{$progress}-stepper--m-compact__step-connector--PaddingBottom: var(--#{$progress}-stepper--m-vertical--m-compact__step-connector--PaddingBottom); + --#{$progress-stepper}--m-compact--GridTemplateColumns: var(--#{$progress-stepper}--m-vertical--m-compact--GridTemplateColumns); + --#{$progress-stepper}--m-compact__step-connector--GridRow: var(--#{$progress-stepper}--m-vertical--m-compact__step-connector--GridRow); + --#{$progress-stepper}--m-compact__step-connector--PaddingBottom: var(--#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom); // Center - --#{$progress}-stepper--m-center__step-connector--before--Content: none; // border swap - --#{$progress}-stepper--m-center__step-main--before--Content: ""; // border swap + --#{$progress-stepper}--m-center__step-connector--before--Content: none; // border swap + --#{$progress-stepper}--m-center__step-main--before--Content: ""; // border swap } @mixin pf-v5-c-progress-stepper--m-horizontal { - --#{$progress}-stepper--GridAutoFlow: var(--#{$progress}-stepper--m-horizontal--GridAutoFlow); - --#{$progress}-stepper--GridTemplateColumns: var(--#{$progress}-stepper--m-horizontal--GridTemplateColumns); - --#{$progress}-stepper__step-connector--before--Top: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Top); - --#{$progress}-stepper__step-connector--before--Left: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Left); - --#{$progress}-stepper__step-connector--before--Width: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Width); - --#{$progress}-stepper__step-connector--before--Height: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Height); - --#{$progress}-stepper__step-connector--before--BorderRightWidth: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightWidth); - --#{$progress}-stepper__step-connector--before--BorderRightColor: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightColor); - --#{$progress}-stepper__step-connector--before--BorderBottomWidth: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomWidth); - --#{$progress}-stepper__step-connector--before--BorderBottomColor: var(--#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomColor); - --#{$progress}-stepper__step-connector--before--Transform: var(--#{$progress}-stepper--m-horizontal__step-connector--before--Transform); - --#{$progress}-stepper__step-main--MarginTop: var(--#{$progress}-stepper--m-horizontal__step-main--MarginTop); - --#{$progress}-stepper__step-main--MarginRight: var(--#{$progress}-stepper--m-horizontal__step-main--MarginRight); - --#{$progress}-stepper__step-main--MarginBottom: var(--#{$progress}-stepper--m-horizontal__step-main--MarginBottom); - --#{$progress}-stepper__step-main--MarginLeft: var(--#{$progress}-stepper--m-horizontal__step-main--MarginLeft); + --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-horizontal--GridAutoFlow); + --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-horizontal--GridTemplateColumns); + --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Top); + --#{$progress-stepper}__step-connector--before--Left: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Left); + --#{$progress-stepper}__step-connector--before--Width: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Width); + --#{$progress-stepper}__step-connector--before--Height: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Height); + --#{$progress-stepper}__step-connector--before--BorderRightWidth: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightWidth); + --#{$progress-stepper}__step-connector--before--BorderRightColor: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightColor); + --#{$progress-stepper}__step-connector--before--BorderBottomWidth: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth); + --#{$progress-stepper}__step-connector--before--BorderBottomColor: var(--#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor); + --#{$progress-stepper}__step-connector--before--Transform: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Transform); + --#{$progress-stepper}__step-main--MarginTop: var(--#{$progress-stepper}--m-horizontal__step-main--MarginTop); + --#{$progress-stepper}__step-main--MarginRight: var(--#{$progress-stepper}--m-horizontal__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginBottom: var(--#{$progress-stepper}--m-horizontal__step-main--MarginBottom); + --#{$progress-stepper}__step-main--MarginLeft: var(--#{$progress-stepper}--m-horizontal__step-main--MarginLeft); // Compact horizontal - --#{$progress}-stepper--m-compact--GridTemplateColumns: var(--#{$progress}-stepper--m-horizontal--m-compact--GridTemplateColumns); - --#{$progress}-stepper--m-compact__step-connector--GridRow: var(--#{$progress}-stepper--m-horizontal--m-compact__step-connector--GridRow); - --#{$progress}-stepper--m-compact__step-connector--PaddingBottom: var(--#{$progress}-stepper--m-horizontal--m-compact__step-connector--PaddingBottom); + --#{$progress-stepper}--m-compact--GridTemplateColumns: var(--#{$progress-stepper}--m-horizontal--m-compact--GridTemplateColumns); + --#{$progress-stepper}--m-compact__step-connector--GridRow: var(--#{$progress-stepper}--m-horizontal--m-compact__step-connector--GridRow); + --#{$progress-stepper}--m-compact__step-connector--PaddingBottom: var(--#{$progress-stepper}--m-horizontal--m-compact__step-connector--PaddingBottom); // Center - --#{$progress}-stepper--m-center__step-connector--before--Content: ""; // border swap - --#{$progress}-stepper--m-center__step-main--before--Content: none; // border swap + --#{$progress-stepper}--m-center__step-connector--before--Content: ""; // border swap + --#{$progress-stepper}--m-center__step-main--before--Content: none; // border swap } // Progress stepper is vertically oriented by default -.#{$progress}-stepper { +.#{$progress-stepper} { // Vertical - these are the default settings - --#{$progress}-stepper--m-vertical--GridAutoFlow: row; - --#{$progress}-stepper--m-vertical--GridTemplateColumns: auto 1fr; - --#{$progress}-stepper--m-vertical__step-connector--before--Top: 0; - --#{$progress}-stepper--m-vertical__step-connector--before--Left: calc(var(--#{$progress}-stepper__step-icon--Width) / 2); - --#{$progress}-stepper--m-vertical__step-connector--before--Width: auto; - --#{$progress}-stepper--m-vertical__step-connector--before--Height: 100%; - --#{$progress}-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--md); - --#{$progress}-stepper--m-vertical__step-connector--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100); - --#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0; - --#{$progress}-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent; - --#{$progress}-stepper--m-vertical__step-connector--before--Transform: translateX(-50%); - --#{$progress}-stepper--m-vertical__step-main--MarginTop: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper--m-vertical__step-main--MarginRight: 0; - --#{$progress}-stepper--m-vertical__step-main--MarginBottom: var(--#{$pf-global}--spacer--xl); - --#{$progress}-stepper--m-vertical__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-vertical--GridAutoFlow: row; + --#{$progress-stepper}--m-vertical--GridTemplateColumns: auto 1fr; + --#{$progress-stepper}--m-vertical__step-connector--before--Top: 0; + --#{$progress-stepper}--m-vertical__step-connector--before--Left: calc(var(--#{$progress-stepper}__step-icon--Width) / 2); + --#{$progress-stepper}--m-vertical__step-connector--before--Width: auto; + --#{$progress-stepper}--m-vertical__step-connector--before--Height: 100%; + --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--md); + --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100); + --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomWidth: 0; + --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomColor: transparent; + --#{$progress-stepper}--m-vertical__step-connector--before--Transform: translateX(-50%); + --#{$progress-stepper}--m-vertical__step-main--MarginTop: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-vertical__step-main--MarginRight: 0; + --#{$progress-stepper}--m-vertical__step-main--MarginBottom: var(--#{$pf-global}--spacer--xl); + --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); // Compact, vertical - --#{$progress}-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr; - --#{$progress}-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-vertical--m-compact__step-connector--GridRow: auto; - --#{$progress}-stepper--m-vertical--m-compact__step-main--MarginRight: 0; + --#{$progress-stepper}--m-vertical--m-compact--GridTemplateColumns: 1fr; + --#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-vertical--m-compact__step-connector--GridRow: auto; + --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight: 0; // Center, vertical - --#{$progress}-stepper--m-vertical--m-center__step-main--MarginRight: 0; - --#{$progress}-stepper--m-vertical--m-center__step-main--MarginLeft: 0; + --#{$progress-stepper}--m-vertical--m-center__step-main--MarginRight: 0; + --#{$progress-stepper}--m-vertical--m-center__step-main--MarginLeft: 0; // Horizontal - --#{$progress}-stepper--m-horizontal--GridAutoFlow: column; - --#{$progress}-stepper--m-horizontal--GridTemplateColumns: initial; - --#{$progress}-stepper--m-horizontal__step-connector--before--Top: calc(var(--#{$progress}-stepper__step-icon--Height) / 2); - --#{$progress}-stepper--m-horizontal__step-connector--before--Left: 0; - --#{$progress}-stepper--m-horizontal__step-connector--before--Width: 100%; - --#{$progress}-stepper--m-horizontal__step-connector--before--Height: auto; - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0; - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderRightColor: unset; - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md); - --#{$progress}-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100); - --#{$progress}-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%); - --#{$progress}-stepper--m-horizontal__step-main--MarginTop: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-horizontal__step-main--MarginRight: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-horizontal__step-main--MarginBottom: 0; - --#{$progress}-stepper--m-horizontal__step-main--MarginLeft: 0; + --#{$progress-stepper}--m-horizontal--GridAutoFlow: column; + --#{$progress-stepper}--m-horizontal--GridTemplateColumns: initial; + --#{$progress-stepper}--m-horizontal__step-connector--before--Top: calc(var(--#{$progress-stepper}__step-icon--Height) / 2); + --#{$progress-stepper}--m-horizontal__step-connector--before--Left: 0; + --#{$progress-stepper}--m-horizontal__step-connector--before--Width: 100%; + --#{$progress-stepper}--m-horizontal__step-connector--before--Height: auto; + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightWidth: 0; + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightColor: unset; + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md); + --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100); + --#{$progress-stepper}--m-horizontal__step-connector--before--Transform: translateY(-50%); + --#{$progress-stepper}--m-horizontal__step-main--MarginTop: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-horizontal__step-main--MarginRight: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-horizontal__step-main--MarginBottom: 0; + --#{$progress-stepper}--m-horizontal__step-main--MarginLeft: 0; // Compact, horizontal - --#{$progress}-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, #{pf-size-prem(28px)}); - --#{$progress}-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0; - --#{$progress}-stepper--m-horizontal--m-compact__step-connector--GridRow: 2; + --#{$progress-stepper}--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, #{pf-size-prem(28px)}); + --#{$progress-stepper}--m-horizontal--m-compact__step-connector--PaddingBottom: 0; + --#{$progress-stepper}--m-horizontal--m-compact__step-connector--GridRow: 2; // Compact - --#{$progress}-stepper--m-compact--GridAutoFlow: row; - --#{$progress}-stepper--m-compact__step-main--MarginTop: 0; - --#{$progress}-stepper--m-compact__step-main--MarginBottom: var(--#{$pf-global}--spacer--sm); - --#{$progress}-stepper--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)}; - --#{$progress}-stepper--m-compact__step-icon--Width: #{pf-size-prem(18px)}; - --#{$progress}-stepper--m-compact__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm); - --#{$progress}-stepper--m-compact__step-title--FontSize: var(--#{$pf-global}--FontSize--sm); - --#{$progress}-stepper--m-compact__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); - --#{$progress}-stepper--m-compact__pficon--MarginTop: 2px; - --#{$progress}-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px; + --#{$progress-stepper}--m-compact--GridAutoFlow: row; + --#{$progress-stepper}--m-compact__step-main--MarginTop: 0; + --#{$progress-stepper}--m-compact__step-main--MarginBottom: var(--#{$pf-global}--spacer--sm); + --#{$progress-stepper}--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)}; + --#{$progress-stepper}--m-compact__step-icon--Width: #{pf-size-prem(18px)}; + --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm); + --#{$progress-stepper}--m-compact__step-title--FontSize: var(--#{$pf-global}--FontSize--sm); + --#{$progress-stepper}--m-compact__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); + --#{$progress-stepper}--m-compact__pficon--MarginTop: 2px; + --#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop: -3px; // Center - --#{$progress}-stepper--m-center__step-connector--before--Left: 50%; - --#{$progress}-stepper--m-center--GridTemplateColumns: 1fr; - --#{$progress}-stepper--m-center__step-connector--JustifyContent: center; - --#{$progress}-stepper--m-center__step-main--MarginRight: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper--m-center__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper--m-center__step-main--TextAlign: center; - --#{$progress}-stepper--m-center__step-description--MarginRight: 0; - --#{$progress}-stepper--m-center__step-description--MarginLeft: 0; + --#{$progress-stepper}--m-center__step-connector--before--Left: 50%; + --#{$progress-stepper}--m-center--GridTemplateColumns: 1fr; + --#{$progress-stepper}--m-center__step-connector--JustifyContent: center; + --#{$progress-stepper}--m-center__step-main--MarginRight: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-center__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}--m-center__step-main--TextAlign: center; + --#{$progress-stepper}--m-center__step-description--MarginRight: 0; + --#{$progress-stepper}--m-center__step-description--MarginLeft: 0; // Stepper variables - --#{$progress}-stepper--GridTemplateRows: auto 1fr; + --#{$progress-stepper}--GridTemplateRows: auto 1fr; // Step connector variables - --#{$progress}-stepper__step-connector--JustifyContent: start; + --#{$progress-stepper}__step-connector--JustifyContent: start; // Step icon variables - --#{$progress}-stepper__step-icon--ZIndex: var(--#{$pf-global}--ZIndex--xs); - --#{$progress}-stepper__step-icon--Width: #{pf-size-prem(28px)}; - --#{$progress}-stepper__step-icon--Height: var(--#{$progress}-stepper__step-icon--Width); - --#{$progress}-stepper__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--md); - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-icon--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200); - --#{$progress}-stepper__step-icon--BorderWidth: var(--#{$pf-global}--BorderWidth--md); - --#{$progress}-stepper__step-icon--BorderColor: var(--#{$pf-global}--BorderColor--100); + --#{$progress-stepper}__step-icon--ZIndex: var(--#{$pf-global}--ZIndex--xs); + --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(28px)}; + --#{$progress-stepper}__step-icon--Height: var(--#{$progress-stepper}__step-icon--Width); + --#{$progress-stepper}__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--md); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-icon--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200); + --#{$progress-stepper}__step-icon--BorderWidth: var(--#{$pf-global}--BorderWidth--md); + --#{$progress-stepper}__step-icon--BorderColor: var(--#{$pf-global}--BorderColor--100); // Icon adjustments to fix differences in alignment - --#{$progress}-stepper__pficon--MarginTop: 3px; - --#{$progress}-stepper__fa-exclamation-triangle--MarginTop: -5px; + --#{$progress-stepper}__pficon--MarginTop: 3px; + --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: -5px; // Step Title variables - --#{$progress}-stepper__step-title--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--TextAlign: left; - --#{$progress}-stepper__step-title--FontSize: var(--#{$pf-global}--FontSize--md); - --#{$progress}-stepper__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); - --#{$progress}-stepper__step--m-current__step-title--FontWeight: var(--#{$pf-global}--FontWeight--bold); - --#{$progress}-stepper__step--m-current__step-title--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step--m-pending__step-title--Color: var(--#{$pf-global}--Color--200); - --#{$progress}-stepper__step--m-danger__step-title--Color: var(--#{$pf-global}--danger-color--100); + --#{$progress-stepper}__step-title--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--TextAlign: left; + --#{$progress-stepper}__step-title--FontSize: var(--#{$pf-global}--FontSize--md); + --#{$progress-stepper}__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal); + --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$pf-global}--FontWeight--bold); + --#{$progress-stepper}__step--m-current__step-title--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step--m-pending__step-title--Color: var(--#{$pf-global}--Color--200); + --#{$progress-stepper}__step--m-danger__step-title--Color: var(--#{$pf-global}--danger-color--100); // Help text variables for the step title - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm); - --#{$progress}-stepper__step-title--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)}; - --#{$progress}-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--m-help-text--hover--Color: var(--#{$pf-global}--Color--100); - --#{$progress}-stepper__step-title--m-help-text--focus--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm); + --#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)}; + --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$pf-global}--Color--100); + --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$pf-global}--Color--100); // Help text variables the step title for failure state - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--#{$pf-global}--danger-color--200); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--#{$pf-global}--danger-color--200); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--danger-color--100); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--danger-color--200); - --#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--danger-color--100); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--danger-color--200); + --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--danger-color--200); // Step Description variables - --#{$progress}-stepper__step-description--MarginTop: var(--#{$pf-global}--spacer--xs); - --#{$progress}-stepper__step-description--FontSize: var(--#{$pf-global}--FontSize--sm); - --#{$progress}-stepper__step-description--Color: var(--#{$pf-global}--Color--200); - --#{$progress}-stepper__step-description--TextAlign: left; + --#{$progress-stepper}__step-description--MarginTop: var(--#{$pf-global}--spacer--xs); + --#{$progress-stepper}__step-description--FontSize: var(--#{$pf-global}--FontSize--sm); + --#{$progress-stepper}__step-description--Color: var(--#{$pf-global}--Color--200); + --#{$progress-stepper}__step-description--TextAlign: left; // Vertical by default @include pf-v5-c-progress-stepper--m-vertical; @@ -191,236 +191,237 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map(); position: relative; display: grid; - grid-template-rows: var(--#{$progress}-stepper--GridTemplateRows); - grid-template-columns: var(--#{$progress}-stepper--GridTemplateColumns); + grid-template-rows: var(--#{$progress-stepper}--GridTemplateRows); + grid-template-columns: var(--#{$progress-stepper}--GridTemplateColumns); grid-auto-columns: 1fr; // gives even spacing between steps - grid-auto-flow: var(--#{$progress}-stepper--GridAutoFlow); + grid-auto-flow: var(--#{$progress-stepper}--GridAutoFlow); // Progress stepper Modifiers &.pf-m-center { - --#{$progress}-stepper__step-connector--JustifyContent: var(--#{$progress}-stepper--m-center__step-connector--JustifyContent); - --#{$progress}-stepper__step-main--MarginRight: var(--#{$progress}-stepper--m-center__step-main--MarginRight); - --#{$progress}-stepper__step-main--MarginLeft: var(--#{$progress}-stepper--m-center__step-main--MarginLeft); - --#{$progress}-stepper--step-main--TextAlign: var(--#{$progress}-stepper--m-center__step-main--TextAlign, auto); - --#{$progress}-stepper__step-title--TextAlign: var(--#{$progress}-stepper--m-center__step-title--TextAlign, auto); - --#{$progress}-stepper__step-description--MarginRight: var(--#{$progress}-stepper--m-center__step-description--MarginRight); - --#{$progress}-stepper__step-description--MarginLeft: var(--#{$progress}-stepper--m-center__step-description--MarginLeft); - --#{$progress}-stepper__step-description--TextAlign: var(--#{$progress}-stepper--m-center__step-description--TextAlign, auto); - --#{$progress}-stepper--m-vertical__step-main--MarginRight: var(--#{$progress}-stepper--m-vertical--m-center__step-main--MarginRight); - --#{$progress}-stepper--m-vertical__step-main--MarginLeft: var(--#{$progress}-stepper--m-vertical--m-center__step-main--MarginLeft); - - grid-template-columns: var(--#{$progress}-stepper--m-center--GridTemplateColumns); - - .#{$progress}-stepper__step-main { + --#{$progress-stepper}__step-connector--JustifyContent: var(--#{$progress-stepper}--m-center__step-connector--JustifyContent); + --#{$progress-stepper}__step-main--MarginRight: var(--#{$progress-stepper}--m-center__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginLeft: var(--#{$progress-stepper}--m-center__step-main--MarginLeft); + --#{$progress-stepper}--step-main--TextAlign: var(--#{$progress-stepper}--m-center__step-main--TextAlign, auto); + --#{$progress-stepper}__step-title--TextAlign: var(--#{$progress-stepper}--m-center__step-title--TextAlign, auto); + --#{$progress-stepper}__step-description--MarginRight: var(--#{$progress-stepper}--m-center__step-description--MarginRight); + --#{$progress-stepper}__step-description--MarginLeft: var(--#{$progress-stepper}--m-center__step-description--MarginLeft); + --#{$progress-stepper}__step-description--TextAlign: var(--#{$progress-stepper}--m-center__step-description--TextAlign, auto); + --#{$progress-stepper}--m-vertical__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical--m-center__step-main--MarginRight); + --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-center__step-main--MarginLeft); + + grid-template-columns: var(--#{$progress-stepper}--m-center--GridTemplateColumns); + + .#{$progress-stepper}__step-main { position: relative; } - .#{$progress}-stepper__step:not(:last-of-type) > .#{$progress}-stepper__step-connector::before { - left: var(--#{$progress}-stepper--m-center__step-connector--before--Left); + .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-connector::before { + left: var(--#{$progress-stepper}--m-center__step-connector--before--Left); } // If not compact variant, swap borders from connector to main &:not(.pf-m-compact) { - .#{$progress}-stepper__step:not(:last-of-type) > .#{$progress}-stepper__step-main::before { - content: var(--#{$progress}-stepper--m-center__step-main--before--Content); + .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-main::before { + content: var(--#{$progress-stepper}--m-center__step-main--before--Content); } - .#{$progress}-stepper__step:not(:last-of-type) > .#{$progress}-stepper__step-connector::before { - content: var(--#{$progress}-stepper--m-center__step-connector--before--Content); + .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-connector::before { + content: var(--#{$progress-stepper}--m-center__step-connector--before--Content); } } } &.pf-m-compact { - --#{$progress}-stepper__step-main--MarginTop: var(--#{$progress}-stepper--m-compact__step-main--MarginTop); - --#{$progress}-stepper__step-main--MarginBottom: var(--#{$progress}-stepper--m-compact__step-main--MarginBottom); - --#{$progress}-stepper__step-icon--Width: var(--#{$progress}-stepper--m-compact__step-icon--Width); - --#{$progress}-stepper__step-icon--FontSize: var(--#{$progress}-stepper--m-compact__step-icon--FontSize); - --#{$progress}-stepper__step-title--FontSize: var(--#{$progress}-stepper--m-compact__step-title--FontSize); - --#{$progress}-stepper__step--m-current__step-title--FontWeight: var(--#{$progress}-stepper--m-compact__step-title--FontWeight); - --#{$progress}-stepper__pficon--MarginTop: var(--#{$progress}-stepper--m-compact__pficon--MarginTop); - --#{$progress}-stepper__fa-exclamation-triangle--MarginTop: var(--#{$progress}-stepper--m-compact__fa-exclamation-triangle--MarginTop); - --#{$progress}-stepper--m-vertical__step-main--MarginLeft: var(--#{$progress}-stepper--m-vertical--m-compact__step-main--MarginLeft); - --#{$progress}-stepper--m-vertical__step-main--MarginRight: var(--#{$progress}-stepper--m-vertical--m-compact__step-main--MarginRight); + --#{$progress-stepper}__step-main--MarginTop: var(--#{$progress-stepper}--m-compact__step-main--MarginTop); + --#{$progress-stepper}__step-main--MarginBottom: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom); + --#{$progress-stepper}__step-icon--Width: var(--#{$progress-stepper}--m-compact__step-icon--Width); + --#{$progress-stepper}__step-icon--FontSize: var(--#{$progress-stepper}--m-compact__step-icon--FontSize); + --#{$progress-stepper}__step-title--FontSize: var(--#{$progress-stepper}--m-compact__step-title--FontSize); + --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$progress-stepper}--m-compact__step-title--FontWeight); + --#{$progress-stepper}__pficon--MarginTop: var(--#{$progress-stepper}--m-compact__pficon--MarginTop); + --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: var(--#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop); + --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft); + --#{$progress-stepper}--m-vertical__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight); display: inline-grid; - grid-template-columns: var(--#{$progress}-stepper--m-compact--GridTemplateColumns); - grid-auto-flow: var(--#{$progress}-stepper--m-compact--GridAutoFlow); + grid-template-columns: var(--#{$progress-stepper}--m-compact--GridTemplateColumns); + grid-auto-flow: var(--#{$progress-stepper}--m-compact--GridAutoFlow); - .#{$progress}-stepper__step-connector { - grid-row: var(--#{$progress}-stepper--m-compact__step-connector--GridRow); - min-width: var(--#{$progress}-stepper--m-compact__step-connector--MinWidth); - padding-bottom: var(--#{$progress}-stepper--m-compact__step-connector--PaddingBottom); + .#{$progress-stepper}__step-connector { + grid-row: var(--#{$progress-stepper}--m-compact__step-connector--GridRow); + min-width: var(--#{$progress-stepper}--m-compact__step-connector--MinWidth); + padding-bottom: var(--#{$progress-stepper}--m-compact__step-connector--PaddingBottom); } - .#{$progress}-stepper__step-main { - margin-bottom: var(--#{$progress}-stepper--m-compact__step-main--MarginBottom); + .#{$progress-stepper}__step-main { + margin-bottom: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom); } - .#{$progress}-stepper__step:not(.pf-m-current) .#{$progress}-stepper__step-main { + .#{$progress-stepper}__step:not(.pf-m-current) .#{$progress-stepper}__step-main { @include pf-v5-u-screen-reader; } // For this compact variant only, move the main content for the current step to above the icons // stylelint-disable - .#{$progress}-stepper__step.pf-m-current .#{$progress}-stepper__step-main { + .#{$progress-stepper}__step.pf-m-current .#{$progress-stepper}__step-main { grid-column: 1/-1; grid-row: 1/2; } // stylelint-enable - .#{$progress}-stepper__step-description { + .#{$progress-stepper}__step-description { display: none; } } } // Step -.#{$progress}-stepper__step { +.#{$progress-stepper}__step { display: contents; // Step Modifiers &.pf-m-current { - --#{$progress}-stepper__step-title--FontWeight: var(--#{$progress}-stepper__step--m-current__step-title--FontWeight); - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step--m-current__step-title--Color); + --#{$progress-stepper}__step-title--FontWeight: var(--#{$progress-stepper}__step--m-current__step-title--FontWeight); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-current__step-title--Color); } &.pf-m-pending { - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step--m-pending__step-title--Color); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-pending__step-title--Color); } &.pf-m-success { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--success-color--100); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--success-color--100); } &.pf-m-danger { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--danger-color--100); - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step--m-danger__step-title--Color); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--danger-color--100); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-danger__step-title--Color); // Help text variables for failure state - --#{$progress}-stepper__step-title--m-help-text--hover--Color: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--Color); - --#{$progress}-stepper__step-title--m-help-text--focus--Color: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--Color); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor); - --#{$progress}-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor); - --#{$progress}-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--#{$progress}-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor); + --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color); + --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor); + --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor); + --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor); } &.pf-m-warning { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--warning-color--100); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--warning-color--100); } &.pf-m-info { - --#{$progress}-stepper__step-icon--Color: var(--#{$pf-global}--info-color--100); + --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--info-color--100); } &:last-child { - --#{$progress}-stepper__step-main--MarginBottom: 0; + --#{$progress-stepper}__step-main--MarginBottom: 0; } } // The step icon wrapper provides a container on which to use the before for the line connecting the steps -.#{$progress}-stepper__step-connector { +.#{$progress-stepper}__step-connector { position: relative; display: flex; - justify-content: var(--#{$progress}-stepper__step-connector--JustifyContent); + justify-content: var(--#{$progress-stepper}__step-connector--JustifyContent); width: 100%; - .#{$progress}-stepper__step:not(:last-of-type) > &::before { + .#{$progress-stepper}__step:not(:last-of-type) > &::before { position: absolute; - top: var(--#{$progress}-stepper__step-connector--before--Top); // half the height - left: var(--#{$progress}-stepper__step-connector--before--Left); - width: var(--#{$progress}-stepper__step-connector--before--Width); - height: var(--#{$progress}-stepper__step-connector--before--Height); + top: var(--#{$progress-stepper}__step-connector--before--Top); // half the height + left: var(--#{$progress-stepper}__step-connector--before--Left); + width: var(--#{$progress-stepper}__step-connector--before--Width); + height: var(--#{$progress-stepper}__step-connector--before--Height); content: ""; - border-right: var(--#{$progress}-stepper__step-connector--before--BorderRightWidth) solid var(--#{$progress}-stepper__step-connector--before--BorderRightColor); - border-bottom: var(--#{$progress}-stepper__step-connector--before--BorderBottomWidth) solid var(--#{$progress}-stepper__step-connector--before--BorderBottomColor); - transform: var(--#{$progress}-stepper__step-connector--before--Transform); + border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor); + border-bottom: var(--#{$progress-stepper}__step-connector--before--BorderBottomWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderBottomColor); + transform: var(--#{$progress-stepper}__step-connector--before--Transform); } } // Step icon -.#{$progress}-stepper__step-icon { - z-index: var(--#{$progress}-stepper__step-icon--ZIndex); +.#{$progress-stepper}__step-icon { + z-index: var(--#{$progress-stepper}__step-icon--ZIndex); display: flex; align-items: center; justify-content: center; - width: var(--#{$progress}-stepper__step-icon--Width); - height: var(--#{$progress}-stepper__step-icon--Height); - font-size: var(--#{$progress}-stepper__step-icon--FontSize); - color: var(--#{$progress}-stepper__step-icon--Color); - background-color: var(--#{$progress}-stepper__step-icon--BackgroundColor); - border: var(--#{$progress}-stepper__step-icon--BorderWidth) solid var(--#{$progress}-stepper__step-icon--BorderColor); + width: var(--#{$progress-stepper}__step-icon--Width); + height: var(--#{$progress-stepper}__step-icon--Height); + font-size: var(--#{$progress-stepper}__step-icon--FontSize); + color: var(--#{$progress-stepper}__step-icon--Color); + background-color: var(--#{$progress-stepper}__step-icon--BackgroundColor); + border: var(--#{$progress-stepper}__step-icon--BorderWidth) solid var(--#{$progress-stepper}__step-icon--BorderColor); border-radius: 50%; // Align pficons with the font awesome icons // stylelint-disable .pf-v5-pficon { - margin-top: var(--#{$progress}-stepper__pficon--MarginTop); + margin-top: var(--#{$progress-stepper}__pficon--MarginTop); } // Push the triangle up to fit inside the circle .fa-exclamation-triangle { - margin-top: var(--#{$progress}-stepper__fa-exclamation-triangle--MarginTop); + margin-top: var(--#{$progress-stepper}__fa-exclamation-triangle--MarginTop); } // stylelint-enable } // Step main -.#{$progress}-stepper__step-main { +.#{$progress-stepper}__step-main { min-width: 0; - margin: var(--#{$progress}-stepper__step-main--MarginTop) var(--#{$progress}-stepper__step-main--MarginRight) var(--#{$progress}-stepper__step-main--MarginBottom) var(--#{$progress}-stepper__step-main--MarginLeft); - text-align: var(--#{$progress}-stepper--step-main--TextAlign, auto); + margin: var(--#{$progress-stepper}__step-main--MarginTop) var(--#{$progress-stepper}__step-main--MarginRight) var(--#{$progress-stepper}__step-main--MarginBottom) var(--#{$progress-stepper}__step-main--MarginLeft); + text-align: var(--#{$progress-stepper}--step-main--TextAlign, auto); overflow-wrap: anywhere; // Draw a new border for vertical alignment using step main - .#{$progress}-stepper__step:not(:last-of-type) > &::before { + .#{$progress-stepper}__step:not(:last-of-type) > &::before { position: absolute; - top: calc(100% + var(--#{$progress}-stepper__step-main--MarginTop)); - left: calc(50% - calc(var(--#{$progress}-stepper__step-connector--before--BorderRightWidth) / 2)); + top: calc(100% + var(--#{$progress-stepper}__step-main--MarginTop)); + left: calc(50% - calc(var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) / 2)); width: auto; - height: calc(var(--#{$progress}-stepper__step-main--MarginTop) + var(--#{$progress}-stepper__step-main--MarginBottom)); - border-right: var(--#{$progress}-stepper__step-connector--before--BorderRightWidth) solid var(--#{$progress}-stepper__step-connector--before--BorderRightColor); + height: calc(var(--#{$progress-stepper}__step-main--MarginTop) + var(--#{$progress-stepper}__step-main--MarginBottom)); + border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor); } } // Step title -.#{$progress}-stepper__step-title { - font-size: var(--#{$progress}-stepper__step-title--FontSize); - font-weight: var(--#{$progress}-stepper__step-title--FontWeight); - color: var(--#{$progress}-stepper__step-title--Color); - text-align: var(--#{$progress}-stepper__step-title--TextAlign); +.#{$progress-stepper}__step-title { + font-size: var(--#{$progress-stepper}__step-title--FontSize); + font-weight: var(--#{$progress-stepper}__step-title--FontWeight); + color: var(--#{$progress-stepper}__step-title--Color); + text-align: var(--#{$progress-stepper}__step-title--TextAlign); + background:none; border: 0; &.pf-m-help-text { text-decoration: underline; - text-decoration-thickness: var(--#{$progress}-stepper__step-title--m-help-text--TextDecorationThickness); + text-decoration-thickness: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness); text-decoration-style: dashed; - text-decoration-color: var(--#{$progress}-stepper__step-title--m-help-text--TextDecorationColor); - text-underline-offset: var(--#{$progress}-stepper__step-title--m-help-text--TextUnderlineOffset); + text-decoration-color: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationColor); + text-underline-offset: var(--#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset); cursor: pointer; &:hover { - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step-title--m-help-text--hover--Color); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$progress}-stepper__step-title--m-help-text--hover--TextDecorationColor); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--hover--Color); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor); } &:focus { - --#{$progress}-stepper__step-title--Color: var(--#{$progress}-stepper__step-title--m-help-text--focus--Color); - --#{$progress}-stepper__step-title--m-help-text--TextDecorationColor: var(--#{$progress}-stepper__step-title--m-help-text--focus--TextDecorationColor); + --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--focus--Color); + --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor); } } } // Step description -.#{$progress}-stepper__step-description { - margin-top: var(--#{$progress}-stepper__step-description--MarginTop); - font-size: var(--#{$progress}-stepper__step-description--FontSize); - color: var(--#{$progress}-stepper__step-description--Color); - text-align: var(--#{$progress}-stepper__step-description--TextAlign); +.#{$progress-stepper}__step-description { + margin-top: var(--#{$progress-stepper}__step-description--MarginTop); + font-size: var(--#{$progress-stepper}__step-description--FontSize); + color: var(--#{$progress-stepper}__step-description--Color); + text-align: var(--#{$progress-stepper}__step-description--TextAlign); } // stylelint-disable no-duplicate-selectors -.#{$progress}-stepper { +.#{$progress-stepper} { @each $breakpoint, $breakpoint-value in $pf-v5-c-progress-stepper--breakpoint-map { $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, ""); diff --git a/src/patternfly/components/Slider/examples/Slider.md b/src/patternfly/components/Slider/examples/Slider.md index e8007a8656..3ddf355fff 100644 --- a/src/patternfly/components/Slider/examples/Slider.md +++ b/src/patternfly/components/Slider/examples/Slider.md @@ -114,7 +114,7 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} @@ -138,7 +138,7 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} @@ -158,12 +158,14 @@ cssPrefix: pf-v5-c-slider {{> slider-rail}} {{> slider-thumb}} {{#> slider-value slider-value--modifier="pf-m-floating"}} - {{#> input-group-item input-group-item--IsFill=true}} - {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} - {{/input-group-item}} - {{#> input-group-item}} - {{> input-group-text input-group-text--value="%"}} - {{/input-group-item}} + {{#> input-group}} + {{#> input-group-item input-group-item--IsFill=true}} + {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} + {{/input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} + {{> input-group-text input-group-text--value="%"}} + {{/input-group-item}} + {{/input-group}} {{/slider-value}} {{/slider-main}} {{/slider}} @@ -209,8 +211,8 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'disabled type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} - {{> input-group-text input-group-text--value="%" input-group-text--IsDisabled="true"}} + {{#> input-group-item input-group-item--IsBox=true input-group-item--IsDisabled=true}} + {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} {{/slider-value}} @@ -238,7 +240,7 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} + {{#> input-group-item input-group-item--IsBox=true}} {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} @@ -303,8 +305,8 @@ cssPrefix: pf-v5-c-slider {{#> input-group-item input-group-item--IsFill=true}} {{> form-control controlType="input" input="true" form-control--attribute=(concat 'disabled type="number" value="' slider--value-now '" aria-label="Slider value input"')}} {{/input-group-item}} - {{#> input-group-item}} - {{> input-group-text input-group-text--value="%" input-group-text--IsDisabled="true"}} + {{#> input-group-item input-group-item--IsBox=true input-group-item--IsDisabled=true}} + {{> input-group-text input-group-text--value="%"}} {{/input-group-item}} {{/input-group}} {{/slider-value}} diff --git a/src/patternfly/components/Tabs/themes/dark/tabs.scss b/src/patternfly/components/Tabs/themes/dark/tabs.scss index 87ce7c849d..0ee3d3a9e6 100644 --- a/src/patternfly/components/Tabs/themes/dark/tabs.scss +++ b/src/patternfly/components/Tabs/themes/dark/tabs.scss @@ -4,6 +4,7 @@ .#{$tabs} { --#{$tabs}__scroll-button--BackgroundColor: transparent; --#{$tabs}__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); + --#{$tabs}__link--disabled--Color: var(--#{$pf-global}--disabled-color--300); --#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); } } diff --git a/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css b/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css index d4fee994d3..4b9b1aa27f 100644 --- a/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css +++ b/src/patternfly/components/TextInputGroup/examples/TextInputGroup.css @@ -8,3 +8,7 @@ top: 40px; width: 100%; } + +#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete { + height: 540px; +} diff --git a/src/patternfly/components/TextInputGroup/text-input-group.scss b/src/patternfly/components/TextInputGroup/text-input-group.scss index 24934d2bcf..888418cd99 100644 --- a/src/patternfly/components/TextInputGroup/text-input-group.scss +++ b/src/patternfly/components/TextInputGroup/text-input-group.scss @@ -188,3 +188,10 @@ .#{$text-input-group}__group { display: flex; } + +// stylelint-disable no-invalid-position-at-import-rule +@import "themes/dark/text-input-group"; + +@include pf-v5-theme-dark { + @include pf-v5-theme-dark-text-input-group; +} diff --git a/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss b/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss new file mode 100644 index 0000000000..86b85b3a7b --- /dev/null +++ b/src/patternfly/components/TextInputGroup/themes/dark/text-input-group.scss @@ -0,0 +1,11 @@ +@import "../../../../sass-utilities/themes/dark/all"; + +@mixin pf-v5-theme-dark-text-input-group() { + .#{$text-input-group} { + --#{$text-input-group}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400); + --#{$text-input-group}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300); + --#{$text-input-group}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200); + --#{$text-input-group}__text--before--BorderWidth: 0; + --#{$text-input-group}__text--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400); + } +} diff --git a/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss b/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss index 3c73eb5d26..36819b4365 100644 --- a/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss +++ b/src/patternfly/components/ToggleGroup/themes/dark/toggle-group.scss @@ -7,5 +7,6 @@ --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-600); --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--palette--black-100); --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--primary-color--300); + --#{$toggle-group}__button--m-selected--Color: var(--#{$pf-global}--primary-color--400); } } diff --git a/src/patternfly/components/ToggleGroup/toggle-group.scss b/src/patternfly/components/ToggleGroup/toggle-group.scss index fd40aa2eee..8b8f420403 100644 --- a/src/patternfly/components/ToggleGroup/toggle-group.scss +++ b/src/patternfly/components/ToggleGroup/toggle-group.scss @@ -34,6 +34,7 @@ // Selected --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50); + --#{$toggle-group}__button--m-selected--Color: initial; --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100); --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs); @@ -119,6 +120,7 @@ &.pf-m-selected { --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor); + --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit); --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex); --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor); } diff --git a/src/patternfly/components/Wizard/themes/dark/wizard.scss b/src/patternfly/components/Wizard/themes/dark/wizard.scss index 86b1c5c4d1..dca07cb7b9 100644 --- a/src/patternfly/components/Wizard/themes/dark/wizard.scss +++ b/src/patternfly/components/Wizard/themes/dark/wizard.scss @@ -4,8 +4,6 @@ .#{$wizard} { --#{$wizard}__header--BackgroundColor: var(--#{$pf-global}--palette--black-1000); --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$pf-global}--palette--black-500); - --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--300); - --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--300); } .#{$wizard}__header { diff --git a/src/patternfly/components/Wizard/wizard.scss b/src/patternfly/components/Wizard/wizard.scss index 7df3b23f1e..9d3b0333fd 100644 --- a/src/patternfly/components/Wizard/wizard.scss +++ b/src/patternfly/components/Wizard/wizard.scss @@ -57,7 +57,7 @@ --#{$wizard}__nav-link--focus--Color: var(--#{$pf-global}--link--Color); --#{$wizard}__nav-link--m-current--Color: var(--#{$pf-global}--link--Color); --#{$wizard}__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change - --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--Color--dark-200); + --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--100); --#{$wizard}__nav-list__nav-list__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change // Nav link toggle icon @@ -82,7 +82,7 @@ --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100); --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100); --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent; - --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--Color--dark-200); + --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--100); // Toggle --#{$wizard}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100); diff --git a/src/patternfly/sass-utilities/mixins.scss b/src/patternfly/sass-utilities/mixins.scss index fe9da2463d..a5a766075e 100644 --- a/src/patternfly/sass-utilities/mixins.scss +++ b/src/patternfly/sass-utilities/mixins.scss @@ -168,7 +168,9 @@ } @mixin pf-v5-t-light($color: "--#{$pf-global}--Color--100") { - color: var(#{$color}); + @if $color { + color: var(#{$color}); + } @extend %pf-v5-t-light; } diff --git a/src/patternfly/sass-utilities/themes/dark/scss-variables.scss b/src/patternfly/sass-utilities/themes/dark/scss-variables.scss index 724d58a120..eb0c426b01 100644 --- a/src/patternfly/sass-utilities/themes/dark/scss-variables.scss +++ b/src/patternfly/sass-utilities/themes/dark/scss-variables.scss @@ -15,6 +15,8 @@ $pf-v5-global--Color--200: $pf-v5-color-black-200; // secondary text color $pf-v5-global--active-color--100: $pf-v5-color-blue-300; $pf-v5-global--primary-color--100: $pf-v5-color-blue-300; // primary blue against dark background - background, text, etc $pf-v5-global--primary-color--300: $pf-v5-color-blue-400; // primary blue with white text on top for contrast +$pf-v5-global--primary-color--400: $pf-v5-color-white; // text color on top of primary--300 +$pf-v5-global--custom-color--200: $pf-v5-color-cyan-200; $pf-v5-global--success-color--100: $pf-v5-color-green-400; $pf-v5-global--warning-color--100: $pf-v5-color-gold-400; $pf-v5-global--warning-color--200: $pf-v5-color-gold-300; @@ -23,9 +25,12 @@ $pf-v5-global--danger-color--200: $pf-v5-color-red-8888; $pf-v5-global--link--Color: $pf-v5-color-blue-300; $pf-v5-global--link--Color--hover: $pf-v5-color-blue-200; $pf-v5-global--link--Color--visited: $pf-v5-color-purple-300; -$pf-v5-global--disabled-color--100: $pf-v5-color-black-400; // disabled text on regular background color +$pf-v5-global--disabled-color--100: $pf-v5-color-black-300; // disabled text on regular background color $pf-v5-global--disabled-color--200: $pf-v5-color-black-500; // disabled background color -$pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled background color - except form elements +$pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled or floating background color - except form elements + +// icons +$pf-v5-global--icon--Color--light: $pf-v5-color-black-300; // theme color resets $pf-v5-global--Color--dark-100: $pf-v5-global--Color--100;