Files
htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/file/_fileupload.scss
2024-06-10 10:50:27 +02:00

129 lines
2.3 KiB
SCSS

// core
.p-fileupload-content {
position: relative;
}
.p-fileupload-content .p-progressbar {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.p-button.p-fileupload-choose {
position: relative;
overflow: hidden;
}
.p-fileupload-buttonbar {
display: flex;
flex-wrap: wrap;
}
.p-fileupload > input[type="file"],
.p-fileupload-basic input[type="file"] {
display: none;
}
.p-fluid .p-fileupload .p-button {
width: auto;
}
.p-fileupload-file {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.p-fileupload-file-thumbnail {
flex-shrink: 0;
}
.p-fileupload-file-actions {
margin-left: auto;
}
// theme
.p-fileupload {
.p-fileupload-buttonbar {
background: $panelHeaderBg;
padding: $panelHeaderPadding;
border: $panelHeaderBorder;
color: $panelHeaderTextColor;
border-bottom: 0 none;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
gap: $inlineSpacing;
.p-button {
&.p-fileupload-choose.p-focus {
@include focused();
}
}
}
.p-fileupload-content {
background: $panelContentBg;
padding: $fileUploadContentPadding;
border: $panelContentBorder;
color: $panelContentTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
&.p-fileupload-highlight {
border: $fileUploadContentHoverBorder;
background-color: $highlightBg;
}
}
.p-fileupload-file {
padding: $fileUploadFilePadding;
border: $fileUploadFileBorder;
border-radius: $borderRadius;
gap: $inlineSpacing;
margin-bottom: $inlineSpacing;
&:last-child {
margin-bottom: 0;
}
}
.p-fileupload-file-name {
margin-bottom: $inlineSpacing;
}
.p-fileupload-file-size {
margin-right: $inlineSpacing;
}
.p-progressbar {
height: $fileUploadProgressBarHeight;
}
.p-fileupload-row {
> div {
padding: $tableBodyCellPadding;
}
}
&.p-fileupload-advanced {
.p-message {
margin-top: 0;
}
}
}
.p-fileupload-choose {
&:not(.p-disabled):hover {
background: $buttonHoverBg;
color: $buttonTextHoverColor;
border-color: $buttonHoverBorderColor;
}
&:not(.p-disabled):active {
background: $buttonActiveBg;
color: $buttonTextActiveColor;
border-color: $buttonActiveBorderColor;
}
}