Fix the following style-lint errors and warnings for `ee/app/assets/stylesheets/pages/builds.scss`
Problem
Fix the following style-lint errors and warnings for ee/app/assets/stylesheets/pages/builds.scss
20:5 ⚠ ".dropdown" and ".top-bar (/Users/filipalacerda/Documents/git/gdk-ee/gitlab/ee/app/assets/stylesheets/pages/builds.scss -10:3)" have the same properties. stylelint-gitlab/duplicate-selectors
23:7 ⚠ Expected ".build-page-pod-logs .top-bar .dropdown > .dropdown-menu-toggle" to have no more than 3 compound selectors selector-max-compound-selectors
34:7 ⚠ Expected ".build-page-pod-logs .top-bar .dropdown > .dropdown-menu" to have no more than 3 compound selectors selector-max-compound-selectors
38:7 ⚠ Expected ".build-page-pod-logs .top-bar .dropdown .dropdown-toggle-text" to have no more than 3 compound selectors selector-max-compound-selectors
38:7 ⚠ ".dropdown-toggle-text" has the same properties as our BS4 utility class ".text-truncate (1853:1)" so please use that instead. stylelint-gitlab/utility-classes
53:7 ⚠ Expected ".build-page-pod-logs .top-bar .refresh-control .controllers-buttons" to have no more than 3 compound selectors selector-max-compound-selectors
54:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
54:9 ⚠ Expected ".build-page-pod-logs .top-bar .refresh-control .controllers-buttons .btn-refresh" to have no more than 3 compound selectors selector-max-compound-selectors
57:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
57:11 ⚠ Expected ".build-page-pod-logs .top-bar .refresh-control .controllers-buttons .btn-refresh svg" 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 ee/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