mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-01 07:02:48 +08:00
Clean up the CSS
This commit is contained in:
Daniel Dudzic
parent
4bda191f0e
commit
96c566321a
1 changed files with 140 additions and 127 deletions
|
|
@ -1,91 +1,102 @@
|
|||
#ppcp-axo-block-radio-label {
|
||||
// Variables
|
||||
$border-color: hsla(0, 0%, 7%, 0.11);
|
||||
$transition-duration: 0.3s;
|
||||
$fast-transition-duration: 0.5s;
|
||||
|
||||
// Mixins
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin flex-space-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 1. AXO Block Radio Label
|
||||
#ppcp-axo-block-radio-label {
|
||||
@include flex-space-between;
|
||||
width: 100%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
// 2. AXO Block Card
|
||||
.wc-block-checkout-axo-block-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include flex-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;
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-axo-block-card__meta:last-child {
|
||||
align-self: flex-end;
|
||||
&__content {
|
||||
box-sizing: border-box;
|
||||
aspect-ratio: 1.586;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 0.875em;
|
||||
font-family: monospace;
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
@include flex-space-between;
|
||||
width: 100%;
|
||||
|
||||
&-digits {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__watermark {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
margin: 0 0 0 auto;
|
||||
font-size: 0.875em;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-axo-block-card__meta-icon {
|
||||
max-height: 25px;
|
||||
}
|
||||
|
||||
// 3. Express Payment Block
|
||||
.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: opacity $transition-duration ease-in,
|
||||
scale $transition-duration ease-in,
|
||||
display $transition-duration ease-in;
|
||||
transition-behavior: allow-discrete;
|
||||
|
||||
/* stage enter */
|
||||
/* key to transitioning in */
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
scale: 1.1;
|
||||
|
|
@ -93,90 +104,85 @@
|
|||
|
||||
&.wc-block-axo-is-authenticated {
|
||||
opacity: 0;
|
||||
scale: .9;
|
||||
|
||||
/* hidden sets display: none, but loses easily */
|
||||
scale: 0.9;
|
||||
display: none !important;
|
||||
|
||||
/* faster leaving the stage then entering */
|
||||
transition-duration: .5s;
|
||||
transition-duration: $fast-transition-duration;
|
||||
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-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.wc-block-axo-is-loaded:not(.wc-block-axo-email-lookup-completed) {
|
||||
#shipping-fields,
|
||||
#billing-fields,
|
||||
#shipping-option,
|
||||
#order-notes {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 4. AXO Loaded State
|
||||
.wc-block-axo-is-loaded {
|
||||
// 4.1 Text Input
|
||||
.wc-block-components-text-input {
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
// 4.2 Hidden Fields
|
||||
&:not(.wc-block-axo-email-lookup-completed) {
|
||||
#shipping-fields,
|
||||
#billing-fields,
|
||||
#shipping-option,
|
||||
#order-notes {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 4.3 Authenticated State
|
||||
&.wc-block-axo-is-authenticated .wc-block-components-text-input {
|
||||
gap: 14px 0;
|
||||
}
|
||||
|
||||
// 4.4 Contact Information Block
|
||||
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"input button"
|
||||
"watermark watermark"
|
||||
"error error";
|
||||
"input button"
|
||||
"watermark watermark"
|
||||
"error error";
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 6px 8px;
|
||||
align-items: start;
|
||||
|
||||
input[type="email"] {
|
||||
grid-area: input;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#email {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.wc-block-components-text-input input[type="email"] {
|
||||
grid-area: input;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 4.5 Email Submit Button
|
||||
.wc-block-axo-email-submit-button-container {
|
||||
grid-area: button;
|
||||
align-self: center;
|
||||
|
||||
.wc-block-components-button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 4.6 Watermark Container
|
||||
.wc-block-checkout-axo-block-watermark-container {
|
||||
grid-area: watermark;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 4.7 Validation Error
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Shipping/Card Change Link
|
||||
a.wc-block-axo-change-link {
|
||||
& {
|
||||
color: var(--wp--preset--color--secondary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
color: var(--wp--preset--color--secondary);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -192,28 +198,35 @@ a.wc-block-axo-change-link {
|
|||
}
|
||||
}
|
||||
|
||||
// 6. Watermark Container
|
||||
.wc-block-checkout-axo-block-watermark-container {
|
||||
height: 25px;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
// 7. Checkout Fields Block (AXO Not Loaded)
|
||||
.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;
|
||||
margin-top: 12px;
|
||||
|
||||
.wc-block-components-spinner {
|
||||
box-sizing: content-box;
|
||||
color: inherit;
|
||||
font-size: 1em;
|
||||
height: auto;
|
||||
width: auto;
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 8. AXO Loaded Contact Information Block
|
||||
.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;
|
||||
|
|
@ -222,19 +235,19 @@ a.wc-block-axo-change-link {
|
|||
}
|
||||
}
|
||||
|
||||
// 9. Transitions
|
||||
.wc-block-axo-email-submit-button-container,
|
||||
.wc-block-checkout-axo-block-watermark-container #fastlane-watermark-email,
|
||||
a.wc-block-axo-change-link{
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 10. Shipping Fields
|
||||
#shipping-fields .wc-block-components-checkout-step__heading {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
