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

Add style

Browse source
This commit is contained in:
carmenmaymo 2025-01-28 12:15:49 +01:00
parent bce124aa8d
commit 3413516799
No known key found for this signature in database
GPG key ID: 6023F686B0F3102E
3 changed files with 39 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,8 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
flex-direction: column;
gap: 10px;
.components-button {
@include font(13, 20, 400);
@ -57,6 +58,17 @@
}
}
}
&--row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-bottom: 10px;
box-shadow: 0 -1px 0 0 $color-gray-300 inset;
background: var(--ppcp-color-app-bg);
transition: box-shadow 0.3s;
}
&--left {
align-items: center;

9
modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss
View file

@ -2,17 +2,18 @@
--wp-components-color-accent: #{$color-blueberry};
--wp-admin-border-width-focus: 3px;
max-width: var(--max-container-width);
transition: max-width 0.2s;
margin-top: 10px;
width: 100%;
.components-tab-panel__tabs {
box-shadow: 0 -1px 0 0 $color-gray-400 inset;
margin-bottom: 48px;
gap: 12px;
gap: 0;
overflow: auto;
.components-button {
padding: 16px 20px;
box-shadow: 0 -1px 0 0 $color-gray-400 inset;
&.is-active {
background-color: #fff4;
}

41
modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js
View file

@ -6,7 +6,6 @@ import classNames from 'classnames';
import useIsScrolled from '../../hooks/useIsScrolled';
import { useNavigation } from '../../hooks/useNavigation';
import BusyStateWrapper from './BusyStateWrapper';
import { getSettingsTabs } from '../Screens/Settings/Tabs';
import TabNavigation from './TabNavigation';
const TopNavigation = ( {
@ -47,27 +46,29 @@ const TopNavigation = ( {
return (
<div className={ className }>
<div className="ppcp-r-navigation">
<BusyStateWrapper
className="ppcp-r-navigation--left"
busySpinner={ false }
enabled={ ! exitOnTitleClick }
>
<Button
variant="link"
onClick={ handleTitleClick }
className="is-title"
<div className="ppcp-r-navigation--row">
<BusyStateWrapper
className="ppcp-r-navigation--left"
busySpinner={ false }
enabled={ ! exitOnTitleClick }
>
<Icon icon={ chevronLeft } />
<span className={ titleClassName }>{ title }</span>
</Button>
</BusyStateWrapper>
<Button
variant="link"
onClick={ handleTitleClick }
className="is-title"
>
<Icon icon={ chevronLeft } />
<span className={ titleClassName }>{ title }</span>
</Button>
</BusyStateWrapper>
<BusyStateWrapper
className="ppcp-r-navigation--right"
busySpinner={ false }
>
{ children }
</BusyStateWrapper>
<BusyStateWrapper
className="ppcp-r-navigation--right"
busySpinner={ false }
>
{ children }
</BusyStateWrapper>
</div>
<TabNavigation
tabs={ tabs }
activePanel={ activePanel }