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

🎨 Improve SCSS for header navigation

Browse source
This commit is contained in:
Philipp Stracker 2024-12-02 18:25:15 +01:00
parent f4cfabacf9
commit 36b51d2b2a
No known key found for this signature in database
2 changed files with 45 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,52 +4,63 @@
border-bottom: 1px solid $color-gray-300; border-bottom: 1px solid $color-gray-300;
position: relative; position: relative;
--color-accent: #{$color-blueberry};
--color-text: #{$color-gray-900};
--color-disabled: #CCC;
.ppcp-r-navigation { .ppcp-r-navigation {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 40px;
button.is-primary { .components-button {
@include font(13, 20, 400);
&.is-primary {
background-color: var(--color-accent);
padding: 10px 18px; padding: 10px 18px;
justify-content: center; justify-content: center;
margin: 0 0 0 12px; margin: 0 0 0 12px;
&:not(:disabled) {
background-color: $color-blueberry; &:disabled {
background-color: var(--color-disabled);
} }
} }
button.is-tertiary { &.is-link {
color: var(--color-accent);
text-decoration: none;
&:disabled {
color: var(--color-disabled);
}
}
&.is-title {
@include font(16, 24, 600); @include font(16, 24, 600);
color: $color-gray-900; color: var(--color-text);
&:hover{
background-color: transparent; .title {
background: none; margin-left: 18px;
}
.big {
@include font(20, 28, 400);
}
} }
} }
&--left { &--left {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
&__link {
@include font(20, 28, 400);
color: $color-gray-900;
text-decoration: none;
padding: 0 0 0 18px;
}
}
&--right a{
@include font(13, 20, 400);
color: $color-blueberry;
text-decoration: none;
} }
&--progress-bar { &--progress-bar {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: $color-blueberry; background-color: var(--color-accent);
height: 4px; height: 4px;
transition: width 0.3s; transition: width 0.3s;
} }

9
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js
View file

@ -14,12 +14,15 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
<div className="ppcp-r-navigation-container"> <div className="ppcp-r-navigation-container">
<div className="ppcp-r-navigation"> <div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left"> <div className="ppcp-r-navigation--left">
<Icon icon={ chevronLeft } />
<Button <Button
variant="tertiary" variant="link"
onClick={ isFirst ? onExit : onPrev } onClick={ isFirst ? onExit : onPrev }
className="is-title"
> >
<Icon icon={ chevronLeft } />
<span className={ 'title ' + ( isFirst ? 'big' : '' ) }>
{ title } { title }
</span>
</Button> </Button>
</div> </div>
{ ! isFirst && { ! isFirst &&
@ -33,7 +36,7 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => { const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => {
return ( return (
<div className="ppcp-r-navigation--right"> <div className="ppcp-r-navigation--right">
<Button onClick={ onExit }> <Button variant="link" onClick={ onExit }>
{ __( 'Save and exit', 'woocommerce-paypal-payments' ) } { __( 'Save and exit', 'woocommerce-paypal-payments' ) }
</Button> </Button>
{ showNext && ( { showNext && (