Bundled Themes: Update Twenty Twenty.
* Add a11y-friendly default text-colors when selecting a background-color.
* Remove margins for the group block when a background-color is set.
* Excluding pullquote block from width resize rules.
This brings Twenty Twenty in sync with GitHub. For a full list of changes since [46711], see ab5fa23...162edc0.
Props allancole, karmatosed.
See #48110, #48386, #48450, #48505.
Fixes #48557.
git-svn-id: https://develop.svn.wordpress.org/trunk@46713 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov
parent
14df1712fd
commit
732a358f61
@ -162,46 +162,61 @@ Inter variable font. Usage:
|
||||
|
||||
/* CUSTOM COLORS */
|
||||
|
||||
.has-accent-color {
|
||||
:root .has-accent-color {
|
||||
color: #cd2653;
|
||||
}
|
||||
|
||||
.has-accent-background-color {
|
||||
:root .has-accent-background-color {
|
||||
background-color: #cd2653;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-secondary-color {
|
||||
:root .has-primary-color {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:root .has-primary-background-color {
|
||||
background-color: #000;
|
||||
color: #f5efe0;
|
||||
}
|
||||
|
||||
:root .has-secondary-color {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
.has-secondary-background-color {
|
||||
:root .has-secondary-background-color {
|
||||
background-color: #6d6d6d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-subtle-background-color {
|
||||
:root .has-subtle-background-color {
|
||||
color: #dcd7ca;
|
||||
}
|
||||
|
||||
.has-subtle-background-background-color {
|
||||
:root .has-subtle-background-background-color {
|
||||
background-color: #dcd7ca;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.has-background-color {
|
||||
color: #6d6d6d;
|
||||
:root .has-background-color {
|
||||
color: #f5efe0;
|
||||
}
|
||||
|
||||
.has-background-background-color {
|
||||
background-color: #6d6d6d;
|
||||
:root .has-background-background-color {
|
||||
background-color: #f5efe0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* GENERAL COLORS */
|
||||
|
||||
.has-black-background-color {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-white-background-color {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.has-black-color {
|
||||
|
||||
@ -162,46 +162,61 @@ Inter variable font. Usage:
|
||||
|
||||
/* CUSTOM COLORS */
|
||||
|
||||
.has-accent-color {
|
||||
:root .has-accent-color {
|
||||
color: #cd2653;
|
||||
}
|
||||
|
||||
.has-accent-background-color {
|
||||
:root .has-accent-background-color {
|
||||
background-color: #cd2653;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-secondary-color {
|
||||
:root .has-primary-color {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:root .has-primary-background-color {
|
||||
background-color: #000;
|
||||
color: #f5efe0;
|
||||
}
|
||||
|
||||
:root .has-secondary-color {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
.has-secondary-background-color {
|
||||
:root .has-secondary-background-color {
|
||||
background-color: #6d6d6d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-subtle-background-color {
|
||||
:root .has-subtle-background-color {
|
||||
color: #dcd7ca;
|
||||
}
|
||||
|
||||
.has-subtle-background-background-color {
|
||||
:root .has-subtle-background-background-color {
|
||||
background-color: #dcd7ca;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.has-background-color {
|
||||
color: #6d6d6d;
|
||||
:root .has-background-color {
|
||||
color: #f5efe0;
|
||||
}
|
||||
|
||||
.has-background-background-color {
|
||||
background-color: #6d6d6d;
|
||||
:root .has-background-background-color {
|
||||
background-color: #f5efe0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* GENERAL COLORS */
|
||||
|
||||
.has-black-background-color {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.has-white-background-color {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.has-black-color {
|
||||
|
||||
@ -2648,6 +2648,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-accent-background-color {
|
||||
background-color: #cd2653;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root .has-primary-color {
|
||||
@ -2656,6 +2657,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-primary-background-color {
|
||||
background-color: #000;
|
||||
color: #f5efe0;
|
||||
}
|
||||
|
||||
:root .has-secondary-color {
|
||||
@ -2664,6 +2666,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-secondary-background-color {
|
||||
background-color: #6d6d6d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root .has-subtle-background-color {
|
||||
@ -2672,6 +2675,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-subtle-background-background-color {
|
||||
background-color: #dcd7ca;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:root .has-background-color {
|
||||
@ -2680,6 +2684,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-background-background-color {
|
||||
background-color: #f5efe0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
@ -3048,6 +3053,8 @@ figure.wp-block-gallery.alignfull {
|
||||
|
||||
.wp-block-group.has-background {
|
||||
padding: 2rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wp-block-group__inner-container {
|
||||
@ -4481,7 +4488,7 @@ a.to-the-top > * {
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft:not(.wp-block-pullquote),
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
|
||||
margin-left: calc(( 100vw - 58rem - 8rem ) / -2);
|
||||
@ -4499,7 +4506,7 @@ a.to-the-top > * {
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright:not(.wp-block-pullquote),
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
|
||||
margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
|
||||
@ -5021,6 +5028,8 @@ a.to-the-top > * {
|
||||
|
||||
.wp-block-group.has-background {
|
||||
padding: 4rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* BLOCK: MEDIA AND TEXT */
|
||||
@ -5130,8 +5139,8 @@ a.to-the-top > * {
|
||||
margin: 0.3rem 0 2rem 2rem;
|
||||
}
|
||||
|
||||
.entry-content > .alignwide,
|
||||
.entry-content > .alignfull {
|
||||
.entry-content > .alignwide:not(.wp-block-group),
|
||||
.entry-content > .alignfull:not(.wp-block-group) {
|
||||
margin-bottom: 6rem;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
@ -5621,6 +5630,8 @@ a.to-the-top > * {
|
||||
.entry-content > .wp-block-group.alignwide.has-background,
|
||||
.entry-content > .wp-block-group.alignfull.has-background {
|
||||
padding: 8rem 4rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* BLOCK: SEPARATOR */
|
||||
@ -5688,8 +5699,8 @@ a.to-the-top > * {
|
||||
max-width: calc((100% - 58rem) / 2 - 4rem);
|
||||
}
|
||||
|
||||
.entry-content > .alignwide,
|
||||
.entry-content > .alignfull {
|
||||
.entry-content > .alignwide:not(.wp-block-group),
|
||||
.entry-content > .alignfull:not(.wp-block-group) {
|
||||
margin-bottom: 8rem;
|
||||
margin-top: 8rem;
|
||||
}
|
||||
@ -5841,6 +5852,8 @@ a.to-the-top > * {
|
||||
.entry-content > .wp-block-group.alignwide.has-background,
|
||||
.entry-content > .wp-block-group.alignfull.has-background {
|
||||
padding: 8rem 6rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* BLOCK: PULLQUOTE */
|
||||
@ -5991,22 +6004,8 @@ a.to-the-top > * {
|
||||
|
||||
/* BLOCK: PULLQUOTE */
|
||||
|
||||
.wp-block-pullquote.alignleft::before,
|
||||
.wp-block-pullquote.alignright::before {
|
||||
position: absolute;
|
||||
top: -0.4rem;
|
||||
}
|
||||
|
||||
.wp-block-pullquote.is-style-solid-color.alignleft::before,
|
||||
.wp-block-pullquote.is-style-solid-color.alignright::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-block-pullquote.alignleft::before {
|
||||
left: calc(100% + 1.5rem);
|
||||
}
|
||||
|
||||
.wp-block-pullquote.alignright::before {
|
||||
right: calc(100% + 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2660,6 +2660,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-accent-background-color {
|
||||
background-color: #cd2653;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root .has-primary-color {
|
||||
@ -2668,6 +2669,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-primary-background-color {
|
||||
background-color: #000;
|
||||
color: #f5efe0;
|
||||
}
|
||||
|
||||
:root .has-secondary-color {
|
||||
@ -2676,6 +2678,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-secondary-background-color {
|
||||
background-color: #6d6d6d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root .has-subtle-background-color {
|
||||
@ -2684,6 +2687,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-subtle-background-background-color {
|
||||
background-color: #dcd7ca;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:root .has-background-color {
|
||||
@ -2692,6 +2696,7 @@ h2.entry-title {
|
||||
|
||||
:root .has-background-background-color {
|
||||
background-color: #f5efe0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
@ -3062,6 +3067,8 @@ figure.wp-block-gallery.alignfull {
|
||||
|
||||
.wp-block-group.has-background {
|
||||
padding: 2rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wp-block-group__inner-container {
|
||||
@ -4507,7 +4514,7 @@ a.to-the-top > * {
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft:not(.wp-block-pullquote),
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
|
||||
|
||||
@ -4529,7 +4536,7 @@ a.to-the-top > * {
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
|
||||
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright:not(.wp-block-pullquote),
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
|
||||
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
|
||||
|
||||
@ -5055,6 +5062,8 @@ a.to-the-top > * {
|
||||
|
||||
.wp-block-group.has-background {
|
||||
padding: 4rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* BLOCK: MEDIA AND TEXT */
|
||||
@ -5168,8 +5177,8 @@ a.to-the-top > * {
|
||||
margin: 0.3rem 0 2rem 2rem;
|
||||
}
|
||||
|
||||
.entry-content > .alignwide,
|
||||
.entry-content > .alignfull {
|
||||
.entry-content > .alignwide:not(.wp-block-group),
|
||||
.entry-content > .alignfull:not(.wp-block-group) {
|
||||
margin-bottom: 6rem;
|
||||
margin-top: 6rem;
|
||||
}
|
||||
@ -5659,6 +5668,8 @@ a.to-the-top > * {
|
||||
.entry-content > .wp-block-group.alignwide.has-background,
|
||||
.entry-content > .wp-block-group.alignfull.has-background {
|
||||
padding: 8rem 4rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* BLOCK: SEPARATOR */
|
||||
@ -5726,8 +5737,8 @@ a.to-the-top > * {
|
||||
max-width: calc((100% - 58rem) / 2 - 4rem);
|
||||
}
|
||||
|
||||
.entry-content > .alignwide,
|
||||
.entry-content > .alignfull {
|
||||
.entry-content > .alignwide:not(.wp-block-group),
|
||||
.entry-content > .alignfull:not(.wp-block-group) {
|
||||
margin-bottom: 8rem;
|
||||
margin-top: 8rem;
|
||||
}
|
||||
@ -5879,6 +5890,8 @@ a.to-the-top > * {
|
||||
.entry-content > .wp-block-group.alignwide.has-background,
|
||||
.entry-content > .wp-block-group.alignfull.has-background {
|
||||
padding: 8rem 6rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* BLOCK: PULLQUOTE */
|
||||
@ -6037,22 +6050,8 @@ a.to-the-top > * {
|
||||
|
||||
/* BLOCK: PULLQUOTE */
|
||||
|
||||
.wp-block-pullquote.alignleft::before,
|
||||
.wp-block-pullquote.alignright::before {
|
||||
position: absolute;
|
||||
top: -0.4rem;
|
||||
}
|
||||
|
||||
.wp-block-pullquote.is-style-solid-color.alignleft::before,
|
||||
.wp-block-pullquote.is-style-solid-color.alignright::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-block-pullquote.alignleft::before {
|
||||
right: calc(100% + 1.5rem);
|
||||
}
|
||||
|
||||
.wp-block-pullquote.alignright::before {
|
||||
left: calc(100% + 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user