@patternfly/patternfly 6.0.0-alpha.46 → 6.0.0-alpha.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/button.css +3 -1
- package/components/Button/button.scss +3 -1
- package/components/Form/form.css +2 -35
- package/components/Form/form.scss +2 -35
- package/components/Progress/progress.css +31 -45
- package/components/Progress/progress.scss +36 -55
- package/components/Switch/switch.css +41 -37
- package/components/Switch/switch.scss +47 -42
- package/docs/components/Button/examples/Button.md +29 -2
- package/docs/components/Form/examples/Form.md +122 -89
- package/docs/demos/Form/examples/BasicForms.md +110 -80
- package/docs/demos/Modal/examples/Modal.md +33 -24
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -8
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
- package/package.json +1 -1
- package/patternfly-no-globals.css +77 -126
- package/patternfly-theme-dark-unversioned.css +77 -126
- package/patternfly.css +77 -126
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Progress/themes/dark/progress.scss +0 -9
- package/components/Switch/themes/dark/switch.scss +0 -11
|
@@ -8012,6 +8012,7 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8012
8012
|
text-align: center;
|
|
8013
8013
|
text-decoration: var(--pf-v5-c-button--TextDecoration);
|
|
8014
8014
|
white-space: nowrap;
|
|
8015
|
+
cursor: pointer;
|
|
8015
8016
|
user-select: none;
|
|
8016
8017
|
background-color: var(--pf-v5-c-button--BackgroundColor);
|
|
8017
8018
|
border: 0;
|
|
@@ -8109,7 +8110,6 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8109
8110
|
display: inline;
|
|
8110
8111
|
text-align: start;
|
|
8111
8112
|
white-space: normal;
|
|
8112
|
-
cursor: pointer;
|
|
8113
8113
|
outline-offset: 0.125rem;
|
|
8114
8114
|
}
|
|
8115
8115
|
.pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
|
|
@@ -8225,7 +8225,9 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8225
8225
|
mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
|
|
8226
8226
|
}
|
|
8227
8227
|
.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
|
|
8228
|
+
min-width: auto;
|
|
8228
8229
|
padding: 0;
|
|
8230
|
+
background-color: transparent;
|
|
8229
8231
|
}
|
|
8230
8232
|
.pf-v5-c-button.pf-m-block {
|
|
8231
8233
|
display: block;
|
|
@@ -15116,20 +15118,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
15116
15118
|
--pf-v5-c-form__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
|
|
15117
15119
|
--pf-v5-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
15118
15120
|
--pf-v5-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
|
|
15119
|
-
--pf-v5-c-form__group-label-help--BackgroundColor: transparent;
|
|
15120
|
-
--pf-v5-c-form__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
15121
|
-
--pf-v5-c-form__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
|
|
15122
|
-
--pf-v5-c-form__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
15123
|
-
--pf-v5-c-form__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
|
|
15124
|
-
--pf-v5-c-form__group-label-help--MarginTop: calc(var(--pf-v5-c-form__group-label-help--PaddingTop) * -1);
|
|
15125
|
-
--pf-v5-c-form__group-label-help--MarginRight: calc(var(--pf-v5-c-form__group-label-help--PaddingRight) * -1);
|
|
15126
|
-
--pf-v5-c-form__group-label-help--MarginBottom: calc(var(--pf-v5-c-form__group-label-help--PaddingBottom) * -1);
|
|
15127
|
-
--pf-v5-c-form__group-label-help--MarginLeft: calc(var(--pf-v5-c-form__group-label-help--PaddingLeft) * -1 + var(--pf-t--global--spacer--xs));
|
|
15128
15121
|
--pf-v5-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
15129
|
-
--pf-v5-c-form__group-label-help--TranslateY: 0.125rem;
|
|
15130
|
-
--pf-v5-c-form__group-label-help--Color: var(--pf-t--global--icon--color--regular);
|
|
15131
|
-
--pf-v5-c-form__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
|
|
15132
|
-
--pf-v5-c-form__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
15133
15122
|
--pf-v5-c-form__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
15134
15123
|
--pf-v5-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
15135
15124
|
--pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
|
|
@@ -15411,28 +15400,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
15411
15400
|
color: var(--pf-v5-c-form__label-required--Color);
|
|
15412
15401
|
}
|
|
15413
15402
|
|
|
15414
|
-
.pf-v5-c-form__group-label-help {
|
|
15415
|
-
|
|
15416
|
-
padding-block-end: var(--pf-v5-c-form__group-label-help--PaddingBottom);
|
|
15417
|
-
padding-inline-start: var(--pf-v5-c-form__group-label-help--PaddingLeft);
|
|
15418
|
-
padding-inline-end: var(--pf-v5-c-form__group-label-help--PaddingRight);
|
|
15419
|
-
margin-block-start: var(--pf-v5-c-form__group-label-help--MarginTop);
|
|
15420
|
-
margin-block-end: var(--pf-v5-c-form__group-label-help--MarginBottom);
|
|
15421
|
-
margin-inline-start: var(--pf-v5-c-form__group-label-help--MarginLeft);
|
|
15422
|
-
margin-inline-end: var(--pf-v5-c-form__group-label-help--MarginRight);
|
|
15423
|
-
font-size: var(--pf-v5-c-form__group-label-help--FontSize);
|
|
15424
|
-
line-height: 1;
|
|
15425
|
-
color: var(--pf-v5-c-form__group-label-help--Color);
|
|
15426
|
-
cursor: pointer;
|
|
15427
|
-
background-color: var(--pf-v5-c-form__group-label-help--BackgroundColor);
|
|
15428
|
-
border: 0;
|
|
15429
|
-
transform: translateY(var(--pf-v5-c-form__group-label-help--TranslateY));
|
|
15430
|
-
}
|
|
15431
|
-
.pf-v5-c-form__group-label-help:hover {
|
|
15432
|
-
--pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--hover--Color);
|
|
15433
|
-
}
|
|
15434
|
-
.pf-v5-c-form__group-label-help:focus-within {
|
|
15435
|
-
--pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
|
|
15403
|
+
.pf-v5-c-form__group-label-help .pf-v5-c-button {
|
|
15404
|
+
--pf-v5-c-button--FontSize: var(--pf-v5-c-form__group-label-help--FontSize);
|
|
15436
15405
|
}
|
|
15437
15406
|
|
|
15438
15407
|
.pf-v5-c-form__group-control {
|
|
@@ -22824,34 +22793,36 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22824
22793
|
margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
|
|
22825
22794
|
}
|
|
22826
22795
|
|
|
22796
|
+
:root,
|
|
22827
22797
|
.pf-v5-c-progress {
|
|
22828
|
-
--pf-v5-c-progress--GridGap: var(--pf-
|
|
22829
|
-
--pf-v5-c-progress__bar--
|
|
22830
|
-
--pf-v5-c-progress__bar--
|
|
22831
|
-
--pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
|
22798
|
+
--pf-v5-c-progress--GridGap: var(--pf-t--global--spacer--md);
|
|
22799
|
+
--pf-v5-c-progress__bar--Height: var(--pf-t--global--spacer--md);
|
|
22800
|
+
--pf-v5-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
22832
22801
|
--pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
|
|
22833
|
-
--pf-v5-c-progress__status--Gap: var(--pf-
|
|
22834
|
-
--pf-v5-c-progress__status-icon--Color: var(--pf-
|
|
22835
|
-
--pf-v5-c-progress__bar--before--Opacity: .2;
|
|
22802
|
+
--pf-v5-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
|
|
22803
|
+
--pf-v5-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
22836
22804
|
--pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
|
|
22837
|
-
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-
|
|
22838
|
-
--pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-
|
|
22839
|
-
--pf-v5-c-progress--m-
|
|
22840
|
-
--pf-v5-c-progress--m-
|
|
22841
|
-
--pf-v5-c-progress--m-
|
|
22842
|
-
--pf-v5-c-progress--m-success__status-icon--Color: var(--pf-
|
|
22843
|
-
--pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-
|
|
22844
|
-
--pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-
|
|
22845
|
-
--pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-
|
|
22846
|
-
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-
|
|
22847
|
-
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-
|
|
22848
|
-
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-
|
|
22849
|
-
--pf-v5-c-progress--m-inside__measure--
|
|
22850
|
-
--pf-v5-c-progress--m-
|
|
22851
|
-
--pf-v5-c-progress--m-
|
|
22852
|
-
--pf-v5-c-progress--m-
|
|
22853
|
-
--pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-
|
|
22854
|
-
--pf-v5-c-progress--m-lg__bar--Height: var(--pf-
|
|
22805
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
22806
|
+
--pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v5-c-progress--GridGap));
|
|
22807
|
+
--pf-v5-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
|
|
22808
|
+
--pf-v5-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
|
|
22809
|
+
--pf-v5-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
|
|
22810
|
+
--pf-v5-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
22811
|
+
--pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
22812
|
+
--pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
22813
|
+
--pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
|
|
22814
|
+
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
|
|
22815
|
+
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
|
|
22816
|
+
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
|
|
22817
|
+
--pf-v5-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
|
|
22818
|
+
--pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
|
|
22819
|
+
--pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
|
|
22820
|
+
--pf-v5-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
|
|
22821
|
+
--pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
22822
|
+
--pf-v5-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
|
|
22823
|
+
}
|
|
22824
|
+
|
|
22825
|
+
.pf-v5-c-progress {
|
|
22855
22826
|
display: grid;
|
|
22856
22827
|
grid-template-rows: 1fr auto;
|
|
22857
22828
|
grid-template-columns: auto auto;
|
|
@@ -22861,9 +22832,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22861
22832
|
.pf-v5-c-progress.pf-m-sm {
|
|
22862
22833
|
--pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
|
|
22863
22834
|
}
|
|
22864
|
-
.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
|
|
22865
|
-
font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
|
|
22866
|
-
}
|
|
22867
22835
|
.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
|
|
22868
22836
|
font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
|
|
22869
22837
|
}
|
|
@@ -22919,18 +22887,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22919
22887
|
grid-template-columns: 1fr fit-content(50%);
|
|
22920
22888
|
}
|
|
22921
22889
|
.pf-v5-c-progress.pf-m-success {
|
|
22922
|
-
--pf-v5-c-
|
|
22890
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-success__indicator--BackgroundColor);
|
|
22923
22891
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
|
|
22924
22892
|
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
|
|
22925
22893
|
}
|
|
22926
22894
|
.pf-v5-c-progress.pf-m-warning {
|
|
22927
|
-
--pf-v5-c-
|
|
22895
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-warning__indicator--BackgroundColor);
|
|
22928
22896
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
|
|
22929
22897
|
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
|
|
22930
22898
|
}
|
|
22931
22899
|
.pf-v5-c-progress.pf-m-danger {
|
|
22932
|
-
--pf-v5-c-
|
|
22900
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-danger__indicator--BackgroundColor);
|
|
22933
22901
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
|
|
22902
|
+
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-danger--m-inside__measure--Color);
|
|
22934
22903
|
}
|
|
22935
22904
|
|
|
22936
22905
|
.pf-v5-c-progress__description {
|
|
@@ -22972,14 +22941,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22972
22941
|
height: var(--pf-v5-c-progress__bar--Height);
|
|
22973
22942
|
background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
|
|
22974
22943
|
}
|
|
22975
|
-
.pf-v5-c-progress__bar::before {
|
|
22976
|
-
position: absolute;
|
|
22977
|
-
width: 100%;
|
|
22978
|
-
height: 100%;
|
|
22979
|
-
content: "";
|
|
22980
|
-
background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
|
|
22981
|
-
opacity: var(--pf-v5-c-progress__bar--before--Opacity);
|
|
22982
|
-
}
|
|
22983
22944
|
|
|
22984
22945
|
.pf-v5-c-progress__indicator {
|
|
22985
22946
|
position: absolute;
|
|
@@ -22993,16 +22954,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22993
22954
|
margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
|
|
22994
22955
|
}
|
|
22995
22956
|
|
|
22996
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
|
|
22997
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
22998
|
-
}
|
|
22999
|
-
|
|
23000
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-progress {
|
|
23001
|
-
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
|
23002
|
-
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
|
23003
|
-
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
|
23004
|
-
}
|
|
23005
|
-
|
|
23006
22957
|
.pf-v5-c-progress-stepper {
|
|
23007
22958
|
--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow: row;
|
|
23008
22959
|
--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
|
|
@@ -25162,40 +25113,44 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25162
25113
|
transform: rotate(720deg);
|
|
25163
25114
|
}
|
|
25164
25115
|
}
|
|
25116
|
+
:root,
|
|
25165
25117
|
.pf-v5-c-switch {
|
|
25166
|
-
--pf-v5-c-switch--FontSize: var(--pf-
|
|
25167
|
-
--pf-v5-c-
|
|
25168
|
-
--pf-v5-c-switch--ColumnGap: var(--pf-v5-c-switch__label--PaddingLeft);
|
|
25118
|
+
--pf-v5-c-switch--FontSize: var(--pf-t--global--font--size--sm);
|
|
25119
|
+
--pf-v5-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
25169
25120
|
--pf-v5-c-switch__toggle-icon--FontSize: calc(var(--pf-v5-c-switch--FontSize) * .625);
|
|
25170
|
-
--pf-v5-c-switch__toggle-icon--Color: var(--pf-
|
|
25121
|
+
--pf-v5-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
|
|
25171
25122
|
--pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
|
|
25172
25123
|
--pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
|
|
25173
|
-
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-
|
|
25174
|
-
--pf-v5-c-switch--LineHeight: var(--pf-
|
|
25124
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
25125
|
+
--pf-v5-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
25175
25126
|
--pf-v5-c-switch--Height: auto;
|
|
25176
|
-
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-
|
|
25127
|
+
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
25177
25128
|
--pf-v5-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset));
|
|
25178
|
-
--pf-v5-c-switch__input--
|
|
25179
|
-
--pf-v5-c-switch__input--
|
|
25180
|
-
--pf-v5-c-switch__input--
|
|
25181
|
-
--pf-v5-c-switch__input--
|
|
25182
|
-
--pf-v5-c-switch__input--disabled__toggle--
|
|
25183
|
-
--pf-v5-c-switch__input--
|
|
25184
|
-
--pf-v5-c-switch__input--
|
|
25185
|
-
--pf-v5-c-switch__input--
|
|
25129
|
+
--pf-v5-c-switch__input--checked__toggle--BorderWidth: 0;
|
|
25130
|
+
--pf-v5-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
|
|
25131
|
+
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
|
|
25132
|
+
--pf-v5-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
|
|
25133
|
+
--pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
25134
|
+
--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
|
|
25135
|
+
--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
|
|
25136
|
+
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
|
|
25137
|
+
--pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
|
|
25138
|
+
--pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
|
|
25139
|
+
--pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
|
|
25186
25140
|
--pf-v5-c-switch__toggle--Height: calc(var(--pf-v5-c-switch--FontSize) * var(--pf-v5-c-switch--LineHeight));
|
|
25187
|
-
--pf-v5-c-switch__toggle--BackgroundColor: var(--pf-
|
|
25188
|
-
--pf-v5-c-switch__toggle--
|
|
25141
|
+
--pf-v5-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
25142
|
+
--pf-v5-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
|
|
25143
|
+
--pf-v5-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
25144
|
+
--pf-v5-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
25189
25145
|
--pf-v5-c-switch__toggle--before--Width: calc(var(--pf-v5-c-switch--FontSize) - var(--pf-v5-c-switch__toggle-icon--Offset));
|
|
25190
25146
|
--pf-v5-c-switch__toggle--before--Height: var(--pf-v5-c-switch__toggle--before--Width);
|
|
25191
|
-
--pf-v5-c-switch__toggle--before--
|
|
25192
|
-
--pf-v5-c-switch__toggle--before--
|
|
25193
|
-
--pf-v5-c-switch__toggle--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
25194
|
-
--pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
|
|
25195
|
-
--pf-v5-c-switch__toggle--before--BoxShadow: var(--pf-v5-global--BoxShadow--md);
|
|
25147
|
+
--pf-v5-c-switch__toggle--before--Left: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
|
|
25148
|
+
--pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
25196
25149
|
--pf-v5-c-switch__toggle--before--Transition: transform .25s ease 0s;
|
|
25197
25150
|
--pf-v5-c-switch__toggle--Width: calc(var(--pf-v5-c-switch__toggle--Height) + var(--pf-v5-c-switch__toggle-icon--Offset) + var(--pf-v5-c-switch__toggle--before--Width));
|
|
25198
|
-
|
|
25151
|
+
}
|
|
25152
|
+
|
|
25153
|
+
.pf-v5-c-switch {
|
|
25199
25154
|
position: relative;
|
|
25200
25155
|
display: inline-grid;
|
|
25201
25156
|
grid-template-columns: auto;
|
|
@@ -25228,13 +25183,15 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25228
25183
|
color: var(--pf-v5-c-switch__input--checked__label--Color);
|
|
25229
25184
|
}
|
|
25230
25185
|
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
|
|
25186
|
+
--pf-v5-c-switch__toggle--BorderWidth: var(--pf-v5-c-switch__input--checked__toggle--BorderWidth);
|
|
25231
25187
|
background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
|
|
25232
25188
|
}
|
|
25233
25189
|
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
|
|
25234
|
-
transform:
|
|
25190
|
+
transform: translate(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX), -50%);
|
|
25191
|
+
background-color: var(--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor);
|
|
25235
25192
|
}
|
|
25236
25193
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
|
|
25237
|
-
transform:
|
|
25194
|
+
transform: translate(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), -50%);
|
|
25238
25195
|
}
|
|
25239
25196
|
|
|
25240
25197
|
.pf-v5-c-switch__input:checked ~ .pf-m-off {
|
|
@@ -25275,16 +25232,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25275
25232
|
}
|
|
25276
25233
|
.pf-v5-c-switch__toggle::before {
|
|
25277
25234
|
position: absolute;
|
|
25278
|
-
inset-block-start:
|
|
25235
|
+
inset-block-start: 50%;
|
|
25279
25236
|
inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
|
|
25280
25237
|
display: block;
|
|
25281
25238
|
width: var(--pf-v5-c-switch__toggle--before--Width);
|
|
25282
25239
|
height: var(--pf-v5-c-switch__toggle--before--Height);
|
|
25283
25240
|
content: "";
|
|
25284
|
-
background-color: var(--pf-v5-c-
|
|
25241
|
+
background-color: var(--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor);
|
|
25285
25242
|
border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
|
|
25286
|
-
box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
|
|
25287
25243
|
transition: var(--pf-v5-c-switch__toggle--before--Transition);
|
|
25244
|
+
transform: translateY(-50%);
|
|
25245
|
+
}
|
|
25246
|
+
.pf-v5-c-switch__toggle::after {
|
|
25247
|
+
position: absolute;
|
|
25248
|
+
inset: 0;
|
|
25249
|
+
content: "";
|
|
25250
|
+
border: var(--pf-v5-c-switch__toggle--BorderWidth) solid var(--pf-v5-c-switch__toggle--BorderColor);
|
|
25251
|
+
border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
|
|
25288
25252
|
}
|
|
25289
25253
|
|
|
25290
25254
|
.pf-v5-c-switch__toggle-icon {
|
|
@@ -25301,22 +25265,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25301
25265
|
.pf-v5-c-switch__label {
|
|
25302
25266
|
display: inline-block;
|
|
25303
25267
|
grid-column: 2;
|
|
25304
|
-
color: var(--pf-v5-c-switch__label--Color);
|
|
25305
25268
|
vertical-align: top;
|
|
25306
25269
|
}
|
|
25307
25270
|
|
|
25308
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
|
|
25309
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
25310
|
-
}
|
|
25311
|
-
|
|
25312
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-switch {
|
|
25313
|
-
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
|
|
25314
|
-
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
|
|
25315
|
-
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
|
|
25316
|
-
--pf-v5-c-switch__toggle--before--BoxShadow: none;
|
|
25317
|
-
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
|
|
25318
|
-
}
|
|
25319
|
-
|
|
25320
25271
|
:root,
|
|
25321
25272
|
.pf-v5-c-tab-content {
|
|
25322
25273
|
--pf-v5-c-tab-content__body--PaddingTop: 0;
|