/* Apply Font */
body {
font-family: "Poppins", sans-serif;
}
/* Remove Icon */
#storybook-explorer-menu
.sidebar-item[data-parent-id]
> button
> div
> svg[type],
#storybook-explorer-menu .sidebar-item[data-parent-id] > a > div > svg[type],
#storybook-explorer-menu
.sidebar-item[data-parent-id="foundation"]
> a
> div
> svg,
#storybook-explorer-menu
.sidebar-item:not([data-parent-id])
:not([data-nodetype="story"], [data-nodetype="document"])
svg[type] {
display: none;
}
/* Remove default padding */
.sidebar-container [data-radix-scroll-area-viewport] > div,
.sidebar-container [data-radix-scroll-area-content] > div {
padding: 0 !important;
}
/* Root level background */
#storybook-explorer-tree .sidebar-subheading[data-nodetype="root"] {
background: #f5f8fa;
padding: 4px 8px;
margin: 0;
}
/* Root Level Font */
#storybook-explorer-tree
.sidebar-subheading[data-nodetype="root"]
> button[data-action="collapse-root"] {
font-size: 14px;
font-weight: 500;
letter-spacing: normal;
}
/* Re apply the padding each content */
.sidebar-container [data-radix-scroll-area-content] .sidebar-header {
padding: 16px 12px 0;
}
label[for="storybook-explorer-searchfield"] + div {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Padding Introduction */
#introduction-welcome--docs,
#foundation-color--docs {
margin-left: 32px !important;
padding: 4px 8px;
}
/* Target ONLY the Groups (like 'Action / Navigation') inside 'component' */
.sidebar-item[data-parent-id][data-nodetype="group"],
.sidebar-item[data-parent-id][data-nodetype="component"] {
padding-left: 20px !important;
}
/* When hover not the leaf, don't apply anything */
.sidebar-item[data-parent-id][data-nodetype="group"]:hover,
.sidebar-item[data-parent-id][data-nodetype="component"]:hover {
--tree-node-background-hover: transparent !important;
--tree-node-background-selected: transparent !important;
}
.sidebar-item[data-item-id="introduction-welcome--docs"][data-selected="true"],
.sidebar-item[data-parent-id][data-nodetype="document"][data-selected="true"],
.sidebar-item[data-parent-id][data-nodetype="story"][data-selected="true"] {
background-color: transparent !important;
}
.sidebar-item[data-nodetype="document"] > a,
.sidebar-item[data-nodetype="story"] > button {
/* Text Color */
color: #5e6278 !important;
background-color: transparent !important;
/* Layout & Spacing */
padding: 6px 12px !important;
margin-left: 58px !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
font-weight: 400 !important;
gap: 8px;
align-items: center;
/* Reset button defaults */
border: 1px solid transparent !important;
cursor: pointer;
text-align: left;
}
.sidebar-item[data-nodetype="document"][data-selected="true"] > a,
.sidebar-item[data-nodetype="story"][data-selected="true"] > button {
flex: none !important;
width: fit-content !important;
display: inline-flex !important;
align-items: center !important;
background-color: #f1faff !important;
border: 1px solid #009ef7 !important;
border-radius: 8px !important;
color: #009ef7 !important;
}
.sidebar-item[data-nodetype="document"][data-selected="true"] > a svg,
.sidebar-item[data-nodetype="story"][data-selected="true"] > button svg {
color: currentColor !important;
fill: currentColor !important;
}
.sidebar-item[data-selected="true"] button[data-testid="context-menu"],
.sidebar-item[data-selected="true"]
button[aria-label="Open context menu"]:hover {
box-shadow: none !important;
}
/* ======================================================
Custom Icon
=========================================================
*/
.sidebar-item[data-nodetype="document"] > a::before,
.sidebar-item[data-nodetype="story"] > button::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* DOCS ICON */
.sidebar-item[data-nodetype="document"] > a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* STORY ICON */
.sidebar-item[data-nodetype="story"] > button::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* RESET GAP (For Icon) */
.sidebar-item:not([data-nodetype="component"]):not([data-nodetype="group"]) > a,
.sidebar-item:not([data-nodetype="component"]):not([data-nodetype="group"])
> button {
gap: 0 !important;
}
/* ======================================================
Icon Behavior
=========================================================
*/
.sidebar-item[data-nodetype="document"]:not([data-selected="true"]) > a:hover,
.sidebar-item[data-nodetype="story"]:not([data-selected="true"])
> button:hover {
color: #009ef7 !important;
background-color: transparent !important;
border: 1px solid transparent !important;
}
.sidebar-item[data-nodetype="document"]:not([data-selected="true"])
> a:hover::before,
.sidebar-item[data-nodetype="story"]:not([data-selected="true"])
> button:hover::before {
background-color: #009ef7 !important;
}
.sidebar-item[data-nodetype="document"]:hover,
.sidebar-item[data-nodetype="story"]:hover {
background-color: transparent !important;
}
/* ======================================================== */
.sidebar-item[data-nodetype="document"],
.sidebar-item[data-nodetype="story"] {
background-color: transparent !important;
background: transparent !important;
transition: none !important;
transition-property: none !important;
}
.sidebar-item[data-nodetype="document"] > a:focus,
.sidebar-item[data-nodetype="story"] > button:focus,
.sidebar-item[data-nodetype="document"] > a:active,
.sidebar-item[data-nodetype="story"] > button:active {
box-shadow: none !important;
}
.sidebar-item[data-nodetype="document"]:not([data-selected="true"]) > a:hover,
.sidebar-item[data-nodetype="story"]:not([data-selected="true"])
> button:hover {
color: #009ef7 !important;
}
/* Remove skip to canvas */
.sidebar-item[data-nodetype="document"] > a[href="#storybook-preview-wrapper"],
.sidebar-item[data-nodetype="document"]
> a[href="#storybook-preview-wrapper"]:focus {
display: none !important;
}
#storybook-explorer-menu .sidebar-item[data-parent-id] > button > div {
align-self: center;
margin-top: 0;
margin-bottom: 1px;
}
/* Background Side menu div */
[data-ref-id="storybook_internal"][data-item-id]:not(
[data-selected="true"]
)[data-nodetype="component"],
[data-ref-id="storybook_internal"][data-item-id]:not(
[data-selected="true"]
)[data-nodetype="group"] {
background-color: transparent !important;
padding-top: 4px;
padding-bottom: 4px;
}
/* Background root behavior */
.sidebar-subheading > button[data-action="collapse-root"]:hover,
.sidebar-subheading > button[data-action="expand-all"]:hover {
background-color: transparent !important;
color: #5e6278;
}