Skip to content

Commit ce1c5d3

Browse files
hmouhtarhmouhtar
committed
Update Fastlane card placeholder design
1 parent 098a792 commit ce1c5d3

File tree

4 files changed

+86
-113
lines changed

4 files changed

+86
-113
lines changed

‎modules/ppcp-axo-block/resources/css/gateway.scss‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -49,51 +49,53 @@ $fast-transition-duration: 0.5s;
4949
&__content {
5050
position: relative;
5151
box-sizing: border-box;
52-
aspect-ratio: 1.586;
5352
margin: 1em 0;
5453
border-radius: 10px;
5554
width: 100%;
56-
box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .2666666667);
57-
background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.0666666667), rgba(204, 204, 204, 0.0666666667) 65%, rgba(255, 255, 255, 0.4) 68%, rgba(255, 255, 255, 0));
58-
border: 2px solid #ccc;
59-
background-color: #f6f6f6;
55+
background-color: #F8F9FA;
56+
border: 2px solid #ECEEF2;
6057
}
6158

6259
&__meta {
6360
width: 100%;
6461
text-align: left;
62+
padding: 10px 15px;
63+
display: flex;
64+
gap: 15px;
6565

6666
&-digits {
67-
margin-top: 76px;
68-
font-size: 24px;
69-
text-shadow: 0 -1px 1px #fff, 0 1px 1px rgba(0, 0, 0, .2666666667);
67+
font-size: 1.1em;
68+
width: 100%;
7069
color: #666;
71-
text-align: center;
7270
font-family: monospace;
71+
font-weight: bold;
7372
}
7473

7574
&-logo {
76-
position: absolute;
77-
right: 32px;
78-
top: 32px;
79-
height: 40px;
80-
}
81-
82-
&-expiry {
83-
text-align: right;
84-
font-size: 14px;
85-
padding-right: 32px;
75+
align-self: center;
76+
width: 60px;
77+
flex-grow: 1;
78+
flex-shrink: 0;
8679
}
8780

8881
&-name {
89-
text-transform: uppercase;
90-
position: absolute;
91-
left: 24px;
92-
bottom: 20px;
93-
line-height: 1em;
82+
padding-right: 20px;
83+
position: relative;
84+
&::after {
85+
content: "•";
86+
position: absolute;
87+
right: 10px;
88+
transform: translateX(50%);
89+
color: #ECEEF2;
90+
}
9491
}
9592
}
9693

94+
&__meta-container {
95+
display: flex;
96+
flex-wrap: wrap;
97+
}
98+
9799
&__edit {
98100
flex-grow: 1;
99101
margin-left: auto;
@@ -112,10 +114,6 @@ $fast-transition-duration: 0.5s;
112114
}
113115
}
114116

