Fix the following style-lint errors and warnings for ` app/assets/stylesheets/pages/groups.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/groups.scss
5:1 ⚠ Expected ".dashboard .side .card .card-header .input-group" to have no more than 3 compound selectors selector-max-compound-selectors
6:3 ⚠ Expected ".dashboard .side .card .card-header .input-group .form-control" to have no more than 3 compound selectors selector-max-compound-selectors
51:5 ⚠ Expected ".group-nav-container .nav-controls .dropdown .dropdown-toggle" to have no more than 3 compound selectors selector-max-compound-selectors
63:5 ⚠ Expected ".group-nav-container .nav-controls .dropdown .dropdown-toggle" to have no more than 3 compound selectors selector-max-compound-selectors
72:5 ⚠ Expected ".group-nav-container .nav-controls .dropdown .dropdown-toggle .fa-chevron-down" to have no more than 3 compound selectors selector-max-compound-selectors
88:7 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
102:7 ⚠ Expected ".home-panel-buttons .new-project-subgroup .dropdown-toggle .dropdown-btn-icon" to have no more than 3 compound selectors selector-max-compound-selectors
118:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
118:9 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider).droplab-item-selected .icon-container" to have no more than 3 compound selectors selector-max-compound-selectors
119:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
119:11 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider).droplab-item-selected .icon-container .list-item-checkmark" to have no more than 3 compound selectors selector-max-compound-selectors
125:7 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .menu-item" to have no more than 3 compound selectors selector-max-compound-selectors
128:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
128:9 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .menu-item:hover" to have no more than 3 compound selectors selector-max-compound-selectors
134:7 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .icon-container" to have no more than 3 compound selectors selector-max-compound-selectors
138:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
138:9 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .icon-container .list-item-checkmark" to have no more than 3 compound selectors selector-max-compound-selectors
143:7 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .description" to have no more than 3 compound selectors selector-max-compound-selectors
146:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
146:9 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .description strong" to have no more than 3 compound selectors selector-max-compound-selectors
156:9 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .dropdown-primary" to have no more than 3 compound selectors selector-max-compound-selectors
160:9 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .dropdown-toggle" to have no more than 3 compound selectors selector-max-compound-selectors
164:9 ⚠ Expected ".home-panel-buttons .new-project-subgroup li:not(.divider) .dropdown-menu" to have no more than 3 compound selectors selector-max-compound-selectors
181:3 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
185:3 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
303:5 ⚠ Expected ".group-list-tree .avatar-container.content-loading > a .avatar" to have no more than 3 compound selectors selector-max-compound-selectors
312:7 ⚠ Expected ".group-list-tree .avatar-container.content-loading > a .avatar" to have no more than 3 compound selectors selector-max-compound-selectors
315:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
315:9 ⚠ Expected ".group-list-tree .avatar-container.content-loading > a .avatar.identicon" to have no more than 3 compound selectors selector-max-compound-selectors
386:5 ⚠ ".group-row" and ".avatar-container.content-loading (app/assets/stylesheets/pages/groups.scss -300:3)" have the same stylelint-gitlab/duplicate-selectors
properties.
413:3 ⚠ ".group-row" and ".inner-content (app/assets/stylesheets/pages/groups.scss -241:3)" have the same properties. stylelint-gitlab/duplicate-selectors
416:5 ⚠ "&.has-children" and ".pipeline-quota (app/assets/stylesheets/pages/groups.scss -215:3)" have the same properties. stylelint-gitlab/duplicate-selectors
441:7 ⚠ Expected ".group-list-tree .group-row-contents .avatar-container > a" to have no more than 3 compound selectors selector-max-compound-selectors
453:7 ⚠ Expected ".group-list-tree .group-row-contents .description p" to have no more than 3 compound selectors selector-max-compound-selectors
466:7 ⚠ Expected ".group-list-tree .group-row-contents .stats > span" to have no more than 3 compound selectors selector-max-compound-selectors
473:7 ⚠ Expected ".group-list-tree .group-row-contents .stats > span:last-child" to have no more than 3 compound selectors selector-max-compound-selectors
477:7 ⚠ Expected ".group-list-tree .group-row-contents .stats .stat-value" to have no more than 3 compound selectors selector-max-compound-selectors
482:5 ⚠ ".controls" and ".avatar-container (app/assets/stylesheets/pages/groups.scss -438:5)" have the same properties. stylelint-gitlab/duplicate-selectors
485:7 ⚠ Expected ".group-list-tree .group-row-contents .controls > .btn" to have no more than 3 compound selectors selector-max-compound-selectors
500:5 ⚠ Expected ".group-list-tree .project-row-contents .stats > span:first-child" to have no more than 3 compound selectors selector-max-compound-selectors
504:5 ⚠ Expected ".group-list-tree .project-row-contents .stats .item-visibility" to have no more than 3 compound selectors selector-max-compound-selectors
508:5 ⚠ Expected ".group-list-tree .project-row-contents .stats .last-updated" to have no more than 3 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/groups.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