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

💄 Style the new TabNavigation component

Browse source
This commit is contained in:
Philipp Stracker 2024-10-28 15:48:36 +01:00
parent 7ecbd6a1ca
commit be216f3e50
No known key found for this signature in database
3 changed files with 20 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@ $color-gray-800: #2F2F2F;
$color-gray-700: #757575; $color-gray-700: #757575;
$color-gray-600: #949494; $color-gray-600: #949494;
$color-gray-500: #BBBBBB; $color-gray-500: #BBBBBB;
$color-gray-400: #CCCCCC;
$color-gray-200: #E0E0E0; $color-gray-200: #E0E0E0;
$color-gray: #646970; $color-gray: #646970;

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

@ -0,0 +1,18 @@
.ppcp-r-tabs {
--wp-components-color-accent: #{$color-blueberry};
--wp-admin-border-width-focus: 3px;
.components-tab-panel__tabs {
box-shadow: 0 -1px 0 0 $color-gray-400 inset;
margin-bottom: 48px;
gap: 12px;
.components-button {
padding: 16px 20px;
&.is-active {
background-color: #fff4;
}
}
}
}

1
modules/ppcp-settings/resources/css/style.scss
View file

@ -11,6 +11,7 @@
@import './components/reusable-components/payment-method-icons'; @import './components/reusable-components/payment-method-icons';
@import './components/reusable-components/settings-wrapper'; @import './components/reusable-components/settings-wrapper';
@import './components/reusable-components/select-box'; @import './components/reusable-components/select-box';
@import './components/reusable-components/tab-navigation';
@import './components/reusable-components/navigation'; @import './components/reusable-components/navigation';
@import './components/screens/onboarding/step-welcome'; @import './components/screens/onboarding/step-welcome';
@import './components/screens/onboarding/step-business'; @import './components/screens/onboarding/step-business';