84 lines
1.9 KiB
SCSS
84 lines
1.9 KiB
SCSS
.autosave {
|
|
position: relative;
|
|
}
|
|
|
|
.autosave-status {
|
|
// Position the status over the explanation text
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
&.succeeded {
|
|
color: var(--success-425-625);
|
|
}
|
|
|
|
&.failed {
|
|
color: var(--warning-425-625);
|
|
}
|
|
}
|
|
|
|
.autosave-retry {
|
|
&:disabled {
|
|
.autosave-retry-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:not(:disabled) {
|
|
cursor: pointer;
|
|
|
|
.autosave-retrying-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
$autosave-status-fade-in-duration: 0.2s;
|
|
$autosave-status-fade-out-duration: 0.7s;
|
|
|
|
// By default (and in the idle state), display the explanation text and hide statuses.
|
|
.autosave-explanation {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
// Make the explanation fade-in slowly when the status is being removed
|
|
transition-property: opacity;
|
|
transition-duration: $autosave-status-fade-out-duration;
|
|
}
|
|
|
|
.autosave-status {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
// Make the status fade-out slowly when being removed
|
|
transition-property: opacity, visibility;
|
|
transition-duration: $autosave-status-fade-out-duration;
|
|
}
|
|
|
|
// When one of the status messages should be displayed:
|
|
.autosave-state-succeeded,
|
|
.autosave-state-failed {
|
|
// Hide the explanation
|
|
.autosave-explanation {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
// Make the explanation fade-out quickly
|
|
transition-property: opacity, visibility;
|
|
transition-duration: $autosave-status-fade-in-duration;
|
|
}
|
|
|
|
// Show the status message (succeeded or failed)
|
|
.autosave-status.succeeded,
|
|
.autosave-status.failed {
|
|
opacity: 1;
|
|
// Make the status message fade-in quickly
|
|
transition-property: opacity;
|
|
transition-duration: $autosave-status-fade-in-duration;
|
|
}
|
|
}
|
|
|
|
// Show only the relevant status message (succeeded of failed)
|
|
.autosave-state-succeeded .autosave-status.succeeded {
|
|
visibility: visible;
|
|
}
|
|
|
|
.autosave-state-failed .autosave-status.failed {
|
|
visibility: visible;
|
|
}
|