Skip to content

Instantly share code, notes, and snippets.

@andyford
Last active June 20, 2024 13:24
Show Gist options
  • Select an option

  • Save andyford/de3c1f0083d40bae0d42a2ba458eaeef to your computer and use it in GitHub Desktop.

Select an option

Save andyford/de3c1f0083d40bae0d42a2ba458eaeef to your computer and use it in GitHub Desktop.
:root {
--xgrid-max-width: 496px !important;
--xgrid-max-width-no-edge: 1024px !important;
--xgrid-edge-width: 16px;
--z-header-container-width: var(--xgrid-max-width);
[class*=z-brand-theme-bitiba] {
--z-header-container-width: var(--xgrid-max-width);
}
}
@media (min-width: 544px) {
:root {
--xgrid-max-width: 1088px !important;
--xgrid-edge-width: 32px !important;
}
}
@media (min-width: 1200px) {
:root {
--xgrid-max-width: 1600px !important;
--xgrid-max-width-no-edge: 1440px !important;
--xgrid-edge-width: 80px !important;
}
}
[data-zta="shop-header-wrapper"] [data-zta="top-bar-container"] {
padding-inline: var(--xgrid-edge-width);
}
[data-zta="shop-header-wrapper"] [data-zta="middle-bar"] {
padding-inline: var(--xgrid-edge-width);
}
[data-zta="shop-header-wrapper"] [data-zta="lower-bar-categories"] {
padding-inline: var(--xgrid-edge-width);
}
[data-zta="shop-header-wrapper"] #header-category-flyout {
left: var(--xgrid-edge-width);
right: var(--xgrid-edge-width);
}
#page-content:not(.checkout) {
max-width: var(--xgrid-max-width) !important;
padding-inline: var(--xgrid-edge-width);
}
/* #page-content aside {
max-width: none;
} */
[data-zta="footer-shipping-cost-modal-container"] > * {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
[data-zta="footer-newsletter"] > * > * {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
/* [data-zta="footer-newsletter"] [class^="Newsletter-module_newsletterBackground__"] {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
}
[data-zta="footer-newsletter"] [class^="Newsletter-module_discountWrapper__"] {
width: 140px;
}
[data-zta="footer-newsletter"] [class^="Newsletter-module_formSection__"] {
width: auto;
}
[data-zta="footer-newsletter"] [class^="Newsletter-module_formSectionBottom"] {
gap: 24px;
}
[data-zta="footer-newsletter"] [class^="Newsletter-module_petSelection__"] {
min-width: 320px;
}
[data-zta="footer-newsletter"] [class^="Newsletter-module_subscribeButton__"] {
left: auto;
} */
#shop-footer [class^="InfoListAndCountrySelector-module_infoListAndCountrySelectorWrapper__"] {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
#shop-footer [class^="InfoListAndCountrySelector-module_infoListAndCountrySelectorWrapper__"] > *:first-child {
padding-left: 0;
}
#shop-footer [class^="InfoListAndCountrySelector-module_infoListAndCountrySelectorWrapper__"] > *:last-child {
padding-right: 0;
}
#shop-footer [class^="PurchaseDetails-module_paymentShippingAndTrustWrapper__"] {
width: 100%;
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
#shop-footer [class^="SocialAndApps-module_socialAndAppsWrapper__"] {
width: 100%;
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
#shop-footer [class^="LegalLinks-module_legalLinksWrapper__"] {
width: 100%;
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
/* PROMOBAR STYLES */
/* #promobar-onsite {
max-width: var(--xgrid-max-width-no-edge);
} */
/* @media (max-width: 1520px) {
#promobar-onsite {
margin-inline: var(--xgrid-edge-width) !important;
}
} */
/* PDP STYLES */
/* [class^="ProductGridV2_pdpGridV2_imageSwiper__"] .swiper-slide {
text-align: center;
} */
/* PLP STYLES */
/* [data-zta="product-grid-wrapper"] {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
margin-inline: 0;
width: 100%;
gap: 16px
} */
/* [data-zta="product-grid-wrapper"]
[class^="ProductGridItem_productGridItemContainer__"],
[data-zta="product-grid-wrapper"] [data-zta="advantages-teaser-component"] {
max-width: none;
margin: 0;
padding: 0;
}
[data-zta="product-grid-wrapper"] [data-zta="contentful-middle-banner"] {
padding: 0;
}
[data-zta="product-grid-wrapper"] [data-zta="contentful-middle-banner"] img {
width: 100%;
} */
/* HOMEPAGE STYLES */
/* [data-zta="home"] {
--xgrid-slide-width: 33.333%;
} */
/* @media (min-width: 768px) {
[data-zta="home"] {
--xgrid-slide-width: 25% !important;
}
}
@media (min-width: 1200px) {
[data-zta="home"] {
--xgrid-slide-width: 20% !important;
}
}
@media (min-width: 1540px) {
[data-zta="home"] {
--xgrid-slide-width: 16.666% !important;
}
}
[data-zta="home"] [data-zta="reco_1"] .swiper-slide {
width: var(--xgrid-slide-width);
}
[data-testid="sf-middle-banner"] img {
width: 100%;
} */
/* banner carousel */
/* [data-zta="banner-carousel"] img {
max-height: none !important;
} */
/* /shop/hunde */
/* #shop-main-navigation [data-zta="pg-grid"] {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(252px,1fr));
} */
#shop-main-navigation [data-zta="pg-grid"] > * {
max-width: none;
}
/* CART */
#pageContentWrapperId {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width)
}
html:has(#checkout-frontend) [data-testid="checkout-frontend"] #shop-header :is([data-zta="top-bar-container"], [data-zta="middle-bar"]) {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
html:has(#checkout-frontend) [data-testid="checkout-frontend"] #shop-header :is([data-zta="lower-bar"]) {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
html:has(#checkout-frontend) [data-testid="checkout-frontend"] #shop-header :is([data-zta="lower-bar-categories"]) {
padding-inline: 0;
}
/* ACCOUNT */
.container:has([class^="AccountOverviewComponent-module_container__"]) {
max-width: var(--xgrid-max-width-no-edge);
}
[class^="AccountOverviewComponent-module_container__"] > * {
max-width: none;
}
body:has(#account-overview-app) .content-wrapper {
max-width: var(--xgrid-max-width-no-edge);
padding-inline: 0
}
/* body:has(#account-overview-app) main.rhs.col-xs-12 {
padding-inline: 0;
} */
body:has(#page-content.webc-account-navigation) .container {
max-width: none;
}
/* CHECKOUT PREVIEW */
html:has(#page-content.checkout) :is(.checkout__header .main__bar__checkout .inner__wrapper, .checkout__header .top__bar__checkout .inner__wrapper) {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
html:has(#page-content.checkout) .main__wrapper {
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
html:has(#page-content.checkout) .shop-footer__disclaimer {
max-width: var(--xgrid-max-width-no-edge);
}
html:has(#page-content.checkout) .shop-footer__payment-shipping-and-trust-logos-container > * {
padding-inline: 0;
max-width: var(--xgrid-max-width-no-edge);
}
html:has(#page-content.checkout) .shop-footer__legal-links {
padding-inline: 0;
}
html:has(#page-content.checkout) .shop-footer__legal-links :is(.content-wrapper) {
width: 100%;
max-width: var(--xgrid-max-width-no-edge);
padding-inline: 0;
}
/* NDB / NBI */
[class^="ServicesHeader-module_header-inner__"], /* services header */
[class^="HeroBanner_bleed__"] [class^="HeroBanner_content__"], /* PKC */
[class^="ColumnLayout_grid__"],
[class^="SubPageWrapper_SubPageContainer__"],
.contentBlockWrapper, /* services-content-pages */
.container.container--page, /* current vet search - uses bootstrap */
[class^="PageLayout_wrapper__"], /* vet search nextjs */
[class^="PageLayout_pageContent__"], /* VOC */
[class^="style_container__"] [class^="style_inner__"], /* NBS - currently using 1920px max-width */
[class^="style_mainContent__"] {
width: 100%;
max-width: var(--xgrid-max-width);
padding-inline: var(--xgrid-edge-width);
}
[class^="HeaderSearch_fixed"] { /* vet search nextjs */
width: 100%;
max-width: var(--xgrid-max-width-no-edge);
padding-inline: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment