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

Enhance payments integration styles and layout for improved responsiveness

Browse Source 
- Added max-width and margin adjustments to the payments integration section for better alignment on larger screens.
- Implemented responsive breakpoints for the payments integration section to ensure optimal display on medium and large devices.
- Introduced new styles for light mode payment logos and embedded payments icons, enhancing visual consistency across the payments page.
This commit is contained in:
akcodez
2025-08-26 10:49:22 -07:00
parent 12cf498d2b
commit 023321d6de
18 changed files with 121 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
styles/_use-cases.scss
View File

@@ -1379,6 +1379,17 @@ body,
.use-case-payments .payments-integration-section {
.developer-tools {
padding: 120px 0; /* Slightly less padding than default 180px */
max-width: 1280px;
margin: 0 auto;
@include media-breakpoint-down(lg) {
max-width: 942px;
}
@include media-breakpoint-down(md) {
max-width: 608px;
}
.container{
padding: 0;
}

109
styles/light/_light-theme.scss
View File

@@ -1367,3 +1367,112 @@ main article .card-grid {
box-shadow: $light-box-shadow;
}
*/
.use-case-payments {
.payments-integration-section{
.integration-column__title{
color: var(--XRPL-Primary-Black, #000);
}
.integration-column__subtitle{
color: var(--XRPL-Black-Black-80, #232325);
}
.feature-item__title{
color: var(--XRPL-Primary-Black, #000);
}
.feature-item__divider{
background-color: #000;
}
}
.payments-project-card {
background: #FFF;
box-shadow: none;
.first-word{
color: var(--XRPL-Black-Black-80, #232325);
}
.rest-text{
color: var(--XRPL-Black-Black-80, #232325);
}
/* Light mode payment logos */
.project-logo {
img.ripple-usd {
content: url('../img/uses/lightmode/payments/rlusd.png');
}
img.usdc {
content: url('../img/uses/lightmode/payments/usdc.png');
}
img.usdb {
content: url('../img/uses/lightmode/payments/usdb.png');
}
img.europ {
content: url('../img/uses/lightmode/payments/erop.png');
}
img.xsgd {
content: url('../img/uses/lightmode/payments/xsgd.png');
}
img.audd {
content: url('../img/uses/lightmode/payments/audd.png');
}
}
}
.advantages-section {
.advantage-item {
strong{
color: var(--XRPL-Black-Black-80, #232325);
}
}
}
}
/* Light mode embedded payments icons */
#embedded-payments-list {
#digital-wallets {
content: url("../img/uses/lightmode/payments/digital-wallet.png");
}
#cross-border-remittance {
content: url("../img/uses/lightmode/payments/cross-border.png");
}
#regulated-foreign-exchange {
content: url("../img/uses/lightmode/payments/regulated.png");
}
#merchant-settlement {
content: url("../img/uses/lightmode/payments/merchant-settlement.png");
}
#b2b-payment-rails {
content: url("../img/uses/lightmode/payments/b2b-payment.png");
}
#compliance-first-payment-acceptance {
content: url("../img/uses/lightmode/payments/compliance.png");
}
}
/* Light mode battle-tested company logos */
.use-case-payments .battle-tested-section {
.payments-project-card {
.project-logo img {
&.coinpayments {
content: url('../img/uses/lightmode/payments/coinpayments.png');
}
&.ripple {
content: url('../img/uses/lightmode/payments/ripple-black.png');
}
&.fiipay {
content: url('../img/uses/lightmode/payments/friipay.png');
}
}
}
}