visual improvements

This commit is contained in:
David Remer 2020-08-18 12:08:45 +03:00
parent 85efab5935
commit 772fcf2f03
2 changed files with 25 additions and 20 deletions

View file

@ -1,22 +1,31 @@
#ppcp-hosted-fields,
#ppcp-hosted-fields-mini-cart {
#ppcp-hosted-fields {
.ppcp-dcc-credit-card-wrapper {
width: 100%;
display: table !important;
div {
display: table-row;
}
display: grid;
grid-template-columns: 55% 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-column-gap: 15px;
margin-bottom: 15px;
label, span {
display: table-cell;
height: 30px;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
vertical-align: bottom;
font-size: 10px;
}
label {
grid-row: 1/2;
}
span {
grid-row: 2/3;
background:white;
border: 1px #666;
padding: 5px;
}
label {

View file

@ -203,23 +203,19 @@ class SmartButton implements SmartButtonInterface
printf(
'<form id="%1$s">
<div class="ppcp-dcc-credit-card-wrapper">
<div>
<label for="ppcp-credit-card-%1$s">%2$s</label>
<span id="ppcp-credit-card-%1$s" class="ppcp-credit-card"></span>
</div><div>
<label for="ppcp-expiration-date-%1$s">%3$s</label>
<span id="ppcp-expiration-date-%1$s" class="ppcp-expiration-date"></span>
</div><div>
<label for="ppcp-cvv-%1$s">%4$s</label>
<span id="ppcp-cvv-%1$s" class="ppcp-cvv"></span>
<label for="ppcp-credit-card-%1$s">%2$s</label>
<span id="ppcp-credit-card-%1$s" class="ppcp-credit-card"></span>
<label for="ppcp-expiration-date-%1$s">%3$s</label>
<span id="ppcp-expiration-date-%1$s" class="ppcp-expiration-date"></span>
<label for="ppcp-cvv-%1$s">%4$s</label>
<span id="ppcp-cvv-%1$s" class="ppcp-cvv"></span>
</div>
%5$s
</div>
<button class="button alt">%6$s</button>
</form><div id="payments-sdk__contingency-lightbox"></div>',
esc_attr($id),
esc_html__('Card number', 'woocommerce-paypal-commerce-gateway'),
esc_html__('Expiration Date', 'woocommerce-paypal-commerce-gateway'),
esc_html__('Credit Card number', 'woocommerce-paypal-commerce-gateway'),
esc_html__('Expiration', 'woocommerce-paypal-commerce-gateway'),
esc_html__('CVV', 'woocommerce-paypal-commerce-gateway'),
//phpcs:ignore
$saveCard,