woocommerce-paypal-payments/modules/ppcp-axo-block/resources/css/gateway.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;
}