Fix the following style-lint errors and warnings for `app/assets/stylesheets/pages/login.scss`

Problem

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

  56:5  ⚠  Expected ".login-page .login-box .login-heading h3" to have no more than 3 compound selectors                                                                      selector-max-compound-selectors
  56:5  ⚠  Expected ".login-page .omniauth-container .login-heading h3" to have no more than 3 compound selectors                                                             selector-max-compound-selectors
  65:7  ⚠  Expected ".login-page .login-box .login-footer p:last-child" to have no more than 3 compound selectors                                                             selector-max-compound-selectors
  65:7  ⚠  Expected ".login-page .omniauth-container .login-footer p:last-child" to have no more than 3 compound selectors                                                    selector-max-compound-selectors
  75:5  ⚠  Expected ".login-page .login-box .nav .active a" to have no more than 3 compound selectors                                                                         selector-max-compound-selectors
  75:5  ⚠  Expected ".login-page .omniauth-container .nav .active a" to have no more than 3 compound selectors                                                                selector-max-compound-selectors
  80:5  ⚠  ".login-body" and "p (app/assets/stylesheets/pages/login.scss -45:3)" have the same properties.   stylelint-gitlab/duplicate-selectors
  83:7  ⚠  Expected ".login-page .login-box .login-body input + p" to have no more than 3 compound selectors                                                                  selector-max-compound-selectors
  83:7  ⚠  Expected ".login-page .omniauth-container .login-body input + p" to have no more than 3 compound selectors                                                         selector-max-compound-selectors
  87:7  ⚠  Expected ".login-page .login-box .login-body .username .validation-success" to have no more than 3 compound selectors                                              selector-max-compound-selectors
  87:7  ⚠  Expected ".login-page .omniauth-container .login-body .username .validation-success" to have no more than 3 compound selectors                                     selector-max-compound-selectors
  91:7  ⚠  Expected ".login-page .login-box .login-body .username .validation-error" to have no more than 3 compound selectors                                                selector-max-compound-selectors
  91:7  ⚠  Expected ".login-page .omniauth-container .login-body .username .validation-error" to have no more than 3 compound selectors                                       selector-max-compound-selectors
 114:7  ⚠  Expected ".login-page .omniauth-container .omniauth-btn img" to have no more than 3 compound selectors                                                             selector-max-compound-selectors
 142:9  ⚠  Expected nesting depth to be no more than 3                                                                                                                        max-nesting-depth
 170:7  ⚠  Expected ".login-page .new-session-tabs li a" to have no more than 3 compound selectors                                                                            selector-max-compound-selectors
 175:7  ⚠  Expected ".login-page .new-session-tabs li.active > a" to have no more than 3 compound selectors                                                                   selector-max-compound-selectors
 193:5  ⚠  Expected a placeholder selector (e.g. %placeholder) to be used in @extend                                                                                          scss/at-extend-no-missing-placeholder

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/pages/login.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