Fix the following style-lint errors and warnings for app/assets/stylesheets/highlight/white_base.scss

Problem

Fix the following style-lint errors and warnings for app/assets/stylesheets/highlight/white_base.scss

  85:4   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
  86:4   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
  91:4   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 110:1   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 110:14  ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 115:1   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 120:1   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 121:11  ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 122:17  ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 123:17  ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 129:41  ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 129:69  ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 165:21  ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 168:7   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 176:7   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 182:3   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern
 239:5   ⚠  Selector should be written in lowercase with hyphens   selector-class-pattern

What to do

  1. If possible, replace the CSS class with a utility one, check common.scss and https://getbootstrap.com/docs/4.4/utilities/ for existing ones
  2. Double check if all the warning have been fixed by running yarn run stylelint-file app/assets/stylesheets/highlight/white_base.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 CSS cleanup
Edited by 🤖 GitLab Bot 🤖