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

  1. If possible, replace the CSS class with a utility one, check common.scss and https://getbootstrap.com/docs/4.3/utilities/ for existing ones
  2. Double check if all the warning have been fixed by running yarn run stylelint-file ee/app/assets/stylesheets/pages/roadmap.scss
  3. In the MR, add screenshots of the affected areas before and after the changes, check the first MR as a guideline
  4. If there are a lot of changes, we recommend to break them into smaller MRs
  5. Double check the usage of each changed class both in CE and EE
  6. EE changes should either be backported into CE or moved into ee/ folder. You can read more about how to handle EE code here
  7. Label the MR with CSS cleanup
Assignee Loading
Time tracking Loading