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

Improve mobile styles

Browse source
This commit is contained in:
Narek Zakarian 2024-11-08 14:02:05 +04:00
parent ce61b661ab
commit d3accc0d8c
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
3 changed files with 76 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,54 +1,60 @@
.ppcp-r-navigation {
display: flex;
justify-content: space-between;
align-items: center;
.ppcp-r-navigation-container {
padding: 24px 48px;
margin: 0 -20px 48px -20px;
border-bottom: 1px solid $color-gray-300;
position: relative;
button.is-primary {
padding: 10px 18px;
justify-content: center;
margin: 0 0 0 12px;
&:not(:disabled) {
.ppcp-r-navigation {
display: flex;
justify-content: space-between;
align-items: center;
button.is-primary {
padding: 10px 18px;
justify-content: center;
margin: 0 0 0 12px;
&:not(:disabled) {
background-color: $color-blueberry;
}
}
button.is-tertiary {
@include font(16, 24, 600);
color: $color-gray-900;
&:hover{
background-color:none;
background:none;
}
span {
padding: 0 12px 0 0;
}
}
&--right a{
@include font(13, 20, 400);
color: $color-blueberry;
text-decoration: none;
}
&--progress-bar {
position: absolute;
bottom: 0px;
left: 0;
background-color: $color-blueberry;
height: 4px;
}
}
button.is-tertiary {
@include font(16, 24, 600);
color: $color-gray-900;
&:hover{
background-color:none;
background:none;
}
span {
padding: 0 12px 0 0;
}
}
&--right a{
@include font(13, 20, 400);
color: $color-blueberry;
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;
padding: 24px 35px;
.ppcp-r-navigation {
flex-wrap: wrap;
row-gap: 8px;
&--progress-bar {
display:none;
&--progress-bar {
display: none;
}
}
}
}

2
modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss
View file

@ -1,7 +1,7 @@
body:has(.ppcp-r-container--onboarding) {
background-color: #fff !important;
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout {
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce h2:first-of-type {
display: none !important;
}
}

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

@ -29,6 +29,8 @@ const Navigation = ( {
let navigationTitle = '';
let disabled = false;
let isLastStep = currentStep + 1 === stepperOrder.length;
let isFistStep = currentStep === 0;
switch ( currentStep ) {
case 1:
@ -49,31 +51,35 @@ const Navigation = ( {
}
return (
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>{ navigationTitle }
</Button>
</div>
{ currentStep > 0 && (
<div className="ppcp-r-navigation--right">
<a href="wp-admin/admin.php?page=wc-settings&amp;tab=checkout"
aria-label="Return to payments">{__('Save and exit', 'woocommerce-paypal-payments')}</a>
<Button
variant="primary"
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __('Continue', 'woocommerce-paypal-payments') }
<div className="ppcp-r-navigation-container">
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>{ navigationTitle }
</Button>
</div>
) }
<div
className="ppcp-r-navigation--progress-bar"
style={ {
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
} }
></div>
{ ! isFistStep && (
<div className="ppcp-r-navigation--right">
<a href="wp-admin/admin.php?page=wc-settings&amp;tab=checkout"
aria-label="Return to payments">{__('Save and exit', 'woocommerce-paypal-payments')}</a>
{ ! isLastStep && (
<Button
variant="primary"
disabled={ disabled }
onClick={ () => navigateBy( 1 ) }
>
{ __('Continue', 'woocommerce-paypal-payments') }
</Button>
) }
</div>
) }
<div
className="ppcp-r-navigation--progress-bar"
style={ {
width: `${ ( currentStep / ( stepperOrder.length - 1 ) ) * 90 }%`
} }
></div>
</div>
</div>
);
};