woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

✨ Set container width based on active tab panel

Browse source
This commit is contained in:
Philipp Stracker 2024-10-28 15:56:11 +01:00
parent 5f0fb376fb
commit 69ca811b96
No known key found for this signature in database
5 changed files with 24 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
modules/ppcp-settings/resources/css/_variables.scss
View file

@ -14,3 +14,13 @@ $shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
$shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
$color-gradient-dark: #001435;
$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);
$max-width-onboarding: 1024px;
$max-width-settings: 938px;
#ppcp-settings-container {
--max-width-settings: #{$max-width-settings};
--max-width-onboarding: #{$max-width-onboarding};
--max-tabbar-width: var(--max-width-settings);
}

2
modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
View file

@ -10,8 +10,6 @@
&-container {
box-shadow: $shadow-card;
max-width: 1024px;
margin: 0 auto;
}
&-card {

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

@ -2,6 +2,10 @@
--wp-components-color-accent: #{$color-blueberry};
--wp-admin-border-width-focus: 3px;
max-width: var(--max-tabbar-width);
margin: 0 auto;
transition: max-width 0.2s;
.components-tab-panel__tabs {
box-shadow: 0 -1px 0 0 $color-gray-400 inset;
margin-bottom: 48px;

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

@ -1,3 +1,7 @@
@import './onboarding/step-welcome';
@import './onboarding/step-business';
@import './onboarding/step-products';
.ppcp-r-tabs.onboarding {
--max-tabbar-width: var(--max-width-onboarding);
}

7
modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
View file

@ -1,13 +1,18 @@
import { TabPanel } from '@wordpress/components';
import { useState } from '@wordpress/element';
const TabNavigation = ( { tabs } ) => {
const initialPanel = tabs[ 0 ].name;
const [ activePanel, setActivePanel ] = useState( initialPanel );
const updatePanelUri = ( tabName ) => {
setActivePanel( tabName );
};
return (
<TabPanel
className={ `ppcp-r-tabs ${ panel }` }
className={ `ppcp-r-tabs ${ activePanel }` }
initialTabName={ activePanel }
onSelect={ updatePanelUri }
tabs={ tabs }
>