💄 Responsive changes for nav bar

This commit is contained in:
Philipp Stracker 2024-12-04 12:59:50 +01:00
parent 841a98e009
commit ffc27ca959
No known key found for this signature in database
2 changed files with 21 additions and 6 deletions

View file

@ -80,18 +80,32 @@
} }
&.is-scrolled { &.is-scrolled {
box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85,93,102,.3); box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 782px) {
padding: 24px 35px; padding: 10px 12px;
.ppcp-r-navigation { .ppcp-r-navigation {
flex-wrap: wrap;
row-gap: 8px; row-gap: 8px;
white-space: nowrap;
&--right {
position: absolute;
right: 10px;
z-index: 10;
background: var(--ppcp-color-app-bg);
box-shadow: -5px 0 8px var(--ppcp-color-app-bg);
}
&--progress-bar { &--progress-bar {
display: none; height: 2px;
}
.components-button.is-title {
.title {
margin-left: 4px;
}
} }
} }
} }

View file

@ -2,7 +2,8 @@ body:has(.ppcp-r-container--settings),
body:has(.ppcp-r-container--onboarding) { body:has(.ppcp-r-container--onboarding) {
background-color: var(--ppcp-color-app-bg) !important; background-color: var(--ppcp-color-app-bg) !important;
.woocommerce-layout { .woocommerce-layout,
#woocommerce-layout__primary {
padding: 0 !important; padding: 0 !important;
} }