codecheck

1
// core
2
.p-fileupload-content {
3
    position: relative;
4
}
5

6
.p-fileupload-content .p-progressbar {
7
    width: 100%;
8
    position: absolute;
9
    top: 0;
10
    left: 0;
11
}
12

13
.p-button.p-fileupload-choose {
14
    position: relative;
15
    overflow: hidden;
16
}
17

18
.p-fileupload-buttonbar {
19
    display: flex;
20
    flex-wrap: wrap;
21
}
22

23
.p-fileupload > input[type='file'],
24
.p-fileupload-basic input[type='file'] {
25
    display: none;
26
}
27

28
.p-fluid .p-fileupload .p-button {
29
    width: auto;
30
}
31

32
.p-fileupload-file {
33
    display: flex;
34
    flex-wrap: wrap;
35
    align-items: center;
36
}
37

38
.p-fileupload-file-thumbnail {
39
    flex-shrink: 0;
40
}
41

42
.p-fileupload-file-actions {
43
    margin-left: auto;
44
}
45

46
// theme
47
.p-fileupload {
48
    .p-fileupload-buttonbar {
49
        background: $panelHeaderBg;
50
        padding: $panelHeaderPadding;
51
        border: $panelHeaderBorder;
52
        color: $panelHeaderTextColor;
53
        border-bottom: 0 none;
54
        border-top-right-radius: $borderRadius;
55
        border-top-left-radius: $borderRadius;
56
        gap: $inlineSpacing;
57

58
        .p-button {
59
            &.p-fileupload-choose.p-focus {
60
                @include focused();
61
            }
62
        }
63
    }
64

65
    .p-fileupload-content {
66
        background: $panelContentBg;
67
        padding: $fileUploadContentPadding;
68
        border: $panelContentBorder;
69
        color: $panelContentTextColor;
70
        border-bottom-right-radius: $borderRadius;
71
        border-bottom-left-radius: $borderRadius;
72

73
        &.p-fileupload-highlight {
74
            border: $fileUploadContentHoverBorder;
75
            background-color: $highlightBg;
76
        }
77
    }
78

79
    .p-fileupload-file {
80
        padding: $fileUploadFilePadding;
81
        border: $fileUploadFileBorder;
82
        border-radius: $borderRadius;
83
        gap: $inlineSpacing;
84
        margin-bottom: $inlineSpacing;
85

86
        &:last-child {
87
            margin-bottom: 0;
88
        }
89
    }
90

91
    .p-fileupload-file-name {
92
        margin-bottom: $inlineSpacing;
93
    }
94

95
    .p-fileupload-file-size {
96
        margin-right: $inlineSpacing;
97
    }
98

99
    .p-progressbar {
100
        height: $fileUploadProgressBarHeight;
101
    }
102

103
    .p-fileupload-row {
104
        >div {
105
            padding: $tableBodyCellPadding;
106
        }
107
    }
108

109
    &.p-fileupload-advanced {
110
        .p-message {
111
            margin-top: 0;
112
        }
113
    }
114
}
115

116
.p-fileupload-choose {
117
    &:not(.p-disabled):hover {
118
        background: $buttonHoverBg;
119
        color: $buttonTextHoverColor;
120
        border-color: $buttonHoverBorderColor;
121
    }
122

123
    &:not(.p-disabled):active {
124
        background: $buttonActiveBg;
125
        color: $buttonTextActiveColor;
126
        border-color: $buttonActiveBorderColor;
127
    }
128
}