Ugly border joins of system messages [#2095929]

A new look for system messages was proposed in https://groups.drupal.org/node/283223#Messages and was introduced in https://drupal.org/node/1986408.

However the current implementation does not match the original design and comes with a border join which is simple ugly.

While we should have a thicker block (border) on the left currently we have a ragged line instead becouse of the different border colors and the the way browsers render the joins of borders.

We could get a nice / clean look in two ways:

Change our mind on the expected look of messages and use the same color for all four sides of the border.
Adding some extra css markup to have what was originally designed.

Personally I vote to the second solution and do it if there is not something (important) against it.

Comment	File	Size	Author
#4	2095929-system-messages-border-4.patch	2.48 KB	longwave
#1	d8-messages--error-reworked.png	41.14 KB	thamas
#1	drupal-system-messages-border-fix-2095929-1.patch	2.48 KB	thamas
	d8-messages--error.png	42.91 KB	thamas

Comments

Comment #1

thamas

Hungarian

Hungary

commented 23 September 2013 at 15:36

Issue tags:

+frontend

Status	File	Size
new	drupal-system-messages-border-fix-2095929-1.patch	2.48 KB
new	d8-messages--error-reworked.png	41.14 KB

Here is a patch with a simple box-shadow trick. It is not perfect 'cause the border radius is applied to both sides of the shadow. But it is not so noticeable like the current implementation and needed just some additional lines of code. I feel I could live with it. ;)

If we want a "pixel-perfect" solution :) (without plus rounds) we have to use a :before pseudo-element with a bit more lines of css code.

Comment #2

lewisnyman

he/him

commented 23 September 2013 at 15:40

Issue tags:

+styleguide

Comment #3

lewisnyman

he/him

commented 23 September 2013 at 15:47

This looks a lot better. Nice catch.

+++ b/core/modules/system/css/system.theme.css
@@ -514,14 +514,14 @@ ul.tabs {
+  border-width: 1px 1px 1px 0px;  /* LTR */
...
+  border-width: 1px 0px 1px 1px;

We don't need to have 'px' units after 0. That's all I could find.