Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix css

This commit is contained in:
Ilyas Foo 2022-04-06 16:41:27 +08:00
parent ffdf1e6c02
commit 16c28e3599
2 changed files with 101 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/js/onboarding/src/components/WCPayCard/WCPayCard.js
View File

@ -95,7 +95,10 @@ export const WCPayCard = ( { children } ) => {
export const WCPayBenefitCard = () => {
return (
<Card className="woocommerce-task-payment-wcpay" size="large">
<Card
className="woocommerce-task-payment-wcpay woocommerce-task-payment-wcpay__benefits-card"
size="large"
>
<CardBody>
<div className="hstack content-around">
<div className="woocommerce-task-payment-wcpay__benefit vstack">

187
packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss
View File

@ -1,100 +1,107 @@
.woocommerce-task-payments .woocommerce-task-payment-wcpay {
.woocommerce-task-payments {
.woocommerce-task-payment-wcpay {
.vstack,
.hstack {
display: flex;
&.content-center {
justify-content: center;
}
.vstack, .hstack {
display: flex;
&.content-center {
justify-content: center;
&.content-around {
justify-content: space-around;
}
&.flex-1 {
flex: 1;
}
}
&.content-around {
justify-content: space-around;
.vstack {
flex-direction: column;
}
&.flex-1 {
flex: 1;
.hstack {
flex-direction: row;
}
.wcpay-hero-image {
margin-right: -32px;
margin-bottom: -28px;
}
.woocommerce-task-payment-wcpay__heading {
letter-spacing: 0.6px;
max-width: 250px;
margin-right: $gap-small;
margin-bottom: $gap;
}
.woocommerce-task-payment-wcpay__description {
font-size: 13px;
max-width: 325px;
margin-right: $gap-small;
margin-bottom: $gap-large;
}
.components-card__header {
margin-bottom: $gap-small;
justify-content: flex-start;
padding: 25px;
.woocommerce-pill {
margin-left: $gap-small;
}
}
.components-card__footer {
flex-direction: column;
align-items: flex-start;
.components-button {
margin-top: $gap;
margin-left: 0;
}
&,
h3 {
color: #757575;
}
svg {
height: 24px;
}
}
.components-card__body {
h2 {
margin: 0 0 20px 0;
}
}
.woocommerce-task-payment-wcpay__accepted {
display: flex;
margin-top: $gap-small;
flex-wrap: wrap;
gap: $gap-small;
h3 {
color: #40464d;
}
}
.woocommerce-task-payment-wcpay__benefit {
svg {
margin: 0 auto;
}
max-width: 170px;
text-align: center;
font-size: 15px;
line-height: 24px;
letter-spacing: normal;
}
}
.vstack {
flex-direction: column;
}
.hstack {
flex-direction: row;
}
.wcpay-hero-image {
margin-right: -32px;
margin-bottom: -28px;
}
.woocommerce-task-payment-wcpay__heading {
letter-spacing: 0.6px;
max-width: 250px;
margin-right: $gap-small;
margin-bottom: $gap;
}
.woocommerce-task-payment-wcpay__description {
font-size: 13px;
max-width: 325px;
margin-right: $gap-small;
margin-bottom: $gap-large;
}
.components-card__header {
margin-bottom: $gap-small;
justify-content: flex-start;
padding: 25px;
.woocommerce-pill {
margin-left: $gap-small;
}
}
.components-card__footer {
flex-direction: column;
align-items: flex-start;
.components-button {
margin-top: $gap;
margin-left: 0;
}
&, h3 {
color: #757575;
}
svg {
height: 24px;
}
}
.components-card__body {
h2 {
margin: 0 0 20px 0;
}
}
.woocommerce-task-payment-wcpay__accepted {
display: flex;
margin-top: $gap-small;
flex-wrap: wrap;
gap: $gap-small;
h3 {
color: #40464d;
}
}
.woocommerce-task-payment-wcpay__benefit {
svg {
margin: 0 auto;
}
max-width: 170px;
text-align: center;
font-size: 15px;
line-height: 24px;
letter-spacing: normal;
.woocommerce-task-payment-wcpay__benefits-card {
margin-bottom: 0;
}
}