Changeset 49728 for branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss

Timestamp:

12/01/2020 07:25:43 PM (6 years ago)

Author:

desrosj

Message:

Twenty Twenty-One: Sync the latest changes for 5.6 RC2.

This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.

For a full list of changes since [49633], see ​https://github.com/WordPress/twentytwentyone/compare/1d5a895...53acd9b.

Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
Reviewed by desrosj, SergeyBiryukov.
Merges [49726] to the 5.6 branch.
Fixes #51526.

Location:

branches/5.6

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss (modified) (4 diffs)

branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss

@@ -20 +20 @@
                 font-size: var(--quote--font-size);
                 line-height: var(--quote--line-height);
-                position: absolute;
                 left: calc(-0.5 * var(--global--spacing-horizontal));
         }
@@ -29 +28 @@
                 font-style: var(--quote--font-style-cite);
 
-                .has-background:not(.has-background-background-color) &,
-                [class*="background-color"]:not(.has-background-background-color) &,
-                [style*="background-color"]:not(.has-background-background-color) &,
+                .has-background &,
+                [class*="background-color"] &,
+                [style*="background-color"] &,
                 .wp-block-cover[style*="background-image"] & {
                         color: currentColor;
@@ -42 +41 @@
                 border-right: none;
 
+                // Hide the left aligned quote.
                 &:before {
+                        display: none;
+                }
+
+                // Align the quote left of the text.
+                p:before {
                         content: "\201D";
-                        left: initial;
-                        right: calc(-0.5 * var(--global--spacing-horizontal));
+                        font-size: var(--quote--font-size);
+                        font-weight: normal;
+                        line-height: var(--quote--line-height);
+                        margin-right: 5px;
                 }
         }
@@ -79 +86 @@
                 &.has-text-align-right {
 
+                        // Hide the left aligned quote.
                         &:before {
-                                left: initial;
-                                right: calc(-1 * var(--global--spacing-horizontal));
+                                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;
                         }
                 }