Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/layout.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/framework/layout.scss
4:3 ⚠ "&.touch .tooltip" has the same properties as our BS4 utility class ".d-none (176:1)" so please use that instead. stylelint-gitlab/utility-classes
24:7 ⚠ ".container-fluid, .container-limited" and "&.board-card-content (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/layout.scss stylelint-gitlab/duplicate-selectors
-18:3)" have the same properties.
117:7 ⚠ Expected ".alert-wrapper .alert-warning + .alert-warning + .alert-warning" to have no more than 3 compound selectors selector-max-compound-selectors
121:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
121:9 ⚠ Expected ".alert-wrapper .alert-warning + .alert-warning + .alert-warning + .alert-warning" to have no more than 3 compound selectors selector-max-compound-selectors
154:3 ⚠ Expected ".fullscreen-layout .alert-wrapper .flash-container .flash-alert:last-child" to have no more than 3 compound selectors selector-max-compound-selectors
154:3 ⚠ Expected ".fullscreen-layout .alert-wrapper .flash-container .flash-notice:last-child" 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/framework/layout.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