codecheck

1
// core
2
.p-inputgroup {
3
    display: flex;
4
    align-items: stretch;
5
    width: 100%;
6
}
7

8
.p-inputgroup-addon {
9
    display: flex;
10
    align-items: center;
11
    justify-content: center;
12
}
13

14
.p-inputgroup .p-float-label {
15
    display: flex;
16
    align-items: stretch;
17
    width: 100%;
18
}
19

20
.p-inputgroup .p-inputtext,
21
.p-fluid .p-inputgroup .p-inputtext,
22
.p-inputgroup .p-inputwrapper,
23
.p-fluid .p-inputgroup .p-input {
24
    flex: 1 1 auto;
25
    width: 1%;
26
}
27

28
// theme
29
.p-inputgroup-addon {
30
    background: $inputGroupBg;
31
    color: $inputGroupTextColor;
32
    border-top: $inputBorder;
33
    border-left: $inputBorder;
34
    border-bottom: $inputBorder;
35
    padding: $inputPadding;
36
    min-width: $inputGroupAddOnMinWidth;
37

38
    &:last-child {
39
        border-right: $inputBorder;
40
    }
41
}
42

43
.p-inputgroup {
44
    > .p-component,
45
    > .p-inputwrapper > .p-inputtext,
46
    > .p-float-label > .p-component {
47
        border-radius: 0;
48
        margin: 0;
49

50
        + .p-inputgroup-addon {
51
            border-left: 0 none;
52
        }
53

54
        &:focus {
55
            z-index: 1;
56

57
            ~ label {
58
                z-index: 1;
59
            }
60
        }
61
    }
62
}
63

64
.p-inputgroup-addon:first-child,
65
.p-inputgroup button:first-child,
66
.p-inputgroup input:first-child,
67
.p-inputgroup > .p-inputwrapper:first-child,
68
.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
69
    border-top-left-radius: $borderRadius;
70
    border-bottom-left-radius: $borderRadius;
71
}
72

73
.p-inputgroup .p-float-label:first-child input {
74
    border-top-left-radius: $borderRadius;
75
    border-bottom-left-radius: $borderRadius;
76
}
77

78
.p-inputgroup-addon:last-child,
79
.p-inputgroup button:last-child,
80
.p-inputgroup input:last-child,
81
.p-inputgroup > .p-inputwrapper:last-child, 
82
.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
83
    border-top-right-radius: $borderRadius;
84
    border-bottom-right-radius: $borderRadius;
85
}
86

87
.p-inputgroup .p-float-label:last-child input {
88
    border-top-right-radius: $borderRadius;
89
    border-bottom-right-radius: $borderRadius;
90
}
91

92
.p-fluid {
93
    .p-inputgroup {
94
        .p-button {
95
            width: auto;
96

97
            &.p-button-icon-only {
98
                width: $buttonIconOnlyWidth;
99
            }
100
        }
101
    }
102
}
103