Fix the following style-lint errors and warnings for `ee/app/assets/stylesheets/pages/boards.scss`

Problem

Fix the following style-lint errors and warnings for ee/app/assets/stylesheets/pages/boards.scss


  14:5  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item" to have no more than 3 compound selectors                                                     selector-max-compound-selectors
  18:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item:first-of-type" to have no more than 3 compound selectors                                       selector-max-compound-selectors
  22:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a" to have no more than 3 compound selectors                                                   selector-max-compound-selectors
  29:9  ⚠  Expected nesting depth to be no more than 3                                                                                                                                                 max-nesting-depth
  29:9  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a:focus" to have no more than 3 compound selectors                                             selector-max-compound-selectors
  29:9  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a.active" to have no more than 3 compound selectors                                            selector-max-compound-selectors
  34:9  ⚠  Expected nesting depth to be no more than 3                                                                                                                                                 max-nesting-depth
  34:9  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a.active" to have no more than 3 compound selectors                                            selector-max-compound-selectors
  43:5  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .issue-board-dropdown-content" to have no more than 3 compound selectors                                                 selector-max-compound-selectors
  50:5  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-labels" to have no more than 3 compound selectors                                                              selector-max-compound-selectors
  51:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-labels .dropdown-page-one .dropdown-content" to have no more than 3 compound selectors                         selector-max-compound-selectors
  55:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-labels .dropdown-page-two" to have no more than 3 compound selectors                                           selector-max-compound-selectors
  58:9  ⚠  Expected nesting depth to be no more than 3                                                                                                                                                 max-nesting-depth
  58:9  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-labels .dropdown-page-two .dropdown-content" to have no more than 3 compound selectors                         selector-max-compound-selectors
  65:5  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-assignees" to have no more than 3 compound selectors                                                           selector-max-compound-selectors
  66:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-assignees .dropdown-content" to have no more than 3 compound selectors                                         selector-max-compound-selectors
  71:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-assignees .dropdown-user" to have no more than 3 compound selectors                                            selector-max-compound-selectors
  76:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-assignees .dropdown-user-details div" to have no more than 3 compound selectors                                selector-max-compound-selectors
  82:7  ⚠  Expected ".dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .tab-pane-assignees .dropdown-loading" to have no more than 3 compound selectors                                         selector-max-compound-selectors
 107:3  ⚠  Expected ".boards-switcher .boards-selector-wrapper > .show.dropdown .dropdown-menu" to have no more than 3 compound selectors                                                              selector-max-compound-selectors
 112:5  ⚠  Expected ".boards-switcher .boards-selector-wrapper > .show.dropdown .dropdown-menu.dropdown-extended-height" to have no more than 3 compound selectors                                     selector-max-compound-selectors
 187:1  ⚠  ".board-inner-milestone-dropdown" and ".dropdown-page-two (ee/app/assets/stylesheets/pages/boards.scss -55:7)" have the same properties.   stylelint-gitlab/duplicate-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/boards.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