@freshworks/crayons
Version:
Crayons Web Components library
98 lines (96 loc) • 2.56 kB
CSS
/* Need to check with designer */
/* Need to check with designer */
:host {
font-family: var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
:host {
display: block;
}
div.file-uploader-container {
display: flex;
width: 100%;
min-height: 153px;
border: 1px dashed var(--fw-file-uploader-border, #bbdcfe);
background: #fff;
justify-content: center;
}
div.file-uploader-container .dropzone,
div.file-uploader-container .progress,
div.file-uploader-container .files {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
}
div.file-uploader-container .dropzone {
align-items: center;
cursor: pointer;
}
div.file-uploader-container .dropzone .dropzone-center {
display: flex;
flex-direction: column;
width: 500px;
height: 100%;
justify-content: space-between;
}
div.file-uploader-container .dropzone .dropzone-center .drop-clickable {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto 0;
transform: translateY(-5px);
}
div.file-uploader-container .dropzone .dropzone-center .drop-clickable .drop-clickable-text {
line-height: 20px;
font-size: 14px;
font-weight: 500;
color: #2c5cc5;
margin-top: 9px;
margin-bottom: 3px;
}
div.file-uploader-container .dropzone .dropzone-center .drop-clickable .drop-clickable-hint {
line-height: 20px;
font-size: 14px;
color: #92a2b1;
}
div.file-uploader-container .dropzone .dropzone-center .dropzone-hint {
line-height: 20px;
font-size: 10px;
color: #345c7c;
text-align: center;
}
div.file-uploader-container .dropzone .dropzone-center .dropzone-error {
line-height: 12px;
font-size: 10px;
text-align: center;
padding: 5px 0px;
box-sizing: border-box;
}
div.file-uploader-container .dropzone .dropzone-center .dropzone-error span {
display: block;
color: #d72d30;
}
div.file-uploader-container .progress,
div.file-uploader-container .files {
padding: 28px;
box-sizing: border-box;
justify-content: center;
}
div.file-uploader-container .progress-center,
div.file-uploader-container .files-center {
display: flex;
flex-direction: column;
}
div.file-uploader-container .progress-title,
div.file-uploader-container .files-title {
line-height: 20px;
font-size: 12px;
color: #475867;
font-weight: 600;
letter-spacing: 0.2px;
}