Fix the following style-lint errors and warnings for `ee/app/assets/stylesheets/pages/roadmap.scss`
Problem
Fix the following style-lint errors and warnings for ee/app/assets/stylesheets/pages/roadmap.scss
178:5 ⚠ Expected ".roadmap-timeline-section .timeline-header-item .item-sublabel .sublabel-value" to have no more than 3 compound selectors selector-max-compound-selectors
183:7 ⚠ Expected ".roadmap-timeline-section .timeline-header-item .item-sublabel .sublabel-value.label-dark" to have no more than 3 compound selectors selector-max-compound-selectors
187:7 ⚠ Expected ".roadmap-timeline-section .timeline-header-item .item-sublabel .sublabel-value.label-bold" to have no more than 3 compound selectors selector-max-compound-selectors
202:7 ⚠ Expected ".roadmap-timeline-section .timeline-header-item .item-sublabel .sublabel-value" to have no more than 3 compound selectors selector-max-compound-selectors
211:7 ⚠ Expected ".roadmap-timeline-section .timeline-header-item .item-sublabel .today-bar" to have no more than 3 compound selectors selector-max-compound-selectors
219:7 ⚠ Expected ".roadmap-timeline-section .timeline-header-item .item-sublabel .today-bar::before" to have no more than 3 compound selectors selector-max-compound-selectors
254:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
296:7 ⚠ Expected ".epics-list-section .epics-list-item .epic-details-cell .epic-title" to have no more than 3 compound selectors selector-max-compound-selectors
296:7 ⚠ Expected ".epics-list-section .epics-list-item .epic-details-cell .epic-group-timeframe" to have no more than 3 compound selectors selector-max-compound-selectors
301:7 ⚠ Expected ".epics-list-section .epics-list-item .epic-details-cell .epic-title" to have no more than 3 compound selectors selector-max-compound-selectors
306:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
306:9 ⚠ Expected ".epics-list-section .epics-list-item .epic-details-cell .epic-title .epic-url" to have no more than 3 compound selectors selector-max-compound-selectors
316:7 ⚠ Expected ".epics-list-section .epics-list-item .epic-details-cell .epic-group-timeframe" to have no more than 3 compound selectors selector-max-compound-selectors
324:7 ⚠ Expected ".epics-list-section .epics-list-item .epic-details-cell .epic-group:hover" to have no more than 3 compound selectors selector-max-compound-selectors
333:7 ⚠ Expected ".epics-list-section .epics-list-item .epic-timeline-cell .timeline-bar-wrapper" to have no more than 3 compound selectors selector-max-compound-selectors
337:7 ⚠ Expected ".epics-list-section .epics-list-item .epic-timeline-cell .timeline-bar" to have no more than 3 compound selectors selector-max-compound-selectors
346:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
346:9 ⚠ Expected ".epics-list-section .epics-list-item .epic-timeline-cell .timeline-bar:hover" to have no more than 3 compound selectors selector-max-compound-selectors
350:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
350:9 ⚠ Expected ".epics-list-section .epics-list-item .epic-timeline-cell .timeline-bar.start-date-undefined" to have no more than 3 compound selectors selector-max-compound-selectors
354:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
354:9 ⚠ Expected ".epics-list-section .epics-list-item .epic-timeline-cell .timeline-bar.end-date-undefined" to have no more than 3 compound selectors 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 ee/app/assets/stylesheets/pages/roadmap.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