@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
package/patternfly.css
CHANGED
|
@@ -8129,6 +8129,7 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8129
8129
|
text-align: center;
|
|
8130
8130
|
text-decoration: var(--pf-v5-c-button--TextDecoration);
|
|
8131
8131
|
white-space: nowrap;
|
|
8132
|
+
cursor: pointer;
|
|
8132
8133
|
user-select: none;
|
|
8133
8134
|
background-color: var(--pf-v5-c-button--BackgroundColor);
|
|
8134
8135
|
border: 0;
|
|
@@ -8226,7 +8227,6 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8226
8227
|
display: inline;
|
|
8227
8228
|
text-align: start;
|
|
8228
8229
|
white-space: normal;
|
|
8229
|
-
cursor: pointer;
|
|
8230
8230
|
outline-offset: 0.125rem;
|
|
8231
8231
|
}
|
|
8232
8232
|
.pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
|
|
@@ -8342,7 +8342,9 @@ button.pf-v5-c-breadcrumb__link {
|
|
|
8342
8342
|
mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
|
|
8343
8343
|
}
|
|
8344
8344
|
.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
|
|
8345
|
+
min-width: auto;
|
|
8345
8346
|
padding: 0;
|
|
8347
|
+
background-color: transparent;
|
|
8346
8348
|
}
|
|
8347
8349
|
.pf-v5-c-button.pf-m-block {
|
|
8348
8350
|
display: block;
|
|
@@ -15233,20 +15235,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
15233
15235
|
--pf-v5-c-form__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
|
|
15234
15236
|
--pf-v5-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
15235
15237
|
--pf-v5-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
|
|
15236
|
-
--pf-v5-c-form__group-label-help--BackgroundColor: transparent;
|
|
15237
|
-
--pf-v5-c-form__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
15238
|
-
--pf-v5-c-form__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
|
|
15239
|
-
--pf-v5-c-form__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
15240
|
-
--pf-v5-c-form__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
|
|
15241
|
-
--pf-v5-c-form__group-label-help--MarginTop: calc(var(--pf-v5-c-form__group-label-help--PaddingTop) * -1);
|
|
15242
|
-
--pf-v5-c-form__group-label-help--MarginRight: calc(var(--pf-v5-c-form__group-label-help--PaddingRight) * -1);
|
|
15243
|
-
--pf-v5-c-form__group-label-help--MarginBottom: calc(var(--pf-v5-c-form__group-label-help--PaddingBottom) * -1);
|
|
15244
|
-
--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));
|
|
15245
15238
|
--pf-v5-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
15246
|
-
--pf-v5-c-form__group-label-help--TranslateY: 0.125rem;
|
|
15247
|
-
--pf-v5-c-form__group-label-help--Color: var(--pf-t--global--icon--color--regular);
|
|
15248
|
-
--pf-v5-c-form__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
|
|
15249
|
-
--pf-v5-c-form__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
15250
15239
|
--pf-v5-c-form__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
15251
15240
|
--pf-v5-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
15252
15241
|
--pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
|
|
@@ -15528,28 +15517,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
15528
15517
|
color: var(--pf-v5-c-form__label-required--Color);
|
|
15529
15518
|
}
|
|
15530
15519
|
|
|
15531
|
-
.pf-v5-c-form__group-label-help {
|
|
15532
|
-
|
|
15533
|
-
padding-block-end: var(--pf-v5-c-form__group-label-help--PaddingBottom);
|
|
15534
|
-
padding-inline-start: var(--pf-v5-c-form__group-label-help--PaddingLeft);
|
|
15535
|
-
padding-inline-end: var(--pf-v5-c-form__group-label-help--PaddingRight);
|
|
15536
|
-
margin-block-start: var(--pf-v5-c-form__group-label-help--MarginTop);
|
|
15537
|
-
margin-block-end: var(--pf-v5-c-form__group-label-help--MarginBottom);
|
|
15538
|
-
margin-inline-start: var(--pf-v5-c-form__group-label-help--MarginLeft);
|
|
15539
|
-
margin-inline-end: var(--pf-v5-c-form__group-label-help--MarginRight);
|
|
15540
|
-
font-size: var(--pf-v5-c-form__group-label-help--FontSize);
|
|
15541
|
-
line-height: 1;
|
|
15542
|
-
color: var(--pf-v5-c-form__group-label-help--Color);
|
|
15543
|
-
cursor: pointer;
|
|
15544
|
-
background-color: var(--pf-v5-c-form__group-label-help--BackgroundColor);
|
|
15545
|
-
border: 0;
|
|
15546
|
-
transform: translateY(var(--pf-v5-c-form__group-label-help--TranslateY));
|
|
15547
|
-
}
|
|
15548
|
-
.pf-v5-c-form__group-label-help:hover {
|
|
15549
|
-
--pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--hover--Color);
|
|
15550
|
-
}
|
|
15551
|
-
.pf-v5-c-form__group-label-help:focus-within {
|
|
15552
|
-
--pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
|
|
15520
|
+
.pf-v5-c-form__group-label-help .pf-v5-c-button {
|
|
15521
|
+
--pf-v5-c-button--FontSize: var(--pf-v5-c-form__group-label-help--FontSize);
|
|
15553
15522
|
}
|
|
15554
15523
|
|
|
15555
15524
|
.pf-v5-c-form__group-control {
|
|
@@ -22941,34 +22910,36 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22941
22910
|
margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
|
|
22942
22911
|
}
|
|
22943
22912
|
|
|
22913
|
+
:root,
|
|
22944
22914
|
.pf-v5-c-progress {
|
|
22945
|
-
--pf-v5-c-progress--GridGap: var(--pf-
|
|
22946
|
-
--pf-v5-c-progress__bar--
|
|
22947
|
-
--pf-v5-c-progress__bar--
|
|
22948
|
-
--pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
|
|
22915
|
+
--pf-v5-c-progress--GridGap: var(--pf-t--global--spacer--md);
|
|
22916
|
+
--pf-v5-c-progress__bar--Height: var(--pf-t--global--spacer--md);
|
|
22917
|
+
--pf-v5-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
22949
22918
|
--pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
|
|
22950
|
-
--pf-v5-c-progress__status--Gap: var(--pf-
|
|
22951
|
-
--pf-v5-c-progress__status-icon--Color: var(--pf-
|
|
22952
|
-
--pf-v5-c-progress__bar--before--Opacity: .2;
|
|
22919
|
+
--pf-v5-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
|
|
22920
|
+
--pf-v5-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
22953
22921
|
--pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
|
|
22954
|
-
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-
|
|
22955
|
-
--pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-
|
|
22956
|
-
--pf-v5-c-progress--m-
|
|
22957
|
-
--pf-v5-c-progress--m-
|
|
22958
|
-
--pf-v5-c-progress--m-
|
|
22959
|
-
--pf-v5-c-progress--m-success__status-icon--Color: var(--pf-
|
|
22960
|
-
--pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-
|
|
22961
|
-
--pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-
|
|
22962
|
-
--pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-
|
|
22963
|
-
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-
|
|
22964
|
-
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-
|
|
22965
|
-
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-
|
|
22966
|
-
--pf-v5-c-progress--m-inside__measure--
|
|
22967
|
-
--pf-v5-c-progress--m-
|
|
22968
|
-
--pf-v5-c-progress--m-
|
|
22969
|
-
--pf-v5-c-progress--m-
|
|
22970
|
-
--pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-
|
|
22971
|
-
--pf-v5-c-progress--m-lg__bar--Height: var(--pf-
|
|
22922
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
22923
|
+
--pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v5-c-progress--GridGap));
|
|
22924
|
+
--pf-v5-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
|
|
22925
|
+
--pf-v5-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
|
|
22926
|
+
--pf-v5-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
|
|
22927
|
+
--pf-v5-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
22928
|
+
--pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
22929
|
+
--pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
22930
|
+
--pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
|
|
22931
|
+
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
|
|
22932
|
+
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
|
|
22933
|
+
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
|
|
22934
|
+
--pf-v5-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
|
|
22935
|
+
--pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
|
|
22936
|
+
--pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
|
|
22937
|
+
--pf-v5-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
|
|
22938
|
+
--pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
22939
|
+
--pf-v5-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
|
|
22940
|
+
}
|
|
22941
|
+
|
|
22942
|
+
.pf-v5-c-progress {
|
|
22972
22943
|
display: grid;
|
|
22973
22944
|
grid-template-rows: 1fr auto;
|
|
22974
22945
|
grid-template-columns: auto auto;
|
|
@@ -22978,9 +22949,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22978
22949
|
.pf-v5-c-progress.pf-m-sm {
|
|
22979
22950
|
--pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
|
|
22980
22951
|
}
|
|
22981
|
-
.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
|
|
22982
|
-
font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
|
|
22983
|
-
}
|
|
22984
22952
|
.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
|
|
22985
22953
|
font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
|
|
22986
22954
|
}
|
|
@@ -23036,18 +23004,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23036
23004
|
grid-template-columns: 1fr fit-content(50%);
|
|
23037
23005
|
}
|
|
23038
23006
|
.pf-v5-c-progress.pf-m-success {
|
|
23039
|
-
--pf-v5-c-
|
|
23007
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-success__indicator--BackgroundColor);
|
|
23040
23008
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
|
|
23041
23009
|
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
|
|
23042
23010
|
}
|
|
23043
23011
|
.pf-v5-c-progress.pf-m-warning {
|
|
23044
|
-
--pf-v5-c-
|
|
23012
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-warning__indicator--BackgroundColor);
|
|
23045
23013
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
|
|
23046
23014
|
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
|
|
23047
23015
|
}
|
|
23048
23016
|
.pf-v5-c-progress.pf-m-danger {
|
|
23049
|
-
--pf-v5-c-
|
|
23017
|
+
--pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-danger__indicator--BackgroundColor);
|
|
23050
23018
|
--pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
|
|
23019
|
+
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-danger--m-inside__measure--Color);
|
|
23051
23020
|
}
|
|
23052
23021
|
|
|
23053
23022
|
.pf-v5-c-progress__description {
|
|
@@ -23089,14 +23058,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23089
23058
|
height: var(--pf-v5-c-progress__bar--Height);
|
|
23090
23059
|
background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
|
|
23091
23060
|
}
|
|
23092
|
-
.pf-v5-c-progress__bar::before {
|
|
23093
|
-
position: absolute;
|
|
23094
|
-
width: 100%;
|
|
23095
|
-
height: 100%;
|
|
23096
|
-
content: "";
|
|
23097
|
-
background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
|
|
23098
|
-
opacity: var(--pf-v5-c-progress__bar--before--Opacity);
|
|
23099
|
-
}
|
|
23100
23061
|
|
|
23101
23062
|
.pf-v5-c-progress__indicator {
|
|
23102
23063
|
position: absolute;
|
|
@@ -23110,16 +23071,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23110
23071
|
margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
|
|
23111
23072
|
}
|
|
23112
23073
|
|
|
23113
|
-
: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 {
|
|
23114
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
23115
|
-
}
|
|
23116
|
-
|
|
23117
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-progress {
|
|
23118
|
-
--pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
|
23119
|
-
--pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
|
23120
|
-
--pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
|
|
23121
|
-
}
|
|
23122
|
-
|
|
23123
23074
|
.pf-v5-c-progress-stepper {
|
|
23124
23075
|
--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow: row;
|
|
23125
23076
|
--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
|
|
@@ -25279,40 +25230,44 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25279
25230
|
transform: rotate(720deg);
|
|
25280
25231
|
}
|
|
25281
25232
|
}
|
|
25233
|
+
:root,
|
|
25282
25234
|
.pf-v5-c-switch {
|
|
25283
|
-
--pf-v5-c-switch--FontSize: var(--pf-
|
|
25284
|
-
--pf-v5-c-
|
|
25285
|
-
--pf-v5-c-switch--ColumnGap: var(--pf-v5-c-switch__label--PaddingLeft);
|
|
25235
|
+
--pf-v5-c-switch--FontSize: var(--pf-t--global--font--size--sm);
|
|
25236
|
+
--pf-v5-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
|
|
25286
25237
|
--pf-v5-c-switch__toggle-icon--FontSize: calc(var(--pf-v5-c-switch--FontSize) * .625);
|
|
25287
|
-
--pf-v5-c-switch__toggle-icon--Color: var(--pf-
|
|
25238
|
+
--pf-v5-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
|
|
25288
25239
|
--pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
|
|
25289
25240
|
--pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
|
|
25290
|
-
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-
|
|
25291
|
-
--pf-v5-c-switch--LineHeight: var(--pf-
|
|
25241
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
25242
|
+
--pf-v5-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
25292
25243
|
--pf-v5-c-switch--Height: auto;
|
|
25293
|
-
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-
|
|
25244
|
+
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
25294
25245
|
--pf-v5-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset));
|
|
25295
|
-
--pf-v5-c-switch__input--
|
|
25296
|
-
--pf-v5-c-switch__input--
|
|
25297
|
-
--pf-v5-c-switch__input--
|
|
25298
|
-
--pf-v5-c-switch__input--
|
|
25299
|
-
--pf-v5-c-switch__input--disabled__toggle--
|
|
25300
|
-
--pf-v5-c-switch__input--
|
|
25301
|
-
--pf-v5-c-switch__input--
|
|
25302
|
-
--pf-v5-c-switch__input--
|
|
25246
|
+
--pf-v5-c-switch__input--checked__toggle--BorderWidth: 0;
|
|
25247
|
+
--pf-v5-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
|
|
25248
|
+
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
|
|
25249
|
+
--pf-v5-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
|
|
25250
|
+
--pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
25251
|
+
--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
|
|
25252
|
+
--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
|
|
25253
|
+
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
|
|
25254
|
+
--pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
|
|
25255
|
+
--pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
|
|
25256
|
+
--pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
|
|
25303
25257
|
--pf-v5-c-switch__toggle--Height: calc(var(--pf-v5-c-switch--FontSize) * var(--pf-v5-c-switch--LineHeight));
|
|
25304
|
-
--pf-v5-c-switch__toggle--BackgroundColor: var(--pf-
|
|
25305
|
-
--pf-v5-c-switch__toggle--
|
|
25258
|
+
--pf-v5-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
25259
|
+
--pf-v5-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
|
|
25260
|
+
--pf-v5-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
25261
|
+
--pf-v5-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
25306
25262
|
--pf-v5-c-switch__toggle--before--Width: calc(var(--pf-v5-c-switch--FontSize) - var(--pf-v5-c-switch__toggle-icon--Offset));
|
|
25307
25263
|
--pf-v5-c-switch__toggle--before--Height: var(--pf-v5-c-switch__toggle--before--Width);
|
|
25308
|
-
--pf-v5-c-switch__toggle--before--
|
|
25309
|
-
--pf-v5-c-switch__toggle--before--
|
|
25310
|
-
--pf-v5-c-switch__toggle--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
25311
|
-
--pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
|
|
25312
|
-
--pf-v5-c-switch__toggle--before--BoxShadow: var(--pf-v5-global--BoxShadow--md);
|
|
25264
|
+
--pf-v5-c-switch__toggle--before--Left: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
|
|
25265
|
+
--pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
25313
25266
|
--pf-v5-c-switch__toggle--before--Transition: transform .25s ease 0s;
|
|
25314
25267
|
--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));
|
|
25315
|
-
|
|
25268
|
+
}
|
|
25269
|
+
|
|
25270
|
+
.pf-v5-c-switch {
|
|
25316
25271
|
position: relative;
|
|
25317
25272
|
display: inline-grid;
|
|
25318
25273
|
grid-template-columns: auto;
|
|
@@ -25345,13 +25300,15 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25345
25300
|
color: var(--pf-v5-c-switch__input--checked__label--Color);
|
|
25346
25301
|
}
|
|
25347
25302
|
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
|
|
25303
|
+
--pf-v5-c-switch__toggle--BorderWidth: var(--pf-v5-c-switch__input--checked__toggle--BorderWidth);
|
|
25348
25304
|
background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
|
|
25349
25305
|
}
|
|
25350
25306
|
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
|
|
25351
|
-
transform:
|
|
25307
|
+
transform: translate(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX), -50%);
|
|
25308
|
+
background-color: var(--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor);
|
|
25352
25309
|
}
|
|
25353
25310
|
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
|
|
25354
|
-
transform:
|
|
25311
|
+
transform: translate(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), -50%);
|
|
25355
25312
|
}
|
|
25356
25313
|
|
|
25357
25314
|
.pf-v5-c-switch__input:checked ~ .pf-m-off {
|
|
@@ -25392,16 +25349,23 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25392
25349
|
}
|
|
25393
25350
|
.pf-v5-c-switch__toggle::before {
|
|
25394
25351
|
position: absolute;
|
|
25395
|
-
inset-block-start:
|
|
25352
|
+
inset-block-start: 50%;
|
|
25396
25353
|
inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
|
|
25397
25354
|
display: block;
|
|
25398
25355
|
width: var(--pf-v5-c-switch__toggle--before--Width);
|
|
25399
25356
|
height: var(--pf-v5-c-switch__toggle--before--Height);
|
|
25400
25357
|
content: "";
|
|
25401
|
-
background-color: var(--pf-v5-c-
|
|
25358
|
+
background-color: var(--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor);
|
|
25402
25359
|
border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
|
|
25403
|
-
box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
|
|
25404
25360
|
transition: var(--pf-v5-c-switch__toggle--before--Transition);
|
|
25361
|
+
transform: translateY(-50%);
|
|
25362
|
+
}
|
|
25363
|
+
.pf-v5-c-switch__toggle::after {
|
|
25364
|
+
position: absolute;
|
|
25365
|
+
inset: 0;
|
|
25366
|
+
content: "";
|
|
25367
|
+
border: var(--pf-v5-c-switch__toggle--BorderWidth) solid var(--pf-v5-c-switch__toggle--BorderColor);
|
|
25368
|
+
border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
|
|
25405
25369
|
}
|
|
25406
25370
|
|
|
25407
25371
|
.pf-v5-c-switch__toggle-icon {
|
|
@@ -25418,22 +25382,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
|
|
|
25418
25382
|
.pf-v5-c-switch__label {
|
|
25419
25383
|
display: inline-block;
|
|
25420
25384
|
grid-column: 2;
|
|
25421
|
-
color: var(--pf-v5-c-switch__label--Color);
|
|
25422
25385
|
vertical-align: top;
|
|
25423
25386
|
}
|
|
25424
25387
|
|
|
25425
|
-
: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 {
|
|
25426
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
25427
|
-
}
|
|
25428
|
-
|
|
25429
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-switch {
|
|
25430
|
-
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
|
|
25431
|
-
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
|
|
25432
|
-
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
|
|
25433
|
-
--pf-v5-c-switch__toggle--before--BoxShadow: none;
|
|
25434
|
-
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
|
|
25435
|
-
}
|
|
25436
|
-
|
|
25437
25388
|
:root,
|
|
25438
25389
|
.pf-v5-c-tab-content {
|
|
25439
25390
|
--pf-v5-c-tab-content__body--PaddingTop: 0;
|