@govbr-ds/core
Version:
Padrão Digital de Governo
126 lines (125 loc) • 4.06 kB
CSS
.br-upload input {
display: none;
}
.br-upload .upload-button {
--button-radius: 100em;
--button-xsmall: 24px;
--button-small: 32px;
--button-medium: 40px;
--button-large: 48px;
--button-size: var(--button-medium);
align-items: center;
background-color: transparent;
border: 0;
border-radius: var(--button-radius);
color: var(--interactive);
cursor: pointer;
display: inline-flex;
font-size: var(--font-size-scale-up-01);
font-weight: var(--font-weight-semi-bold);
height: var(--button-size);
justify-content: center;
overflow: hidden;
padding: 0 var(--spacing-scale-3x);
position: relative;
text-align: center;
vertical-align: middle;
white-space: nowrap;
width: auto;
border: var(--surface-width-sm) dashed var(--interactive);
border-radius: var(--surface-rounder-sm);
display: block;
font-size: var(--font-size-scale-base);
font-style: italic;
font-weight: var(--font-weight-regular);
margin-top: var(--spacing-scale-half);
max-width: 550px;
min-height: var(--button-size);
padding-left: var(--spacing-scale-2x);
padding-right: var(--spacing-scale-2x);
text-align: left;
width: 100%;
}
.br-upload .upload-button .svg-inline--fa,
.br-upload .upload-button .fa,
.br-upload .upload-button .fab,
.br-upload .upload-button .fad,
.br-upload .upload-button .fal,
.br-upload .upload-button .far,
.br-upload .upload-button .fas {
margin-right: var(--spacing-scale-base);
}
.br-upload .upload-list {
max-width: 550px;
position: relative;
}
.br-upload .upload-list .content {
align-self: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 70%;
}
.br-upload .upload-list .support {
align-items: center;
display: flex;
}
.br-upload .br-tooltip {
max-width: 93%;
}
.br-upload .upload-button:disabled {
cursor: not-allowed;
}
.br-upload .upload-button:not(:disabled) {
--focus-offset: var(--spacing-scale-half);
}
.br-upload .upload-button:not(:disabled):focus {
outline: none;
}
.br-upload .upload-button:not(:disabled).focus-visible, .br-upload .upload-button:not(:disabled):focus-visible {
outline-color: var(--focus);
outline-offset: var(--focus-offset);
outline-style: var(--focus-style);
outline-width: var(--focus-width);
}
.br-upload .upload-button:not(:disabled):not(:disabled):hover {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-upload .upload-button:not(:disabled):not(:disabled):active {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-upload .upload-button.active, .br-upload .upload-button.is-active, .br-upload .upload-button[active] {
--hover: var(--hover-dark);
background-color: var(--active);
color: var(--color-dark);
}
.br-upload .upload-button.loading {
color: transparent ;
cursor: progress;
}
.br-upload .upload-button.loading:not(:disabled):hover {
background-image: none;
}
.br-upload .upload-button.loading::before {
border-color: var(--interactive) var(--interactive) transparent;
border-style: solid;
}
.br-upload .upload-button.loading.primary::before, .br-upload .upload-button.loading.danger::before, .br-upload .upload-button.loading.success::before, .br-upload .upload-button.loading.info::before {
border-color: var(--background) var(--background) transparent;
}
.br-upload.success .upload-button, .br-upload[data-success] .upload-button {
border-color: var(--success);
}
.br-upload.danger .upload-button, .br-upload[data-danger] .upload-button {
border-color: var(--danger);
}
.br-upload.warning .upload-button, .br-upload[data-warning] .upload-button {
border-color: var(--warning);
}
.br-upload.info .upload-button, .br-upload[data-info] .upload-button {
border-color: var(--info);
}
.br-upload.dragging .upload-button {
background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
/*# sourceMappingURL=upload.css.map*/