Use utility classes instead of more CSS in `collapsible_sidebar.vue` and related components
References: !21010 (closed)
Use utility classes instead of more CSS in collapsible_sidebar.vue
and related components (e.g. left.vue
and right.vue
).
-
See this comment: "We strongly suggest using utility classes over introducing new arbitrary CSS. A lot of the rules being added to
ide.scss
can be implemented using bootstrap utility classes. -
Specific examples:
- In
app/assets/stylesheets/page_bundles/ide.scss
, for.ide-sidebar-link
, remove all three flexy rulesdisplay: flex, align-items: center, justify-content: center
, and addingd-flex-center
to all references of.ide-sidebar-link
. - With the
ide-left-sidebar
, try to remove that if possible and let the client handle any overloads...<collapsible-sidebar class="pr-0" :extension-tabs="leftExtensionTabs" :side="'left'" :width="340">
And you could then remove the rule:&.multi-file-commit-panel { padding-right: 0; }
- In