WordPress/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

/* !Block styles */


// Default block margin and alignment rules.
// These are replicated inside of the Group block
// so that child blocks in there appear the same way.
.entry .entry-content > *,
.entry .entry-summary > *,
.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
	margin: 32px 0;
	max-width: 100%;

	@include postContentMaxWidth();

	@include media(tablet) {
		margin: 32px 0;
	}

	&.alignwide {
		margin-left: auto;
		margin-right: auto;
		clear: both;

		@include media(tablet) {
			width: 100%;
			max-width: 100%;
		}
	}

	&.alignfull {
		position: relative;
		left: -#{$size__spacing-unit };
		width: calc( 100% + (2 * #{$size__spacing-unit}));
		max-width: calc( 100% + (2 * #{$size__spacing-unit}));
		clear: both;

		@include media(tablet) {
			margin-top: calc(2 * #{$size__spacing-unit});
			margin-bottom: calc(2 * #{$size__spacing-unit});
			left: calc( -12.5% - 75px );
			width: calc( 125% + 150px );
			max-width: calc( 125% + 150px );
		}
	}

	&.alignleft {
		/*rtl:ignore*/
		float: left;
		max-width: calc(5 * (100vw / 12));
		margin-top: 0;
		margin-left: 0;
		/*rtl:ignore*/
		margin-right: $size__spacing-unit;

		@include media(tablet) {
			max-width: calc(4 * (100vw / 12));
			/*rtl:ignore*/
			margin-right: calc(2 * #{$size__spacing-unit});
		}
	}

	&.alignright {
		/*rtl:ignore*/
		float: right;
		max-width: calc(5 * (100vw / 12));
		margin-top: 0;
		margin-right: 0;
		/*rtl:ignore*/
		margin-left: $size__spacing-unit;

		@include media(tablet) {
			max-width: calc(4 * (100vw / 12));
			margin-right: 0;
			/*rtl:ignore*/
			margin-left: calc(2 * #{$size__spacing-unit});
		}
	}
	&.aligncenter {
		margin-left: auto;
		margin-right: auto;

		@include postContentMaxWidth();

		@include media(tablet) {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

.entry .entry-content > *,
.entry .entry-summary > * {

	> *:first-child {
		margin-top: 0;
	}

	> *:last-child {
		margin-bottom: 0;
	}
}

/*
 * Unset nested content selector styles
 * - Prevents layout styles from cascading too deeply
 * - helps with plugin compatibility
 */
.entry .entry-content,
.entry .entry-summary {

	.entry-content,
	.entry-summary,
	.entry {
		margin: inherit;
		max-width: inherit;
		padding: inherit;

		@include media(tablet) {
			margin: inherit;
			max-width: inherit;
			padding: inherit;
		}
	}
}

.entry .entry-content {

	//! Paragraphs
	p.has-background {
		padding: 20px 30px;
	}

	//! Audio
	.wp-block-audio {

		width: 100%;

		audio {
			width: 100%;
		}

		&.alignleft audio,
		&.alignright audio {

			max-width: (0.33 * $mobile_width);

			@include media(tablet) {
				max-width: (0.5 * $tablet_width);
			}

			@include media(wide) {
				max-width: (0.33 * $desktop_width);
			}
		}
	}

	//! Video
	.wp-block-video {

		video {
			width: 100%;
		}
	}

	//! Buttons
	.wp-block-buttons {
		line-height: $font__line-height-heading;
	}

	.wp-block-button {

		.wp-block-button__link {
			@include button-transition;
			border: none;
			font-size: $font__size-sm;
			@include font-family( $font__heading );
			box-sizing: border-box;
			font-weight: bold;
			text-decoration: none;
			padding: ($size__spacing-unit * .76) $size__spacing-unit;
			outline: none;

			&:not(.has-background) {
				background-color: $color__background-button;
			}

			&:not(.has-text-color) {
				color: white;
			}

			&:hover {
				color: white;
				background: $color__background-button-hover;
				cursor: pointer;
				&:not(.has-background) {
					background: $color__background-button-hover;
				}
			}

			&:focus {
				color: white;
				background: $color__background-button-hover;
				outline: thin dotted;
				outline-offset: -4px;
				&:not(.has-background) {
					background: $color__background-button-hover;
				}
			}
		}

		&:not(.is-style-squared) .wp-block-button__link {
			border-radius: 5px;
		}

		&.is-style-outline .wp-block-button__link,
		&.is-style-outline .wp-block-button__link:focus,
		&.is-style-outline .wp-block-button__link:active {
			@include button-all-transition;
			border-width: 2px;
			border-style: solid;

			&:not(.has-background) {
				background: transparent;
			}

			&:not(.has-text-color) {
				color: $color__background-button;
				border-color: currentColor;
			}
		}

		&.is-style-outline .wp-block-button__link:hover {
			color: white;
			border-color: $color__background-button-hover;
			&:not(.has-background) {
				color: $color__background-button-hover;
			}
		}
	}

	.wp-block-buttons,
	.wp-block-button {

		&.has-custom-font-size .wp-block-button__link {
			font-size: 1em;
		}
	}

	//! Latest posts, categories, archives
	.wp-block-archives,
	.wp-block-categories,
	.wp-block-latest-posts {
		padding: 0;
		list-style: none;

		li > a {
			@include font-family( $font__heading );
			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
			font-weight: bold;
			line-height: $font__line-height-heading;
			text-decoration: none;
		}
	}

	.wp-block-archives,
	.wp-block-categories {

		&.aligncenter {
			text-align: center;
		}
	}

	//! Latest categories
	.wp-block-categories {

		ul {
			padding-top: ( .75 * $size__spacing-unit );
		}

		li ul {
			list-style: none;
			padding-left: 0;
		}

		@include nestedSubMenuPadding();
	}

	//! Latest posts
	.wp-block-latest-posts {

		.wp-block-latest-posts__post-date {
			@include font-family( $font__heading );
			font-size: $font__size-xs;
			color: $color__text-light;
			line-height: 1.2;
		}

		.wp-block-latest-posts__post-full-content,
		.wp-block-latest-posts__post-excerpt {
			margin-top: $size__spacing-unit;
			margin-bottom: $size__spacing-unit;
		}

		li {
			padding-bottom: ( .5 * $size__spacing-unit );

			&.menu-item-has-children,
			&:last-child {
				padding-bottom: 0;
			}

			:not(:last-child) .wp-block-latest-posts__post-excerpt {
				padding-bottom: ( .5 * $size__spacing-unit );
			}
		}

		&.is-grid li {
			border-top: 2px solid $color__border;
			padding-top: (1 * $size__spacing-unit);
			margin-bottom: (2 * $size__spacing-unit);
			a {
				&:after {
					content: '';
				}
			}
			&:last-child {
				margin-bottom: auto;
				a:after {
					content: '';
				}
			}
		}
	}

	//! Latest preformatted text
	.wp-block-preformatted {
		font-size: $font__size-xs;
		line-height: 1.8;
		padding: $size__spacing-unit;
	}

	//! Verse
	.wp-block-verse {
		@include font-family( $font__body );
		font-size: $font__size_base;
		line-height: 1.8;
	}

	//! Paragraphs
	.has-drop-cap {
		&:not(:focus):first-letter {
			@include font-family( $font__heading );
			font-size: $font__size-xxxl;
			line-height: 1;
			font-weight: bold;
			margin: 0 0.25em 0 0;

			@-moz-document url-prefix()  {
				& {
					margin-top: 0.2em;
				}
			}
		}
	}

	//! Pullquote
	.wp-block-pullquote {
		color: $color__text-main;
		border-color: transparent;
		border-width: 2px;
		padding: $size__spacing-unit;
		font-size: 1em;

		blockquote {
			border: none;
			margin-top: calc(4 * #{ $size__spacing-unit});
			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
			margin-right: 0;
			padding-left: 0;
		}

		p {
			font-size: $font__size-lg;
			font-style: italic;
			line-height: 1.3;
			margin-bottom: 0.5em;
			margin-top: 0.5em;

			em {
				font-style: normal;
			}

			@include media(tablet) {
				font-size: $font__size-xl;
			}
		}

		cite {
			display: block;
			@include font-family( $font__heading );
			line-height: 1.6;
			text-transform: none;
			color: $color__text-light;

			/*
			 * This requires a rem-based font size calculation instead of our normal em-based one,
			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
			 */
			font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
		}

		&.alignleft,
		&.alignright {
			width: 100%;
			padding: 0;

			blockquote {
				margin: $size__spacing-unit 0;
				padding: 0;
				text-align: left;
				max-width: 100%;

				p:first-child {
					margin-top: 0;
				}
			}
		}

		&.is-style-solid-color {
			background-color: $color__link;
			padding-left: 0;
			padding-right: 0;

			@include media(tablet) {
				padding-left: 10%;
				padding-right: 10%;
			}

			p {
				font-size: $font__size-lg;
				line-height: 1.3;
				margin-bottom: 0.5em;
				margin-top: 0.5em;

				@include media(tablet) {
					font-size: $font__size-xl;
				}
			}

			a {
				color: $color__background-body;
			}

			cite {
				color: inherit;
			}

			blockquote {
				max-width: 100%;
				color: $color__background-body;
				padding-left: 0;
				margin-left: $size__spacing-unit;
				margin-right: $size__spacing-unit;

				&.has-text-color p,
				&.has-text-color a,
				&.has-primary-color,
				&.has-secondary-color,
				&.has-dark-gray-color,
				&.has-light-gray-color,
				&.has-white-color {
					color: inherit;
				}

				@include media(tablet) {
					margin-left: 0;
					margin-right: 0;
				}
			}

			&.alignright,
			&.alignleft {

				@include media(tablet) {
					padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
				}
			}

			&.alignfull {

				@include media(tablet) {
					padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
					padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
				}
			}
		}
	}

	//! Blockquote
	.wp-block-quote {

		&:not(.is-large),
		&:not(.is-style-large) {
			border-width: 2px;
			border-color: $color__link;
			padding-top: 0;
			padding-bottom: 0;
		}

		p {
			font-size: 1em;
			font-style: normal;
			line-height: 1.8;
		}

		cite {
			/*
			 * This requires a rem-based font size calculation instead of our normal em-based one,
			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
			 */
			font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
		}

		&.is-large,
		&.is-style-large {
			margin: $size__spacing-unit 0;
			padding: 0;
			border-left: none;

			p {
				font-size: $font__size-lg;
				line-height: 1.4;
				font-style: italic;
			}

			cite,
			footer {
				/*
				 * This requires a rem-based font size calculation instead of our normal em-based one,
				 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
				 */
				font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
			}

			@include media(tablet) {
				margin: $size__spacing-unit 0;
				padding: $size__spacing-unit 0;

				p {
					font-size: $font__size-lg;
				}
			}
		}
	}

	//! Image
	.wp-block-image {
		max-width: 100%;

		img {
			display: block;
		}

		// If an image does not have a left/center/right alignment,
		// it's a direct child of .wp-block-image.  If it has no other
		// alignment added, we want to make sure the image and its
		// caption do not extend beyond the width of the text column.
		&:not(.alignwide):not(.alignfull) > img,
		&:not(.alignwide):not(.alignfull) > a > img,
		&:not(.alignwide):not(.alignfull) > img + figcaption,
		&:not(.alignwide):not(.alignfull) > a + figcaption {
			@include postContentMaxWidth();
		}

		.aligncenter {

			@include postContentMaxWidth();

			@include media(tablet) {
				margin: 0;
				width: $size__site-tablet-content;

				img {
					margin: 0 auto;
				}
			}

			@include media(desktop) {
				width: $size__site-desktop-content;

				img {
					margin: 0 auto;
				}
			}
		}

		&.alignfull img {
			width: 100vw;
			max-width: calc( 100% + (2 * #{$size__spacing-unit}));

			@include media(tablet) {
				max-width: calc( 125% + 150px );
				margin-left: auto;
				margin-right: auto;
			}
		}
	}

	//! Cover Image
	.wp-block-cover-image,
	.wp-block-cover {
		position: relative;
		min-height: 430px;
		padding: $size__spacing-unit;

		@include media(tablet) {
			padding: $size__spacing-unit 10%;
		}

		.wp-block-cover-image-text,
		.wp-block-cover-text,
		h2 {
			@include font-family( $font__heading );
			font-size: $font__size-lg;
			font-weight: bold;
			line-height: 1.25;
			padding: 0;
			color: #fff;

			@include media(tablet) {
				font-size: $font__size-xl;
				max-width: 100%;
			}
		}

		&.alignleft,
		&.alignright {
			width: 100%;

			@include media(tablet) {
				padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
			}
		}

		&.alignfull {

			.wp-block-cover-image-text,
			.wp-block-cover-text,
			h2 {
				@include postContentMaxWidth();
			}

			@include media(tablet) {
				padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
				padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));

				.wp-block-cover-image-text,
				.wp-block-cover-text,
				h2 {
					padding: 0;
				}
			}
		}
	}

	//! Galleries
	.wp-block-gallery {
		list-style-type: none;
		padding-left: 0;

		.blocks-gallery-image:last-child,
		.blocks-gallery-item:last-child {
			margin-bottom: 16px;
		}

		figcaption a {
			color: #fff;
		}
	}

	//! Captions
	.wp-block-audio figcaption,
	.wp-block-video figcaption,
	.wp-block-image figcaption,
	.wp-block-gallery .blocks-gallery-image figcaption,
	.wp-block-gallery .blocks-gallery-item figcaption {
		font-size: $font__size-xs;
		@include font-family( $font__heading );
		line-height: $font__line-height-pre;
		margin: 0;
		padding: ( $size__spacing-unit * .5 );
		text-align: center;
	}

	//! Separator
	.wp-block-separator,
	hr {
		background-color: $color__text-light;
		border: 0;
		height: 2px;
		margin-bottom: (2 * $size__spacing-unit);
		margin-top: (2 * $size__spacing-unit);
		max-width: 2.25em;
		text-align: left;

		&:not(.wp-block-separator) {
			max-width: 100%;
			@include postContentMaxWidth();
		}

		&.is-style-wide {
			max-width: 100%;
			@include postContentMaxWidth();
		}

		&.is-style-dots {
			max-width: 100%;
			@include postContentMaxWidth();
			background-color: inherit;
			border: inherit;
			height: inherit;
			text-align: center;

			// Only apply the default dot color if there's no separator color specified.
			&:not(.has-text-color):not(.has-background) {
				color: $color__text-light;
			}

			&:before {
				font-size: $font__size-lg;
				letter-spacing: $font__size-sm;
				padding-left: $font__size-sm;
			}
		}

		/* Remove duplicate rule-line when a separator
		 * is followed by an H1, or H2 */
		& + h1,
		& + h2 {

			&:before {
				display: none;
			}
		}
	}

	//! Twitter Embed
	.wp-block-embed-twitter {
		word-break: break-word;
	}

	//! Table
	.wp-block-table {

		th,
		td {
			border-color: $color__text-light;
		}
	}

	//! File
	.wp-block-file {
		@include font-family( $font__heading );

		.wp-block-file__button {
			display: table;
			@include button-transition;
			border: none;
			border-radius: 5px;
			background: $color__background-button;
			font-size: $font__size-base;
			@include font-family( $font__heading );
			line-height: $font__line-height-heading;
			text-decoration: none;
			font-weight: bold;
			padding: ($size__spacing-unit * .75) $size__spacing-unit;
			color: #fff;
			margin-left: 0;
			margin-top: calc(0.75 * #{$size__spacing-unit});

			@include media(desktop) {
				font-size: $font__size-base;
				padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5);
			}

			&:hover {
				background: $color__background-button-hover;
				cursor: pointer;
			}

			&:focus {
				background: $color__background-button-hover;
				outline: thin dotted;
				outline-offset: -4px;
			}
		}
	}

	//! Code
	.wp-block-code {
		border-radius: 0;

		code {
			font-size: $font__size-md;
			white-space: pre-wrap;
			word-break: break-word;
		}
	}

	//! Columns
	.wp-block-columns {

		.wp-block-column > * {

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		// Ensure images do not expand beyond the column.
		.wp-block-image:not(.alignwide):not(.alignfull) > img,
		.wp-block-image:not(.alignwide):not(.alignfull) > a > img,
		.wp-block-image > img:not(.alignwide):not(.alignfull),
		.wp-block-image > figure {

			@include media(tablet) {
				max-width: 100%;
			}

			@include media(desktop) {
				max-width: 100%;
			}
		}

		@include media(tablet) {
			flex-wrap: nowrap;

			.wp-block-column:not(:first-child) {
				margin-left: 32px;
			}
		}
	}

	//! Group
	.wp-block-group {

		// When the Group block is standard/wide, we need to prevent full-aligned
		// child blocks from expanding out of their container.
		&:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
		&:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {

			@include media(tablet) {
				left: 0;
				max-width: 100%;
			}
		}

		// The full-width Group block's inner container should mimic .entry-content styles.
		&.alignfull > .wp-block-group__inner-container {
			max-width: calc(100% - (2 * #{ $size__spacing-unit }));
			margin: 0 $size__spacing-unit;

			@include media(tablet) {
				max-width: 80%;
				margin: 0 10%;
				padding: 0 60px;
			}
		}

		// Group block with a colored background.
		&.has-background {
			padding: $size__spacing-unit;
			margin-top: 0;
			margin-bottom: 0;

			// Remove the top and bottom margins of inner blocks.
			.wp-block-group__inner-container {

				> *:first-child {
					margin-top: 0;
				}

				> *:last-child {
					margin-bottom: 0;
				}
			}

			// If the Group block is full-width, it does not need this extra padding.
			&.alignfull {
				padding-left: 0;
				padding-right: 0;

				@include media(tablet) {
					padding-top: $size__spacing-unit;
					padding-bottom: $size__spacing-unit;
				}
			}

			// Full-aligned child blocks should take up the maximum width available in their container.
			&:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
				width: 100%;
				max-width: 100%;

				@include media(tablet) {
					width: calc( 100% + #{$size__spacing-unit * 2} );
					max-width: calc( 100% + #{$size__spacing-unit * 2} );
					margin-left: -#{$size__spacing-unit};
				}
			}
		}
	}

	//! Latest Comments
	.wp-block-latest-comments {

		.wp-block-latest-comments__comment-meta {
			@include font-family( $font__heading );
			font-weight: bold;

			.wp-block-latest-comments__comment-date {
				font-weight: normal;
			}
		}

		.wp-block-latest-comments__comment,
		.wp-block-latest-comments__comment-date,
		.wp-block-latest-comments__comment-excerpt p {
			font-size: inherit;
		}

		&.has-avatars {

		}

		&.has-dates {

			.wp-block-latest-comments__comment-date {
				font-size: $font__size-xs;
			}
		}

		&.has-excerpts {

		}
	}

	//! Font Sizes
	.has-small-font-size {
		font-size: $font__size-sm;
	}

	.has-normal-font-size {
		font-size: $font__size-md;
	}

	.has-large-font-size {
		font-size: $font__size-lg;
	}

	.has-huge-font-size {
		font-size: $font__size-xl;
	}

	//! Custom background colors
	.has-primary-background-color,
	.has-secondary-background-color,
	.has-dark-gray-background-color,
	.has-light-gray-background-color {

		// Use white text against these backgrounds by default.
		color: $color__background-body;

		> p,
		> h1,
		> h2,
		> h3,
		> h4,
		> h5,
		> h6,
		> a {
			color: $color__background-body;
		}
	}

	.has-white-background-color {
		color: $color__text-main;

		// Use dark gray text against this background by default.
		> p,
		> h1,
		> h2,
		> h3,
		> h4,
		> h5,
		> h6,
		> a {
			color: $color__text-main;
		}
	}

	.has-primary-background-color,
	.wp-block-pullquote.is-style-solid-color.has-primary-background-color {
		background-color: $color__link;
	}

	.has-secondary-background-color,
	.wp-block-pullquote.is-style-solid-color.has-secondary-background-color {
		background-color: $color__border-link-hover;
	}

	.has-dark-gray-background-color,
	.wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
		background-color: $color__text-main;
	}

	.has-light-gray-background-color,
	.wp-block-pullquote.is-style-solid-color.has-light-gray-background-color {
		background-color: $color__text-light;
	}

	.has-white-background-color,
	.wp-block-pullquote.is-style-solid-color.has-white-background-color {
		background-color: #FFF;
	}

	//! Custom foreground colors
	.has-primary-color,
	.wp-block-pullquote blockquote.has-primary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-primary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-primary-color > p {
		color: $color__link;
	}

	.has-secondary-color,
	.wp-block-pullquote blockquote.has-secondary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color > p {
		color: $color__border-link-hover;
	}

	.has-dark-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color > p {
		color: $color__text-main;
	}

	.has-light-gray-color,
	.wp-block-pullquote blockquote.has-light-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color > p {
		color: $color__text-light;
	}

	.has-white-color,
	.wp-block-pullquote blockquote.has-white-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
		color: #FFF;
	}
}