themes-wordpress/friendly-business/sass/blocks/_blocks.scss

/* !Block styles */

.entry .entry-content > *,
.entry .entry-summary > * {
	margin: $size__vertical-spacing-unit auto;
	max-width: 100%;

	@include postContentMaxWidth();

	@include media(tablet) {
		margin: $size__vertical-spacing-unit auto;
	}

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

	> *:last-child {
		margin-bottom: 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: $size__vertical-spacing-unit;
			margin-bottom: $size__vertical-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();

	}
}

/*
 * Make sure the first block has margin-top: 0
 */
.entry:not(.has-post-thumbnail) .entry-content > :first-child {
	margin-top: 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);
			}
		}
	}

	//! Button
	.wp-block-button {

		.wp-block-button__link {
			@include button-transition;
			border: none;
			font-size: $font__size-sm;
			font-family: $font__heading;
			line-height: $font__line-height-heading;
			box-sizing: border-box;
			font-weight: bold;
			text-decoration: none;
			padding: ($size__spacing-unit * .76) $size__spacing-unit;
			outline: none;
			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;
			}

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

		&: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;
			}
		}
	}

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

		li {
			color: $color__text-dark;
			font-family: $font__heading;
			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
			font-weight: bold;
			line-height: $font__line-height-heading;
			padding-bottom: ( .75 * $size__spacing-unit );

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

			a {
				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 grid view
	.wp-block-latest-posts.is-grid {
		li {
			border-top: 2px solid $color__border;
			padding-top: $size__spacing-unit;
			margin-bottom: $size__vertical-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 {
		font-family: $font__body;
		font-size: $font__size_base;
		line-height: 1.8;
	}

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

	//! Pullquote
	.wp-block-pullquote {
		border-color: transparent;
		border-width: 2px;
		padding: $size__spacing-unit;

		blockquote {
			color: $color__text-main;
			border: none;
			margin-top: calc(3 * #{$size__vertical-spacing-unit});
			margin-bottom: calc(3.33 * #{$size__vertical-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: inline-block;
			font-family: $font__heading;
			line-height: 1.6;
			text-transform: none;
			color: $color__text-dark;

			/*
			 * 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__vertical-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-color: $color__link;
			border-width: 2px;
			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__vertical-spacing-unit auto;
			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) {

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

	//! Image
	.wp-block-image {

		img {
			display: block;
		}

		&.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: 345px;
		padding: $size__spacing-unit;

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

		.wp-block-cover__inner-container {
			padding: 0;
			color: #fff;

			a {
				color: inherit;
			}

			@include media(tablet) {
				max-width: calc(6 * (100vw / 12) - 28px);
			}
		}

		h1 {
			font-size: $font__size-xl;

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

		.wp-block-cover-image-text,
		.wp-block-cover-text,
		h2 {
			font-size: $font__size-lg;
			max-width: inherit;
			margin: inherit;
			text-align: inherit;
			padding: 0;

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

		h2 {
			&.has-text-align-left {
				text-align: left;
			}

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

			&.has-text-align-right {
				text-align: right;
			}
		}

		h3 {
			font-size: $font__size-md;

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

		h4 {
			font-size: $font__size_base;

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

		h5 {
			font-size: $font__size-sm;

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

		h6 {
			font-size: $font__size-xs;

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

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

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

		&.alignfull {

			.wp-block-cover__inner-container {
				max-width: 100%;

				@include media(tablet) {
					max-width: calc(6 * (100vw / 12) - 28px);
				}
			}

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

				.wp-block-cover__inner-container {
					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;
		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-main;
		border: 0;
		height: 3px;
		margin: $size__vertical-spacing-unit auto;
		max-width: 10rem;

		&.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;

			&:before {
				color: $color__text-main;
				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;
			}
		}
	}

	//! Spacer
	.wp-block-spacer {
		&.desktop-only {
			display: none;

			@include media(tablet) {
				display: block;
			}
		}
	}

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

	//! Table
	.wp-block-table {

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

	//! File
	.wp-block-file {
		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;
			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__vertical-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;
		}
	}

	//! Media & Text
	.wp-block-media-text {
		background: $color__background-screen;
		color: $color__text-main;
		overflow: hidden;
		position: relative;

		&:not(.alignfull) {
			border-radius: 4px;
		}

		.wp-block-media-text__content {
			padding-left: 1rem;
			padding-right: 1rem;
			z-index: 2;

			a,
			a:hover {
				color: inherit;
			}

			> :first-child {
				margin-top: 0.88889rem;
			}

			> :last-child {
				margin-bottom: 0.88889rem;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				text-align: left;
			}
		}

		&.has-media-on-the-right.is-stacked-on-mobile {
			.wp-block-media-text__media {
				grid-row: 1;
			}
			.wp-block-media-text__content {
				grid-row: 2;
			}
		}

		@include media(mobile) {
			&:before {
				top: 5.6%;
				height: 88.8%;
			}

			&.has-media-on-the-right.is-stacked-on-mobile {
				.wp-block-media-text__content {
					grid-row: 1;;
				}
			}
		}

		@include media(desktop) {
			.wp-block-media-text__content {
				padding-left: 8%;
				padding-right: 8%;
			}
		}

		// Temporary fix for IE 11 for this issue: https://github.com/WordPress/gutenberg/issues/11577
		@media all and (-ms-high-contrast:none) {

			&:after {
				display: table;
				content: "";
				clear: both;
			}

			figure {
				float: left;
				width: 50%;
			}

			.wp-block-media-text__content {
				float: right;
				width: 50%;
			}

			&.has-media-on-the-right figure {
				float: right;
			}

			&.has-media-on-the-right .wp-block-media-text__content {
				float: left;
			}
		}
	}

	//! Columns
	.wp-block-columns {

		&.alignfull {
			padding-left: $size__spacing-unit;
			padding-right: $size__spacing-unit;
		}

		@include media(tabletalt) {

			.wp-block-column {

				margin-left: #{0.5 * $size__spacing-unit};
				margin-right: #{0.5 * $size__spacing-unit};

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

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

			.wp-block-column > * {

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

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

			&.alignfull {
				padding-left: calc(2 * #{$size__spacing-unit});
				padding-right: calc(2 * #{$size__spacing-unit});
			}
		}
	}

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

		.wp-block-latest-comments__comment-meta {
			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-dark;
	}

	.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.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.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.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-dark;
	}

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

	//! Posts List
	.a8c-posts-list-item__title,
	.a8c-posts-list-item__meta {
		a {
			text-decoration: none;
		}
	}

	.a8c-posts-list__view-all {
		text-decoration: none;
	}

	.a8c-posts-list-item__title {
		a {
			color: inherit;

			&:hover,
			&:focus {
				color: $color__text-hover;
			}
		}
	}

	.a8c-posts-list-item__meta {
		a {
			color: inherit;

			&:hover,
			&:focus {
				color: $color__link;
			}
		}

		.a8c-posts-list-item__edit-link {
			a {
				color: $color__background-body;
			}
		}
	}

	.a8c-posts-list {
		text-align: center;
	}

	.a8c-posts-list__item:not(:first-child) {
		margin-top: calc(6 * #{$size__spacing-unit});
	}

	.a8c-posts-list-item__featured {
		text-align: center;

		span {
			background: $color__background-button;
			color: #fff;
			display: inline-block;
			font-size: $font__size-xs;
			font-weight: bold;
			line-height: 1;
			padding: .25rem;
			text-transform: uppercase;
			z-index: 1;
		}
	}

	.a8c-posts-list-item__post-thumbnail {
		margin-bottom: $size__vertical-spacing-unit;

		img {
			display: block;
		}
	}

	.a8c-posts-list-item__title {
		font-size: $font__size-lg;
		margin: 0;

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

	.a8c-posts-list-item__meta {
		font-size: $font__size-xs;
	}

	.a8c-posts-list-item__author {
		margin-right: calc(.5 * #{$size__spacing-unit});
	}

	.a8c-posts-list-item__edit-link {
		@include button-transition;
		background: $color__background-button;
		border-radius: 3px;
		font-family: $font__heading;
		font-weight: 700;
		padding: .05rem .4rem;

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

	.a8c-posts-list-item__excerpt {
		@include postContentMaxWidth();
		margin: 0 auto;
		text-align: left;

		p {
			margin: $size__vertical-spacing-unit 0;
		}
	}

	.a8c-posts-list__view-all {
		@include button-transition;
		background: $color__background-button;
		border: none;
		border-radius: 5px;
		box-sizing: border-box;
		color: $color__background-body;
		display: inline-block;
		font-family: $font__heading;
		font-size: $font__size-sm;
		font-weight: 700;
		line-height: $font__line-height-heading;
		margin-top: calc(6 * #{$size__spacing-unit} - #{$size__vertical-spacing-unit});
		outline: none;
		padding: ( $size__spacing-unit * .76 ) $size__spacing-unit;
		vertical-align: bottom;

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

		&:visited {
			color: $color__background-body;
			text-decoration: none;
		}

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