src/js/components/file-input/style.scss
$height: 30px;
$button-height: 24px;
$button-margin: 3px;
$button-width: 70px;
.file-upload-input {
outline: none;
border: none;
border-radius: 3px;
box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0),
inset 0 0 0 1px rgba(16, 22, 26, 0.15),
inset 0 1px 1px rgba(16, 22, 26, 0.2);
background: #fff;
height: $height;
padding: 0 10px;
vertical-align: middle;
line-height: $height;
color: #182026;
font-size: 14px;
font-weight: 400;
transition: box-shadow 0.1s cubic-bezier(0.4, 1, 0.75, 0.9);
appearance: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
position: absolute;
top: 0;
right: 0;
left: 0;
padding-right: 80px;
padding-inline: 0 80px;
user-select: none;
&::after {
min-width: $button-height;
min-height: $button-height;
line-height: $button-height;
margin: $button-margin;
width: $button-width;
background-color: #f5f8fa;
background-image: linear-gradient(
180deg,
hsla(0, 0%, 100%, 0.8),
hsla(0, 0%, 100%, 0)
);
color: #182026;
position: absolute;
top: 0;
right: 0;
border-radius: 3px;
text-align: center;
content: 'Browse';
}
&:hover::after {
box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2),
inset 0 -1px 0 rgba(16, 22, 26, 0.1);
background-clip: padding-box;
background-color: #ebf1f5;
}
&:active::after {
box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2),
inset 0 1px 2px rgba(16, 22, 26, 0.2);
background-color: #d8e1e8;
background-image: none;
}
}
.file-input {
display: inline-block;
position: relative;
cursor: pointer;
height: $height;
&.fill {
width: 100%;
}
&.large {
height: $height + 10;
.file-upload-input {
height: $height + 10;
line-height: $height + 10;
font-size: 16px;
&:after {
min-width: $height;
min-height: $height;
line-height: $height;
margin: $button-margin + 2;
width: $button-width + 15;
}
}
}
input {
opacity: 0;
margin: 0;
min-width: 200px;
&:disabled + .file-upload-input,
&.disabled + .file-upload-input {
box-shadow: none;
background: rgba(206, 217, 224, 0.5);
cursor: not-allowed;
color: rgba(92, 112, 128, 0.5);
resize: none;
&::after {
outline: none;
box-shadow: none;
background-color: rgba(206, 217, 224, 0.5);
background-image: none;
cursor: not-allowed;
color: rgba(92, 112, 128, 0.5);
}
}
}
}