woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-03 08:37:53 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

💄 Sticky nav bar, consolidate repeat styles

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

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

@ -24,6 +24,10 @@ $max-width-onboarding: 1024px;
$max-width-onboarding-content: 500px;
$max-width-settings: 938px;
:root {
--ppcp-color-app-bg: #{$color-white};
}
#ppcp-settings-container {
--max-width-settings: #{$max-width-settings};
--max-width-onboarding: #{$max-width-onboarding};

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

@ -1,10 +1,15 @@
.ppcp-r-navigation-container {
padding: 24px 48px;
margin: 0 -20px 48px -20px;
border-bottom: 1px solid $color-gray-300;
position: relative;
position: sticky;
top: var(--wp-admin--admin-bar--height);
z-index: 10;
--color-accent: #{$color-blueberry};
padding: 10px 48px;
margin: 0 -20px 48px -20px;
box-shadow: 0 -1px 0 0 $color-gray-300 inset;
background: var(--ppcp-color-app-bg);
--wp-components-color-accent: #{$color-blueberry};
--color-text: #{$color-gray-900};
--color-disabled: #CCC;
@ -18,7 +23,7 @@
@include font(13, 20, 400);
&.is-primary {
background-color: var(--color-accent);
background-color: var(--wp-components-color-accent);
padding: 10px 18px;
justify-content: center;
margin: 0 0 0 12px;
@ -29,7 +34,7 @@
}
&.is-link {
color: var(--color-accent);
color: var(--wp-components-color-accent);
text-decoration: none;
&:disabled {
@ -60,7 +65,7 @@
position: absolute;
bottom: 0;
left: 0;
background-color: var(--color-accent);
background-color: var(--wp-components-color-accent);
height: 4px;
transition: width 0.3s;
}

17
modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss Normal file
View file

@ -0,0 +1,17 @@
body:has(.ppcp-r-container--settings),
body:has(.ppcp-r-container--onboarding) {
background-color: var(--ppcp-color-app-bg) !important;
.woocommerce-layout {
padding: 0 !important;
}
.notice,
.nav-tab-wrapper.woo-nav-tab-wrapper,
.woocommerce-layout__header,
.wrap.woocommerce form > h2,
#screen-meta-links {
display: none !important;
visibility: hidden;
}
}

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

@ -1,8 +0,0 @@
body:has(.ppcp-r-container--onboarding) {
background-color: #fff !important;
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout__header, .wrap.woocommerce form > h2, #screen-meta-links {
display: none !important;
visibility: hidden;
}
}

7
modules/ppcp-settings/resources/css/components/screens/_settings-global.scss
View file

@ -1,7 +0,0 @@
body:has(.ppcp-r-container--settings) {
background-color: #fff !important;
.notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce form > h2, #screen-meta-links {
display: none !important;
}
}

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

@ -28,5 +28,4 @@
}
@import './components/reusable-components/payment-method-modal';
@import './components/screens/onboarding-global';
@import './components/screens/settings-global';
@import './components/screens/fullscreen';