fleet/frontend/components/FileUploader/_styles.scss

58 lines
1.1 KiB
SCSS

.file-uploader {
display: flex;
flex-direction: column;
align-items: center;
border-radius: $border-radius-medium;
background-color: $core-fleet-white;
border: 1px solid $ui-fleet-black-10;
padding: $pad-xlarge $pad-large;
font-size: $x-small;
text-align: center;
.content-wrapper {
@include content-wrapper();
}
// when the file preview is showing, we want the padding to be
// slightly smaller on the top and bottom.
&__file-preview {
padding: $pad-medium $pad-large;
}
&__graphics {
display: flex;
justify-content: center;
gap: $pad-medium;
}
&__message {
margin: 0;
color: $ui-fleet-black-75;
}
&__additional-info {
margin: 0;
color: $ui-fleet-black-50;
}
input {
display: none;
}
&__upload-button {
// we handle the padding in the label so the entire button is clickable
padding: 0;
label,
span {
padding: $pad-small $pad-medium;
display: flex;
align-items: center;
justify-content: center;
gap: $pad-small;
&:hover {
cursor: pointer;
}
}
}
}