Feature pointer problems in RTL and in color schemes

[nacin]

• RTL issue: The arrow:before needs something like transform: rotate(180deg).

• Color scheme issue: he outer border is the default blue when it needs to be some kind of color scheme color.

• RTL placement issue: Seems my themes.php pointer from #27777. Looks off-center. It's not pointing at the correct edge. This could be an issue with my logic in [28090], but let's try to deal with it here.

[nacin]

Screenshot uploaded demonstrating all three issues.

[nacin]

Asked ryelle to look into this, but if anyone is able to help, please do.

[SergeyBiryukov]

I also see an issue with Themes screen layout in RTL in Firefox: 27778.themes-screen-layout.png​.

[ryelle]

27778.diff​ adds the border color to _admin.scss, so each color scheme defines that border color.

I think the pointer issue is something being flipped when it shouldn't be in wp-pointer.css, I can look at it later tonight or tomorrow if no one else has gotten to it.

[SergeyBiryukov]

Replying to SergeyBiryukov:

I also see an issue with Themes screen layout in RTL in Firefox: 27778.themes-screen-layout.png​.

Moved to a separate ticket: #27779.

[SergeyBiryukov]

27778.2.diff​ fixes the arrow positioning for me (but not the pointer positioning).

[nacin]

In 28098:

Fix feature pointer border when using a color scheme.

props ryelle.
see #27778.

[nacin]

I don't really care about pointer positioning, as it's not off by much. Let's just resolve he pointer styling issue.

At least on chrome in LTR, margin-left: -14px; for .wp-pointer-left .wp-pointer-arrow:before seems to break it.

[ocean90]

27778.3.diff​ includes the CSS changes by SergeyBiryukov from 27778.2.diff​. For the RTL positioning I simply set my to right-13px. That makes it look the same as in LTR.
I also changed the align value for the customize.php selector. It looks a bit off if the pointer links to the top edge. If it was by design, we can revert this change.

[nacin]

For whatever reason it was pointing at the bottom edge for me. Your patch seems to work now. I was probably just tired.

The Dismiss x-it is off by a pixel, so handling that too.

Thanks everyone!

[nacin]

In 28107:

Fix feature pointer RTL placement.

props SergeyBiryukov, ocean90.
fixes #27778.

[georgestephanis]

Replying to nacin:

I don't really care about pointer positioning, as it's not off by much. Let's just resolve he pointer styling issue.

At least on chrome in LTR, margin-left: -14px; for .wp-pointer-left .wp-pointer-arrow:before seems to break it.

It looks like [28107] actually broke .wp-pointer-right for normal LTR --

If I switch it back to 14px, it looks correct. Have not tested it against RTL, though, merely speaking for pointer-right in LTR.

@nacin -- Would you prefer to reopen, or should I make a new ticket?

[nacin]

This ticket was closed on a completed milestone.
If you have a bug or enhancement to report, please open a new ticket. Be sure to mention this ticket, #27778.