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.

Only local images are allowed.

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:

  1. Change our mind on the expected look of messages and use the same color for all four sides of the border.
  2. 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.

Files: 
CommentFileSizeAuthor
#4 2095929-system-messages-border-4.patch2.48 KBlongwave
PASSED: [[SimpleTest]]: [MySQL] 58,748 pass(es).
[ View ]
#1 d8-messages--error-reworked.png41.14 KBthamas
#1 drupal-system-messages-border-fix-2095929-1.patch2.48 KBthamas
PASSED: [[SimpleTest]]: [MySQL] 58,946 pass(es).
[ View ]
d8-messages--error.png42.91 KBthamas

Comments

Issue tags:+frontend
StatusFileSize
new2.48 KB
PASSED: [[SimpleTest]]: [MySQL] 58,946 pass(es).
[ View ]
new41.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. ;)

d8-messages--error-reworked.png

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.

Issue tags:+styleguide

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.

Status:Active» Needs review
StatusFileSize
new2.48 KB
PASSED: [[SimpleTest]]: [MySQL] 58,748 pass(es).
[ View ]

Looks better to me too. Attached patch changes 0px to 0 as suggested.

Status:Needs review» Reviewed & tested by the community

Fantastic

Thanks for the review and the correction! I should pay attention to what I do… :)

Status:Reviewed & tested by the community» Fixed

Committed and pushed to 8.x. Thanks!

Automatically closed -- issue fixed for 2 weeks with no activity.