ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 11:45:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine banner animation and styling details

Browse Source
This commit is contained in:
akcodez
2025-02-18 13:04:43 -08:00
parent b722c784fd
commit 1d2b8abdcf
3 changed files with 10 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
@theme/components/Navbar/Navbar.tsx
View File

@@ -11,7 +11,7 @@ import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
const alertBanner = {
show: true,
message: "XRP Ledger Apex 2025",
message: "XRP LEDGER APEX 2025",
button: "GET TICKETS",
link: "https://www.xrpledgerapex.com/?utm_source=xrplwebsite&utm_medium=direct&utm_campaign=xrpl-event-ho-xrplapex-glb-2025-q1_xrplwebsite_ari_arp_bf_rsvp&utm_content=cta_btn_english_gettickets",
date: "JUNE 10-12",

2
static/css/devportal2024-v1.css
View File

File diff suppressed because one or more lines are too long

50
styles/_top-banner.scss
View File

@@ -13,7 +13,7 @@
text-decoration: none;
color: $white;
.button-icon{
animation: iconJitter 1s ease-in-out forwards;
animation: iconJitter 0.7s ease-in-out forwards;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
}
@@ -62,6 +62,7 @@
gap: 0px !important;
flex-direction: column;
text-align: left;
line-height: 21px;
}
.banner-button{
align-self: baseline;
@@ -94,32 +95,6 @@
gap: 32px;
}
.ticket-button {
border: 1px solid var(--XRPL-Primary-White, #fff);
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 3141.892px;
background: inherit;
color: #FFF;
text-align: center;
letter-spacing: -0.16px;
padding: 8px 16px;
font: 600 15px/1 Work Sans ;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transform-origin: center;
transition: background-color 0.3s ease, color 0.3s ease;
@media (max-width: 564px) {
font: 600 9px/1 Work Sans ;
width: 117px;
height: 27px;
padding: 6px 12px;
}
}
.button-icon {
transform-style: preserve-3d;
@@ -134,20 +109,11 @@
}
@keyframes iconJitter {
0% {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(22deg) skew(0deg, 0deg);
from {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg) skew(0deg, 0deg);
}
40% {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(55deg) skew(0deg, 0deg);
}
70% {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(40deg) skew(0deg, 0deg);
}
100% {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(45deg) skew(0deg, 0deg);
to {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(45deg) skew(0deg, 0deg);
}
}
@@ -158,7 +124,7 @@
}
.button-icon {
animation: iconJitter 1s ease-in-out;
animation: iconJitter 0.7s ease-in-out;
animation-iteration-count: 1;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -172,6 +138,6 @@
}
/* After the banner has been hovered once, on unhover run the reverse animation */
.web-banner.has-hover:not(:hover) .button-icon {
animation: iconReturn 1s ease-in-out forwards;
animation: iconReturn 0.7s ease-in-out forwards;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}