modernized-layout-styles.scss

// Must be included in root style.scss of /stats, /store, and /google-my-business/stats

@use "sass:math";
@import "@automattic/components/src/highlight-cards/variables";
@import "@wordpress/base-styles/breakpoints";

$stats-background-color: #fdfdfd;
$stats-sections-max-width: 1224px;
$stats-layout-contnet-padding-top: 79px;
$sidebar-appearance-break-point: $break-medium;

// Elements above main layout content per pages
.stats__section-header,
.stats-navigation,
.stats-banner-wrapper {
	background-color: var(--studio-white);
}

// Main layout content
.stats {
	background-color: $stats-background-color;

	// Ensures vertical padding for certain sections.
	> .highlight-cards,
	> .stats__all-time-highlights-section,
	> .stats__all-time-views-section,
	> .stats__post-detail-table-section,
	> .stats__gmb-location-wrapper,
	> .subscribers-page,
	> .post-trends {
		padding-top: $vertical-margin;
		padding-bottom: $vertical-margin;
	}

	// Ensures horizontal padding for all sections.
	> * {
		padding: 0 max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px);

		&:not(.calypso-navigation-header, .navigation-header) {
			@media (max-width: $break-small) {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

	> .stats-banner-wrapper .jetpack-backup-creds-banner {
		// .jetpack-backup-creds-banner has a bottom margin of 16px. This overrides it since we want it to be 32px
		margin-bottom: 32px;
	}

	.navigation-header {
		padding-bottom: 24px;

		@media (max-width: $break-small) {
			padding-bottom: 24px;
		}
	}

	.calypso-navigation-header,
	.navigation-header {
		margin-bottom: 0;
		padding-left: max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px);
		padding-right: max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px);
		background-color: var(--studio-white);

		@media (max-width: $break-small) {
			padding-top: 16px;
			padding-inline: 16px;
		}

		@media (max-width: $break-mobile) {
			padding-bottom: 0;
		}
	}
}

.is-section-stats,
.is-section-woocommerce,
.is-section-google-my-business {
	background: var(--studio-white);

	// this overrides the default .layout__content that adds unwanted padding
	& .layout__content,
	&.theme-default .focus-content .layout__content {
		padding: $stats-layout-contnet-padding-top 0 0 0;

		@media (min-width: $sidebar-appearance-break-point) {
			padding: $stats-layout-contnet-padding-top 0 0 calc(var(--sidebar-width-max) + 1px);
		}

		.jetpack-colophon {
			padding-top: $vertical-margin;
			padding-bottom: $vertical-margin;
			margin-top: 0;
		}
	}
}