mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: make toast closable and allow custom duration (#5308)
* feat: make toast closable and allow custom duration * use Infinity to keep prevent auto close * rename to DEFAULT_TOAST_TIMEOUT and move to toast.tsx * fix * set closable as false by default and fix design * tweak css * reuse variables Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
parent
dac8dda4d4
commit
76a5bb060e
3 changed files with 55 additions and 15 deletions
|
@ -2,6 +2,9 @@
|
|||
|
||||
.excalidraw {
|
||||
.Toast {
|
||||
$closeButtonSize: 1.2rem;
|
||||
$closeButtonPadding: 0.4rem;
|
||||
|
||||
animation: fade-in 0.5s;
|
||||
background-color: var(--button-gray-1);
|
||||
border-radius: 4px;
|
||||
|
@ -15,11 +18,24 @@
|
|||
text-align: center;
|
||||
width: 300px;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.Toast__message {
|
||||
color: var(--popup-text-color);
|
||||
white-space: pre-wrap;
|
||||
.Toast__message {
|
||||
padding: 0 $closeButtonSize + ($closeButtonPadding);
|
||||
color: var(--popup-text-color);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: $closeButtonPadding;
|
||||
|
||||
.ToolIcon__icon {
|
||||
width: $closeButtonSize;
|
||||
height: $closeButtonSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue