You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1028 lines
20 KiB
1028 lines
20 KiB
/* !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%; |
|
} |
|
} |
|
|
|
//! Button |
|
.wp-block-button { |
|
|
|
.wp-block-button__link { |
|
@include button-transition; |
|
border: none; |
|
font-size: $font__size-sm; |
|
@include 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 > 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; |
|
} |
|
} |
|
|
|
//! Pullquote |
|
.wp-block-pullquote { |
|
border-color: transparent; |
|
border-width: 2px; |
|
padding: $size__spacing-unit; |
|
|
|
blockquote { |
|
color: $color__text-main; |
|
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: inline-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-img. If it has no other |
|
// alignment added, we want to make sure the image does not |
|
// extend beyond the width of the text column. |
|
&:not(.alignwide):not(.alignfull) > img { |
|
@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; |
|
|
|
&.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 > 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.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-light; |
|
} |
|
|
|
.has-white-color, |
|
.wp-block-pullquote.is-style-solid-color blockquote.has-white-color { |
|
color: #FFF; |
|
} |
|
}
|
|
|