@patternfly/patternfly 4.152.1 → 4.153.0
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/TextInputGroup/text-input-group.css +13 -0
- package/components/TextInputGroup/text-input-group.scss +19 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +13 -0
- package/patternfly.css +13 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
.pf-c-text-input-group {
|
|
2
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
2
3
|
--pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
3
4
|
--pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
|
|
4
5
|
--pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
@@ -23,12 +24,24 @@
|
|
|
23
24
|
--pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
|
|
24
25
|
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
|
|
25
26
|
--pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
|
|
27
|
+
--pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
|
|
28
|
+
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
26
29
|
position: relative;
|
|
27
30
|
display: flex;
|
|
31
|
+
color: var(--pf-c-text-input-group--Color, inherit);
|
|
32
|
+
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
28
33
|
}
|
|
29
34
|
.pf-c-text-input-group:hover {
|
|
30
35
|
--pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
|
|
31
36
|
}
|
|
37
|
+
.pf-c-text-input-group.pf-m-disabled {
|
|
38
|
+
--pf-c-text-input-group__text--before--BorderWidth: 0;
|
|
39
|
+
--pf-c-text-input-group__text--after--BorderBottomWidth: 0;
|
|
40
|
+
--pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
41
|
+
--pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
42
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
32
45
|
|
|
33
46
|
.pf-c-text-input-group__main {
|
|
34
47
|
display: flex;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
.pf-c-text-input-group {
|
|
2
|
+
// Component
|
|
3
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
4
|
+
|
|
2
5
|
// Base border
|
|
3
6
|
--pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
4
7
|
--pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
|
|
@@ -35,12 +38,28 @@
|
|
|
35
38
|
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
|
|
36
39
|
--pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
|
|
37
40
|
|
|
41
|
+
// input disabled style
|
|
42
|
+
--pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
|
|
43
|
+
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
44
|
+
|
|
38
45
|
position: relative;
|
|
39
46
|
display: flex;
|
|
47
|
+
color: var(--pf-c-text-input-group--Color, inherit);
|
|
48
|
+
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
40
49
|
|
|
41
50
|
&:hover {
|
|
42
51
|
--pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
|
|
43
52
|
}
|
|
53
|
+
|
|
54
|
+
&.pf-m-disabled {
|
|
55
|
+
--pf-c-text-input-group__text--before--BorderWidth: 0;
|
|
56
|
+
--pf-c-text-input-group__text--after--BorderBottomWidth: 0;
|
|
57
|
+
--pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
58
|
+
--pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
59
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
60
|
+
|
|
61
|
+
pointer-events: none;
|
|
62
|
+
}
|
|
44
63
|
}
|
|
45
64
|
|
|
46
65
|
.pf-c-text-input-group__main {
|
|
@@ -23,6 +23,25 @@ cssPrefix: pf-c-text-input-group
|
|
|
23
23
|
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
+
### Disabled
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<div class="pf-c-text-input-group pf-m-disabled">
|
|
30
|
+
<div class="pf-c-text-input-group__main">
|
|
31
|
+
<span class="pf-c-text-input-group__text">
|
|
32
|
+
<input
|
|
33
|
+
class="pf-c-text-input-group__text-input"
|
|
34
|
+
type="text"
|
|
35
|
+
value="Disabled"
|
|
36
|
+
aria-label="Disabled text input group example input"
|
|
37
|
+
disabled
|
|
38
|
+
/>
|
|
39
|
+
</span>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
|
|
26
45
|
### Utilities and icon
|
|
27
46
|
|
|
28
47
|
```html
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -25782,6 +25782,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25782
25782
|
}
|
|
25783
25783
|
|
|
25784
25784
|
.pf-c-text-input-group {
|
|
25785
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
25785
25786
|
--pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
25786
25787
|
--pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
|
|
25787
25788
|
--pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
@@ -25806,12 +25807,24 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25806
25807
|
--pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
|
|
25807
25808
|
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
|
|
25808
25809
|
--pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
|
|
25810
|
+
--pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
|
|
25811
|
+
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
25809
25812
|
position: relative;
|
|
25810
25813
|
display: flex;
|
|
25814
|
+
color: var(--pf-c-text-input-group--Color, inherit);
|
|
25815
|
+
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
25811
25816
|
}
|
|
25812
25817
|
.pf-c-text-input-group:hover {
|
|
25813
25818
|
--pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
|
|
25814
25819
|
}
|
|
25820
|
+
.pf-c-text-input-group.pf-m-disabled {
|
|
25821
|
+
--pf-c-text-input-group__text--before--BorderWidth: 0;
|
|
25822
|
+
--pf-c-text-input-group__text--after--BorderBottomWidth: 0;
|
|
25823
|
+
--pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25824
|
+
--pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25825
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
25826
|
+
pointer-events: none;
|
|
25827
|
+
}
|
|
25815
25828
|
|
|
25816
25829
|
.pf-c-text-input-group__main {
|
|
25817
25830
|
display: flex;
|
package/patternfly.css
CHANGED
|
@@ -25918,6 +25918,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25918
25918
|
}
|
|
25919
25919
|
|
|
25920
25920
|
.pf-c-text-input-group {
|
|
25921
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
25921
25922
|
--pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
25922
25923
|
--pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
|
|
25923
25924
|
--pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
@@ -25942,12 +25943,24 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
25942
25943
|
--pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
|
|
25943
25944
|
--pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
|
|
25944
25945
|
--pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
|
|
25946
|
+
--pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
|
|
25947
|
+
--pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
25945
25948
|
position: relative;
|
|
25946
25949
|
display: flex;
|
|
25950
|
+
color: var(--pf-c-text-input-group--Color, inherit);
|
|
25951
|
+
background-color: var(--pf-c-text-input-group--BackgroundColor);
|
|
25947
25952
|
}
|
|
25948
25953
|
.pf-c-text-input-group:hover {
|
|
25949
25954
|
--pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
|
|
25950
25955
|
}
|
|
25956
|
+
.pf-c-text-input-group.pf-m-disabled {
|
|
25957
|
+
--pf-c-text-input-group__text--before--BorderWidth: 0;
|
|
25958
|
+
--pf-c-text-input-group__text--after--BorderBottomWidth: 0;
|
|
25959
|
+
--pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25960
|
+
--pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
|
|
25961
|
+
--pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
|
|
25962
|
+
pointer-events: none;
|
|
25963
|
+
}
|
|
25951
25964
|
|
|
25952
25965
|
.pf-c-text-input-group__main {
|
|
25953
25966
|
display: flex;
|