first
This commit is contained in:
@ -0,0 +1,7 @@
|
||||
// Variable Configuration
|
||||
// - Import all config files for display in
|
||||
// the editor, customizer, and front end.
|
||||
|
||||
|
||||
@import "separator/config";
|
||||
@import "utilities/config";
|
||||
@ -0,0 +1,7 @@
|
||||
.wp-block-audio {
|
||||
|
||||
audio:focus {
|
||||
outline-offset: 5px;
|
||||
outline: 2px solid var(--global--color-primary);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
// Block Styles for the Editor
|
||||
// - These styles replace key Gutenberg Block styles for fonts, colors, and
|
||||
// spacing with CSS-variables overrides in the Block Editor
|
||||
// - In the future the Block styles may get compiled to individual .css
|
||||
// files and conditionally loaded
|
||||
|
||||
@import "button/editor";
|
||||
@import "code/editor";
|
||||
@import "cover/editor";
|
||||
@import "columns/editor";
|
||||
@import "file/editor";
|
||||
@import "gallery/editor";
|
||||
@import "group/editor";
|
||||
@import "heading/editor";
|
||||
@import "html/editor";
|
||||
@import "image/editor";
|
||||
@import "latest-comments/editor";
|
||||
@import "latest-posts/editor";
|
||||
@import "legacy/editor"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
|
||||
@import "list/editor";
|
||||
@import "media-text/editor";
|
||||
@import "navigation/editor";
|
||||
@import "paragraph/editor";
|
||||
@import "preformatted/editor";
|
||||
@import "pullquote/editor";
|
||||
@import "query-loop/editor";
|
||||
@import "quote/editor";
|
||||
@import "rss/editor";
|
||||
@import "search/editor";
|
||||
@import "separator/editor";
|
||||
@import "social-icons/editor";
|
||||
@import "table/editor";
|
||||
@import "tag-clould/editor";
|
||||
@import "verse/editor";
|
||||
@import "utilities/font-sizes";
|
||||
@import "utilities/editor"; // Import LAST to cascade properly
|
||||
@ -0,0 +1,37 @@
|
||||
// Blocks
|
||||
// - These styles replace key Gutenberg Block styles with font, color, and
|
||||
// spacing with CSS-variables overrides
|
||||
// - In the future the Block styles may get compiled to individual .css
|
||||
// files and conditionally loaded
|
||||
|
||||
@import "audio/style";
|
||||
@import "button/style";
|
||||
@import "code/style";
|
||||
@import "columns/style";
|
||||
@import "cover/style";
|
||||
@import "file/style";
|
||||
@import "gallery/style";
|
||||
@import "group/style";
|
||||
@import "heading/style";
|
||||
@import "image/style";
|
||||
@import "latest-comments/style";
|
||||
@import "latest-posts/style";
|
||||
@import "legacy/style"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
|
||||
@import "list/style";
|
||||
@import "media-text/style";
|
||||
@import "navigation/style";
|
||||
@import "paragraph/style";
|
||||
@import "preformatted/style";
|
||||
@import "pullquote/style";
|
||||
@import "query-loop/style";
|
||||
@import "quote/style";
|
||||
@import "rss/style";
|
||||
@import "search/style";
|
||||
@import "separator/style";
|
||||
@import "social-icons/style";
|
||||
@import "table/style";
|
||||
@import "tag-clould/style";
|
||||
@import "verse/style";
|
||||
@import "video/style";
|
||||
@import "utilities/font-sizes";
|
||||
@import "utilities/style"; // Import LAST to cascade properly
|
||||
@ -0,0 +1,126 @@
|
||||
.wp-block-button__link {
|
||||
// Extend button style
|
||||
@include button-style();
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
|
||||
.wp-block-button {
|
||||
|
||||
// Target the default and filled button states.
|
||||
&:not(.is-style-outline) {
|
||||
|
||||
.wp-block-button__link:not(:hover):not(:active) {
|
||||
|
||||
// Text colors
|
||||
&:not(.has-text-color) {
|
||||
color: var(--global--color-background);
|
||||
|
||||
// Nested
|
||||
.has-background & {
|
||||
color: var(--local--color-background, var(--global--color-background));
|
||||
|
||||
&.has-background {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background-colors
|
||||
&:not(.has-background) {
|
||||
background-color: var(--global--color-primary);
|
||||
|
||||
// Nested
|
||||
.has-background & {
|
||||
background-color: var(--local--color-primary, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover Button color should match parent element foreground color
|
||||
.wp-block-button__link:hover,
|
||||
.wp-block-button__link:active {
|
||||
border-color: currentColor !important;
|
||||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
// Remove :focus styles in the editor
|
||||
.wp-block-button__link:focus {
|
||||
outline-offset: inherit;
|
||||
outline: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Outline Style.
|
||||
&.is-style-outline {
|
||||
|
||||
.wp-block-button__link:not(:hover):not(:active) {
|
||||
|
||||
// Border colors
|
||||
&:not(.has-text-color),
|
||||
&:not(.has-background),
|
||||
&.has-background {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
// Text colors
|
||||
&:not(.has-text-color) {
|
||||
color: var(--global--color-primary);
|
||||
|
||||
// Nested
|
||||
.has-background & {
|
||||
color: var(--local--color-primary, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
&.has-background {
|
||||
// Nested
|
||||
.has-background &:not(.has-text-color) {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Background-colors
|
||||
&:not(.has-background) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover Button color should match default button style
|
||||
.wp-block-button__link:hover,
|
||||
.wp-block-button__link:active {
|
||||
|
||||
background-color: var(--global--color-primary) !important;
|
||||
border-color: transparent !important;
|
||||
color: var(--global--color-background) !important;
|
||||
|
||||
.has-background & {
|
||||
background-color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
color: var(--local--color-background, var(--global--color-background)) !important;
|
||||
}
|
||||
|
||||
.has-text-color & {
|
||||
color: var(--local--color-background, var(--global--color-background)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove :focus styles in the editor
|
||||
.wp-block-button__link:focus {
|
||||
outline-offset: inherit;
|
||||
outline: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Squared Style
|
||||
&.is-style-squared {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-style-outline .wp-block-button__link[style*="radius"],
|
||||
.wp-block-button__link[style*="radius"] {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
/**
|
||||
* Button
|
||||
*/
|
||||
.site .button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
.wp-block-search .wp-block-search__button,
|
||||
.wp-block-button .wp-block-button__link,
|
||||
.wp-block-file a.wp-block-file__button {
|
||||
// Extend button style
|
||||
@include button-style();
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
.wp-block-button {
|
||||
|
||||
// Target the default and filled button states.
|
||||
&:not(.is-style-outline) {
|
||||
|
||||
.wp-block-button__link:not(:hover):not(:active) {
|
||||
|
||||
// Text colors
|
||||
&:not(.has-text-color) {
|
||||
color: var(--global--color-background);
|
||||
|
||||
// Nested
|
||||
.has-background & {
|
||||
color: var(--local--color-background, var(--global--color-background));
|
||||
|
||||
&.has-background {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background-colors
|
||||
&:not(.has-background) {
|
||||
background-color: var(--global--color-primary);
|
||||
|
||||
// Nested
|
||||
.has-background & {
|
||||
background-color: var(--local--color-primary, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover Button color should match parent element foreground color
|
||||
.wp-block-button__link:hover,
|
||||
.wp-block-button__link:active {
|
||||
border-color: currentColor !important;
|
||||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Outline Style.
|
||||
&.is-style-outline {
|
||||
|
||||
.wp-block-button__link:not(:hover):not(:active) {
|
||||
|
||||
// Border colors
|
||||
&:not(.has-text-color),
|
||||
&:not(.has-background),
|
||||
&.has-background {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
// Text colors
|
||||
&:not(.has-text-color) {
|
||||
color: var(--global--color-primary);
|
||||
|
||||
// Nested
|
||||
.has-background & {
|
||||
color: var(--local--color-primary, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
&.has-background {
|
||||
// Nested
|
||||
.has-background &:not(.has-text-color) {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Background-colors
|
||||
&:not(.has-background) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-button__link:hover,
|
||||
.wp-block-button__link:active {
|
||||
|
||||
border-color: transparent !important;
|
||||
background-color: var(--global--color-primary) !important;
|
||||
color: var(--global--color-background) !important;
|
||||
|
||||
.has-background & {
|
||||
background-color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
color: var(--local--color-background, var(--global--color-background)) !important;
|
||||
}
|
||||
|
||||
.has-text-color & {
|
||||
color: var(--local--color-background, var(--global--color-background)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Squared Style
|
||||
.is-style-squared .wp-block-button__link {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-style-outline .wp-block-button__link[style*="radius"]:focus,
|
||||
.wp-block-button a.wp-block-button__link[style*="radius"]:focus {
|
||||
outline-offset: 2px;
|
||||
outline: 2px dotted var(--button--color-background);
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
.wp-block-code code {
|
||||
white-space: pre !important;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.wp-block-code {
|
||||
border-color: var(--global--color-border);
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
border-width: 0.1rem;
|
||||
padding: var(--global--spacing-unit);
|
||||
color: currentColor;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
.wp-block-code {
|
||||
border-color: var(--global--color-border);
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
border-width: 0.1rem;
|
||||
padding: var(--global--spacing-unit);
|
||||
|
||||
code {
|
||||
color: var(--global--color-primary);
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
.wp-block-columns {
|
||||
|
||||
&:not(.alignwide):not(.alignfull) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wp-block,
|
||||
.wp-block-column {
|
||||
// Allow Gutenberg to set the width of a block that lives inside the columns block.
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
@include innerblock-margin-clear(".wp-block-column");
|
||||
|
||||
&.is-style-twentytwentyone-columns-overlap {
|
||||
|
||||
@include media(laptop) {
|
||||
|
||||
.wp-block-column:nth-child(2n) {
|
||||
margin-left: calc(-2 * var(--global--spacing-horizontal));
|
||||
margin-top: calc(2.5 * var(--global--spacing-horizontal));
|
||||
z-index: 2;
|
||||
|
||||
// Provide text-based child blocks with a default background color to ensure they're readable.
|
||||
> p,
|
||||
> h1,
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
> h5,
|
||||
> h6,
|
||||
> ul,
|
||||
> ol,
|
||||
> pre {
|
||||
|
||||
&:not(.has-background) {
|
||||
background-color: var(--global--color-background);
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
|
||||
// Lists should still have their usual left padding.
|
||||
> ul:not(.has-background),
|
||||
> ol:not(.has-background) {
|
||||
padding-left: calc(2 * var(--global--spacing-horizontal));
|
||||
}
|
||||
|
||||
&.is-vertically-aligned-center {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block[data-align="full"] > & {
|
||||
|
||||
p:not(.has-background),
|
||||
h1:not(.has-background),
|
||||
h2:not(.has-background),
|
||||
h3:not(.has-background),
|
||||
h4:not(.has-background),
|
||||
h5:not(.has-background),
|
||||
h6:not(.has-background) {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
.wp-block-columns {
|
||||
|
||||
&:not(.alignwide):not(.alignfull) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wp-block-column {
|
||||
|
||||
> * {
|
||||
margin-top: calc(0.66 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
|
||||
|
||||
@include media(mobile) {
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-column:not(:last-child) {
|
||||
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
|
||||
|
||||
@include media(mobile) {
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
@include media(desktop) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-style-twentytwentyone-columns-overlap {
|
||||
|
||||
justify-content: space-around;
|
||||
|
||||
@include media(laptop) {
|
||||
|
||||
.wp-block-column {
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-left: calc(-2 * var(--global--spacing-horizontal));
|
||||
margin-top: calc(2.5 * var(--global--spacing-horizontal));
|
||||
z-index: 2;
|
||||
|
||||
// Provide text-based child blocks with a default background color to ensure they're readable.
|
||||
> p,
|
||||
> h1,
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
> h5,
|
||||
> h6,
|
||||
> ul,
|
||||
> ol,
|
||||
> pre {
|
||||
|
||||
&:not(.has-background) {
|
||||
background-color: var(--global--color-background);
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
|
||||
// Lists should still have their usual left padding.
|
||||
> ul:not(.has-background),
|
||||
> ol:not(.has-background) {
|
||||
padding-left: calc(2 * var(--global--spacing-horizontal));
|
||||
}
|
||||
|
||||
&.is-vertically-aligned-center {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.alignfull {
|
||||
|
||||
.wp-block-column {
|
||||
|
||||
p:not(.has-background),
|
||||
h1:not(.has-background),
|
||||
h2:not(.has-background),
|
||||
h3:not(.has-background),
|
||||
h4:not(.has-background),
|
||||
h5:not(.has-background),
|
||||
h6:not(.has-background) {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
.wp-block-cover,
|
||||
.wp-block-cover-image {
|
||||
|
||||
&:not(.alignwide):not(.alignfull) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
background-color: var(--cover--color-background);
|
||||
min-height: var(--cover--height);
|
||||
margin-top: inherit;
|
||||
margin-bottom: inherit;
|
||||
|
||||
[data-align="full"] & {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include innerblock-margin-clear(".wp-block-cover__inner-container");
|
||||
|
||||
.wp-block-cover__inner-container,
|
||||
.wp-block-cover-image-text,
|
||||
.wp-block-cover-text,
|
||||
.block-editor-block-list__block {
|
||||
color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-link-color a {
|
||||
color: var(--wp--style--color--link, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
// Default & custom background-color
|
||||
&:not([class*="background-color"]) {
|
||||
|
||||
.wp-block-cover__inner-container,
|
||||
.wp-block-cover-image-text,
|
||||
.wp-block-cover-text,
|
||||
.block-editor-block-list__block {
|
||||
color: var(--cover--color-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
// Treating H2 separately to account for legacy /core styles
|
||||
h2 {
|
||||
font-size: var(--heading--font-size-h2);
|
||||
letter-spacing: var(--heading--letter-spacing-h2);
|
||||
line-height: var(--heading--line-height-h2);
|
||||
padding: 0;
|
||||
text-align: inherit;
|
||||
|
||||
&.has-text-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.has-text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
&.is-style-twentytwentyone-border {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
}
|
||||
|
||||
// The background color class is used just for the overlay, and does not need to be applied to the inner container.
|
||||
&[class*="-background-color"][class] .wp-block-cover__inner-container {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
.wp-block-cover,
|
||||
.wp-block-cover-image {
|
||||
|
||||
&:not(.alignwide):not(.alignfull) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&.alignfull {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
background-color: var(--cover--color-background);
|
||||
min-height: var(--cover--height);
|
||||
margin-top: inherit;
|
||||
margin-bottom: inherit;
|
||||
|
||||
.wp-block-cover__inner-container,
|
||||
.wp-block-cover-image-text,
|
||||
.wp-block-cover-text {
|
||||
color: currentColor; // Uses text color specified with background-color options in 07-utilities\color-palette.scss
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
a:not(.wp-block-button__link):not(.wp-block-file__button) {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.has-link-color a {
|
||||
color: var(--wp--style--color--link, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
/* default & custom background-color */
|
||||
&:not([class*="background-color"]) {
|
||||
|
||||
.wp-block-cover__inner-container,
|
||||
.wp-block-cover-image-text,
|
||||
.wp-block-cover-text {
|
||||
color: var(--cover--color-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
/* Treating H2 separately to account for legacy /core styles */
|
||||
h2 {
|
||||
font-size: var(--heading--font-size-h2);
|
||||
letter-spacing: var(--heading--letter-spacing-h2);
|
||||
line-height: var(--heading--line-height-h2);
|
||||
max-width: inherit; // undo opinionated styles
|
||||
text-align: inherit; // undo opinionated styles
|
||||
padding: 0;
|
||||
|
||||
&.has-text-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.has-text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-cover__inner-container {
|
||||
|
||||
width: calc(100% - calc(2 * var(--global--spacing-vertical)));
|
||||
|
||||
> * {
|
||||
margin-top: calc(0.666 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
|
||||
|
||||
@include media(mobile) {
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.alignleft,
|
||||
&.alignright {
|
||||
margin-top: 0;
|
||||
|
||||
> * {
|
||||
margin-top: calc(2 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(2 * var(--global--spacing-vertical));
|
||||
padding-left: var(--global--spacing-horizontal);
|
||||
padding-right: var(--global--spacing-horizontal);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-left-content,
|
||||
&.has-right-content {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Block Styles */
|
||||
&.is-style-twentytwentyone-border {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
}
|
||||
|
||||
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
|
||||
&[class*="-background-color"][class] .wp-block-cover__inner-container {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
.wp-block-file {
|
||||
|
||||
.wp-block-file__textlink {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 1px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-file__button {
|
||||
// Extend button style
|
||||
@include button-style();
|
||||
display: inline-block;
|
||||
|
||||
// Remove :focus styles in the editor
|
||||
&:focus {
|
||||
outline-offset: inherit;
|
||||
outline: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
.wp-block-file {
|
||||
|
||||
// Undo Gutenberg hover defaults
|
||||
a.wp-block-file__button:active,
|
||||
a.wp-block-file__button:focus,
|
||||
a.wp-block-file__button:hover {
|
||||
opacity: inherit;
|
||||
}
|
||||
|
||||
a.wp-block-file__button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
.wp-block-gallery {
|
||||
|
||||
figcaption {
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
color: var(--global--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
.wp-block-gallery {
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
.blocks-gallery-image,
|
||||
.blocks-gallery-item {
|
||||
|
||||
// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
|
||||
width: calc((100% - var(--global--spacing-unit)) / 2);
|
||||
|
||||
figcaption {
|
||||
margin: 0;
|
||||
// Text color is always white to account for default gradient background
|
||||
color: var(--global--color-white);
|
||||
font-size: var(--global--font-size-xs);
|
||||
|
||||
a {
|
||||
color: var(--global--color-white);
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:focus img {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
.wp-block-group {
|
||||
// Start IE clearfix.
|
||||
// This hack is only necessary because we want to support IE11.
|
||||
// If we don't want to support IE11, then "display: flow-root" would suffice.
|
||||
display: block;
|
||||
clear: both;
|
||||
|
||||
display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
// End IE clearfix.
|
||||
|
||||
&.has-background {
|
||||
padding: var(--global--spacing-vertical);
|
||||
|
||||
[data-align="full"] & {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
&.is-style-twentytwentyone-border {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
padding: var(--global--spacing-vertical);
|
||||
|
||||
.wp-block-group__inner-container > [data-align="full"] {
|
||||
max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
|
||||
width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
|
||||
margin-left: calc(-1 * var(--global--spacing-vertical));
|
||||
}
|
||||
}
|
||||
|
||||
@include innerblock-margin-clear(".wp-block-group__inner-container");
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
.wp-block-group {
|
||||
// Start IE clearfix.
|
||||
// This hack is only necessary because we want to support IE11.
|
||||
// If we don't want to support IE11, then "display: flow-root" would suffice.
|
||||
display: block;
|
||||
clear: both;
|
||||
|
||||
display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
// End IE clearfix.
|
||||
|
||||
.wp-block-group__inner-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
> * {
|
||||
margin-top: calc(0.666 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
|
||||
|
||||
&.alignfull {
|
||||
@extend %responsive-alignfull-width-mobile;
|
||||
}
|
||||
|
||||
@include media(mobile) {
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-background {
|
||||
padding: calc(0.666 * var(--global--spacing-vertical));
|
||||
|
||||
@include media(mobile) {
|
||||
padding: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
&.is-style-twentytwentyone-border {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
padding: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
// Adjust alignfull items to account for left and right padding.
|
||||
&.has-background,
|
||||
&.is-style-twentytwentyone-border {
|
||||
|
||||
.wp-block-group__inner-container > .alignfull,
|
||||
.wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
|
||||
max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
|
||||
width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
|
||||
margin-left: calc(-1 * var(--global--spacing-vertical));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
.wp-block-heading h1,
|
||||
h1,
|
||||
.h1,
|
||||
.wp-block-heading h2,
|
||||
h2,
|
||||
.h2,
|
||||
.wp-block-heading h3,
|
||||
h3,
|
||||
.h3,
|
||||
.wp-block-heading h4,
|
||||
h4,
|
||||
.h4,
|
||||
.wp-block-heading h5,
|
||||
h5,
|
||||
.h5,
|
||||
.wp-block-heading h6,
|
||||
h6,
|
||||
.h6 {
|
||||
clear: both;
|
||||
font-family: var(--heading--font-family);
|
||||
font-weight: var(--heading--font-weight);
|
||||
|
||||
strong {
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
}
|
||||
|
||||
&[style*="--wp--typography--line-height"] {
|
||||
line-height: var(--wp--typography--line-height, var(--global--line-height-body));
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-heading h1,
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: var(--heading--font-size-h1);
|
||||
letter-spacing: var(--heading--letter-spacing-h1);
|
||||
line-height: var(--heading--line-height-h1);
|
||||
}
|
||||
|
||||
.wp-block-heading h2,
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: var(--heading--font-size-h2);
|
||||
letter-spacing: var(--heading--letter-spacing-h2);
|
||||
line-height: var(--heading--line-height-h2);
|
||||
}
|
||||
|
||||
.wp-block-heading h3,
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: var(--heading--font-size-h3);
|
||||
letter-spacing: var(--heading--letter-spacing-h3);
|
||||
line-height: var(--heading--line-height-h3);
|
||||
}
|
||||
|
||||
.wp-block-heading h4,
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: var(--heading--font-size-h4);
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
letter-spacing: var(--heading--letter-spacing-h4);
|
||||
line-height: var(--heading--line-height-h4);
|
||||
}
|
||||
|
||||
.wp-block-heading h5,
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: var(--heading--font-size-h5);
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
letter-spacing: var(--heading--letter-spacing-h5);
|
||||
line-height: var(--heading--line-height-h5);
|
||||
}
|
||||
|
||||
.wp-block-heading h6,
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: var(--heading--font-size-h6);
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
letter-spacing: var(--heading--letter-spacing-h6);
|
||||
line-height: var(--heading--line-height-h6);
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
clear: both;
|
||||
font-family: var(--heading--font-family);
|
||||
font-weight: var(--heading--font-weight);
|
||||
|
||||
strong {
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: var(--heading--font-size-h1);
|
||||
letter-spacing: var(--heading--letter-spacing-h1);
|
||||
line-height: var(--heading--line-height-h1);
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: var(--heading--font-size-h2);
|
||||
letter-spacing: var(--heading--letter-spacing-h2);
|
||||
line-height: var(--heading--line-height-h2);
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: var(--heading--font-size-h3);
|
||||
letter-spacing: var(--heading--letter-spacing-h3);
|
||||
line-height: var(--heading--line-height-h3);
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: var(--heading--font-size-h4);
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
letter-spacing: var(--heading--letter-spacing-h4);
|
||||
line-height: var(--heading--line-height-h4);
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: var(--heading--font-size-h5);
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
letter-spacing: var(--heading--letter-spacing-h5);
|
||||
line-height: var(--heading--line-height-h5);
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: var(--heading--font-size-h6);
|
||||
font-weight: var(--heading--font-weight-strong);
|
||||
letter-spacing: var(--heading--letter-spacing-h6);
|
||||
line-height: var(--heading--line-height-h6);
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
[data-type="core/html"] textarea {
|
||||
// Make sure that the color is not white on white when a dark body background is used.
|
||||
color: var(--global--color-dark-gray);
|
||||
border-radius: 0;
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
/* Center image block by default in the editor */
|
||||
|
||||
.wp-block-image,
|
||||
.wp-block-image > div:not(.components-placeholder) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Block Styles */
|
||||
|
||||
.wp-block-image.is-style-twentytwentyone-border img,
|
||||
.wp-block-image.is-style-twentytwentyone-image-frame img {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
}
|
||||
|
||||
.wp-block-image.is-style-twentytwentyone-image-frame img {
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
.wp-block-image {
|
||||
text-align: center;
|
||||
|
||||
figcaption {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-xs);
|
||||
line-height: var(--global--line-height-body);
|
||||
margin-top: calc(0.5 * var(--global--spacing-unit));
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
margin-left: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
margin-right: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
a:focus img {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove vertical margins from image block wrappers when floated
|
||||
.entry-content > *[class="wp-block-image"],
|
||||
.entry-content [class*="inner-container"] > *[class="wp-block-image"] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Remove top margins from the following element when previous image block is floated
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
.wp-block-image.is-style-twentytwentyone-border img,
|
||||
.wp-block-image.is-style-twentytwentyone-image-frame img {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
}
|
||||
|
||||
.wp-block-image.is-style-twentytwentyone-image-frame img {
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
|
||||
> .wp-block-image {
|
||||
|
||||
> .alignleft,
|
||||
> .alignright {
|
||||
@include media(mobile) {
|
||||
max-width: 50%;
|
||||
}
|
||||
@include media(mobile-only) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.wp-block-latest-comments {
|
||||
padding-left: 0;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
.wp-block-latest-comments {
|
||||
padding-left: 0;
|
||||
|
||||
.wp-block-latest-comments__comment {
|
||||
font-size: var(--global--font-size-sm);
|
||||
line-height: var(--global--line-height-body);
|
||||
|
||||
/* Vertical margins logic */
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-latest-comments__comment-meta {
|
||||
font-family: var(--heading--font-family);
|
||||
}
|
||||
|
||||
.wp-block-latest-comments__comment-date {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-sm);
|
||||
}
|
||||
|
||||
.wp-block-latest-comments__comment-excerpt p {
|
||||
font-size: var(--global--font-size-sm);
|
||||
line-height: var(--global--line-height-body);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
.wp-block-latest-posts {
|
||||
padding-left: 0;
|
||||
|
||||
// Vertical margins logic
|
||||
&:not(.is-grid) > li {
|
||||
margin-top: calc(1.666 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-grid {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
> li {
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> li > * {
|
||||
margin-top: calc(0.333 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Post title
|
||||
> li > a {
|
||||
display: inline-block;
|
||||
font-family: var(--latest-posts--title-font-family);
|
||||
font-size: var(--latest-posts--title-font-size);
|
||||
font-weight: var(--heading--font-weight);
|
||||
line-height: var(--global--line-height-heading);
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
// Post author
|
||||
.wp-block-latest-posts__post-author {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-md);
|
||||
line-height: var(--global--line-height-body);
|
||||
}
|
||||
|
||||
// Post date
|
||||
.wp-block-latest-posts__post-date {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-xs);
|
||||
line-height: var(--global--line-height-body);
|
||||
|
||||
[class*="inner-container"] &,
|
||||
.has-background & {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Post content
|
||||
.wp-block-latest-posts__post-excerpt,
|
||||
.wp-block-latest-posts__post-full-content {
|
||||
font-family: var(--latest-posts--description-font-family);
|
||||
font-size: var(--latest-posts--description-font-size);
|
||||
line-height: var(--global--line-height-body);
|
||||
margin-top: calc(0.666 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
&.is-style-twentytwentyone-latest-posts-dividers {
|
||||
border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
|
||||
&:not(.is-grid) > li,
|
||||
> li {
|
||||
padding-bottom: var(--global--spacing-vertical);
|
||||
border-bottom: var(--separator--height) solid var(--global--color-border);
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-grid {
|
||||
// Border moves up 1px to overlap the li borders in the last row.
|
||||
box-shadow: inset 0 -1px 0 0 var(--global--color-border);
|
||||
border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding-top: var(--global--spacing-vertical);
|
||||
padding-right: var(--global--spacing-horizontal);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
|
||||
// https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
|
||||
@media screen and (min-width: 600px) {
|
||||
@for $i from 2 through 6 {
|
||||
&.columns-#{ $i } li {
|
||||
width: calc((100% / #{ $i }));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-style-twentytwentyone-latest-posts-borders {
|
||||
|
||||
li {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-grid) li {
|
||||
margin-top: var(--global--spacing-horizontal);
|
||||
margin-bottom: var(--global--spacing-horizontal);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,179 @@
|
||||
.wp-block-latest-posts {
|
||||
padding-left: 0;
|
||||
|
||||
// Vertical margins logic
|
||||
&:not(.is-grid) > li {
|
||||
margin-top: calc(1.666 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-area &:not(.is-grid) > li {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.is-grid {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
> li {
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove bottom margins in grid columns
|
||||
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
|
||||
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
|
||||
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
|
||||
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
|
||||
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
|
||||
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
|
||||
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
|
||||
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
|
||||
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
|
||||
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> li > * {
|
||||
margin-top: calc(0.333 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Post title
|
||||
> li > a {
|
||||
display: inline-block;
|
||||
font-family: var(--latest-posts--title-font-family);
|
||||
font-size: var(--latest-posts--title-font-size);
|
||||
font-weight: var(--heading--font-weight);
|
||||
line-height: var(--global--line-height-heading);
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
.widget-area & > li > a {
|
||||
font-size: var(--global--font-size-sm);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Post author
|
||||
.wp-block-latest-posts__post-author {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-md);
|
||||
line-height: var(--global--line-height-body);
|
||||
}
|
||||
|
||||
// Post date
|
||||
.wp-block-latest-posts__post-date {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-xs);
|
||||
line-height: var(--global--line-height-body);
|
||||
|
||||
[class*="inner-container"] &,
|
||||
.has-background & {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Post content
|
||||
.wp-block-latest-posts__post-excerpt,
|
||||
.wp-block-latest-posts__post-full-content {
|
||||
font-family: var(--latest-posts--description-font-family);
|
||||
font-size: var(--latest-posts--description-font-size);
|
||||
line-height: var(--global--line-height-body);
|
||||
margin-top: calc(0.666 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
&.alignfull {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
|
||||
.entry-content [class*="inner-container"] &,
|
||||
.entry-content .has-background & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
&.is-style-twentytwentyone-latest-posts-dividers {
|
||||
border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
|
||||
&:not(.is-grid) > li,
|
||||
> li {
|
||||
padding-bottom: var(--global--spacing-vertical);
|
||||
border-bottom: var(--separator--height) solid var(--global--color-border);
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-grid {
|
||||
// Border moves up 1px to overlap the li borders in the last row.
|
||||
box-shadow: inset 0 -1px 0 0 var(--global--color-border);
|
||||
border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding-top: var(--global--spacing-vertical);
|
||||
padding-right: var(--global--spacing-horizontal);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
|
||||
// https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
|
||||
@media screen and (min-width: 600px) {
|
||||
@for $i from 2 through 6 {
|
||||
&.columns-#{ $i } li {
|
||||
width: calc((100% / #{ $i }));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-style-twentytwentyone-latest-posts-borders {
|
||||
|
||||
li {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-grid) li {
|
||||
margin-top: var(--global--spacing-horizontal);
|
||||
margin-bottom: var(--global--spacing-horizontal);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
.gallery-item {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
|
||||
.gallery-columns-2 & {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.gallery-columns-3 & {
|
||||
max-width: 33.33%;
|
||||
}
|
||||
|
||||
.gallery-columns-4 & {
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.gallery-columns-5 & {
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
.gallery-columns-6 & {
|
||||
max-width: 16.66%;
|
||||
}
|
||||
|
||||
.gallery-columns-7 & {
|
||||
max-width: 14.28%;
|
||||
}
|
||||
|
||||
.gallery-columns-8 & {
|
||||
max-width: 12.5%;
|
||||
}
|
||||
|
||||
.gallery-columns-9 & {
|
||||
max-width: 11.11%;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
.gallery-item {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:focus img {
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.gallery-columns-2 & {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.gallery-columns-3 & {
|
||||
max-width: 33.33%;
|
||||
}
|
||||
|
||||
.gallery-columns-4 & {
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.gallery-columns-5 & {
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
.gallery-columns-6 & {
|
||||
max-width: 16.66%;
|
||||
}
|
||||
|
||||
.gallery-columns-7 & {
|
||||
max-width: 14.28%;
|
||||
}
|
||||
|
||||
.gallery-columns-8 & {
|
||||
max-width: 12.5%;
|
||||
}
|
||||
|
||||
.gallery-columns-9 & {
|
||||
max-width: 11.11%;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Legacy images, linked
|
||||
figure.wp-caption a:focus img {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
ul,
|
||||
ol {
|
||||
font-family: var(--list--font-family);
|
||||
margin: var(--global--spacing-vertical) 0;
|
||||
padding-left: calc(2 * var(--global--spacing-horizontal));
|
||||
|
||||
// Utility classes
|
||||
&.aligncenter {
|
||||
list-style-position: inside;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.alignright {
|
||||
list-style-position: inside;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
> ul,
|
||||
> ol {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-family: var(--definition-term--font-family);
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
ul,
|
||||
ol {
|
||||
font-family: var(--list--font-family);
|
||||
margin: 0;
|
||||
padding-left: calc(2 * var(--global--spacing-horizontal));
|
||||
|
||||
// Utility classes
|
||||
&.aligncenter {
|
||||
list-style-position: inside;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.alignright {
|
||||
list-style-position: inside;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-family: var(--definition-term--font-family);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
padding-left: calc(2 * var(--global--spacing-horizontal));
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
.wp-block-media-text {
|
||||
|
||||
[data-align="full"] & {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include innerblock-margin-clear(".wp-block-media-text__content");
|
||||
|
||||
.wp-block-media-text__content {
|
||||
padding: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
&.is-style-twentytwentyone-border {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
.wp-block-media-text {
|
||||
|
||||
&.alignfull {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a:focus img {
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.wp-block-media-text__content {
|
||||
padding: var(--global--spacing-horizontal);
|
||||
|
||||
@include media(tablet) {
|
||||
padding: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-top: calc(0.666 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
|
||||
|
||||
@include media(mobile) {
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
|
||||
&.is-stacked-on-mobile .wp-block-media-text__content {
|
||||
@include media(mobile) {
|
||||
padding-top: var(--global--spacing-vertical);
|
||||
padding-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Block Styles
|
||||
&.is-style-twentytwentyone-border {
|
||||
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
.wp-block-navigation {
|
||||
|
||||
.wp-block-navigation__container {
|
||||
background: var(--global--color-background);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wp-block-navigation-link {
|
||||
|
||||
.wp-block-navigation-link__content {
|
||||
padding: var(--primary-nav--padding);
|
||||
}
|
||||
|
||||
.wp-block-navigation-link__label {
|
||||
font-family: var(--primary-nav--font-family);
|
||||
font-size: var(--primary-nav--font-size);
|
||||
font-weight: var(--primary-nav--font-weight);
|
||||
}
|
||||
}
|
||||
|
||||
.has-child {
|
||||
|
||||
.wp-block-navigation__container {
|
||||
box-shadow: var(--global--elevation);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-text-color) {
|
||||
|
||||
.wp-block-navigation-link {
|
||||
|
||||
> a {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--primary-nav--color-link-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-navigation-link__content {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,128 @@
|
||||
.wp-block-navigation {
|
||||
|
||||
.wp-block-navigation-link {
|
||||
padding: 0;
|
||||
|
||||
.wp-block-navigation-link__content {
|
||||
padding: var(--primary-nav--padding);
|
||||
}
|
||||
|
||||
.wp-block-navigation-link__label {
|
||||
font-family: var(--primary-nav--font-family);
|
||||
font-size: var(--primary-nav--font-size);
|
||||
font-weight: var(--primary-nav--font-weight);
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-navigation-link__submenu-icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Top level navigation container.
|
||||
> .wp-block-navigation__container {
|
||||
|
||||
.has-child {
|
||||
|
||||
.wp-block-navigation-link {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.wp-block-navigation__container {
|
||||
border: none;
|
||||
left: 0;
|
||||
margin-left: var(--primary-nav--padding);
|
||||
min-width: max-content;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: inherit;
|
||||
top: inherit;
|
||||
|
||||
.wp-block-navigation-link {
|
||||
|
||||
.wp-block-navigation-link__content {
|
||||
display: inline-block;
|
||||
padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-navigation-link__submenu-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
|
||||
.wp-block-navigation__container {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .has-child {
|
||||
|
||||
> .wp-block-navigation__container {
|
||||
background: var(--global--color-background);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
border: 1px solid var(--primary-nav--border-color);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
top: -10px;
|
||||
left: var(--global--spacing-horizontal);
|
||||
border-style: solid;
|
||||
border-color: var(--primary-nav--border-color) transparent;
|
||||
border-width: 0 7px 10px 7px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: -9px;
|
||||
border-color: var(--global--color-background) transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-background) {
|
||||
|
||||
.wp-block-navigation__container {
|
||||
background: var(--global--color-background);
|
||||
|
||||
.wp-block-navigation__container {
|
||||
background: var(--global--color-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-text-color) {
|
||||
|
||||
.wp-block-navigation-link {
|
||||
|
||||
> a {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--primary-nav--color-link-hover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-navigation-link__content {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
p {
|
||||
line-height: var(--wp--typography--line-height, var(--global--line-height-body));
|
||||
|
||||
&.has-background {
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
p {
|
||||
|
||||
line-height: var(--wp--typography--line-height, var(--global--line-height-body));
|
||||
|
||||
// inherits general font style set at <body>
|
||||
&.has-background {
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
// Override `color: inherit` from Core styles.
|
||||
&.has-text-color a {
|
||||
color: var(--wp--style--color--link, var(--global--color-primary));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
pre.wp-block-preformatted {
|
||||
overflow-x: auto;
|
||||
white-space: pre !important;
|
||||
font-size: var(--global--font-size-xs);
|
||||
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
pre.wp-block-preformatted {
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
.wp-block-pullquote {
|
||||
padding: calc(2 * var(--global--spacing-unit)) 0;
|
||||
text-align: center;
|
||||
border-width: var(--pullquote--border-width);
|
||||
border-bottom-style: solid;
|
||||
border-top-style: solid;
|
||||
color: currentColor;
|
||||
border-color: currentColor;
|
||||
position: relative;
|
||||
|
||||
blockquote::before {
|
||||
color: currentColor;
|
||||
content: "\201C";
|
||||
display: block;
|
||||
position: relative; // Override the absolute position.
|
||||
left: 0;
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--pullquote--font-family);
|
||||
font-size: var(--pullquote--font-size);
|
||||
font-style: var(--pullquote--font-style);
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--pullquote--letter-spacing);
|
||||
line-height: var(--pullquote--line-height);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.wp-block-pullquote__citation,
|
||||
cite,
|
||||
footer {
|
||||
font-size: var(--global--font-size-xs);
|
||||
font-style: var(--pullquote--font-style);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Block Options
|
||||
&:not(.is-style-solid-color) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.is-style-solid-color {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: calc(2.5 * var(--global--spacing-unit));
|
||||
border-width: var(--pullquote--border-width);
|
||||
border-style: solid;
|
||||
border-color: var(--pullquote--border-color);
|
||||
|
||||
@media ( min-width: 600px ) {
|
||||
padding: calc(5 * var(--global--spacing-unit));
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.alignleft blockquote,
|
||||
&.alignright blockquote {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
|
||||
p {
|
||||
font-size: var(--pullquote--font-size);
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-pullquote__citation,
|
||||
cite,
|
||||
footer {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wp-block[data-align="full"] {
|
||||
|
||||
.wp-block-pullquote:not(.is-style-solid-color) {
|
||||
|
||||
blockquote {
|
||||
padding: 0 calc(2 * var(--global--spacing-unit));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block[data-align="left"],
|
||||
.wp-block[data-align="right"] {
|
||||
|
||||
.wp-block-pullquote.is-style-solid-color {
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,110 @@
|
||||
.wp-block-pullquote {
|
||||
padding: calc(2 * var(--global--spacing-unit)) 0;
|
||||
text-align: center;
|
||||
border-width: var(--pullquote--border-width);
|
||||
border-bottom-style: solid;
|
||||
border-top-style: solid;
|
||||
color: currentColor;
|
||||
border-color: currentColor;
|
||||
position: relative;
|
||||
|
||||
blockquote::before {
|
||||
color: currentColor;
|
||||
content: "\201C";
|
||||
display: block;
|
||||
position: relative; // Override the absolute position.
|
||||
left: 0;
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--pullquote--font-family);
|
||||
font-size: var(--pullquote--font-size);
|
||||
font-style: var(--pullquote--font-style);
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--pullquote--letter-spacing);
|
||||
line-height: var(--pullquote--line-height);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.wp-block-pullquote__citation,
|
||||
cite,
|
||||
footer {
|
||||
color: currentColor;
|
||||
display: block;
|
||||
font-size: var(--global--font-size-xs);
|
||||
font-style: var(--pullquote--font-style);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
&:not(.is-style-solid-color) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.alignleft:not(.is-style-solid-color) {
|
||||
|
||||
blockquote:before,
|
||||
cite {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.alignwide > p,
|
||||
&.alignwide blockquote {
|
||||
max-width: var(--responsive--alignwide-width);
|
||||
}
|
||||
|
||||
&.alignfull:not(.is-style-solid-color) > p,
|
||||
&.alignfull:not(.is-style-solid-color) blockquote {
|
||||
padding: 0 calc(2 * var(--global--spacing-unit));
|
||||
}
|
||||
|
||||
&.is-style-solid-color {
|
||||
color: var(--pullquote--color-foreground);
|
||||
padding: calc(2.5 * var(--global--spacing-unit));
|
||||
border-width: var(--pullquote--border-width);
|
||||
border-style: solid;
|
||||
border-color: var(--pullquote--border-color);
|
||||
|
||||
@media (min-width: 600px) {
|
||||
padding: calc(5 * var(--global--spacing-unit));
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
max-width: inherit;
|
||||
|
||||
p {
|
||||
font-size: var(--pullquote--font-size);
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-pullquote__citation,
|
||||
cite,
|
||||
footer {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
&.alignleft,
|
||||
&.alignright {
|
||||
padding: var(--global--spacing-unit);
|
||||
|
||||
blockquote {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
.wp-block-query {
|
||||
|
||||
&.has-background {
|
||||
padding: calc(0.666 * var(--global--spacing-vertical));
|
||||
|
||||
@include media(mobile) {
|
||||
padding: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
.wp-block-query {
|
||||
|
||||
&.has-background {
|
||||
padding: calc(0.666 * var(--global--spacing-vertical));
|
||||
|
||||
@include media(mobile) {
|
||||
padding: var(--global--spacing-vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,150 @@
|
||||
.wp-block-quote {
|
||||
position: relative;
|
||||
border-left: none;
|
||||
margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal);
|
||||
|
||||
p {
|
||||
font-family: var(--quote--font-family);
|
||||
font-size: var(--quote--font-size);
|
||||
font-style: var(--quote--font-style);
|
||||
font-weight: var(--quote--font-weight);
|
||||
line-height: var(--quote--line-height);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: var(--quote--font-weight-strong);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "\201C";
|
||||
font-size: var(--quote--font-size);
|
||||
line-height: var(--quote--line-height);
|
||||
left: calc(-0.5 * var(--global--spacing-horizontal));
|
||||
}
|
||||
|
||||
.wp-block-quote__citation {
|
||||
color: currentColor;
|
||||
font-size: var(--global--font-size-xs);
|
||||
font-style: var(--quote--font-style-cite);
|
||||
|
||||
.has-background &,
|
||||
[class*="background-color"] &,
|
||||
[style*="background-color"] &,
|
||||
.wp-block-cover[style*="background-image"] & {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
|
||||
// Hide the left aligned quote.
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Align the quote left of the text.
|
||||
p:before {
|
||||
content: "\201D";
|
||||
font-size: var(--quote--font-size);
|
||||
font-weight: normal;
|
||||
line-height: var(--quote--line-height);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-text-align-center {
|
||||
margin: var(--global--spacing-vertical) auto;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-large,
|
||||
&.is-style-large {
|
||||
padding-left: 0;
|
||||
|
||||
/* Resetting margins to match _block-container.scss */
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
p {
|
||||
font-size: var(--quote--font-size-large);
|
||||
font-style: var(--quote--font-style-large);
|
||||
line-height: var(--quote--line-height-large);
|
||||
}
|
||||
|
||||
&:before {
|
||||
font-size: var(--quote--font-size-large);
|
||||
line-height: var(--quote--line-height-large);
|
||||
left: calc(-1 * var(--global--spacing-horizontal));
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
|
||||
// Hide the left aligned quote.
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Align the quote left of the text.
|
||||
p:before {
|
||||
content: "\201D";
|
||||
font-size: var(--quote--font-size-large);
|
||||
font-weight: normal;
|
||||
line-height: var(--quote--line-height-large);
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(mobile-only) {
|
||||
padding-left: var(--global--spacing-horizontal);
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
padding-left: 0;
|
||||
padding-right: var(--global--spacing-horizontal);
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media(mobile-only) {
|
||||
padding-left: calc(0.5 * var(--global--spacing-horizontal));
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
padding-left: 0;
|
||||
padding-right: calc(0.5 * var(--global--spacing-horizontal));
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-text-align-center {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media(mobile) {
|
||||
margin-left: auto;
|
||||
|
||||
&.has-text-align-right {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,138 @@
|
||||
.wp-block-quote {
|
||||
border-left: none;
|
||||
|
||||
&:before {
|
||||
content: "\201C";
|
||||
font-size: var(--quote--font-size);
|
||||
line-height: var(--quote--line-height);
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.wp-block-quote__citation,
|
||||
cite,
|
||||
footer {
|
||||
|
||||
.has-background &,
|
||||
[class*="background-color"] &,
|
||||
[style*="background-color"] &,
|
||||
.wp-block-cover[style*="background-image"] & {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
&.has-text-align-right {
|
||||
margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
|
||||
// Hide the left aligned quote.
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Align the quote left of the text.
|
||||
p:before {
|
||||
content: "\201D";
|
||||
font-size: var(--quote--font-size);
|
||||
font-weight: normal;
|
||||
line-height: var(--quote--line-height);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-text-align-center {
|
||||
margin: var(--global--spacing-vertical) auto;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-large,
|
||||
&.is-style-large {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
/* Resetting margins to match _block-container.scss */
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
p {
|
||||
font-size: var(--quote--font-size-large);
|
||||
font-style: var(--quote--font-style-large);
|
||||
line-height: var(--quote--line-height-large);
|
||||
}
|
||||
|
||||
&:before {
|
||||
font-size: var(--quote--font-size-large);
|
||||
line-height: var(--quote--line-height-large);
|
||||
left: calc(-1 * var(--global--spacing-horizontal));
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
|
||||
// Hide the left aligned quote.
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Align the quote left of the text.
|
||||
p:before {
|
||||
content: "\201D";
|
||||
font-size: var(--quote--font-size-large);
|
||||
font-weight: normal;
|
||||
line-height: var(--quote--line-height-large);
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-quote__citation,
|
||||
cite,
|
||||
footer {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-sm);
|
||||
}
|
||||
|
||||
@include media(mobile-only) {
|
||||
padding-left: var(--global--spacing-horizontal);
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.has-text-align-right {
|
||||
padding-left: 0;
|
||||
padding-right: var(--global--spacing-horizontal);
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-text-align-center {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media(mobile-only) {
|
||||
|
||||
&.has-text-align-right {
|
||||
padding-left: 0;
|
||||
padding-right: calc(0.5 * var(--global--spacing-horizontal));
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-text-align-center {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,109 @@
|
||||
.wp-block-rss {
|
||||
padding-left: 0;
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Vertical margins logic
|
||||
&:not(.is-grid) > li {
|
||||
margin-top: calc(1.666 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-grid {
|
||||
|
||||
> li {
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove bottom margins in grid columns
|
||||
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
|
||||
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
|
||||
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
|
||||
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
|
||||
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
|
||||
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
|
||||
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
|
||||
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
|
||||
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
|
||||
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> li > * {
|
||||
margin-top: calc(0.333 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Post title
|
||||
.wp-block-rss__item-title > a {
|
||||
display: inline-block;
|
||||
font-family: var(--latest-posts--title-font-family);
|
||||
font-size: var(--latest-posts--title-font-size);
|
||||
font-weight: var(--heading--font-weight);
|
||||
line-height: var(--global--line-height-heading);
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
// Post author
|
||||
.wp-block-rss__item-author {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-md);
|
||||
line-height: var(--global--line-height-body);
|
||||
}
|
||||
|
||||
// Post date
|
||||
.wp-block-rss__item-publish-date {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-xs);
|
||||
line-height: var(--global--line-height-body);
|
||||
|
||||
[class*="inner-container"] &,
|
||||
.has-background & {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Post content
|
||||
.wp-block-rss__item-excerpt,
|
||||
.wp-block-rss__item-full-content {
|
||||
font-family: var(--latest-posts--description-font-family);
|
||||
font-size: var(--latest-posts--description-font-size);
|
||||
line-height: var(--global--line-height-body);
|
||||
margin-top: calc(0.666 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
&.alignfull {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
|
||||
.entry-content [class*="inner-container"] &,
|
||||
.entry-content .has-background & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,109 @@
|
||||
.wp-block-rss {
|
||||
padding-left: 0;
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Vertical margins logic
|
||||
&:not(.is-grid) > li {
|
||||
margin-top: calc(1.666 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-grid {
|
||||
|
||||
> li {
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove bottom margins in grid columns
|
||||
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
|
||||
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
|
||||
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
|
||||
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
|
||||
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
|
||||
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
|
||||
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
|
||||
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
|
||||
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
|
||||
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> li > * {
|
||||
margin-top: calc(0.333 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Post title
|
||||
.wp-block-rss__item-title > a {
|
||||
display: inline-block;
|
||||
font-family: var(--latest-posts--title-font-family);
|
||||
font-size: var(--latest-posts--title-font-size);
|
||||
font-weight: var(--heading--font-weight);
|
||||
line-height: var(--global--line-height-heading);
|
||||
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
// Post author
|
||||
.wp-block-rss__item-author {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-md);
|
||||
line-height: var(--global--line-height-body);
|
||||
}
|
||||
|
||||
// Post date
|
||||
.wp-block-rss__item-publish-date {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-xs);
|
||||
line-height: var(--global--line-height-body);
|
||||
|
||||
[class*="inner-container"] &,
|
||||
.has-background & {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Post content
|
||||
.wp-block-rss__item-excerpt,
|
||||
.wp-block-rss__item-full-content {
|
||||
font-family: var(--latest-posts--description-font-family);
|
||||
font-size: var(--latest-posts--description-font-size);
|
||||
line-height: var(--global--line-height-body);
|
||||
margin-top: calc(0.666 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
&.alignfull {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
|
||||
.entry-content [class*="inner-container"] &,
|
||||
.entry-content .has-background & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
.wp-block-search {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
|
||||
.wp-block-search__label {
|
||||
font-size: var(--form--font-size);
|
||||
font-weight: var(--form--label-weight);
|
||||
margin-bottom: calc(var(--global--spacing-vertical) / 3);
|
||||
}
|
||||
|
||||
&.wp-block-search__button-inside .wp-block-search__inside-wrapper,
|
||||
.wp-block-search__input {
|
||||
border: var(--form--border-width) solid var(--form--border-color);
|
||||
border-radius: var(--form--border-radius);
|
||||
font-family: var(--form--font-family);
|
||||
font-size: var(--form--font-size);
|
||||
line-height: var(--form--line-height);
|
||||
max-width: inherit;
|
||||
margin-right: calc(-1 * var(--button--border-width));
|
||||
padding: var(--form--spacing-unit);
|
||||
|
||||
.is-dark-theme & {
|
||||
background: var(--global--color-white-90);
|
||||
}
|
||||
|
||||
.has-background & {
|
||||
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-search__button.wp-block-search__button {
|
||||
@include button-style();
|
||||
box-shadow: none;
|
||||
margin-left: 0;
|
||||
|
||||
&.has-icon {
|
||||
padding: 6px calc(0.5 * var(--button--padding-horizontal));
|
||||
display: inherit;
|
||||
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
|
||||
.has-background & {
|
||||
background-color: var(--local--color-background, var(--global--color-background)) !important;
|
||||
color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
}
|
||||
|
||||
.has-text-color & {
|
||||
color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove :focus styles in the editor
|
||||
&:focus {
|
||||
outline-offset: inherit;
|
||||
outline: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.wp-block-search__button-inside {
|
||||
|
||||
.wp-block-search__inside-wrapper {
|
||||
padding: var(--form--border-width);
|
||||
}
|
||||
|
||||
.wp-block-search__input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.wp-block-search__text-button,
|
||||
&.wp-block-search__icon-button {
|
||||
|
||||
.wp-block-search__button {
|
||||
// Search button always needs black contrast against white form background
|
||||
&:hover {
|
||||
color: var(--global--color-dark-gray);
|
||||
}
|
||||
|
||||
.is-dark-theme & {
|
||||
color: var(--global--color-dark-gray);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--global--color-dark-gray);
|
||||
color: var(--global--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wp-block-search__text-button .wp-block-search__button {
|
||||
// Match the text button size with the icon button.
|
||||
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block[data-align="center"] > * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-block[data-align="center"] {
|
||||
|
||||
.wp-block-search__button-only {
|
||||
|
||||
.wp-block-search__inside-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
.wp-block-search {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
|
||||
&__button-only.aligncenter {
|
||||
|
||||
.wp-block-search__inside-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-search__label {
|
||||
font-size: var(--form--font-size);
|
||||
font-weight: var(--form--label-weight);
|
||||
margin-bottom: calc(var(--global--spacing-vertical) / 3);
|
||||
}
|
||||
|
||||
.wp-block-search__input {
|
||||
border: var(--form--border-width) solid var(--form--border-color);
|
||||
border-radius: var(--form--border-radius);
|
||||
color: var(--form--color-text);
|
||||
line-height: var(--form--line-height);
|
||||
max-width: inherit;
|
||||
margin-right: calc(-1 * var(--button--border-width));
|
||||
padding: var(--form--spacing-unit);
|
||||
|
||||
&:focus {
|
||||
color: var(--form--color-text);
|
||||
border-color: var(--form--border-color);
|
||||
}
|
||||
|
||||
.has-background & {
|
||||
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
button.wp-block-search__button {
|
||||
margin-left: 0;
|
||||
line-height: 1;
|
||||
|
||||
&.has-icon {
|
||||
padding: 6px calc(0.5 * var(--button--padding-horizontal));
|
||||
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
|
||||
.has-background & {
|
||||
background-color: var(--local--color-background, var(--global--color-background)) !important;
|
||||
color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
}
|
||||
|
||||
.has-text-color & {
|
||||
color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wp-block-search__button-inside {
|
||||
|
||||
.wp-block-search__inside-wrapper {
|
||||
background-color: var(--global--color-white);
|
||||
border: var(--form--border-width) solid var(--form--border-color);
|
||||
border-radius: var(--form--border-radius);
|
||||
padding: var(--form--border-width);
|
||||
|
||||
.has-background & {
|
||||
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
|
||||
}
|
||||
|
||||
.wp-block-search__input {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: var(--form--spacing-unit);
|
||||
|
||||
// Add outline for focus styles to override default
|
||||
&:focus {
|
||||
color: var(--form--color-text);
|
||||
outline-offset: -2px;
|
||||
outline: 2px dotted var(--form--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
button.wp-block-search__button {
|
||||
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
|
||||
|
||||
// Search button always needs black contrast against white form background
|
||||
&:hover {
|
||||
color: var(--global--color-dark-gray);
|
||||
}
|
||||
|
||||
.is-dark-theme & {
|
||||
color: var(--global--color-dark-gray);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--global--color-dark-gray);
|
||||
color: var(--global--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.has-icon {
|
||||
padding: 6px calc(0.5 * var(--button--padding-horizontal));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-search__button {
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
.wp-block-separator,
|
||||
hr {
|
||||
border-bottom: var(--separator--height) solid var(--separator--border-color);
|
||||
clear: both;
|
||||
opacity: 1;
|
||||
|
||||
&[style*="text-align:right"],
|
||||
&[style*="text-align: right"] {
|
||||
border-right-color: var(--separator--border-color);
|
||||
}
|
||||
|
||||
&:not(.is-style-dots) {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
}
|
||||
|
||||
[data-align="full"] > &,
|
||||
[data-align="wide"] > & {
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
&.is-style-twentytwentyone-separator-thick {
|
||||
border-bottom-width: calc(3 * var(--separator--height));
|
||||
}
|
||||
|
||||
&.is-style-dots {
|
||||
border-bottom: none;
|
||||
|
||||
&.has-background,
|
||||
&.has-text-color {
|
||||
background-color: transparent !important;
|
||||
|
||||
&:before {
|
||||
color: currentColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: var(--separator--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.has-background &,
|
||||
[class*="background-color"] &,
|
||||
[style*="background-color"] &,
|
||||
.wp-block-cover[style*="background-image"] & {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
hr {
|
||||
border-style: none;
|
||||
border-bottom: var(--separator--height) solid var(--separator--border-color);
|
||||
clear: both;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&.wp-block-separator {
|
||||
border-bottom: var(--separator--height) solid var(--separator--border-color);
|
||||
opacity: 1;
|
||||
|
||||
&:not(.is-style-dots):not(.alignwide) {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
}
|
||||
|
||||
&:not(.is-style-dots) {
|
||||
|
||||
&.alignwide {
|
||||
max-width: var(--responsive--alignwide-width);
|
||||
}
|
||||
|
||||
&.alignfull {
|
||||
max-width: var(--responsive--alignfull-width);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
&.is-style-twentytwentyone-separator-thick {
|
||||
border-bottom-width: calc(3 * var(--separator--height));
|
||||
}
|
||||
|
||||
&.is-style-dots {
|
||||
|
||||
&.has-background,
|
||||
&.has-text-color {
|
||||
background-color: transparent !important;
|
||||
|
||||
&:before {
|
||||
color: currentColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: var(--separator--border-color);
|
||||
font-size: var(--global--font-size-xl);
|
||||
letter-spacing: var(--global--font-size-sm);
|
||||
padding-left: var(--global--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.has-background &,
|
||||
[class*="background-color"] &,
|
||||
[style*="background-color"] &,
|
||||
.wp-block-cover[style*="background-image"] & {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
.wp-block-social-links {
|
||||
|
||||
// Social icons are horizontal, so they don't need vertical spacing.
|
||||
[data-block] {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.is-style-twentytwentyone-social-icons-color {
|
||||
|
||||
button {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
|
||||
.wp-social-link {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
.wp-block-social-links {
|
||||
|
||||
a:focus {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
|
||||
&.is-style-twentytwentyone-social-icons-color {
|
||||
|
||||
a {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
|
||||
.wp-social-link,
|
||||
&.has-icon-background-color.has-icon-background-color .wp-social-link {
|
||||
background: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
table,
|
||||
.wp-block-table {
|
||||
|
||||
thead,
|
||||
tfoot {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: var(--heading--font-family);
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: calc(0.5 * var(--global--spacing-unit));
|
||||
}
|
||||
|
||||
&.is-style-regular .has-background,
|
||||
&.is-style-stripes .has-background,
|
||||
&.is-style-stripes .has-background thead tr,
|
||||
&.is-style-stripes .has-background tfoot tr,
|
||||
&.is-style-stripes .has-background tbody tr {
|
||||
color: var(--table--has-background-text-color);
|
||||
}
|
||||
|
||||
&.is-style-stripes {
|
||||
border-color: var(--table--stripes-border-color);
|
||||
|
||||
th,
|
||||
td {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table--stripes-background-color);
|
||||
}
|
||||
|
||||
.has-background tbody tr:nth-child(odd) {
|
||||
background-color: var(--global--color-white-90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.wp-calendar-table {
|
||||
|
||||
td,
|
||||
th {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
color: currentColor;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-calendar-nav {
|
||||
text-align: left;
|
||||
margin-top: calc(var(--global--spacing-unit) / 2);
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
|
||||
path {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-calendar-nav-next {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
table,
|
||||
.wp-block-table {
|
||||
width: 100%;
|
||||
min-width: 240px;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead,
|
||||
tfoot {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: var(--heading--font-family);
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: calc(0.5 * var(--global--spacing-unit));
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-xs);
|
||||
}
|
||||
|
||||
&.is-style-regular .has-background,
|
||||
&.is-style-stripes .has-background,
|
||||
&.is-style-stripes .has-background thead tr,
|
||||
&.is-style-stripes .has-background tfoot tr,
|
||||
&.is-style-stripes .has-background tbody tr {
|
||||
color: var(--table--has-background-text-color);
|
||||
}
|
||||
|
||||
&.is-style-stripes {
|
||||
border-color: var(--table--stripes-border-color);
|
||||
|
||||
th,
|
||||
td {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table--stripes-background-color);
|
||||
}
|
||||
|
||||
.has-background tbody tr:nth-child(odd) {
|
||||
background-color: var(--global--color-white-90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.wp-calendar-table {
|
||||
|
||||
td,
|
||||
th {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
vertical-align: middle;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
color: currentColor;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-calendar-nav {
|
||||
text-align: left;
|
||||
margin-top: calc(var(--global--spacing-unit) / 2);
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
|
||||
path {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-calendar-nav-next {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
.wp-block-tag-cloud {
|
||||
|
||||
&.aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
.wp-block-tag-cloud {
|
||||
|
||||
&.alignfull {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,140 @@
|
||||
/**
|
||||
* Editor Post Title
|
||||
* - Needs a special styles
|
||||
*/
|
||||
|
||||
// Post title style
|
||||
.wp-block.editor-post-title__block {
|
||||
border-bottom: 3px solid var(--global--color-border);
|
||||
padding-bottom: calc(2 * var(--global--spacing-vertical));
|
||||
margin-bottom: calc(3 * var(--global--spacing-vertical));
|
||||
max-width: var(--responsive--alignwide-width);
|
||||
|
||||
.editor-post-title__input {
|
||||
color: var(--global--color-secondary);
|
||||
font-family: var(--heading--font-family);
|
||||
font-size: var(--global--font-size-page-title);
|
||||
font-weight: var(--heading--font-weight-page-title);
|
||||
line-height: var(--heading--line-height-h1);
|
||||
}
|
||||
}
|
||||
|
||||
// Editor UI font styles
|
||||
.wp-block.block-editor-default-block-appender > textarea {
|
||||
font-family: var(--global--font-secondary);
|
||||
font-size: var(--global--font-size-md);
|
||||
}
|
||||
|
||||
// Gutenberg text color options
|
||||
.has-primary-color[class] {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
|
||||
.has-secondary-color[class] {
|
||||
color: var(--global--color-secondary);
|
||||
}
|
||||
|
||||
// Gutenberg background-color options
|
||||
.has-background {
|
||||
|
||||
a,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.has-primary-background-color[class] {
|
||||
background-color: var(--global--color-primary);
|
||||
color: var(--global--color-background);
|
||||
}
|
||||
|
||||
.has-secondary-background-color[class] {
|
||||
background-color: var(--global--color-secondary);
|
||||
color: var(--global--color-background);
|
||||
}
|
||||
|
||||
.has-white-background-color[class] {
|
||||
background-color: var(--global--color-white);
|
||||
color: var(--global--color-secondary);
|
||||
}
|
||||
|
||||
.has-black-background-color[class] {
|
||||
background-color: var(--global--color-black);
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
|
||||
// Spacing Overrides
|
||||
[data-block] {
|
||||
margin-top: var(--global--spacing-vertical);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
// Block Alignments
|
||||
.wp-block {
|
||||
|
||||
// Gutenberg injects a rule that limits the max width of .wp-block to 580px
|
||||
// This line overrides it to use the responsive spacing rules for default width content
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
|
||||
// Use the theme's max-width for wide alignment.
|
||||
&[data-align="wide"],
|
||||
&.alignwide {
|
||||
max-width: var(--responsive--alignwide-width);
|
||||
}
|
||||
|
||||
&[data-align="full"],
|
||||
&.alignfull {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
margin: 0;
|
||||
margin-right: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
.alignright {
|
||||
margin: 0;
|
||||
margin-left: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
// Drop cap
|
||||
.has-drop-cap:not(:focus)::first-letter {
|
||||
font-family: var(--heading--font-family);
|
||||
font-weight: var(--heading--font-weight);
|
||||
line-height: 0.66;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
float: left;
|
||||
margin: 0.1em 0.1em 0 0;
|
||||
font-size: calc(1.2 * var(--heading--font-size-h1));
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
|
||||
.wp-block[data-align="left"] > * {
|
||||
max-width: 290px;
|
||||
margin-right: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
.wp-block[data-align="right"] > * {
|
||||
max-width: 290px;
|
||||
margin-left: var(--global--spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the border of blockquotes inside the classic block.
|
||||
.wp-block-freeform.block-library-rich-text__tinymce blockquote {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Adjust the position of the quote symbol for blockquotes inside the classic block.
|
||||
.wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
|
||||
left: 5px;
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
// Gutenberg Font-size utility classes
|
||||
:root {
|
||||
|
||||
.is-extra-small-text,
|
||||
.has-extra-small-font-size {
|
||||
font-size: var(--global--font-size-xs);
|
||||
}
|
||||
|
||||
.is-small-text,
|
||||
.has-small-font-size {
|
||||
font-size: var(--global--font-size-sm);
|
||||
}
|
||||
|
||||
.is-regular-text,
|
||||
.has-regular-font-size,
|
||||
.is-normal-font-size,
|
||||
.has-normal-font-size,
|
||||
.has-medium-font-size {
|
||||
font-size: var(--global--font-size-base);
|
||||
}
|
||||
|
||||
.is-large-text,
|
||||
.has-large-font-size {
|
||||
font-size: var(--global--font-size-lg);
|
||||
line-height: var(--global--line-height-heading);
|
||||
}
|
||||
|
||||
.is-larger-text,
|
||||
.has-larger-font-size,
|
||||
.is-extra-large-text,
|
||||
.has-extra-large-font-size {
|
||||
font-size: var(--global--font-size-xl);
|
||||
line-height: var(--global--line-height-heading);
|
||||
}
|
||||
|
||||
.is-huge-text,
|
||||
.has-huge-font-size {
|
||||
font-size: var(--global--font-size-xxl);
|
||||
line-height: var(--global--line-height-heading);
|
||||
|
||||
// This size is meant to mimic the page titles, so the font weight is reduced to match.
|
||||
font-weight: var(--heading--font-weight-page-title);
|
||||
}
|
||||
|
||||
.is-gigantic-text,
|
||||
.has-gigantic-font-size {
|
||||
font-size: var(--global--font-size-xxxl);
|
||||
line-height: var(--global--line-height-heading);
|
||||
|
||||
// This size is meant to mimic the page titles, so the font weight is reduced to match.
|
||||
font-weight: var(--heading--font-weight-page-title);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,160 @@
|
||||
/* Block Alignments */
|
||||
|
||||
/**
|
||||
* These selectors set the default max width for content appearing inside a post or page.
|
||||
*/
|
||||
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
|
||||
*[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
|
||||
@extend %responsive-aligndefault-width;
|
||||
}
|
||||
|
||||
/**
|
||||
* .alignleft
|
||||
*/
|
||||
.alignleft {
|
||||
|
||||
/*rtl:ignore*/
|
||||
text-align: left;
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Targeting the .entry-content class is necessary to ensure these styles
|
||||
// only apply when the block isn't nested.
|
||||
.entry-content > .alignleft {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
@extend %responsive-alignleft;
|
||||
}
|
||||
|
||||
@include media(mobile) {
|
||||
|
||||
.alignleft {
|
||||
|
||||
/*rtl:ignore*/
|
||||
float: left;
|
||||
|
||||
/*rtl:ignore*/
|
||||
margin-right: var(--global--spacing-horizontal);
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
.entry-content > .alignleft {
|
||||
max-width: calc(50% - var(--responsive--alignleft-margin));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* .aligncenter
|
||||
*/
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
display: block;
|
||||
float: none;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/**
|
||||
* .alignright
|
||||
*/
|
||||
.alignright {
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--global--spacing-vertical);
|
||||
}
|
||||
|
||||
// Targeting the .entry-content class is necessary to ensure these styles
|
||||
// only apply when the block isn't nested.
|
||||
.entry-content > .alignright {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
@extend %responsive-alignright;
|
||||
}
|
||||
|
||||
@include media(mobile) {
|
||||
|
||||
.alignright {
|
||||
|
||||
/*rtl:ignore*/
|
||||
float: right;
|
||||
|
||||
/*rtl:ignore*/
|
||||
margin-left: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
.entry-content > .alignright {
|
||||
max-width: calc(50% - var(--responsive--alignright-margin));
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure siblings of floated elements are top-aligned when nested
|
||||
[class*="inner-container"] > .alignleft + *,
|
||||
[class*="inner-container"] > .alignright + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* .alignwide
|
||||
*/
|
||||
.alignwide {
|
||||
clear: both;
|
||||
@extend %responsive-alignwide-width;
|
||||
}
|
||||
|
||||
.alignwide [class*="inner-container"] > .alignwide {
|
||||
@extend %responsive-alignwide-width-nested;
|
||||
}
|
||||
|
||||
/**
|
||||
* .alignfull
|
||||
*/
|
||||
.alignfull {
|
||||
clear: both;
|
||||
@extend %responsive-alignfull-width-mobile;
|
||||
@extend %responsive-alignfull-width;
|
||||
}
|
||||
|
||||
.alignfull [class*="inner-container"] > .alignwide {
|
||||
@extend %responsive-alignwide-width-nested;
|
||||
}
|
||||
|
||||
// Content alignment
|
||||
.has-left-content {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.has-right-content {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// Parallax
|
||||
.has-parallax {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
// Drop caps
|
||||
.has-drop-cap:not(:focus)::first-letter {
|
||||
font-family: var(--heading--font-family);
|
||||
font-weight: var(--heading--font-weight);
|
||||
line-height: 0.66;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
float: left;
|
||||
margin: 0.1em 0.1em 0 0;
|
||||
font-size: calc(1.2 * var(--heading--font-size-h1));
|
||||
}
|
||||
|
||||
.has-drop-cap:not(:focus)::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
display: none;
|
||||
|
||||
@include media(mobile) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
pre.wp-block-verse {
|
||||
padding: 0;
|
||||
color: currentColor;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.wp-block-verse {
|
||||
font-family: var(--entry-content--font-family);
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
.wp-block-video {
|
||||
|
||||
figcaption {
|
||||
color: var(--global--color-primary);
|
||||
font-size: var(--global--font-size-xs);
|
||||
margin-top: calc(0.5 * var(--global--spacing-unit));
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
* > figure > video {
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
Reference in New Issue
Block a user