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.

d8-messages--error.png

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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

thamas’s picture

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.

LewisNyman’s picture

Issue tags: +styleguide
LewisNyman’s picture

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.

longwave’s picture

Status: Active » Needs review
FileSize
2.48 KB

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

LewisNyman’s picture

Status: Needs review » Reviewed & tested by the community

Fantastic

thamas’s picture

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

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Committed and pushed to 8.x. Thanks!

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