codecheck

1
// core
2
.p-inline-message {
3
    display: inline-flex;
4
    align-items: center;
5
    justify-content: center;
6
    vertical-align: top;
7
}
8

9
.p-inline-message-icon {
10
    flex-shrink: 0;
11
}
12

13
.p-inline-message-icon-only .p-inline-message-text {
14
    visibility: hidden;
15
    width: 0;
16
}
17

18
.p-fluid .p-inline-message {
19
    display: flex;
20
}
21

22
// theme
23
.p-inline-message {
24
    padding: $inlineMessagePadding;
25
    margin: $inlineMessageMargin;
26
    border-radius: $borderRadius;
27

28
    &.p-inline-message-info {
29
        background: $infoMessageBg;
30
        border: $infoMessageBorder;
31
        border-width: $inlineMessageBorderWidth;
32
        color: $infoMessageTextColor;
33

34
        .p-inline-message-icon {
35
            color: $infoMessageIconColor;
36
        }
37
    }
38

39
    &.p-inline-message-success {
40
        background: $successMessageBg;
41
        border: $successMessageBorder;
42
        border-width: $inlineMessageBorderWidth;
43
        color: $successMessageTextColor;
44

45
        .p-inline-message-icon {
46
            color: $successMessageIconColor;
47
        }
48
    }
49

50
    &.p-inline-message-warn {
51
        background: $warningMessageBg;
52
        border: $warningMessageBorder;
53
        border-width: $inlineMessageBorderWidth;
54
        color: $warningMessageTextColor;
55

56
        .p-inline-message-icon {
57
            color: $warningMessageIconColor;
58
        }
59
    }
60

61
    &.p-inline-message-error {
62
        background: $errorMessageBg;
63
        border: $errorMessageBorder;
64
        border-width: $inlineMessageBorderWidth;
65
        color: $errorMessageTextColor;
66

67
        .p-inline-message-icon {
68
            color: $errorMessageIconColor;
69
        }
70
    }
71

72
    @if variable-exists(secondaryMessageBg) {
73
        &.p-inline-message-secondary {
74
            background: $secondaryMessageBg;
75
            border: $secondaryMessageBorder;
76
            border-width: $inlineMessageBorderWidth;
77
            color: $secondaryMessageTextColor;
78

79
            .p-inline-message-icon {
80
                color: $secondaryMessageIconColor;
81
            }
82
        }
83
    }
84

85
    @if variable-exists(contrastMessageBg) {
86
        &.p-inline-message-contrast {
87
            background: $contrastMessageBg;
88
            border: $contrastMessageBorder;
89
            border-width: $inlineMessageBorderWidth;
90
            color: $contrastMessageTextColor;
91

92
            .p-inline-message-icon {
93
                color: $contrastMessageIconColor;
94
            }
95
        }
96
    }
97

98
    .p-inline-message-icon {
99
        font-size: $inlineMessageIconFontSize;
100
        margin-right: $inlineSpacing;
101
    }
102

103
    .p-inline-message-text {
104
        font-size: $inlineMessageTextFontSize;
105
    }
106

107
    &.p-inline-message-icon-only {
108
        .p-inline-message-icon {
109
            margin-right: 0;
110
        }
111
    }
112
}
113