Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[CodeHealth] Use scoped CSS for SideToolbar (#2264)

Browse Source
This commit is contained in:
Chenlei Hu
2025-01-15 20:16:39 -05:00
committed by GitHub
parent 65542b885a
commit 237fca0bf1
1 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/sidebar/SideToolbar.vue
View File

@@ -1,6 +1,6 @@
<template>
<teleport :to="teleportTarget">
<nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')">
<nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
<SidebarIcon
v-for="tab in tabs"
:key="tab.id"
@@ -69,17 +69,6 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
}
</script>
<style>
:root {
--sidebar-width: 4rem;
--sidebar-icon-size: 1.5rem;
}
:root .small-sidebar {
--sidebar-width: 2.5rem;
--sidebar-icon-size: 1rem;
}
</style>
<style scoped>
.side-tool-bar-container {
display: flex;
@@ -94,6 +83,14 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
background-color: var(--comfy-menu-secondary-bg);
color: var(--fg-color);
box-shadow: var(--bar-shadow);
--sidebar-width: 4rem;
--sidebar-icon-size: 1.5rem;
}
.side-tool-bar-container.small-sidebar {
--sidebar-width: 2.5rem;
--sidebar-icon-size: 1rem;
}
.side-tool-bar-end {