Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/contextual_sidebar.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/framework/contextual_sidebar.scss
143:5 ⚠ Expected ".nav-sidebar .sidebar-top-level-items > li > a" to have no more than 3 compound selectors selector-max-compound-selectors
204:3 ⚠ ".fly-out-top-item" and ".collapse-text, .icon-angle-double-left stylelint-gitlab/duplicate-selectors
(app/assets/stylesheets/framework/contextual_sidebar.scss -100:5)" have the same properties.
248:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
305:11 ⚠ Expected ".sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items .divider" to have no more than 3 compound selectors selector-max-compound-selectors
312:11 ⚠ Expected ".sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items > .active" to have no more than 3 compound selectors selector-max-compound-selectors
315:13 ⚠ Expected ".sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items > .active > a" to have no more than 3 compound selectors selector-max-compound-selectors
320:11 ⚠ Expected ".sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items a" to have no more than 3 compound selectors selector-max-compound-selectors
324:13 ⚠ Expected ".sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items a:hover" to have no more than 3 compound selectors selector-max-compound-selectors
324:13 ⚠ Expected ".sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items a:focus" to have no more than 3 compound selectors selector-max-compound-selectors
347:7 ⚠ ".badge.badge-pill" and "> a (app/assets/stylesheets/framework/contextual_sidebar.scss -189:7)" have the same properties. stylelint-gitlab/duplicate-selectors
384:3 ⚠ ".icon-angle-double-right" and ".fly-out-top-item (app/assets/stylesheets/framework/contextual_sidebar.scss -204:3)" have stylelint-gitlab/duplicate-selectors
the same properties.
413:1 ⚠ ".fly-out-top-item-name" and ".nav-item-name (app/assets/stylesheets/framework/contextual_sidebar.scss -184:5)" have the stylelint-gitlab/duplicate-selectors
same properties.
419:1 ⚠ ".close-nav-button" and ".icon-angle-double-right (app/assets/stylesheets/framework/contextual_sidebar.scss -384:3)" have stylelint-gitlab/duplicate-selectors
the same properties.
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/contextual_sidebar.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