Fix the following style-lint errors and warnings for ` app/assets/stylesheets/pages/builds.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/builds.scss
108:7 ⚠ Expected ".build-page .top-bar .truncated-info .truncated-info-size" to have no more than 3 compound selectors selector-max-compound-selectors
112:7 ⚠ Expected ".build-page .top-bar .truncated-info .raw-link" to have no more than 3 compound selectors selector-max-compound-selectors
146:3 ⚠ ".top-bar.affix" and ".with-performance-bar & (app/assets/stylesheets/pages/builds.scss -68:5)" have the same properties. stylelint-gitlab/duplicate-selectors
236:5 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
281:7 ⚠ Expected ".right-sidebar.build-sidebar .retry-link .btn i" to have no more than 3 compound selectors selector-max-compound-selectors
332:5 ⚠ ".build-job" and ".build-trace-container (app/assets/stylesheets/pages/builds.scss -49:3)" have the same properties. stylelint-gitlab/duplicate-selectors
335:7 ⚠ Expected ".right-sidebar.build-sidebar .builds-container .build-job .icon-arrow-right" to have no more than 3 compound selectors selector-max-compound-selectors
354:7 ⚠ Expected ".right-sidebar.build-sidebar .builds-container .build-job .icon-retry" 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 app/assets/stylesheets/pages/builds.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