Unread notifications left border corners are not straight

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: Master
• Fix Version/s: 7.0.0 DXP FP30, 7.0.X EE, 7.0.4 CE GA5, 7.1.X, Master
• Component/s: User Notifications
• Labels:
  • liferay-digital-enterprise-70-sp5
  • liferay-fixpack-de-30-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Epic Link: Notification & Requests Improvements
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/50520
• QA Test Name:
  • dont-test-again

*Expected: *

*Actual: *

The problem is that border-top is already set for the element and setting border-left causes the corners to be shared between both borders. A way of fixing this would be to use a pseudoelement instead of a border like this:

.unread {
		.list-group-item-field:first-child {
			&:before {
				border-left: 6px solid #65B3F0;
				bottom: 0;
				content: "";
				display: block;
				left: 0;
				position: absolute;
				top: 0;
			}
		}
	}