woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

Add the progress bar

Browse source
This commit is contained in:
Narek Zakarian 2024-11-08 13:28:58 +04:00
parent 8336ffd2a6
commit f3c9787c68
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
2 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

13
modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
View file

@ -5,6 +5,7 @@
padding: 24px 48px;
margin: 0 -20px 48px -20px;
border-bottom: 1px solid $color-gray-300;
position: relative;
button.is-primary {
padding: 10px 18px;
@ -34,8 +35,20 @@
text-decoration: none;
}
&--progress-bar {
position: absolute;
bottom: 0px;
left: 0;
background-color: $color-blueberry;
height: 4px;
}
@media screen and (max-width: 480px) {
flex-wrap: wrap;
row-gap: 8px;
&--progress-bar {
display:none;
}
}
}

6
modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
View file

@ -68,6 +68,12 @@ const Navigation = ( {
</Button>
</div>
) }
<div
className="ppcp-r-navigation--progress-bar"
style={ {
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
} }
></div>
</div>
);
};