Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-28 02:02:08 +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> <template>
<teleport :to="teleportTarget"> <teleport :to="teleportTarget">
<nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')"> <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
<SidebarIcon <SidebarIcon
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.id" :key="tab.id"
@@ -69,17 +69,6 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
} }
</script> </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> <style scoped>
.side-tool-bar-container { .side-tool-bar-container {
display: flex; display: flex;
@@ -94,6 +83,14 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
background-color: var(--comfy-menu-secondary-bg); background-color: var(--comfy-menu-secondary-bg);
color: var(--fg-color); color: var(--fg-color);
box-shadow: var(--bar-shadow); 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 { .side-tool-bar-end {