115-
.wc-block-axo-block-card__meta-icon {
116-
max-height: 25px;
117-
}
118-
119117
// 3. Express Payment Block
120118
.wc-block-components-express-payment--checkout, .wp-block-woocommerce-checkout-express-payment-block {
121119
transition: opacity $transition-duration ease-in,

‎modules/ppcp-axo-block/resources/js/components/Card/Card.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,16 @@ const Card = ( { fastlaneSdk, showWatermark = true } ) => {
4848
<div className="wc-block-checkout-axo-block-card__meta-logo">
4949
{ cardLogo }
5050
</div>
51-
<div className="wc-block-checkout-axo-block-card__meta-digits">
52-
{ `**** **** **** ${ lastDigits }` }
53-
</div>
54-
<div className="wc-block-checkout-axo-block-card__meta-expiry">
55-
{ formattedExpiry }
56-
</div>
57-
<div className="wc-block-checkout-axo-block-card__meta-name">
58-
{ name }
51+
<div className="wc-block-checkout-axo-block-card__meta-container">
52+
<div className="wc-block-checkout-axo-block-card__meta-digits">
53+
{ `•••• ${ lastDigits }` }
54+
</div>
55+
<div className="wc-block-checkout-axo-block-card__meta-name">
56+
{ name }
57+
</div>
58+
<div className="wc-block-checkout-axo-block-card__meta-expiry">
59+
{ formattedExpiry }
60+
</div>
5961
</div>
6062
</div>
6163
</div>

‎modules/ppcp-axo/resources/css/styles.scss‎

Lines changed: 35 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101

102102
.axo-checkout-wrapper {
103103
margin-bottom: 20px;
104+
padding: 0 10px;
104105

105106
.axo-checkout-header-section {
106107
display: flex;
@@ -109,81 +110,49 @@
109110
margin-bottom: 1em;
110111
}
111112

112-
.axo-checkout-card-preview {
113-
border: 2px solid #cccccc;
114-
border-radius: 10px;
115-
padding: 16px 20px;
116-
background-color: #f6f6f6;
117-
}
118-
119-
.ppcp-card-icon-wrapper {
120-
float: right;
121-
}
122-
123-
.ppcp-card-icon {
124-
width: auto;
125-
height: 25px;
126-
}
127-
128-
.axo-card-number {
129-
font-family: monospace;
130-
font-size: 1rem;
131-
margin-top: 10px;
132-
}
133-
134-
.axo-card-owner {
135-
text-transform: uppercase;
136-
}
137113

138114
.styled-card {
139115
position: relative;
140-
width: 100%;
141-
max-width: 340px;
142-
height: 210px;
143-
margin: 0 auto;
144-
box-shadow: 0 3px 10px -3px #0004;
145-
background-image: linear-gradient(60deg, #0001, #ccc1 65%, #fff6 68%, #fff0);
146116
box-sizing: border-box;
147-
padding: 0;
117+
margin: 1em 0;
118+
border-radius: 10px;
119+
width: 100%;
120+
max-width: 350px;
121+
background-color: #F8F9FA;
122+
border: 2px solid #ECEEFE;
123+
text-align: left;
124+
padding: 10px 15px;
125+
display: flex;
126+
gap: 15px;
148127

149128
.ppcp-card-icon-wrapper {
150-
position: absolute;
151-
right: 32px;
152-
top: 32px;
153-
height: 40px;
129+
align-self: center;
130+
width: 60px;
131+
flex-shrink: 0;
154132
}
155133

156-
.axo-card-number {
157-
margin-top: 76px;
158-
font-size: 24px;
159-
text-shadow: 0 -1px 1px #fff, 0 1px 1px #0004;
160-
color: #666;
161-
text-align: center;
134+
.axo-card-meta-wrapper {
135+
display: flex;
136+
flex-wrap: wrap;
162137
}
163138

164-
.axo-card-expiry {
165-
font-size: 14px;
166-
padding-right: 32px;
167-
text-align: right;
139+
.axo-card-number {
140+
font-size: 1.1em;
141+
width: 100%;
142+
color: #666;
143+
font-family: monospace;
144+
font-weight: bold;
168145
}
169146

170147
.axo-card-owner {
171-
position: absolute;
172-
left: 24px;
173-
bottom: 20px;
174-
line-height: 1em;
175-
}
176-
177-
@media (max-width: 480px) {
178-
.axo-card-number {
179-
font-size: 20px;
180-
text-align: left;
181-
padding-left: 20px;
182-
}
183-
}
184-
@media (max-width: 360px) {
185-
.axo-card-number {
186-
font-size: 16px;
148+
padding-right: 20px;
149+
position: relative;
150+
&::after {
151+
content: "•";
152+
position: absolute;
153+
right: 10px;
154+
transform: translateX(50%);
155+
color: #ECEEF2;
187156
}
188157
}
189158
}
@@ -227,10 +196,11 @@
227196
float: none;
228197
vertical-align: middle;
229198
}
199+
}
230200

231-
.ppcp-card-icon {
232-
max-height: 25px;
233-
}
201+
#payment .payment_methods li.payment_method_ppcp-axo-gateway .ppcp-card-icon {
202+
float: none;
203+
max-height: initial
234204
}
235205

236206
@media screen and (max-width: 719px) {

‎modules/ppcp-axo/resources/js/Views/CardView.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,21 @@ class CardView {
5555
alt="${ data.value( 'brand' ) }"
5656
>
5757
</div>
58-
<div class="axo-card-number">${
59-
data.value( 'lastDigits' )
60-
? '**** **** **** ' +
61-
data.value( 'lastDigits' )
62-
: ''
63-
}</div>
64-
<div class="axo-card-expiry">${ expiry[ 1 ] }/${
65-
expiry[ 0 ]
66-
}</div>
67-
<div class="axo-card-owner">${ data.value(
68-
'name'
69-
) }</div>
58+
<div class="axo-card-meta-wrapper">
59+
<div class="axo-card-number">${
60+
data.value( 'lastDigits' )
61+
? '•••• ' + data.value( 'lastDigits' )
62+
: ''
63+
}</div>
64+
<div class="axo-card-owner">${ data.value(
65+
'name'
66+
) }</div>
67+
<div class="axo-card-expiry">${ expiry[ 1 ] }/${
68+
expiry[ 0 ]
69+
}</div>
70+
71+
</div>
72+
7073
</div>
7174
${ selectOtherPaymentMethod() }
7275
</div>

0 commit comments

Comments
 (0)