Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/avatar.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/framework/avatar.scss
34:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
50:5 ⚠ "&.s24" and "&.s16 (app/assets/stylesheets/framework/avatar.scss -49:5)" have the same properties. stylelint-gitlab/duplicate-selectors
134:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
163:3 ⚠ "&.s16" and ".rect-avatar (app/assets/stylesheets/framework/avatar.scss -161:1)" have the same properties. stylelint-gitlab/duplicate-selectors
164:3 ⚠ "&.s18" and "&.s16 (app/assets/stylesheets/framework/avatar.scss -163:3)" have the same properties. stylelint-gitlab/duplicate-selectors
165:3 ⚠ "&.s19" and "&.s18 (app/assets/stylesheets/framework/avatar.scss -164:3)" have the same properties. stylelint-gitlab/duplicate-selectors
166:3 ⚠ "&.s20" and "&.s19 (app/assets/stylesheets/framework/avatar.scss -165:3)" have the same properties. stylelint-gitlab/duplicate-selectors
168:3 ⚠ "&.s26" and "&.s24 (app/assets/stylesheets/framework/avatar.scss -167:3)" have the same properties. stylelint-gitlab/duplicate-selectors
169:3 ⚠ "&.s32" and "&.s26 (app/assets/stylesheets/framework/avatar.scss -168:3)" have the same properties. stylelint-gitlab/duplicate-selectors
170:3 ⚠ "&.s36" and "&.s32 (app/assets/stylesheets/framework/avatar.scss -169:3)" have the same properties. stylelint-gitlab/duplicate-selectors
171:3 ⚠ "&.s40" and "&.s36 (app/assets/stylesheets/framework/avatar.scss -170:3)" have the same properties. stylelint-gitlab/duplicate-selectors
172:3 ⚠ "&.s46" and "&.s40 (app/assets/stylesheets/framework/avatar.scss -171:3)" have the same properties. stylelint-gitlab/duplicate-selectors
174:3 ⚠ "&.s60" and "&.s48 (app/assets/stylesheets/framework/avatar.scss -173:3)" have the same properties. stylelint-gitlab/duplicate-selectors
175:3 ⚠ "&.s64" and "&.s60 (app/assets/stylesheets/framework/avatar.scss -174:3)" have the same properties. stylelint-gitlab/duplicate-selectors
176:3 ⚠ "&.s70" and "&.s64 (app/assets/stylesheets/framework/avatar.scss -175:3)" have the same properties. stylelint-gitlab/duplicate-selectors
177:3 ⚠ "&.s90" and "&.s70 (app/assets/stylesheets/framework/avatar.scss -176:3)" have the same properties. stylelint-gitlab/duplicate-selectors
178:3 ⚠ "&.s96" and "&.s90 (app/assets/stylesheets/framework/avatar.scss -177:3)" have the same properties. stylelint-gitlab/duplicate-selectors
179:3 ⚠ "&.s100" and "&.s96 (app/assets/stylesheets/framework/avatar.scss -178:3)" have the same properties. stylelint-gitlab/duplicate-selectors
180:3 ⚠ "&.s110" and "&.s100 (app/assets/stylesheets/framework/avatar.scss -179:3)" have the same properties. stylelint-gitlab/duplicate-selectors
181:3 ⚠ "&.s140" and "&.s110 (app/assets/stylesheets/framework/avatar.scss -180:3)" have the same properties. stylelint-gitlab/duplicate-selectors
182:3 ⚠ "&.s160" and "&.s140 (app/assets/stylesheets/framework/avatar.scss -181:3)" have the same properties. stylelint-gitlab/duplicate-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/avatar.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