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

  1. If possible, replace the CSS class with a utility one, check common.scss and https://getbootstrap.com/docs/4.3/utilities/ for existing ones
  2. Double check if all the warning have been fixed by running yarn run stylelint-file app/assets/stylesheets/framework/avatar.scss
  3. In the MR, add screenshots of the affected areas before and after the changes, check the first MR as a guideline
  4. If there are a lot of changes, we recommend to break them into smaller MRs
  5. Double check the usage of each changed class both in CE and EE
  6. EE changes should either be backported into CE or moved into ee/ folder. You can read more about how to handle EE code here
  7. Label the MR with gitlab-ce~10109752