themes-wordpress/varia/sass/abstracts/_responsive-logic.scss

/**
 * Page Layout Styles & Repsonsive Styles
 */

/* Responsive width-content overrides */
$horizontal-padding: (2 * map-deep-get($config-global, "spacing", "horizontal"));
$content-width-flex: 100%;
$content-width-sm: calc( #{map-deep-get($config-global, "breakpoint", "sm")} - #{$horizontal-padding} );
$content-width-md: calc( #{map-deep-get($config-global, "breakpoint", "md")} - #{$horizontal-padding} );
$content-width-lg: calc( #{map-deep-get($config-global, "breakpoint", "lg")} - #{$horizontal-padding} );
$content-width-xl: calc( #{map-deep-get($config-global, "breakpoint", "xl")} - #{$horizontal-padding} );
$content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} - #{$horizontal-padding} );

%responsive-aligndefault {

	max-width: $content-width-flex;
	margin-left: auto;
	margin-right: auto;

	@include media(mobile) {
		max-width: $content-width-sm;
	}

	@include media(tablet) {
		max-width: $content-width-md;
	}

	@include media(laptop) {
		max-width: $content-width-lg;
	}

	@include media(desktop) {
		max-width: $content-width-lg;
	}

	@include media(wide) {
		max-width: $content-width-lg;
	}
}

%responsive-alignwide {

	margin-left: auto;
	margin-right: auto;
	max-width: $content-width-flex;

	@include media(mobile) {
		max-width: $content-width-sm;
	}

	@include media(tablet) {
		max-width: $content-width-md;
	}

	@include media(laptop) {
		max-width: $content-width-lg;
	}

	/* Matches normal width until desktop breakpoint */

	@include media(desktop) {
		@include alignwide-width( $content-width-lg );
	}

	@include media(wide) {
		@include alignwide-width( $content-width-lg );
	}
}

%responsive-alignwide-nested {

	@include alignwide-width-nested( $content-width-flex );
	margin-left: auto;
	margin-right: auto;

	@include media(mobile) {
		@include alignwide-width-nested( $content-width-sm );
	}

	@include media(tablet) {
		@include alignwide-width-nested( $content-width-md );
	}

	@include media(laptop) {
		@include alignwide-width-nested( $content-width-lg );
	}

	@include media(desktop) {
		@include alignwide-width-nested( $content-width-lg );
	}

	@include media(wide) {
		@include alignwide-width-nested( $content-width-lg );
	}
}

%responsive-alignfull {

	margin-left: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
	margin-right: #{-1 * map-deep-get($config-global, "spacing", "horizontal")};
	width: calc(100% + #{$horizontal-padding});
	max-width: calc(100% + #{$horizontal-padding});

	/* Letting the box-model do most of the work here. */
	@include media(mobile) {
		margin-left: inherit;
		margin-right: inherit;
		width: inherit;
		max-width: inherit;
	}
}

%responsive-alignfull-nested {

	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;

	@include media(mobile) {
		width: calc(100% - #{2 * $horizontal-padding});
		max-width: 100%;
	}
}

%responsive-alignright {

	/*rtl:ignore*/

	@include media(mobile) {
		/*rtl:ignore*/
		margin-right: calc( 0.5 * (100vw - #{$content-width-sm}) );
		max-width: calc( 0.5 * #{$content-width-sm} );
		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
	}

	@include media(tablet) {
		/*rtl:ignore*/
		margin-right: calc( 0.5 * (100vw - #{$content-width-md}) );
		max-width: calc( 0.5 * #{$content-width-md} );
	}

	@include media(laptop) {
		/*rtl:ignore*/
		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
		max-width: calc( 0.5 * #{$content-width-lg} );
	}

	@include media(desktop) {
		/*rtl:ignore*/
		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
		max-width: calc( 0.5 * #{$content-width-lg} );
	}

	@include media(wide) {
		/*rtl:ignore*/
		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
		max-width: calc( 0.5 * #{$content-width-lg} );
	}
}

%responsive-alignleft {

	/*rtl:ignore*/

	@include media(mobile) {
		/*rtl:ignore*/
		margin-left: calc( 0.5 * (100vw - #{$content-width-sm}) );
		max-width: calc( 0.5 * #{$content-width-sm} );
		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
	}

	@include media(tablet) {
		/*rtl:ignore*/
		margin-left: calc( 0.5 * (100vw - #{$content-width-md}) );
		max-width: calc( 0.5 * #{$content-width-md} );
	}

	@include media(laptop) {
		/*rtl:ignore*/
		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
		max-width: calc( 0.5 * #{$content-width-lg} );
	}

	@include media(desktop) {
		/*rtl:ignore*/
		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
		max-width: calc( 0.5 * #{$content-width-lg} );
	}

	@include media(wide) {
		/*rtl:ignore*/
		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
		max-width: calc( 0.5 * #{$content-width-lg} );
	}
}

%responsive-align-container {

/*
	max-width: calc( #{$content-width-flex} - #{$horizontal-padding} );
	width: calc( #{$content-width-flex} - #{$horizontal-padding} );

	@include media(mobile) {
		max-width: #{$content-width-sm};
	}

	@include media(tablet) {
		max-width: #{$content-width-md};
	}

	@include media(laptop) {
		max-width: #{$content-width-lg};
	}

	@include media(desktop) {
		max-width: #{$content-width-lg};
	}

	@include media(wide) {
		max-width: #{$content-width-lg};
	}
*/
}