Fix the following style-lint errors and warnings for `app/assets/stylesheets/pages/pipelines.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/pipelines.scss
68:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .btn-default" to have no more than 3 compound selectors selector-max-compound-selectors
72:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .btn.btn-retry:hover" to have no more than 3 compound selectors selector-max-compound-selectors
72:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .btn.btn-retry:focus" to have no more than 3 compound selectors selector-max-compound-selectors
78:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions svg path" to have no more than 3 compound selectors selector-max-compound-selectors
82:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .dropdown-menu" to have no more than 3 compound selectors selector-max-compound-selectors
87:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .dropdown-toggle" to have no more than 3 compound selectors selector-max-compound-selectors
87:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .dropdown-menu" to have no more than 3 compound selectors selector-max-compound-selectors
87:7 ⚠ ".dropdown-toggle, .dropdown-menu" and ".btn-default (app/assets/stylesheets/pages/pipelines.scss -68:7)" have the stylelint-gitlab/duplicate-selectors
same properties.
91:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
91:9 ⚠ Expected ".pipelines .ci-table .pipeline-actions .dropdown-toggle .fa" to have no more than 3 compound selectors selector-max-compound-selectors
91:9 ⚠ Expected ".pipelines .ci-table .pipeline-actions .dropdown-menu .fa" to have no more than 3 compound selectors selector-max-compound-selectors
97:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .btn-group.open .btn-default" to have no more than 3 compound selectors selector-max-compound-selectors
102:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .btn .text-center" to have no more than 3 compound selectors selector-max-compound-selectors
106:7 ⚠ Expected ".pipelines .ci-table .pipeline-actions .tooltip" to have no more than 3 compound selectors selector-max-compound-selectors
184:7 ⚠ Expected ".ci-table .branch-commit .label-container .badge" to have no more than 3 compound selectors selector-max-compound-selectors
292:5 ⚠ Expected ".stage-cell .stage-container button.has-tooltip + .tooltip" to have no more than 3 compound selectors selector-max-compound-selectors
297:5 ⚠ "a.has-tooltip" and ".tooltip (app/assets/stylesheets/pages/pipelines.scss -106:7)" have the same properties. stylelint-gitlab/duplicate-selectors
319:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
346:5 ⚠ Expected ".tab-pane .ci-table thead th" to have no more than 3 compound selectors selector-max-compound-selectors
487:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
505:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
509:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
513:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
513:9 ⚠ Expected ".pipeline-graph .stage-column:last-child:not(.has-downstream) .build .curve::before" to have no more than 3 compound selectors selector-max-compound-selectors
523:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
527:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
527:9 ⚠ Expected ".pipeline-graph .stage-column:first-child:not(.has-upstream) .build .curve::after" to have no more than 3 compound selectors selector-max-compound-selectors
578:7 ⚠ Expected ".pipeline-graph .build .ci-job-dropdown-container .dropdown-menu li button" to have no more than 3 compound selectors selector-max-compound-selectors
585:5 ⚠ Expected ".pipeline-graph .build .ci-job-dropdown-container:hover .build-content" to have no more than 3 compound selectors selector-max-compound-selectors
586:7 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
589:5 ⚠ Expected ".pipeline-graph .build .ci-status-icon svg" to have no more than 3 compound selectors selector-max-compound-selectors
686:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
698:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
794:4 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
835:3 ⚠ "&.dropdown-menu li button, &.dropdown-menu li a.ci-action-icon-container" and ".dropdown-menu li button stylelint-gitlab/duplicate-selectors
(app/assets/stylesheets/pages/pipelines.scss -578:7)" have the same properties.
859:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
859:9 ⚠ "svg" and "svg (app/assets/stylesheets/pages/pipelines.scss -686:9)" have the same properties. stylelint-gitlab/duplicate-selectors
890:5 ⚠ Expected ".big-pipeline-graph-dropdown-menu li:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item" to have no more than 3 compound selectors selector-max-compound-selectors
890:5 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item" to have no more than 3 compound selectors selector-max-compound-selectors
892:7 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
909:7 ⚠ Expected ".big-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-job-name-component" to have no more than 3 compound selectors selector-max-compound-selectors
909:7 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-job-name-component" to have no more than 3 compound selectors selector-max-compound-selectors
916:7 ⚠ Expected ".big-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-build-text" to have no more than 3 compound selectors selector-max-compound-selectors
916:7 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-build-text" to have no more than 3 compound selectors selector-max-compound-selectors
916:7 ⚠ Expected ".big-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-text" to have no more than 3 compound selectors selector-max-compound-selectors
916:7 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-text" to have no more than 3 compound selectors selector-max-compound-selectors
926:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
926:9 ⚠ Expected ".big-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-build-text::after" to have no more than 3 compound selectors selector-max-compound-selectors
926:9 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-build-text::after" to have no more than 3 compound selectors selector-max-compound-selectors
926:9 ⚠ Expected ".big-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-text::after" to have no more than 3 compound selectors selector-max-compound-selectors
926:9 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-text::after" to have no more than 3 compound selectors selector-max-compound-selectors
936:7 ⚠ Expected ".big-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-icon" to have no more than 3 compound selectors selector-max-compound-selectors
936:7 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-icon" to have no more than 3 compound selectors selector-max-compound-selectors
936:7 ⚠ ".ci-status-icon" and "li (app/assets/stylesheets/pages/pipelines.scss -886:3)" have the same properties. stylelint-gitlab/duplicate-selectors
937:9 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
941:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
941:9 ⚠ Expected ".big-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-icon > svg" to have no more than 3 compound selectors selector-max-compound-selectors
941:9 ⚠ Expected ".mini-pipeline-graph-dropdown-menu li .mini-pipeline-graph-dropdown-item .ci-status-icon > svg" to have no more than 3 compound selectors selector-max-compound-selectors
1054:3 ⚠ ".content-block" and ".pipeline-actions (app/assets/stylesheets/pages/pipelines.scss -336:1)" have the same properties. stylelint-gitlab/duplicate-selectors
1084:1 ⚠ Expected ".pipelines-container .top-area .nav-controls > .btn:last-child" to have no more than 3 compound selectors selector-max-compound-selectors
1093:1 ⚠ ".legend-all" and ".dropdown-toggle, .dropdown-menu (app/assets/stylesheets/pages/pipelines.scss -87:7)" have the stylelint-gitlab/duplicate-selectors
same properties.
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/pipelines.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 gitlab-ce~10109752