diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss index 3203d5b3b..f6c11ba01 100755 --- a/newspack-theme/sass/blocks/_blocks.scss +++ b/newspack-theme/sass/blocks/_blocks.scss @@ -368,18 +368,24 @@ p.has-background { padding-right: structure.$size__spacing-unit; } - .wp-block-column > * { - margin-bottom: 32px; - margin-top: 32px; - - &:first-child, - &:first-child .article-section-title, // when Load More is enabled. - &.accent-header + div.wpnbha { - margin-top: 0; + .wp-block-column { + &.is-style-rounded { + border-radius: 6px; } - &:last-child { - margin-bottom: 0; + > * { + margin-bottom: 32px; + margin-top: 32px; + + &:first-child, + &:first-child .article-section-title, // when Load More is enabled. + &.accent-header + div.wpnbha { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } } @@ -1397,6 +1403,14 @@ hr { } //! Font Sizes +.has-xx-small-font-size { + font-size: var( --newspack-theme-font-size-xxs ); +} + +.has-x-small-font-size { + font-size: var( --newspack-theme-font-size-xs ); +} + .has-small-font-size { font-size: var( --newspack-theme-font-size-sm ); } @@ -1410,7 +1424,11 @@ hr { } .has-huge-font-size, -.has-x-large-font-size { +.has-x-large-font-size, +.has-xx-large-font-size, +.has-xxx-large-font-size, +.has-xxxx-large-font-size, +.has-xxxxx-large-font-size { font-size: var( --newspack-theme-font-size-xl ); } @@ -1420,19 +1438,42 @@ hr { } .has-huge-font-size, - .has-x-large-font-size { + .has-x-large-font-size, + .has-xx-large-font-size { font-size: var( --newspack-theme-font-size-xxl ); } + + .has-xxx-large-font-size { + font-size:var( --newspack-theme-font-size-xxxl ); + } + + .has-xxxx-large-font-size { + font-size:var( --newspack-theme-font-size-xxxxl ); + } + + .has-xxxxx-large-font-size { + font-size:var( --newspack-theme-font-size-xxxxxl ); + } } $colors: ( + 'accent': var( --newspack-theme-color-primary ), 'primary': var( --newspack-theme-color-primary ), 'primary-variation': var( --newspack-theme-color-primary-variation ), + 'accent-2': var( --newspack-theme-color-secondary ), 'secondary': var( --newspack-theme-color-secondary ), 'secondary-variation': var( --newspack-theme-color-secondary-variation ), + 'contrast': #111, 'dark-gray': #111, + 'contrast-2': var( --newspack-theme-color-bg-dark ), + 'contrast-3': #767676, 'medium-gray': #767676, + 'base-5': var( --newspack-theme-color-text-light ), + 'base-4': var( --newspack-theme-color-border ), + 'base-3': var( --newspack-theme-color-border-light ), + 'base-2': #eee, 'light-gray': #eee, + 'base': #fff, 'white': #fff, ); diff --git a/newspack-theme/sass/elements/_lists.scss b/newspack-theme/sass/elements/_lists.scss index f12b0bb27..4a431f761 100755 --- a/newspack-theme/sass/elements/_lists.scss +++ b/newspack-theme/sass/elements/_lists.scss @@ -11,6 +11,27 @@ ul { ul { list-style-type: circle; } + + &.is-style-checked { + list-style-type: none; + padding-left: calc( 24px + 0.25em ); + + li { + position: relative; + + &::before { + background: currentcolor; + clip-path: polygon( 69.5833% 29.5834%, 43.3333% 65%, 29.5833% 54.5834%, 25.8333% 59.5834%, 44.5833% 73.75%, 74.5833% 33.3334%, 69.5833% 29.5834% ); + content: ''; + display: block; + height: 24px; + left: calc( -24px - 0.25em ); + position: absolute; + top: calc( ( 1em * var( --newspack-theme-font-line-height-body ) - 24px ) / 2 ); + width: 24px; + } + } + } } ol { diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss index bf468c529..317a3360d 100644 --- a/newspack-theme/sass/style-editor-base.scss +++ b/newspack-theme/sass/style-editor-base.scss @@ -142,6 +142,10 @@ figcaption, } .wp-block-column { + &.is-style-rounded { + border-radius: 6px; + } + figcaption { max-width: 100%; } @@ -920,6 +924,31 @@ ul.wp-block-archives, } } +/** === List === */ + +ul.wp-block-list { + &.is-style-checked { + list-style-type: none; + padding-left: calc( 24px + 0.25em ); + + li { + position: relative; + + &::before { + background: currentcolor; + clip-path: polygon( 69.5833% 29.5834%, 43.3333% 65%, 29.5833% 54.5834%, 25.8333% 59.5834%, 44.5833% 73.75%, 74.5833% 33.3334%, 69.5833% 29.5834% ); + content: ''; + display: block; + height: 24px; + left: calc( -24px - 0.25em ); + position: absolute; + top: calc( ( 1em * var( --newspack-theme-font-line-height-body ) - 24px ) / 2 ); + width: 24px; + } + } + } +} + /** === Jetpack Blocks === */ // Related Posts @@ -1417,100 +1446,48 @@ ul.wp-block-archives, /** === Custom Colors === */ -.has-primary-background-color, -.is-style-outline .wp-block-button__link.has-primary-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-primary-background-color { - background-color: var( --newspack-theme-color-primary ); -} - -.has-primary-variation-background-color, -.is-style-outline .wp-block-button__link.has-primary-variation-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-primary-variation-background-color { - background-color: var( --newspack-theme-color-primary-variation ); -} - -.has-secondary-background-color, -.is-style-outline .wp-block-button__link.has-secondary-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-secondary-background-color { - background-color: var( --newspack-theme-color-secondary ); -} - -.has-secondary-variation-background-color, -.is-style-outline .wp-block-button__link.has-secondary-variation-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-secondary-variation-background-color { - background-color: var( --newspack-theme-color-secondary-variation ); -} - -.has-dark-gray-background-color, -.is-style-outline .wp-block-button__link.has-dark-gray-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-dark-gray-background-color { - background-color: #111; -} -.has-medium-gray-background-color, -.is-style-outline .wp-block-button__link.has-medium-gray-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-medium-gray-background-color { - background-color: #767676; -} - -.has-light-gray-background-color, -.is-style-outline .wp-block-button__link.has-light-gray-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-light-gray-background-color { - background-color: #eee; -} - -.has-white-background-color, -.is-style-outline .wp-block-button__link.has-white-background-color, // legacy selector -.wp-block-button__link.is-style-outline.has-white-background-color { - background-color: #fff; -} - -.has-primary-color, -.is-style-outline .wp-block-button__link.has-primary-color, //legacy selector -.wp-block-button__link.is-style-outline.has-primary-color { - color: var( --newspack-theme-color-primary ); -} - -.has-primary-variation-color, -.is-style-outline .wp-block-button__link.has-primary-variation-color, //legacy selector -.wp-block-button__link.is-style-outline.has-primary-variation-color { - color: var( --newspack-theme-color-primary-variation ); -} - -.has-secondary-color, -.is-style-outline .wp-block-button__link.has-secondary-color, //legacy selector -.wp-block-button__link.is-style-outline.has-secondary-color { - color: var( --newspack-theme-color-secondary ); -} - -.has-secondary-variation-color, -.is-style-outline .wp-block-button__link.has-secondary-variation-color, //legacy selector -.wp-block-button__link.is-style-outline.has-secondary-variation-color { - color: var( --newspack-theme-color-secondary-variation ); -} - -.has-dark-gray-color, -.is-style-outline .wp-block-button__link.has-dark-gray-color, //legacy selector -.wp-block-button__link.is-style-outline.has-dark-gray-color { - color: #111; -} - -.has-medium-gray-color, -.is-style-outline .wp-block-button__link.has-medium-gray-color, //legacy selector -.wp-block-button__link.is-style-outline.has-medium-gray-color { - color: #767676; -} - -.has-light-gray-color, -.is-style-outline .wp-block-button__link.has-light-gray-color, //legacy selector -.wp-block-button__link.is-style-outline.has-light-gray-color { - color: #eee; -} - -.has-white-color, -.is-style-outline .wp-block-button__link.has-white-color, //legacy selector -.wp-block-button__link.is-style-outline.has-white-color { - color: #fff; +$colors: ( + 'accent': var( --newspack-theme-color-primary ), + 'primary': var( --newspack-theme-color-primary ), + 'primary-variation': var( --newspack-theme-color-primary-variation ), + 'accent-2': var( --newspack-theme-color-secondary ), + 'secondary': var( --newspack-theme-color-secondary ), + 'secondary-variation': var( --newspack-theme-color-secondary-variation ), + 'contrast': #111, + 'dark-gray': #111, + 'contrast-2': var( --newspack-theme-color-bg-dark ), + 'contrast-3': #767676, + 'medium-gray': #767676, + 'base-5': var( --newspack-theme-color-text-light ), + 'base-4': var( --newspack-theme-color-border ), + 'base-3': var( --newspack-theme-color-border-light ), + 'base-2': #eee, + 'light-gray': #eee, + 'base': #fff, + 'white': #fff, +); + +@each $name, $hex in $colors { + //! Custom background colors + .has-#{$name}-background-color, + .is-style-outline .wp-block-button__link.has-#{$name}-background-color, // legacy selector + .wp-block-button__link.is-style-outline.has-#{$name}-background-color { + background-color: $hex; + } + + //! Custom foreground colors + .has-#{$name}-color, + .is-style-outline .wp-block-button__link.has-#{$name}-color, //legacy selector + .wp-block-button__link.is-style-outline.has-#{$name}-color { + color: $hex; + } + + //! Custom border colors + .has-#{$name}-border-color, + .wp-block-pullquote.has-#{$name}-border-color { + border-color: $hex; + } } // Gradients