@patternfly/patternfly 6.0.0-alpha.182 → 6.0.0-alpha.184
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/Table/table-grid.css +5 -0
- package/components/Table/table-grid.scss +1 -0
- package/components/Table/table-tree-view.css +20 -0
- package/components/Table/table-tree-view.scss +5 -0
- package/components/TextInputGroup/text-input-group.css +67 -15
- package/components/TextInputGroup/text-input-group.scss +78 -21
- package/components/_index.css +92 -15
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +80 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +92 -15
- package/patternfly.css +92 -15
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/_index.css
CHANGED
|
@@ -14753,6 +14753,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
14753
14753
|
grid-column: 2;
|
|
14754
14754
|
}
|
|
14755
14755
|
.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
14756
|
+
position: revert;
|
|
14756
14757
|
font-weight: bold;
|
|
14757
14758
|
text-align: start;
|
|
14758
14759
|
content: attr(data-label);
|
|
@@ -15052,6 +15053,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
15052
15053
|
grid-column: 2;
|
|
15053
15054
|
}
|
|
15054
15055
|
.pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
15056
|
+
position: revert;
|
|
15055
15057
|
font-weight: bold;
|
|
15056
15058
|
text-align: start;
|
|
15057
15059
|
content: attr(data-label);
|
|
@@ -15354,6 +15356,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
15354
15356
|
grid-column: 2;
|
|
15355
15357
|
}
|
|
15356
15358
|
.pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
15359
|
+
position: revert;
|
|
15357
15360
|
font-weight: bold;
|
|
15358
15361
|
text-align: start;
|
|
15359
15362
|
content: attr(data-label);
|
|
@@ -15656,6 +15659,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
15656
15659
|
grid-column: 2;
|
|
15657
15660
|
}
|
|
15658
15661
|
.pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
15662
|
+
position: revert;
|
|
15659
15663
|
font-weight: bold;
|
|
15660
15664
|
text-align: start;
|
|
15661
15665
|
content: attr(data-label);
|
|
@@ -15958,6 +15962,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
15958
15962
|
grid-column: 2;
|
|
15959
15963
|
}
|
|
15960
15964
|
.pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
15965
|
+
position: revert;
|
|
15961
15966
|
font-weight: bold;
|
|
15962
15967
|
text-align: start;
|
|
15963
15968
|
content: attr(data-label);
|
|
@@ -17266,10 +17271,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
17266
17271
|
grid-column: 2;
|
|
17267
17272
|
}
|
|
17268
17273
|
.pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
17274
|
+
position: revert;
|
|
17269
17275
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
17270
17276
|
text-align: start;
|
|
17271
17277
|
content: attr(data-label);
|
|
17272
17278
|
}
|
|
17279
|
+
.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
17280
|
+
border-inline-end: 0;
|
|
17281
|
+
}
|
|
17273
17282
|
.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
17274
17283
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
17275
17284
|
}
|
|
@@ -17406,10 +17415,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
17406
17415
|
grid-column: 2;
|
|
17407
17416
|
}
|
|
17408
17417
|
.pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
17418
|
+
position: revert;
|
|
17409
17419
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
17410
17420
|
text-align: start;
|
|
17411
17421
|
content: attr(data-label);
|
|
17412
17422
|
}
|
|
17423
|
+
.pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
17424
|
+
border-inline-end: 0;
|
|
17425
|
+
}
|
|
17413
17426
|
.pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
17414
17427
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
17415
17428
|
}
|
|
@@ -17547,10 +17560,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
17547
17560
|
grid-column: 2;
|
|
17548
17561
|
}
|
|
17549
17562
|
.pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
17563
|
+
position: revert;
|
|
17550
17564
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
17551
17565
|
text-align: start;
|
|
17552
17566
|
content: attr(data-label);
|
|
17553
17567
|
}
|
|
17568
|
+
.pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
17569
|
+
border-inline-end: 0;
|
|
17570
|
+
}
|
|
17554
17571
|
.pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
17555
17572
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
17556
17573
|
}
|
|
@@ -17688,10 +17705,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
17688
17705
|
grid-column: 2;
|
|
17689
17706
|
}
|
|
17690
17707
|
.pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
17708
|
+
position: revert;
|
|
17691
17709
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
17692
17710
|
text-align: start;
|
|
17693
17711
|
content: attr(data-label);
|
|
17694
17712
|
}
|
|
17713
|
+
.pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
17714
|
+
border-inline-end: 0;
|
|
17715
|
+
}
|
|
17695
17716
|
.pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
17696
17717
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
17697
17718
|
}
|
|
@@ -17829,10 +17850,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
17829
17850
|
grid-column: 2;
|
|
17830
17851
|
}
|
|
17831
17852
|
.pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
17853
|
+
position: revert;
|
|
17832
17854
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
17833
17855
|
text-align: start;
|
|
17834
17856
|
content: attr(data-label);
|
|
17835
17857
|
}
|
|
17858
|
+
.pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
17859
|
+
border-inline-end: 0;
|
|
17860
|
+
}
|
|
17836
17861
|
.pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
17837
17862
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
17838
17863
|
}
|
|
@@ -18711,10 +18736,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18711
18736
|
:where(:root, .pf-v6-c-text-input-group) {
|
|
18712
18737
|
--pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
18713
18738
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
|
|
18739
|
+
--pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
|
|
18740
|
+
--pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
|
|
18741
|
+
--pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
18714
18742
|
--pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
18743
|
+
--pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
|
|
18744
|
+
--pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
|
|
18715
18745
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
18746
|
+
--pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
|
|
18747
|
+
--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
|
|
18748
|
+
--pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
|
|
18716
18749
|
--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
|
|
18717
18750
|
--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
|
|
18751
|
+
--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
18718
18752
|
--pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
|
|
18719
18753
|
--pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
18720
18754
|
--pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
|
|
@@ -18735,7 +18769,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18735
18769
|
--pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
|
|
18736
18770
|
--pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
|
|
18737
18771
|
--pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
|
|
18772
|
+
--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
|
|
18738
18773
|
--pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
18774
|
+
--pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
18775
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
|
|
18776
|
+
--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
|
|
18777
|
+
--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
18778
|
+
--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
18779
|
+
--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
18739
18780
|
--pf-v6-c-text-input-group__icon--TranslateY: -50%;
|
|
18740
18781
|
--pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
|
|
18741
18782
|
--pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
|
|
@@ -18748,24 +18789,60 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18748
18789
|
position: relative;
|
|
18749
18790
|
display: flex;
|
|
18750
18791
|
width: 100%;
|
|
18792
|
+
font-size: var(--pf-v6-c-text-input-group__FontSize);
|
|
18793
|
+
line-height: var(--pf-v6-c-text-input-group__LineHeight);
|
|
18751
18794
|
color: var(--pf-v6-c-text-input-group--Color, inherit);
|
|
18752
18795
|
background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
|
|
18796
|
+
border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
|
|
18797
|
+
border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
|
|
18798
|
+
border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
|
|
18799
|
+
border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
|
|
18753
18800
|
}
|
|
18754
|
-
.pf-v6-c-text-input-group
|
|
18755
|
-
|
|
18801
|
+
.pf-v6-c-text-input-group::before {
|
|
18802
|
+
position: absolute;
|
|
18803
|
+
inset: 0;
|
|
18804
|
+
pointer-events: none;
|
|
18805
|
+
content: "";
|
|
18806
|
+
border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
|
|
18807
|
+
border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
|
|
18808
|
+
border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
|
|
18809
|
+
border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
|
|
18810
|
+
border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
|
|
18756
18811
|
}
|
|
18757
18812
|
.pf-v6-c-text-input-group.pf-m-disabled {
|
|
18758
18813
|
--pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
|
|
18759
|
-
--pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-
|
|
18814
|
+
--pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
|
|
18815
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
|
|
18760
18816
|
--pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
|
|
18761
18817
|
pointer-events: none;
|
|
18762
18818
|
}
|
|
18763
18819
|
.pf-v6-c-text-input-group.pf-m-plain {
|
|
18764
18820
|
--pf-v6-c-text-input-group--BackgroundColor: transparent;
|
|
18765
18821
|
}
|
|
18766
|
-
.pf-v6-c-text-input-group.pf-m-plain
|
|
18822
|
+
.pf-v6-c-text-input-group.pf-m-plain::before {
|
|
18767
18823
|
border: 0;
|
|
18768
18824
|
}
|
|
18825
|
+
.pf-v6-c-text-input-group.pf-m-success {
|
|
18826
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
|
|
18827
|
+
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
|
|
18828
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
|
|
18829
|
+
}
|
|
18830
|
+
.pf-v6-c-text-input-group.pf-m-warning {
|
|
18831
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
|
|
18832
|
+
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
|
|
18833
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
|
|
18834
|
+
}
|
|
18835
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
18836
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
|
|
18837
|
+
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
18838
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
18839
|
+
}
|
|
18840
|
+
.pf-v6-c-text-input-group:hover {
|
|
18841
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
18842
|
+
}
|
|
18843
|
+
.pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
|
|
18844
|
+
--pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
|
|
18845
|
+
}
|
|
18769
18846
|
|
|
18770
18847
|
.pf-v6-c-text-input-group__main {
|
|
18771
18848
|
display: flex;
|
|
@@ -18775,7 +18852,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18775
18852
|
min-width: 0;
|
|
18776
18853
|
}
|
|
18777
18854
|
.pf-v6-c-text-input-group__main.pf-m-icon {
|
|
18855
|
+
--pf-v6-c-text-input-group__text--Position: relative;
|
|
18778
18856
|
--pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
|
|
18857
|
+
display: inline-flex;
|
|
18858
|
+
align-items: center;
|
|
18859
|
+
justify-content: center;
|
|
18860
|
+
min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
|
|
18779
18861
|
}
|
|
18780
18862
|
.pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
|
|
18781
18863
|
padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
|
|
@@ -18789,22 +18871,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18789
18871
|
}
|
|
18790
18872
|
|
|
18791
18873
|
.pf-v6-c-text-input-group__text {
|
|
18874
|
+
position: var(--pf-v6-c-text-input-group__text--Position, revert);
|
|
18792
18875
|
display: inline-grid;
|
|
18793
18876
|
flex: 1;
|
|
18794
18877
|
grid-template-areas: "text-input";
|
|
18795
18878
|
grid-template-columns: 1fr;
|
|
18796
18879
|
}
|
|
18797
|
-
.pf-v6-c-text-input-group__text::before {
|
|
18798
|
-
position: absolute;
|
|
18799
|
-
inset: 0;
|
|
18800
|
-
pointer-events: none;
|
|
18801
|
-
content: "";
|
|
18802
|
-
border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
|
|
18803
|
-
border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
|
|
18804
|
-
border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
|
|
18805
|
-
border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
|
|
18806
|
-
border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
|
|
18807
|
-
}
|
|
18808
18880
|
|
|
18809
18881
|
.pf-v6-c-text-input-group__icon {
|
|
18810
18882
|
position: absolute;
|
|
@@ -18813,6 +18885,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18813
18885
|
color: var(--pf-v6-c-text-input-group__icon--Color);
|
|
18814
18886
|
transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
|
|
18815
18887
|
}
|
|
18888
|
+
.pf-v6-c-text-input-group__icon.pf-m-status {
|
|
18889
|
+
inset-inline-start: auto;
|
|
18890
|
+
inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
|
|
18891
|
+
color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
|
|
18892
|
+
}
|
|
18816
18893
|
|
|
18817
18894
|
.pf-v6-c-text-input-group__text-input {
|
|
18818
18895
|
overflow: hidden;
|
|
@@ -97,6 +97,76 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
97
97
|
|
|
98
98
|
```
|
|
99
99
|
|
|
100
|
+
### With validation
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<div class="pf-v6-c-text-input-group pf-m-success">
|
|
104
|
+
<div class="pf-v6-c-text-input-group__main">
|
|
105
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
106
|
+
<input
|
|
107
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
108
|
+
type="text"
|
|
109
|
+
value="Success validation"
|
|
110
|
+
aria-label="Type to filter"
|
|
111
|
+
/>
|
|
112
|
+
<span class="pf-v6-c-text-input-group__icon pf-m-status">
|
|
113
|
+
<i aria-hidden="true" class="fas fa-check-circle"></i>
|
|
114
|
+
</span>
|
|
115
|
+
</span>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
<br />
|
|
119
|
+
<div class="pf-v6-c-text-input-group pf-m-warning">
|
|
120
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
121
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
122
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
123
|
+
<i class="fas fa-fw fa-search"></i>
|
|
124
|
+
</span>
|
|
125
|
+
<input
|
|
126
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
127
|
+
type="text"
|
|
128
|
+
value="Warning validation with icon at start"
|
|
129
|
+
aria-label="Type to filter"
|
|
130
|
+
/>
|
|
131
|
+
<span class="pf-v6-c-text-input-group__icon pf-m-status">
|
|
132
|
+
<i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
|
|
133
|
+
</span>
|
|
134
|
+
</span>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
<br />
|
|
138
|
+
<div class="pf-v6-c-text-input-group pf-m-error">
|
|
139
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
140
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
141
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
142
|
+
<i class="fas fa-fw fa-search"></i>
|
|
143
|
+
</span>
|
|
144
|
+
<input
|
|
145
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
146
|
+
type="text"
|
|
147
|
+
value="Error validation with icon at start and utilities"
|
|
148
|
+
aria-label="Type to filter"
|
|
149
|
+
/>
|
|
150
|
+
<span class="pf-v6-c-text-input-group__icon pf-m-status">
|
|
151
|
+
<i aria-hidden="true" class="fas fa-exclamation-circle"></i>
|
|
152
|
+
</span>
|
|
153
|
+
</span>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="pf-v6-c-text-input-group__utilities">
|
|
156
|
+
<button
|
|
157
|
+
class="pf-v6-c-button pf-m-plain"
|
|
158
|
+
type="button"
|
|
159
|
+
aria-label="Clear input"
|
|
160
|
+
>
|
|
161
|
+
<span class="pf-v6-c-button__text">
|
|
162
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
163
|
+
</span>
|
|
164
|
+
</button>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
```
|
|
169
|
+
|
|
100
170
|
### Filters
|
|
101
171
|
|
|
102
172
|
```html
|
|
@@ -1386,3 +1456,13 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
1386
1456
|
</div>
|
|
1387
1457
|
|
|
1388
1458
|
```
|
|
1459
|
+
|
|
1460
|
+
### Usage
|
|
1461
|
+
|
|
1462
|
+
| Class | Applied to | Outcome |
|
|
1463
|
+
| -- | -- | -- |
|
|
1464
|
+
| `.pf-m-success` | `.pf-v6-c-text-input-group` | Applies success validation styling. |
|
|
1465
|
+
| `.pf-m-warning` | `.pf-v6-c-text-input-group` | Applies warning validation styling. |
|
|
1466
|
+
| `.pf-m-error` | `.pf-v6-c-text-input-group` | Applies error validation styling. |
|
|
1467
|
+
| `.pf-m-icon` | `.pf-v6-c-text-input-group__main` | Applies styling when icons are included in the container. |
|
|
1468
|
+
| `.pf-m-status` | `.pf-v6-c-text-input-group__icon` | Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`. |
|
package/package.json
CHANGED
|
@@ -20836,6 +20836,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
20836
20836
|
grid-column: 2;
|
|
20837
20837
|
}
|
|
20838
20838
|
.pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
20839
|
+
position: revert;
|
|
20839
20840
|
font-weight: bold;
|
|
20840
20841
|
text-align: start;
|
|
20841
20842
|
content: attr(data-label);
|
|
@@ -21135,6 +21136,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
21135
21136
|
grid-column: 2;
|
|
21136
21137
|
}
|
|
21137
21138
|
.pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
21139
|
+
position: revert;
|
|
21138
21140
|
font-weight: bold;
|
|
21139
21141
|
text-align: start;
|
|
21140
21142
|
content: attr(data-label);
|
|
@@ -21437,6 +21439,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
21437
21439
|
grid-column: 2;
|
|
21438
21440
|
}
|
|
21439
21441
|
.pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
21442
|
+
position: revert;
|
|
21440
21443
|
font-weight: bold;
|
|
21441
21444
|
text-align: start;
|
|
21442
21445
|
content: attr(data-label);
|
|
@@ -21739,6 +21742,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
21739
21742
|
grid-column: 2;
|
|
21740
21743
|
}
|
|
21741
21744
|
.pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
21745
|
+
position: revert;
|
|
21742
21746
|
font-weight: bold;
|
|
21743
21747
|
text-align: start;
|
|
21744
21748
|
content: attr(data-label);
|
|
@@ -22041,6 +22045,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
22041
22045
|
grid-column: 2;
|
|
22042
22046
|
}
|
|
22043
22047
|
.pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
|
|
22048
|
+
position: revert;
|
|
22044
22049
|
font-weight: bold;
|
|
22045
22050
|
text-align: start;
|
|
22046
22051
|
content: attr(data-label);
|
|
@@ -23349,10 +23354,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
23349
23354
|
grid-column: 2;
|
|
23350
23355
|
}
|
|
23351
23356
|
.pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
23357
|
+
position: revert;
|
|
23352
23358
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
23353
23359
|
text-align: start;
|
|
23354
23360
|
content: attr(data-label);
|
|
23355
23361
|
}
|
|
23362
|
+
.pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
23363
|
+
border-inline-end: 0;
|
|
23364
|
+
}
|
|
23356
23365
|
.pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
23357
23366
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
23358
23367
|
}
|
|
@@ -23489,10 +23498,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
23489
23498
|
grid-column: 2;
|
|
23490
23499
|
}
|
|
23491
23500
|
.pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
23501
|
+
position: revert;
|
|
23492
23502
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
23493
23503
|
text-align: start;
|
|
23494
23504
|
content: attr(data-label);
|
|
23495
23505
|
}
|
|
23506
|
+
.pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
23507
|
+
border-inline-end: 0;
|
|
23508
|
+
}
|
|
23496
23509
|
.pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
23497
23510
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
23498
23511
|
}
|
|
@@ -23630,10 +23643,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
23630
23643
|
grid-column: 2;
|
|
23631
23644
|
}
|
|
23632
23645
|
.pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
23646
|
+
position: revert;
|
|
23633
23647
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
23634
23648
|
text-align: start;
|
|
23635
23649
|
content: attr(data-label);
|
|
23636
23650
|
}
|
|
23651
|
+
.pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
23652
|
+
border-inline-end: 0;
|
|
23653
|
+
}
|
|
23637
23654
|
.pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
23638
23655
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
23639
23656
|
}
|
|
@@ -23771,10 +23788,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
23771
23788
|
grid-column: 2;
|
|
23772
23789
|
}
|
|
23773
23790
|
.pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
23791
|
+
position: revert;
|
|
23774
23792
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
23775
23793
|
text-align: start;
|
|
23776
23794
|
content: attr(data-label);
|
|
23777
23795
|
}
|
|
23796
|
+
.pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
23797
|
+
border-inline-end: 0;
|
|
23798
|
+
}
|
|
23778
23799
|
.pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
23779
23800
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
23780
23801
|
}
|
|
@@ -23912,10 +23933,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
23912
23933
|
grid-column: 2;
|
|
23913
23934
|
}
|
|
23914
23935
|
.pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
|
|
23936
|
+
position: revert;
|
|
23915
23937
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
23916
23938
|
text-align: start;
|
|
23917
23939
|
content: attr(data-label);
|
|
23918
23940
|
}
|
|
23941
|
+
.pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
|
|
23942
|
+
border-inline-end: 0;
|
|
23943
|
+
}
|
|
23919
23944
|
.pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
|
|
23920
23945
|
padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
|
|
23921
23946
|
}
|
|
@@ -24794,10 +24819,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
24794
24819
|
:where(:root, .pf-v6-c-text-input-group) {
|
|
24795
24820
|
--pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
24796
24821
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
|
|
24822
|
+
--pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
|
|
24823
|
+
--pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
|
|
24824
|
+
--pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
24797
24825
|
--pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
24826
|
+
--pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
|
|
24827
|
+
--pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
|
|
24798
24828
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
24829
|
+
--pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
|
|
24830
|
+
--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
|
|
24831
|
+
--pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
|
|
24799
24832
|
--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
|
|
24800
24833
|
--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
|
|
24834
|
+
--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
24801
24835
|
--pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
|
|
24802
24836
|
--pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
|
|
24803
24837
|
--pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
|
|
@@ -24818,7 +24852,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
24818
24852
|
--pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
|
|
24819
24853
|
--pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
|
|
24820
24854
|
--pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
|
|
24855
|
+
--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
|
|
24821
24856
|
--pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
24857
|
+
--pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
24858
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
|
|
24859
|
+
--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
|
|
24860
|
+
--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
24861
|
+
--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
24862
|
+
--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
24822
24863
|
--pf-v6-c-text-input-group__icon--TranslateY: -50%;
|
|
24823
24864
|
--pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
|
|
24824
24865
|
--pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
|
|
@@ -24831,24 +24872,60 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
24831
24872
|
position: relative;
|
|
24832
24873
|
display: flex;
|
|
24833
24874
|
width: 100%;
|
|
24875
|
+
font-size: var(--pf-v6-c-text-input-group__FontSize);
|
|
24876
|
+
line-height: var(--pf-v6-c-text-input-group__LineHeight);
|
|
24834
24877
|
color: var(--pf-v6-c-text-input-group--Color, inherit);
|
|
24835
24878
|
background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
|
|
24879
|
+
border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
|
|
24880
|
+
border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
|
|
24881
|
+
border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
|
|
24882
|
+
border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
|
|
24836
24883
|
}
|
|
24837
|
-
.pf-v6-c-text-input-group
|
|
24838
|
-
|
|
24884
|
+
.pf-v6-c-text-input-group::before {
|
|
24885
|
+
position: absolute;
|
|
24886
|
+
inset: 0;
|
|
24887
|
+
pointer-events: none;
|
|
24888
|
+
content: "";
|
|
24889
|
+
border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
|
|
24890
|
+
border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
|
|
24891
|
+
border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
|
|
24892
|
+
border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
|
|
24893
|
+
border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
|
|
24839
24894
|
}
|
|
24840
24895
|
.pf-v6-c-text-input-group.pf-m-disabled {
|
|
24841
24896
|
--pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
|
|
24842
|
-
--pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-
|
|
24897
|
+
--pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
|
|
24898
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
|
|
24843
24899
|
--pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
|
|
24844
24900
|
pointer-events: none;
|
|
24845
24901
|
}
|
|
24846
24902
|
.pf-v6-c-text-input-group.pf-m-plain {
|
|
24847
24903
|
--pf-v6-c-text-input-group--BackgroundColor: transparent;
|
|
24848
24904
|
}
|
|
24849
|
-
.pf-v6-c-text-input-group.pf-m-plain
|
|
24905
|
+
.pf-v6-c-text-input-group.pf-m-plain::before {
|
|
24850
24906
|
border: 0;
|
|
24851
24907
|
}
|
|
24908
|
+
.pf-v6-c-text-input-group.pf-m-success {
|
|
24909
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
|
|
24910
|
+
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
|
|
24911
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
|
|
24912
|
+
}
|
|
24913
|
+
.pf-v6-c-text-input-group.pf-m-warning {
|
|
24914
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
|
|
24915
|
+
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
|
|
24916
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
|
|
24917
|
+
}
|
|
24918
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
|
24919
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
|
|
24920
|
+
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
|
24921
|
+
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
|
24922
|
+
}
|
|
24923
|
+
.pf-v6-c-text-input-group:hover {
|
|
24924
|
+
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
|
24925
|
+
}
|
|
24926
|
+
.pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
|
|
24927
|
+
--pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
|
|
24928
|
+
}
|
|
24852
24929
|
|
|
24853
24930
|
.pf-v6-c-text-input-group__main {
|
|
24854
24931
|
display: flex;
|
|
@@ -24858,7 +24935,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
24858
24935
|
min-width: 0;
|
|
24859
24936
|
}
|
|
24860
24937
|
.pf-v6-c-text-input-group__main.pf-m-icon {
|
|
24938
|
+
--pf-v6-c-text-input-group__text--Position: relative;
|
|
24861
24939
|
--pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
|
|
24940
|
+
display: inline-flex;
|
|
24941
|
+
align-items: center;
|
|
24942
|
+
justify-content: center;
|
|
24943
|
+
min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
|
|
24862
24944
|
}
|
|
24863
24945
|
.pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
|
|
24864
24946
|
padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
|
|
@@ -24872,22 +24954,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
24872
24954
|
}
|
|
24873
24955
|
|
|
24874
24956
|
.pf-v6-c-text-input-group__text {
|
|
24957
|
+
position: var(--pf-v6-c-text-input-group__text--Position, revert);
|
|
24875
24958
|
display: inline-grid;
|
|
24876
24959
|
flex: 1;
|
|
24877
24960
|
grid-template-areas: "text-input";
|
|
24878
24961
|
grid-template-columns: 1fr;
|
|
24879
24962
|
}
|
|
24880
|
-
.pf-v6-c-text-input-group__text::before {
|
|
24881
|
-
position: absolute;
|
|
24882
|
-
inset: 0;
|
|
24883
|
-
pointer-events: none;
|
|
24884
|
-
content: "";
|
|
24885
|
-
border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
|
|
24886
|
-
border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
|
|
24887
|
-
border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
|
|
24888
|
-
border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
|
|
24889
|
-
border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
|
|
24890
|
-
}
|
|
24891
24963
|
|
|
24892
24964
|
.pf-v6-c-text-input-group__icon {
|
|
24893
24965
|
position: absolute;
|
|
@@ -24896,6 +24968,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
24896
24968
|
color: var(--pf-v6-c-text-input-group__icon--Color);
|
|
24897
24969
|
transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
|
|
24898
24970
|
}
|
|
24971
|
+
.pf-v6-c-text-input-group__icon.pf-m-status {
|
|
24972
|
+
inset-inline-start: auto;
|
|
24973
|
+
inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
|
|
24974
|
+
color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
|
|
24975
|
+
}
|
|
24899
24976
|
|
|
24900
24977
|
.pf-v6-c-text-input-group__text-input {
|
|
24901
24978
|
overflow: hidden;
|