cf-notifications: Target only notification icon - Githubissues

cfpb / capital-framework

The Consumer Financial Protection Bureau's user interface framework

https://cfpb.github.io/capital-framework/

Creative Commons Zero v1.0 Universal

54 stars 29 forks source link

cf-notifications: Target only notification icon #921

Closed anselmbradford closed 5 years ago

anselmbradford commented 5 years ago

Notifications that contain an external link are getting an extra SVG icon in the notification that is being absolutely positioned. See, for instance, https://www.consumerfinance.gov/about-us/blog/fall-2015-rulemaking-agenda/

Screen Shot 2019-05-17 at 11 31 00 AM

This PR fixes that by targeting the SVG directly inside of the notification container, which is the notification's icon only.

Changes

Target notification icon directly for positioning.

Testing

Pull branch down and run cd docs && gulp && bundle exec jekyll serve
Visit http://localhost:4000/components/cf-notifications/ and check the notification with an external link.

Screenshots

Before:

Screen Shot 2019-05-17 at 11 23 57 AM

After:

Screen Shot 2019-05-17 at 11 27 07 AM