Fix the following style-lint errors and warnings for `app/assets/stylesheets/pages/milestone.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/milestone.scss
34:7 ⚠ Expected ".milestones .milestone .milestone-progress a" to have no more than 3 compound selectors selector-max-compound-selectors
61:5 ⚠ Expected ".milestone-content .issuable-row span a" to have no more than 3 compound selectors selector-max-compound-selectors
99:7 ⚠ Expected ".milestone-sidebar .milestone-progress .sidebar-collapsed-icon .progress" to have no more than 3 compound selectors selector-max-compound-selectors
148:1 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
238:3 ⚠ ".popover-body, .popover-content" and ".popover (app/assets/stylesheets/pages/milestone.scss -234:3)" have the same stylelint-gitlab/duplicate-selectors
properties. selector-max-compound-selectors
What to do
- If possible, replace the CSS class with a utility one, check common.scss and https://getbootstrap.com/docs/4.3/utilities/ for existing ones
- Double check if all the warning have been fixed by running
yarn run stylelint-file app/assets/stylesheets/pages/milestone.scss - In the MR, add screenshots of the affected areas before and after the changes, check the first MR as a guideline
- If there are a lot of changes, we recommend to break them into smaller MRs
- Double check the usage of each changed class both in CE and EE
- EE changes should either be backported into CE or moved into
ee/folder. You can read more about how to handle EE code here - Label the MR with CSS cleanup