@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
1 lines • 18.1 kB
Source Map (JSON)
{"version":3,"sources":["webpack://./src/components/ui/sidebar.module.css"],"names":[],"mappings":"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","sourcesContent":[".wrapper {\r\n display: flex;\r\n width: 100%;\r\n min-height: 100svh;\r\n background-color: var(--ac-sidebar);\r\n}\r\n\r\n.staticSidebar {\r\n display: flex;\r\n width: var(--ac-sidebar-width);\r\n height: 100%;\r\n flex-direction: column;\r\n background-color: var(--ac-sidebar);\r\n color: var(--ac-sidebar-foreground);\r\n}\r\n\r\n.desktopRoot {\r\n display: none;\r\n color: var(--ac-sidebar-foreground);\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .desktopRoot {\r\n display: block;\r\n }\r\n}\r\n\r\n.gap {\r\n position: relative;\r\n width: var(--ac-sidebar-width);\r\n background-color: transparent;\r\n transition: width var(--ac-transition-slow);\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"offcanvas\"] .gap {\r\n width: 0;\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .gap {\r\n width: var(--ac-sidebar-width-icon);\r\n}\r\n\r\n.desktopRoot[data-variant=\"floating\"] .gap,\r\n.desktopRoot[data-variant=\"inset\"] .gap {\r\n width: calc(var(--ac-sidebar-width-icon) + var(--ac-space-4));\r\n}\r\n\r\n.panelWrap {\r\n position: fixed;\r\n inset-block: 0;\r\n z-index: 20;\r\n display: none;\r\n width: var(--ac-sidebar-width);\r\n transition:\r\n left var(--ac-transition-slow),\r\n right var(--ac-transition-slow),\r\n width var(--ac-transition-slow),\r\n padding var(--ac-transition-slow);\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .panelWrap {\r\n display: flex;\r\n }\r\n}\r\n\r\n.desktopRoot[data-side=\"left\"] .panelWrap {\r\n left: 0;\r\n}\r\n\r\n.desktopRoot[data-side=\"right\"] .panelWrap {\r\n right: 0;\r\n}\r\n\r\n.desktopRoot[data-side=\"left\"][data-collapsible=\"offcanvas\"] .panelWrap {\r\n left: calc(var(--ac-sidebar-width) * -1);\r\n}\r\n\r\n.desktopRoot[data-side=\"right\"][data-collapsible=\"offcanvas\"] .panelWrap {\r\n right: calc(var(--ac-sidebar-width) * -1);\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .panelWrap {\r\n width: var(--ac-sidebar-width-icon);\r\n}\r\n\r\n.desktopRoot[data-variant=\"floating\"] .panelWrap,\r\n.desktopRoot[data-variant=\"inset\"] .panelWrap {\r\n padding: var(--ac-space-2);\r\n}\r\n\r\n.desktopRoot[data-variant=\"floating\"][data-collapsible=\"icon\"] .panelWrap,\r\n.desktopRoot[data-variant=\"inset\"][data-collapsible=\"icon\"] .panelWrap {\r\n width: calc(var(--ac-sidebar-width-icon) + var(--ac-space-4));\r\n}\r\n\r\n.panel {\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n flex-direction: column;\r\n background-color: var(--ac-sidebar);\r\n color: var(--ac-sidebar-foreground);\r\n}\r\n\r\n.desktopRoot[data-variant=\"sidebar\"] .panel {\r\n border-inline-end: 1px solid var(--ac-sidebar-border);\r\n}\r\n\r\n.desktopRoot[data-side=\"right\"][data-variant=\"sidebar\"] .panel {\r\n border-inline-end: 0;\r\n border-inline-start: 1px solid var(--ac-sidebar-border);\r\n}\r\n\r\n.desktopRoot[data-variant=\"floating\"] .panel,\r\n.desktopRoot[data-variant=\"inset\"] .panel {\r\n border: 1px solid var(--ac-sidebar-border);\r\n border-radius: var(--ac-radius-lg);\r\n box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);\r\n}\r\n\r\n.mobilePortal {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 50;\r\n}\r\n\r\n.mobileOverlay {\r\n position: absolute;\r\n inset: 0;\r\n border: 0;\r\n background: rgb(0 0 0 / 0.45);\r\n}\r\n\r\n.mobilePanel {\r\n position: absolute;\r\n inset-block: 0;\r\n width: var(--ac-sidebar-width);\r\n padding: 0;\r\n background-color: var(--ac-sidebar);\r\n color: var(--ac-sidebar-foreground);\r\n box-shadow: 0 18px 50px rgb(0 0 0 / 0.18);\r\n}\r\n\r\n.mobilePanelLeft {\r\n left: 0;\r\n}\r\n\r\n.mobilePanelRight {\r\n right: 0;\r\n}\r\n\r\n.mobileContent {\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n flex-direction: column;\r\n}\r\n\r\n.trigger {\r\n width: 1.75rem;\r\n height: 1.75rem;\r\n}\r\n\r\n.triggerIcon {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.rail {\r\n position: absolute;\r\n inset-block: 0;\r\n z-index: 30;\r\n display: none;\r\n width: 1rem;\r\n border: 0;\r\n background: transparent;\r\n transform: translateX(-50%);\r\n transition: background-color var(--ac-transition-fast);\r\n}\r\n\r\n.rail::after {\r\n position: absolute;\r\n inset-block: 0;\r\n left: 50%;\r\n width: 2px;\r\n content: \"\";\r\n background-color: transparent;\r\n transition: background-color var(--ac-transition-fast);\r\n}\r\n\r\n@media (min-width: 640px) {\r\n .rail {\r\n display: flex;\r\n cursor: ew-resize;\r\n }\r\n\r\n .rail:hover::after {\r\n background-color: var(--ac-sidebar-border);\r\n }\r\n}\r\n\r\n.desktopRoot[data-side=\"left\"] .rail {\r\n right: -1rem;\r\n}\r\n\r\n.desktopRoot[data-side=\"right\"] .rail {\r\n left: 0;\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"offcanvas\"][data-side=\"left\"] .rail {\r\n right: -0.5rem;\r\n transform: none;\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"offcanvas\"][data-side=\"right\"] .rail {\r\n left: -0.5rem;\r\n transform: none;\r\n}\r\n\r\n.inset {\r\n position: relative;\r\n display: flex;\r\n width: 100%;\r\n flex: 1;\r\n flex-direction: column;\r\n background-color: var(--ac-background);\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .desktopRoot[data-variant=\"inset\"] ~ .inset {\r\n margin: var(--ac-space-2);\r\n margin-inline-start: 0;\r\n border-radius: var(--ac-radius-xl);\r\n box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);\r\n }\r\n\r\n .desktopRoot[data-state=\"collapsed\"][data-variant=\"inset\"] ~ .inset {\r\n margin-inline-start: var(--ac-space-2);\r\n }\r\n}\r\n\r\n.input {\r\n width: 100%;\r\n height: 2rem;\r\n background-color: var(--ac-background);\r\n box-shadow: none;\r\n}\r\n\r\n.header,\r\n.footer {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ac-space-2);\r\n padding: var(--ac-space-2);\r\n}\r\n\r\n.separator {\r\n width: auto;\r\n margin-inline: var(--ac-space-2);\r\n background-color: var(--ac-sidebar-border);\r\n}\r\n\r\n.content {\r\n display: flex;\r\n min-height: 0;\r\n flex: 1;\r\n flex-direction: column;\r\n gap: var(--ac-space-2);\r\n overflow: auto;\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .content {\r\n overflow: hidden;\r\n}\r\n\r\n.group {\r\n position: relative;\r\n display: flex;\r\n width: 100%;\r\n min-width: 0;\r\n flex-direction: column;\r\n padding: var(--ac-space-2);\r\n}\r\n\r\n.groupLabel {\r\n display: flex;\r\n height: 2rem;\r\n flex-shrink: 0;\r\n align-items: center;\r\n padding-inline: var(--ac-space-2);\r\n border-radius: var(--ac-radius-md);\r\n color: color-mix(in oklch, var(--ac-sidebar-foreground), transparent 30%);\r\n font-size: var(--ac-text-xs);\r\n font-weight: 500;\r\n outline: none;\r\n transition:\r\n margin var(--ac-transition-slow),\r\n opacity var(--ac-transition-slow);\r\n}\r\n\r\n.groupLabel > svg {\r\n width: 1rem;\r\n height: 1rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .groupLabel {\r\n margin-top: -2rem;\r\n opacity: 0;\r\n pointer-events: none;\r\n}\r\n\r\n.groupAction {\r\n position: absolute;\r\n top: 0.875rem;\r\n right: 0.75rem;\r\n display: flex;\r\n width: 1.25rem;\r\n aspect-ratio: 1;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n border: 0;\r\n border-radius: var(--ac-radius-md);\r\n background: transparent;\r\n color: var(--ac-sidebar-foreground);\r\n cursor: pointer;\r\n outline: none;\r\n transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast);\r\n}\r\n\r\n.groupAction:hover,\r\n.groupAction:focus-visible {\r\n background-color: var(--ac-sidebar-accent);\r\n color: var(--ac-sidebar-accent-foreground);\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .groupAction {\r\n display: none;\r\n}\r\n\r\n.groupContent {\r\n width: 100%;\r\n font-size: var(--ac-text-sm);\r\n}\r\n\r\n.menu {\r\n display: flex;\r\n width: 100%;\r\n min-width: 0;\r\n flex-direction: column;\r\n gap: var(--ac-space-1);\r\n}\r\n\r\n.menuItem {\r\n position: relative;\r\n}\r\n\r\n.menuButton {\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n gap: var(--ac-space-2);\r\n overflow: hidden;\r\n padding: var(--ac-space-2);\r\n border: 0;\r\n border-radius: var(--ac-radius-md);\r\n background: transparent;\r\n color: inherit;\r\n font-size: var(--ac-text-sm);\r\n text-align: left;\r\n outline: none;\r\n transition:\r\n background-color var(--ac-transition-fast),\r\n color var(--ac-transition-fast),\r\n width var(--ac-transition-slow),\r\n height var(--ac-transition-slow),\r\n padding var(--ac-transition-slow);\r\n}\r\n\r\n.menuButton:hover,\r\n.menuButton:focus-visible,\r\n.menuButton:active,\r\n.menuButton[data-active=\"true\"] {\r\n background-color: var(--ac-sidebar-accent);\r\n color: var(--ac-sidebar-accent-foreground);\r\n}\r\n\r\n.menuButton[data-active=\"true\"] {\r\n font-weight: 500;\r\n}\r\n\r\n.menuButton:disabled,\r\n.menuButton[aria-disabled=\"true\"] {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n}\r\n\r\n.menuButton > svg {\r\n width: 1rem;\r\n height: 1rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menuButton > span:last-child {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.menuButtonDefault {\r\n background-color: transparent;\r\n}\r\n\r\n.menuButtonOutline {\r\n border: 1px solid var(--ac-sidebar-border);\r\n background-color: var(--ac-background);\r\n box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);\r\n}\r\n\r\n.menuButtonSizeDefault {\r\n min-height: 2rem;\r\n}\r\n\r\n.menuButtonSizeSm {\r\n min-height: 1.75rem;\r\n font-size: var(--ac-text-xs);\r\n}\r\n\r\n.menuButtonSizeLg {\r\n min-height: 3rem;\r\n font-size: var(--ac-text-sm);\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .menuButton {\r\n width: 2rem;\r\n min-width: 2rem;\r\n height: 2rem;\r\n justify-content: center;\r\n padding: var(--ac-space-2);\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .menuButton > span:last-child,\r\n.desktopRoot[data-collapsible=\"icon\"] .menuBadge,\r\n.desktopRoot[data-collapsible=\"icon\"] .menuAction,\r\n.desktopRoot[data-collapsible=\"icon\"] .menuSub {\r\n display: none;\r\n}\r\n\r\n.desktopRoot[data-collapsible=\"icon\"] .menuButtonSizeLg {\r\n padding: 0;\r\n}\r\n\r\n.menuAction {\r\n position: absolute;\r\n top: 50%;\r\n right: 0.25rem;\r\n display: flex;\r\n width: 1.25rem;\r\n aspect-ratio: 1;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n border: 0;\r\n border-radius: var(--ac-radius-md);\r\n background: transparent;\r\n color: inherit;\r\n transform: translateY(-50%);\r\n cursor: pointer;\r\n outline: none;\r\n transition:\r\n opacity var(--ac-transition-fast),\r\n background-color var(--ac-transition-fast),\r\n color var(--ac-transition-fast);\r\n}\r\n\r\n.menuAction:hover,\r\n.menuAction:focus-visible {\r\n background-color: var(--ac-sidebar-accent);\r\n color: var(--ac-sidebar-accent-foreground);\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .menuActionShowOnHover {\r\n opacity: 0;\r\n }\r\n\r\n .menuItem:hover .menuActionShowOnHover,\r\n .menuItem:focus-within .menuActionShowOnHover {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n.menuBadge {\r\n position: absolute;\r\n top: 50%;\r\n right: 0.25rem;\r\n display: flex;\r\n min-width: 1.25rem;\r\n height: 1.25rem;\r\n align-items: center;\r\n justify-content: center;\r\n padding-inline: 0.25rem;\r\n border-radius: var(--ac-radius-md);\r\n color: inherit;\r\n font-size: var(--ac-text-xs);\r\n font-weight: 500;\r\n font-variant-numeric: tabular-nums;\r\n pointer-events: none;\r\n transform: translateY(-50%);\r\n user-select: none;\r\n}\r\n\r\n.menuSkeleton {\r\n display: flex;\r\n height: 2rem;\r\n align-items: center;\r\n gap: var(--ac-space-2);\r\n padding-inline: var(--ac-space-2);\r\n border-radius: var(--ac-radius-md);\r\n}\r\n\r\n.menuSkeletonIcon {\r\n width: 1rem;\r\n height: 1rem;\r\n border-radius: var(--ac-radius-md);\r\n}\r\n\r\n.menuSkeletonText {\r\n width: var(--ac-skeleton-width);\r\n max-width: var(--ac-skeleton-width);\r\n height: 1rem;\r\n flex: 1;\r\n}\r\n\r\n.menuSub {\r\n display: flex;\r\n min-width: 0;\r\n flex-direction: column;\r\n gap: var(--ac-space-1);\r\n margin-inline: 0.875rem;\r\n padding: 0.125rem 0 0.125rem var(--ac-space-3);\r\n border-left: 1px solid var(--ac-sidebar-border);\r\n}\r\n\r\n.menuSubButton {\r\n display: flex;\r\n min-width: 0;\r\n height: 1.75rem;\r\n align-items: center;\r\n gap: var(--ac-space-2);\r\n padding-inline: var(--ac-space-2);\r\n border-radius: var(--ac-radius-md);\r\n color: inherit;\r\n text-decoration: none;\r\n outline: none;\r\n transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast);\r\n}\r\n\r\n.menuSubButton:hover,\r\n.menuSubButton:focus-visible,\r\n.menuSubButton:active,\r\n.menuSubButton[data-active=\"true\"] {\r\n background-color: var(--ac-sidebar-accent);\r\n color: var(--ac-sidebar-accent-foreground);\r\n}\r\n\r\n.menuSubButton > svg {\r\n width: 1rem;\r\n height: 1rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menuSubButtonSm {\r\n font-size: var(--ac-text-xs);\r\n}\r\n\r\n.menuSubButtonMd {\r\n font-size: var(--ac-text-sm);\r\n}\r\n\r\n.srOnly {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n white-space: nowrap;\r\n}\r\n\r\n"],"sourceRoot":""}