Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
1019 lines (810 sloc) 17.3 KB
/*!
@@pkg.name Editor Styles
*/
// Variables
@import "variables";
/** === Content Width === */
.wp-block {
margin-bottom: $content__spacer;
margin-top: $content__spacer;
max-width: $content__width - 10px;
&:not([data-type="core/paragraph"]):not([data-type="core/list"]):not([data-type="core/archives"]):not([data-type="core/categories"]):not([data-type="core/latest-posts"]):not([data-type="core/latest-comments"]) {
margin-bottom: $content__spacer + 12px;
margin-top: $content__spacer + 12px;
}
&[data-align="wide"] {
max-width: $content__width--wide - 10px;
@media screen and (min-width: $content__media-query) {
margin-bottom: $content__spacer + 22px !important;
margin-top: $content__spacer + 22px !important;
}
}
&[data-align="full"] {
margin-bottom: $content__spacer + 10px !important;
margin-top: $content__spacer + 10px !important;
max-width: none;
@media screen and (min-width: $content__media-query) {
margin-bottom: $content__spacer + 30px !important;
margin-top: $content__spacer + 30px !important;
}
}
.wp-block {
width: 100%;
}
.editor-inner-blocks & {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/** === Title === */
.editor-post-title__block {
margin-bottom: 55px;
margin-top: 0 !important;
max-width: 780px;
@media (min-width: 800px) {
margin-bottom: 70px;
margin-top: 40px;
}
.editor-post-title__input {
color: $color__text-heading;
font-family: $font__heading;
font-size: 30px;
font-weight: $font__weight-heading;
line-height: 1.6em;
text-align: center;
text-rendering: optimizeLegibility;
font-smoothing: antialiased;
@media (min-width: 800px) {
font-size: 50px;
}
}
}
/** === Permalink === */
.editor-post-permalink__link {
color: #7e8993;
box-shadow: none !important;
text-decoration: underline;
&:active,
&:hover {
color: #00a0d2;
}
}
/** === Default Appender === */
.editor-default-block-appender textarea.editor-default-block-appender__content {
font-family: $font__body;
font-size: $font__size-md;
font-weight: $font__weight-body;
line-height: 1.4; // Default editor line height
@media screen and (min-width: 599px) {
font-size: $font__size_base;
}
}
/** === Placeholders === */
.components-placeholder {
margin-bottom: $content__spacer + 12px;
margin-top: $content__spacer + 12px;
.wp-block[data-align="full"] &,
.wp-block[data-align="wide"] & {
margin-bottom: 0;
margin-top: 0;
}
&__label,
&__instructions {
color: #191e23;
}
}
/** === Alignments === */
.wp-block[data-align="left"],
.wp-block[data-align="right"] {
.wp-block-image div div {
@media screen and (max-width: $content__align--mobile-media-query--max) {
width: 100% !important;
}
}
.editor-block-list__block-edit {
@media screen and (max-width: $content__align--mobile-media-query--max) {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
}
/** === Base Typography === */
body {
color: $color__text-main;
font-family: $font__body;
font-size: $font__size-md;
@media screen and (min-width: 599px) {
font-size: $font__size_base;
}
}
p {
font-size: 18px;
font-weight: $font__weight-body;
line-height: $font__line-height-body !important;
text-rendering: optimizeLegibility;
@media screen and (min-width: 599px) {
font-size: $font__size_base;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color__text-heading;
font-family: $font__heading;
font-weight: $font__weight-heading;
line-height: $font__line-height-heading;
}
h1 {
font-size: $font__size-lg;
@media (min-width: 600px) {
font-size: $font__size-xl;
}
}
h2 {
font-size: $font__size-lg;
}
h3 {
font-size: $font__size-mdlrg;
}
h4 {
font-size: $font__size-md;
}
h5 {
font-size: $font__size-sm;
}
h6 {
font-size: $font__size-xs;
}
a {
color: $color__text-main;
box-shadow: inset 0 -1px 0 currentcolor;
text-decoration: none;
transition: box-shadow 130ms ease-in-out;
&:focus {
outline: thin dotted;
}
&:hover,
&:focus {
box-shadow: inset 0 0 0 currentColor, 0 3px 0 currentColor;
color: $black;
}
}
/** === Headings === */
.wp-block[data-type="core/heading"] {
margin-bottom: 0 !important;
+ .wp-block[data-type="core/paragraph"] {
margin-top: - ( $content__spacer / 2 ) - 2 !important;
}
+ .wp-block[data-type="core/list"] {
margin-top: -($content__spacer / 2) - 3 !important;
}
+ .wp-block[data-type="core/image"],
+ .wp-block[data-type="core/gallery"] {
margin-top: -($content__spacer / 2) + 5 !important;
}
+ .wp-block[data-type*="blockgallery"] {
margin-top: -($content__spacer / 2) + 5 !important;
}
}
/** === Paragraph === */
.wp-block-paragraph {
&.has-background {
margin: $content__spacer--mobile + 12px auto;
@media screen and (min-width: $content__media-query) {
margin-bottom: $content__spacer + 12px;
margin-top: $content__spacer + 12px;
}
}
&.has-drop-cap:not(:focus)::first-letter {
font-family: $font__heading;
font-size: $font__size-xxxl;
font-weight: 600;
line-height: 1;
margin: -0.065em 0.175em 0 0;
}
}
/** === Captions === */
figcaption {
margin-bottom: -10px;
margin-top: 10px;
a {
color: inherit;
}
}
figcaption,
.gallery-caption {
font-family: $font__figcaption;
font-size: $font__size-xs;
line-height: 1.6;
}
figcaption:not(.blockgallery--caption),
.blockgallery:not(.has-caption-color) figcaption {
color: $gray;
}
/** === Verse === */
.wp-block-verse {
background-color: $color--background-pre;
pre {
font-family: Menlo, Consolas, monaco, monospace;
font-size: $font__size-xs;
line-height: 1.8;
padding-left: 1.2em;
}
}
/** === Preformatted Text === */
.wp-block-preformatted {
pre {
color: $color__text-main;
font-size: $font__size-xs;
line-height: 1.8;
margin-bottom: -7px;
margin-top: -6px;
white-space: pre-wrap;
}
}
/** === Code / HTML === */
.wp-block-code {
padding: 0.8em 1.1em .15em;
}
.wp-block-html {
.editor-plain-text {
margin-bottom: -10px;
padding: 0.8em 1.1em;
}
}
/** === Separator === */
.wp-block-separator {
border-bottom-color: #ccc;
}
/** === Quote === */
blockquote,
.wp-block-quote {
p {
font-family: $font__heading;
font-size: $font__size-lg;
font-weight: $font__weight-heading;
line-height: 1.4 !important;
}
&:not(.is-style-large) {
border-left: $block__quote--border-width solid $black;
margin-left: -14px;
padding-left: 10px;
@media screen and (min-width: 600px) {
margin-left: -1.35em;
padding-left: 1em;
}
}
&.is-style-large {
margin-bottom: 2.3em;
margin-top: 2.3em;
padding: 0;
p {
font-size: $font__size-xl;
line-height: 1.35 !important;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.wp-block-quote__citation {
font-size: $font__size-sm;
margin-top: 2em;
margin-bottom: 5px;
text-align: inherit;
}
}
.wp-block-quote__citation {
color: $gray;
font-family: $font__heading;
font-size: $font__size-xs;
line-height: 1.6;
}
.editor-rich-text + .editor-rich-text {
margin-top: -25px;
}
}
/** === Pullquote === */
.wp-block-pullquote {
color: $black;
border-color: $black;
padding-bottom: 2.5em;
padding-top: 2.2em;
padding-left: 20px;
padding-right: 20px;
border-width: 3px;
p {
font-family: $font__heading;
font-size: $font__size-mdlrg !important;
line-height: 1.5 !important;
margin-bottom: 0;
}
blockquote {
hyphens: auto;
margin: 0;
max-width: 100%;
padding: 0;
text-align: center;
word-break: break-word;
}
.wp-block-pullquote__citation {
font-size: $font__size-sm;
text-transform: none;
margin-top: 1em;
}
blockquote:not([class*="text-color"]) .wp-block-pullquote__citation {
color: $gray;
}
&.is-style-solid-color {
padding: 25px 35px;
blockquote {
line-height: 1.35 !important;
text-align: left;
}
.wp-block-pullquote__citation {
margin-top: 1em;
opacity: 0.8;
}
blockquote:not(.has-text-color) p,
blockquote:not(.has-text-color) a,
blockquote:not(.has-text-color) .wp-block-pullquote__citation {
color: $white;
}
&:not([class*="background-color"]) {
background-color: $black;
}
}
}
.wp-block[data-type="core/quote"] {
.editor-block-mover {
left: -45px;
}
}
.wp-block[data-type="core/pullquote"][data-align="left"],
.wp-block[data-type="core/pullquote"][data-align="right"] {
.wp-block-pullquote {
margin-bottom: 0;
margin-top: 0.5em;
}
blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
blockquote > .editor-rich-text p,
p {
font-size: $font__size-mdlrg;
line-height: 1.3 !important;
margin-bottom: 0;
margin-top: 0;
}
.editor-rich-text + .editor-rich-text {
margin-top: 20px;
}
.editor-block-list__block-edit {
@media screen and (max-width: $content__align--mobile-media-query--max) {
margin-left: 0;
margin-right: 0;
}
@media screen and (min-width: $content__align--mobile-media-query--min) {
max-width: 50%;
}
.wp-block-pullquote:not(.is-style-solid-color) {
padding-top: 1.25em;
padding-bottom: 1.25em;
padding-left: 0;
padding-right: 0;
}
.wp-block-pullquote.is-style-solid-color {
padding: 1.65em;
padding-top: 1.5em;
}
}
p,
blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
blockquote > .editor-rich-text p,
.wp-block-pullquote__citation {
text-align: left;
}
}
.wp-block[data-type="core/pullquote"][data-align="full"] {
blockquote p {
margin-left: auto;
margin-right: auto;
max-width: $content__width--wide;
}
}
/** === Button === */
.wp-block-button {
&.is-style-outline .wp-block-button__link,
&.is-style-outline .wp-block-button__link:hover,
&.is-style-outline .wp-block-button__link:focus,
&.is-style-outline .wp-block-button__link:active {
background: transparent !important;
}
.wp-block-button__link {
font-size: 18px;
line-height: 24px;
padding: 14px 30px;
@media screen and (min-width: 599px) {
font-size: $font__size_base;
}
}
}
.wp-block-button__link {
border-radius: 30px;
font-style: italic;
&:not(.has-background) {
&,
&:hover,
&:active,
&:focus {
background-color: $black;
}
}
}
/** === List === */
.block-library-list {
.editor-rich-text__tinymce,
.editor-rich-text__tinymce ol,
.editor-rich-text__tinymce ul {
margin-left: 0;
padding-left: 1em;
}
}
/** === Archives, Categories === */
ul.wp-block-archives,
ul.wp-block-categories__list {
margin-left: 0;
padding-left: 1em;
&.aligncenter {
list-style: none;
padding-left: 0;
text-align: center;
}
}
.wp-block[data-type="core/categories"][data-align="center"] {
ul.wp-block-categories__list {
list-style: none;
padding-left: 0;
text-align: center;
}
}
.wp-block[data-type="core/categories"][data-align="full"] {
ul.wp-block-categories__list {
padding-left: 40px;
}
}
/** === Latest Posts === */
.wp-block-latest-posts {
&.is-grid {
margin-top: $content__spacer + 10px;
margin-bottom:  -10px;
li {
background: $color--background-pre;
border: none;
display: flex;
flex-direction: column;
line-height: 1.6;
padding: 1em 1em 1.1em;
text-align: center;
align-items: center;
justify-content: center;
@media (max-width: 599px) {
margin-right: 0;
}
a {
box-shadow: none;
transition: none;
&::after {
content: '';
}
}
&:last-child {
a::after {
content: '';
}
}
}
.wp-block-latest-posts__post-date {
flex: 0 0 auto;
margin-top: 10px;
}
}
&:not(.is-grid) {
margin-left: 0;
padding-left: 1em;
padding-bottom: 4px;
li {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
.wp-block-latest-posts__post-date {
color: $gray;
font-size: $font__size-xs;
font-style: italic;
margin-top: 2px;
}
}
.wp-block[data-type="core/latest-posts"][data-align="full"] {
.wp-block-latest-posts:not(.is-grid) {
padding-left: 40px;
}
}
/** === Latest Comments === */
.wp-block-latest-comments {
&__comment {
font-size: 17px;
margin-bottom: 1.4em !important;
}
&__comment-date {
color: $gray;
margin-top: 0.75em;
font-size: 15px;
font-style: italic;
}
&__comment-excerpt p {
font-size: 17px;
line-height: 1.6;
}
}
.wp-block[data-type="core/latest-comments"][data-align="full"] {
ol.wp-block-latest-comments {
padding-left: 20px;
}
}
/** === File === */
.wp-block-file {
.wp-block-file__textlink {
text-decoration: underline;
}
.wp-block-file__button {
background: $black;
font-size: $font__size-xs;
left: 5px;
padding: 0.38em 1.3em 0.28em;
position: relative;
top: -2px;
}
}
/** === Video === */
.wp-block-video {
video {
margin-bottom: -10px;
width: 100%;
}
}
/** === Audio === */
.wp-block-audio {
audio {
margin-bottom: -10px;
width: 100%;
}
}
/** === Embeds === */
.wp-block-embed {
&-twitter {
iframe {
margin-bottom: -10px !important;
@media screen and (min-width: 650px) {
margin-left: 5vw;
}
}
}
}
/** === Gallery === */
.wp-block-gallery {
&:not(.editor-media-placeholder) {
margin-bottom: -16px;
}
.blocks-gallery-item:last-child {
margin-bottom: 16px;
}
figcaption.editor-rich-text__tinymce {
color: $white !important;
margin: 0;
padding-bottom: 8px;
}
}
.wp-block[data-type="core/gallery"][data-align="left"],
.wp-block[data-type="core/gallery"][data-align="right"] {
.wp-block-gallery:not(.editor-media-placeholder) {
margin-bottom: 0;
@media screen and (min-width: $content__align--mobile-media-query--min) {
margin-top: 0.5em;
}
}
}
/** === Image === */
.wp-block-image {
margin-top: 0;
&:not(.editor-media-placeholder) {
// Fixes extra space where the image is not set all the way on the bottom of the div.
margin-bottom: -10px;
}
figcaption {
margin-bottom: -8px;
margin-top: -2px;
}
}
.wp-block[data-type="core/image"][data-align="left"],
.wp-block[data-type="core/image"][data-align="right"] {
.wp-block-image:not(.editor-media-placeholder) {
margin-bottom: 0;
@media screen and (min-width: $content__align--mobile-media-query--min) {
margin-top: 0.5em;
}
}
}
/** === Cover === */
.wp-block-cover {
&-text {
font-family: $font__heading;
font-size: $font__size-lg;
font-weight: $font__weight-heading;
line-height: 1.3 !important;
}
&.has-left-content {
justify-content: flex-start;
.editor-rich-text__inline-toolbar {
left: 35px;
}
.wp-block-cover-text {
padding-left: 35px;
padding-right: 35px;
}
}
&.has-right-content {
.editor-rich-text__inline-toolbar {
right: 35px;
}
.wp-block-cover-text {
padding-left: 35px;
padding-right: 35px;
}
}
}
.wp-block[data-type="core/cover"][data-align="left"],
.wp-block[data-type="core/cover"][data-align="right"] {
.wp-block-cover {
margin-bottom: 0.55em;
margin-top: 0.55em;
min-width: $content__align--width;
&-text {
max-width: $content__align--width;
padding: 20px;
width: 100%;
}
}
.has-left-content {
.editor-rich-text__inline-toolbar {
left: 20px;
}
}
.has-right-content {
.editor-rich-text__inline-toolbar {
right: 20px;
}
}
}
.wp-block[data-type="core/cover"][data-align="wide"],
.wp-block[data-type="core/cover"][data-align="full"] {
.wp-block-cover-text {
max-width: calc(6 * (100vw / 12));
padding: 0;
padding-left: calc( 30px + #{$content__padding});
padding-right: calc( 30px + #{$content__padding});
width: calc(6 * (100vw / 12));
}
.has-left-content {
.editor-rich-text__inline-toolbar {
left: calc( 30px + #{$content__padding});
}
}
.has-right-content {
.editor-rich-text__inline-toolbar {
right: calc( 30px + #{$content__padding});
}
}
}
/** === CoBlocks === */
.wp-block-coblocks-alert {
padding: 0.8em 1em 0.7em;
&__title {
font-size: 19px;
margin-bottom: 0;
margin-top: 0;
}
&__text {
font-size: 18px;
margin-bottom: 0;
margin-top: 0;
}
}
.wp-block-coblocks-click-to-tweet {
&__text {
color: $color__text-heading;
font-family: $font__heading;
font-size: $font__size-lg;
font-weight: $font__weight-heading;
line-height: 1.5 !important;
}
&__text::before {
width: 28px;
height: 28px;
top: 14px;
}
&__twitter-btn {
border-radius: 4px;
font-size: $font__size-sm;
font-weight: $font__weight-heading;
height: 44px;
line-height: 45px !important;
margin-top: 1.1em !important;
margin-bottom: 10px !important;
padding: 0 1em;
&::before {
margin-right: 7px;
}
}
}
.wp-block-coblocks-author {
border-radius: 0;
&__name,
&__heading {
margin-bottom: 0;
}
&__heading {
color: $gray;
font-size: $font__size-xs;
}
&__biography {
font-size: $font__size-sm;
margin-bottom: 1em;
margin-top: 0.1em;
}
&__name {
font-family: $font__heading;
font-size: $font__size-md;
margin: 0.1em 0 0.6em;
}
.wp-block-button {
margin-top: 0;
}
}
.wp-block-coblocks-pricing-table-item {
&__title {
font-size: $font__size-sm;
margin-bottom: 0;
}
&__currency {
font-size: $font__size-sm;
position: relative;
}
&__price-wrapper {
align-items: center;
margin-bottom: 1.9em;
}
&__amount {
font-family: $font__heading;
}
&__features {
font-size: $font__size-sm;
}
}
/** === Classic === */
.wp-block.editor-block-list__block[data-type="core/freeform"] {
margin-bottom: $content__spacer + 22px !important;
margin-top: $content__spacer + 22px !important;
max-width: $content__width--less-padding;
.wp-block-freeform blockquote {
margin-left: 0;
}
}
/** === Columns === */
.wp-block[data-type="core/columns"] {
.wp-block-columns {
margin-bottom: -10px;
margin-top: -10px;
}
}