Skip to content
This repository has been archived by the owner on Dec 1, 2019. It is now read-only.

More alignment adjustments #1009

Merged
merged 10 commits into from
Nov 12, 2019
Merged

More alignment adjustments #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
58d239c
Fix full-width template issue at 1280px
andersnoren Nov 12, 2019
c474f33
Merge branch 'master' of https://github.com/WordPress/twentytwenty in…
andersnoren Nov 12, 2019
5ceaa01
Combined double selectors for .read-more-button-wrap
andersnoren Nov 12, 2019
7ddfe11
Fixes to alignleft/alignright within groups
andersnoren Nov 12, 2019
00bbfc7
lint: add space before comment
pattonwebz Nov 12, 2019
a8d5c49
Alignment adjustments
andersnoren Nov 12, 2019
b90a502
Alignment adjustments RTL
andersnoren Nov 12, 2019
2c5c2ae
Merge branch 'fix/small-fire-fixes' of https://github.com/andersnoren…
andersnoren Nov 12, 2019
91577ec
Merge branch 'master' of https://github.com/WordPress/twentytwenty in…
andersnoren Nov 12, 2019
119d2c4
Fixed prev
andersnoren Nov 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 85 additions & 24 deletions style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2268,9 +2268,9 @@ body.template-full-width [class*="wp-block"].alignwide [class*="__inner-containe
}

body.template-full-width .entry-content > .alignleft,
body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
body.template-full-width [class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .alignleft,
body.template-full-width [class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > p .alignleft,
body.template-full-width [class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignleft {
margin-left: 2rem;
position: static;
}
Expand All @@ -2284,9 +2284,9 @@ body.template-full-width [class*="wp-block"].alignwide [class*="__inner-containe
}

body.template-full-width .entry-content > .alignright,
body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
body.template-full-width [class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .alignright,
body.template-full-width [class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > p .alignright,
body.template-full-width [class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignright {
margin-right: 2rem;
position: static;
}
Expand Down Expand Up @@ -3564,15 +3564,15 @@ figure.wp-block-table.is-style-stripes {
margin: 0.3rem 2rem 2rem 2rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignleft {
margin-left: 2rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignright {
margin-right: 2rem;
}

Expand Down Expand Up @@ -5216,15 +5216,15 @@ a.to-the-top > * {
width: calc(100vw - 8rem);
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignleft {
margin-left: 4rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignright {
margin-right: 4rem;
}

Expand Down Expand Up @@ -5712,6 +5712,16 @@ a.to-the-top > * {
margin-top: 0;
}

/* BLOCK: IMAGE */

.wp-block-image .alignleft {
margin-right: 0;
}

.wp-block-image .alignright {
margin-left: 0;
}

/* BLOCK: SEPARATOR */

hr.wp-block-separator {
Expand All @@ -5726,8 +5736,8 @@ a.to-the-top > * {
.entry-content > p .alignleft,
.entry-content > .wp-block-image .alignleft {
position: absolute;
right: calc((100vw - 58rem) / 2 + 58rem);
max-width: calc((100% - 58rem) / 2 - 4rem);
right: calc((100vw - 58rem) / 2 + 58rem + 2rem);
max-width: calc((100% - 58rem) / 2 - 6rem);
}

[class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft,
Expand All @@ -5749,13 +5759,25 @@ a.to-the-top > * {
max-width: calc((100% - 58rem) / 2 - 4rem);
}

[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignleft {
right: calc((100% - 58rem) / 2 + 58rem);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it this block that changed the pullquotes outside of groups?


[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
margin-left: 4rem;
}

.entry-content > .alignright,
.entry-content > p .alignright,
.entry-content > .wp-block-image .alignright,
[class*="__inner-container"] > .alignright {
position: absolute;
left: calc((100vw - 58rem) / 2 + 58rem);
max-width: calc((100% - 58rem) / 2 - 4rem);
left: calc((100vw - 58rem) / 2 + 58rem + 2rem);
max-width: calc((100% - 58rem) / 2 - 6rem);
}

[class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright,
Expand All @@ -5777,6 +5799,18 @@ a.to-the-top > * {
max-width: calc((100% - 58rem) / 2 - 4rem);
}

[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignright {
left: calc((100% - 58rem) / 2 + 58rem + 4rem);
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
margin-right: 4rem;
}

.entry-content > .alignwide:not(.wp-block-group.has-background),
.entry-content > .alignfull:not(.wp-block-group.has-background) {
margin-bottom: 8rem;
Expand Down Expand Up @@ -5955,6 +5989,18 @@ a.to-the-top > * {
margin-top: 10rem;
}

[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignleft {
right: calc((100% - 58rem) / 2 + 58rem - 2rem);
}

[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignwide.has-background [class*="__inner-container"] > .wp-block-image .alignright {
left: calc((100% - 58rem) / 2 + 58rem + 6rem);
}

/* Comments ------------------------------ */

.comment-reply-title {
Expand Down Expand Up @@ -6069,15 +6115,15 @@ a.to-the-top > * {
.entry-content > .alignleft,
.entry-content > p .alignleft,
.entry-content > .wp-block-image .alignleft {
right: calc((100vw - 58rem) / 2 + 58rem + 4rem);
margin-left: -31rem;
max-width: 29rem;
}

.entry-content > .alignright,
.entry-content > p .alignright,
.entry-content > .wp-block-image .alignright {
left: calc((100vw - 58rem) / 2 + 58rem + 4rem);
margin-right: -31rem;
max-width: 29rem;
}

.entry-content > .alignwide {
Expand All @@ -6090,6 +6136,21 @@ a.to-the-top > * {
width: 100%;
}

.entry-content > .alignleft,
.entry-content > p .alignleft,
.entry-content > .wp-block-image .alignleft,
.entry-content > .alignright,
.entry-content > p .alignright,
.entry-content > .wp-block-image .alignright,
[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignwide:not(.has-background) [class*="__inner-container"] > .wp-block-image .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
max-width: 29rem;
}

/* Template: Full Width ------------------ */

body.template-full-width .alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
Expand Down
Loading