woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

Merge pull request #2653 from woocommerce/fastlane-card-preview-ui-for-classic-checkout

Browse source 
Fastlane card preview UI for classic checkout
This commit is contained in:
Emili Castells 2024-09-30 16:20:07 +02:00 • committed by GitHub
commit b7a1e498d5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 54 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

53
modules/ppcp-axo/resources/css/styles.scss
View file

@ -112,6 +112,59 @@
.axo-card-owner {
text-transform: uppercase;
}
.styled-card {
position: relative;
width: 100%;
max-width: 340px;
height: 210px;
margin: 0 auto;
box-shadow: 0 3px 10px -3px #0004;
background-image: linear-gradient(60deg, #0001, #ccc1 65%, #fff6 68%, #fff0);
box-sizing: border-box;
padding: 0;
.ppcp-card-icon-wrapper {
position: absolute;
right: 32px;
top: 32px;
height: 40px;
}
.axo-card-number {
margin-top: 76px;
font-size: 24px;
text-shadow: 0 -1px 1px #fff, 0 1px 1px #0004;
color: #666;
text-align: center;
}
.axo-card-expiry {
font-size: 14px;
padding-right: 32px;
text-align: right;
}
.axo-card-owner {
position: absolute;
left: 24px;
bottom: 20px;
line-height: 1em;
}
@media (max-width: 480px) {
.axo-card-number {
font-size: 20px;
text-align: left;
padding-left: 20px;
}
}
@media (max-width: 360px) {
.axo-card-number {
font-size: 16px;
}
}
}
}
.ppcp-axo-order-button {

2
modules/ppcp-axo/resources/js/Views/CardView.js
View file

@ -44,7 +44,7 @@ class CardView {
this.el.changeCardLink.attributes
}>Edit</a>
</div>
<div class="axo-checkout-card-preview">
<div class="axo-checkout-card-preview styled-card">
<div class="ppcp-card-icon-wrapper">
<img
class="ppcp-card-icon"