Automattic\WooCommerce\Blocks\BlockTypes

ProductFilters::get_responsive_styles │ private │ WC 1.0

Generate viewport-aware Product Filters styles.

Method of the class: ProductFilters{}

No Hooks.

Returns

string. Responsive CSS.

Usage

// private - for code of main (parent) class only
$result = $this->get_responsive_styles();

ProductFilters::get_responsive_styles() ProductFilters::get responsive styles code ^{WC 11.2.1}

private function get_responsive_styles() {
	$overlay_breakpoint = $this->get_overlay_breakpoint();

	return <<<CSS
@media (width > {$overlay_breakpoint}) {
:where(.wc-block-product-filters).is-mobile-overlay {
	display: flex;
}

:where(.wc-block-product-filters).is-mobile-overlay .wc-block-product-filters__overlay-header,
:where(.wc-block-product-filters).is-mobile-overlay .wc-block-product-filters__overlay-footer,
:where(.wc-block-product-filters).is-mobile-overlay .wc-block-product-filters__open-overlay {
	display: none;
}

:where(.wc-block-product-filters).is-mobile-overlay .wc-block-product-filters__overlay {
	position: relative;
	pointer-events: auto;
	inset: 0;
	z-index: auto;
	background: inherit;
	color: inherit;
	transition: none;
	flex-grow: 1;
}

:where(.wc-block-product-filters).is-mobile-overlay .wc-block-product-filters__overlay-wrapper {
	width: auto;
	height: auto;
	background: inherit;
	color: inherit;
}

:where(.wc-block-product-filters).is-mobile-overlay .wc-block-product-filters__overlay-dialog {
	position: relative;
	width: auto;
	transform: none;
	transition: none;
	background: inherit;
	color: inherit;
}

:where(.wc-block-product-filters).is-mobile-overlay .wc-block-product-filters__overlay-content {
	padding: 0;
	overflow: visible;
	flex-grow: 1;
	background: inherit;
	color: inherit;
}
}
CSS;
}