mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 09:08:09 +08:00
238 lines
4.6 KiB
SCSS
238 lines
4.6 KiB
SCSS
#ppcp-axo-block-radio-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-card {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-card__inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-card__content {
|
|
box-sizing: border-box;
|
|
aspect-ratio: 1.586;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
border: 1px solid hsla(0,0%,7%,.11);
|
|
font-size: .875em;
|
|
font-family: monospace;
|
|
padding: 1em;
|
|
margin-bottom: 1em;
|
|
margin-top: 1em;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-card__meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-card__meta-digits {
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-card__watermark {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-card__edit {
|
|
background-color: transparent;
|
|
border: 0;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-family: inherit;
|
|
margin: 0 0 0 auto;
|
|
font-size: .875em;
|
|
font-weight: normal;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.wc-block-axo-block-card__meta:last-child {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.wc-block-axo-block-card__meta-icon {
|
|
max-height: 25px;
|
|
}
|
|
|
|
.wp-block-woocommerce-checkout-express-payment-block {
|
|
transition: opacity .3s ease-in,
|
|
scale .3s ease-in,
|
|
display .3s ease-in;
|
|
/* key to transitioning out */
|
|
transition-behavior: allow-discrete;
|
|
|
|
/* stage enter */
|
|
/* key to transitioning in */
|
|
@starting-style {
|
|
opacity: 0;
|
|
scale: 1.1;
|
|
}
|
|
|
|
&.wc-block-axo-is-authenticated {
|
|
opacity: 0;
|
|
scale: .9;
|
|
|
|
/* hidden sets display: none, but loses easily */
|
|
display: none !important;
|
|
|
|
/* faster leaving the stage then entering */
|
|
transition-duration: .5s;
|
|
transition-timing-function: var(--ease-out-5);
|
|
}
|
|
}
|
|
|
|
.wc-block-axo-is-loaded .wc-block-components-text-input {
|
|
display: flex;
|
|
}
|
|
|
|
.wc-block-axo-is-loaded .wc-block-components-text-input {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-watermark-container {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
//.wc-block-axo-is-loaded:not(.wc-block-axo-is-authenticated) {
|
|
// #shipping-fields,
|
|
// #shipping-option,
|
|
// #order-notes {
|
|
// display: none;
|
|
// }
|
|
//}
|
|
|
|
.wc-block-axo-is-loaded {
|
|
&.wc-block-axo-is-authenticated .wc-block-components-text-input {
|
|
gap: 14px 0;
|
|
}
|
|
|
|
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"input button"
|
|
"watermark watermark"
|
|
"error error";
|
|
grid-template-columns: 1fr auto;
|
|
gap: 6px 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
#email {
|
|
align-self: center;
|
|
}
|
|
|
|
.wc-block-components-text-input input[type="email"] {
|
|
grid-area: input;
|
|
width: 100%;
|
|
}
|
|
|
|
.wc-block-axo-email-submit-button-container {
|
|
grid-area: button;
|
|
align-self: center;
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-watermark-container {
|
|
grid-area: watermark;
|
|
width: 100%;
|
|
}
|
|
|
|
.wc-block-components-validation-error {
|
|
grid-area: error;
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.wc-block-axo-email-submit-button-container .wc-block-components-button {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
a.wc-block-axo-change-link {
|
|
& {
|
|
color: var(--wp--preset--color--secondary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus {
|
|
text-decoration: underline dashed;
|
|
}
|
|
|
|
&:active {
|
|
color: var(--wp--preset--color--secondary);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.wc-block-checkout-axo-block-watermark-container {
|
|
height: 25px;
|
|
}
|
|
|
|
.wp-block-woocommerce-checkout-fields-block:not( .wc-block-axo-is-loaded ) .wc-block-checkout-axo-block-watermark-container {
|
|
display: flex;
|
|
justify-content: left;
|
|
margin-left: 10px;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.wc-block-components-spinner {
|
|
box-sizing: content-box;
|
|
color: inherit;
|
|
font-size: 1em;
|
|
height: auto;
|
|
width: auto;
|
|
position: relative;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
.wc-block-axo-is-loaded .wp-block-woocommerce-checkout-contact-information-block {
|
|
.wc-block-checkout-axo-block-watermark-container .wc-block-components-spinner {
|
|
display: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.wc-block-axo-email-submit-button-container,
|
|
.wc-block-checkout-axo-block-watermark-container #fastlane-watermark-email,
|
|
a.wc-block-axo-change-link{
|
|
transition: opacity 0.5s ease-in-out;
|
|
|
|
/* stage enter */
|
|
/* key to transitioning in */
|
|
@starting-style {
|
|
opacity: 0;
|
|
scale: 1.1;
|
|
}
|
|
}
|
|
|
|
#shipping-fields .wc-block-components-checkout-step__heading {
|
|
display: flex;
|
|
}
|