/** * woocommerce/mini-cart block styles. * * Hand-written plain CSS -- the same shape as assets/css/blocks/woocommerce/cart.css: no * Tailwind source, no `@apply`, no build step. The file is enqueued as-is for * the mini-cart block from inc/class-groceria.php, so edit it directly and do * not add it to the `css:*` scripts in package.json. Values come from * theme.json presets (`var(--wp--preset--color--...)`) and literal rems, so it * stands on its own without the Tailwind variables output.css defines. * * WooCommerce ships the rules this file argues with in * assets/client/blocks/mini-cart.css (trigger, drawer chrome, panel frame) and * mini-cart-contents.css (the items table). Their deepest frontend selectors * reach four classes plus an element -- e.g. * `.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image` * -- and load order between two block stylesheets is not guaranteed. So every * override is rooted one class deeper than its core counterpart: panel chrome * at `.wp-block-woocommerce-mini-cart-contents`, the items table at that plus * `table.wc-block-cart-items.wc-block-mini-cart-items`. Keep those roots when * adding rules; that is what lands each rule above core on specificity alone. * * There are exactly two `!important` declarations, both unavoidable, both * commented where they sit: one beats an inline style WooCommerce writes onto * , the other beats core's own `!important` on the close button's * padding. Add no others. * * Sections: * 1. Page scroll lock * 2. Header trigger * 3. Drawer shell * 4. Panel: title and close * 5. Panel: items list * 6. Panel: one item * 7. Panel: footer * 8. Panel: empty cart */ /* -------------------------------------------------------------------------- * 1. Page scroll lock * * While the drawer is open WooCommerce writes * `body { overflow: hidden; padding-right: px }` inline. That * keeps the *body* box the same width, but the viewport itself grows by the * scrollbar it just removed, so everything measured against the viewport -- * fixed elements, `100vw`, centred backgrounds -- jumps sideways as the drawer * slides in and jumps back as it slides out. * * Reserving the scrollbar's column permanently removes the cause rather than * paying it back: hiding the scrollbar no longer changes any width. The * repayment then has nothing to repay and would itself become the shift, so it * is zeroed -- and since it is an inline style, only `!important` reaches it. * The theme puts no padding on of its own (root padding lives on * .wp-site-blocks), so nothing else is caught by this. * ----------------------------------------------------------------------- */ html { scrollbar-gutter: stable; } body { /* stylelint-disable-next-line declaration-no-important -- beats WooCommerce's inline body style. */ padding-right: 0 !important; } /* -------------------------------------------------------------------------- * 2. Header trigger * * The button that opens the drawer. Each header pattern (patterns/header.php * and header-v2..v5) wraps it in `.header.v1` ... `.header.v5`, and the five * differ enough that the shared rules are worth stating once. `lg` here is the * 64rem breakpoint the header patterns are built around. * ----------------------------------------------------------------------- */ .header.v2 .wc-block-mini-cart__badge, .header.v3 .wc-block-mini-cart__badge, .header.v4 .wc-block-mini-cart__badge, .header.v5 .wc-block-mini-cart__badge { width: 1.125rem; height: 1.125rem; font-size: 0.5rem; } .header.v2 .wc-block-mini-cart__badge { color: var(--wp--preset--color--primary); } .header.v2 .wc-block-mini-cart__button { padding-block: 0; } .header.v2 .wc-block-mini-cart__amount, .header.v3 .wc-block-mini-cart__amount, .header.v4 .wc-block-mini-cart__amount { margin-left: 0.25rem; } @media (max-width: 63.999rem) { .header.v2 .mini-cart-outer { padding: 0; border: 0; } .header.v2 .wc-block-mini-cart__button .wc-block-mini-cart__amount, .header.v3 .wc-block-mini-cart__button .wc-block-mini-cart__amount, .header.v4 .wc-block-mini-cart__button .wc-block-mini-cart__amount, .header.v5 .wc-block-mini-cart__button .wc-block-mini-cart__amount { display: none; } } @media (min-width: 64rem) { .header.v1 .wc-block-mini-cart.wp-block-woocommerce-mini-cart { display: flex; width: 3.125rem; height: 3.125rem; align-items: center; justify-content: center; border: 1px solid var(--wp--preset--color--pale-gray); border-radius: 0.5rem; } .header.v1 .wc-block-mini-cart__badge { top: -0.625rem; width: 1.125rem; height: 1.125rem; margin-left: 0; font-size: 0.5rem; } .header.v5 .wc-block-mini-cart__button { flex-direction: column; } } /* -------------------------------------------------------------------------- * 3. Drawer shell * * The design floats the panel as a rounded card rather than butting it against * the viewport edges, so the drawer itself is only a transparent frame: it * keeps core's slide-in transform and hands the white, rounded surface to * .wc-block-mini-cart__template-part inside it. * * --drawer-width is set on the drawer element, not on :root. WooCommerce * prints `:root { --drawer-width: ... }` inline from the block's own width * attribute (MiniCartContents::get_styles), and an inline