CSS animation for toasts and offcanvas (#1432)
* CSS animation for toasts * Smaller toasts * CSS animation for offcanvas * faster animations and toast from the bottom --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com> Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
parent
d7667f7820
commit
1641b58e55
|
@ -5,6 +5,7 @@ import Link from 'next/link'
|
||||||
import { LoginButtons, LogoutDropdownItem, NavWalletSummary } from '../common'
|
import { LoginButtons, LogoutDropdownItem, NavWalletSummary } from '../common'
|
||||||
import AnonIcon from '@/svgs/spy-fill.svg'
|
import AnonIcon from '@/svgs/spy-fill.svg'
|
||||||
import styles from './footer.module.css'
|
import styles from './footer.module.css'
|
||||||
|
import canvasStyles from './offcanvas.module.css'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
|
|
||||||
export default function OffCanvas ({ me, dropNavKey }) {
|
export default function OffCanvas ({ me, dropNavKey }) {
|
||||||
|
@ -28,7 +29,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
|
||||||
<>
|
<>
|
||||||
<MeImage onClick={handleShow} />
|
<MeImage onClick={handleShow} />
|
||||||
|
|
||||||
<Offcanvas style={{ maxWidth: '250px', zIndex: '10000' }} show={show} onHide={handleClose} placement='end'>
|
<Offcanvas className={canvasStyles.offcanvas} show={show} onHide={handleClose} placement='end'>
|
||||||
<Offcanvas.Header closeButton>
|
<Offcanvas.Header closeButton>
|
||||||
<Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
|
<Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
|
||||||
</Offcanvas.Header>
|
</Offcanvas.Header>
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
.offcanvas {
|
||||||
|
max-width: 250px;
|
||||||
|
z-index: 10000;
|
||||||
|
right: -100%;
|
||||||
|
animation: slide ease-out 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide {
|
||||||
|
0% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0%)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,13 +1,27 @@
|
||||||
.toastContainer {
|
.toastContainer {
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
width: auto;
|
font-size: small;
|
||||||
|
width: fit-content;
|
||||||
|
justify-self: right;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
bottom: -100%;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
animation: slide ease-out 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide {
|
||||||
|
0% {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0%)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
|
@ -70,9 +84,3 @@
|
||||||
.toastClose:hover {
|
.toastClose:hover {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 400px) {
|
|
||||||
.toast {
|
|
||||||
width: var(--bs-toast-max-width);
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue