Manually add GlLabel styles to notify enhanced stylesheet
What does this MR do and why?
Add GlLabel
styles manually to notify_enhanced.scss
:
Steps
- Generate stylesheets
yarn run build:css
- Copy output of
gl-label
styles from/app/assets/builds/notify_enhanced.css
toapp/assets/stylesheets/notify_enhanced.scss
- Update to remove redundant styles:
- Remove
@media(forced-colors: active)
styles to resolve border in email issue - Remove
:focus
/:hover
/:active
styles as these won't be inlined - Remove
.gl-label-close
styles as the close button shouldn't render in email - Remove
.gl-label-tooltip-title
styles - Remove duplicate
display
property on.gl-label .gl-label-text, .gl-label .gl-label-text-scoped
- Remove
- Update colors:
- Update
#1f1e24
to$gray-950
- Update
#fff
to$white
- Update
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Before | After |
---|---|
gl-label-before.css | gl-label-after.scss |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.