3dcf404b26
crates/web/src/components/ was a byte-for-byte copy of the DioxusLabs/components "preview" registry (a shadcn-style copy-into- your-project source, not something published as a dependency). Move it wholesale into a new feedsignal-dioxus-components crate so it reads as vendored code we depend on rather than application source, and future app-specific styling should layer on via the class/attributes props each component already accepts instead of editing the vendored files. No component logic changed — this is a pure move plus import-path updates in the four app files that consumed it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
855 lines
20 KiB
CSS
855 lines
20 KiB
CSS
/* TODO: abstract as Utilitiy class */
|
|
.dx-sr-only {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
border: 0;
|
|
margin: -1px;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dx-sidebar-wrapper {
|
|
--dx-sidebar-background: var(--primary-color-2);
|
|
--dx-sidebar-foreground: var(--secondary-color-4);
|
|
--dx-sidebar-border: var(--primary-color-6);
|
|
--dx-sidebar-accent: var(--primary-color-4);
|
|
--dx-sidebar-accent-foreground: var(--secondary-color-4);
|
|
--dx-sidebar-ring: var(--primary-color-7);
|
|
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100svh;
|
|
min-height: 100svh;
|
|
}
|
|
|
|
@media (width >=768px) {
|
|
.dx-sidebar-wrapper:has(.dx-sidebar-desktop[data-side="right"]) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.dx-sidebar-wrapper:has(.dx-sidebar-desktop[data-variant="inset"]) {
|
|
background: var(--dx-sidebar-background);
|
|
}
|
|
}
|
|
|
|
.dx-sidebar-desktop {
|
|
display: none;
|
|
color: var(--dx-sidebar-foreground);
|
|
}
|
|
|
|
@media (width >=768px) {
|
|
.dx-sidebar-desktop {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.dx-sidebar-gap {
|
|
position: relative;
|
|
width: var(--dx-sidebar-width);
|
|
background: transparent;
|
|
transition: width 200ms ease-out;
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-gap {
|
|
width: var(--dx-sidebar-width-icon);
|
|
}
|
|
|
|
[data-variant="floating"] .dx-sidebar-gap,
|
|
[data-variant="inset"] .dx-sidebar-gap {
|
|
width: var(--dx-sidebar-width);
|
|
}
|
|
|
|
[data-variant="floating"][data-collapsible="icon"] .dx-sidebar-gap,
|
|
[data-variant="inset"][data-collapsible="icon"] .dx-sidebar-gap {
|
|
width: calc(var(--dx-sidebar-width-icon) + 1rem);
|
|
}
|
|
|
|
[data-collapsible="offcanvas"] .dx-sidebar-gap {
|
|
width: 0;
|
|
}
|
|
|
|
.dx-sidebar-container {
|
|
position: fixed;
|
|
z-index: 10;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: none;
|
|
width: var(--dx-sidebar-width);
|
|
height: 100svh;
|
|
box-sizing: border-box;
|
|
transition: left 200ms ease-out, right 200ms ease-out, width 200ms ease-out;
|
|
}
|
|
|
|
@media (width >=768px) {
|
|
.dx-sidebar-container {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
[data-side="left"] .dx-sidebar-container {
|
|
left: 0;
|
|
}
|
|
|
|
[data-side="left"][data-collapsible="offcanvas"] .dx-sidebar-container {
|
|
left: calc(var(--dx-sidebar-width) * -1);
|
|
}
|
|
|
|
[data-side="right"] .dx-sidebar-container {
|
|
right: 0;
|
|
}
|
|
|
|
[data-side="right"][data-collapsible="offcanvas"] .dx-sidebar-container {
|
|
right: calc(var(--dx-sidebar-width) * -1);
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-container {
|
|
overflow: visible;
|
|
width: var(--dx-sidebar-width-icon);
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-inner {
|
|
overflow: visible;
|
|
}
|
|
|
|
[data-variant="sidebar"][data-side="left"] .dx-sidebar-container {
|
|
border-right: 1px solid var(--dx-sidebar-border);
|
|
}
|
|
|
|
[data-variant="sidebar"][data-side="right"] .dx-sidebar-container {
|
|
border-left: 1px solid var(--dx-sidebar-border);
|
|
}
|
|
|
|
[data-variant="floating"] .dx-sidebar-container,
|
|
[data-variant="inset"] .dx-sidebar-container {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
[data-variant="floating"][data-collapsible="icon"] .dx-sidebar-container,
|
|
[data-variant="inset"][data-collapsible="icon"] .dx-sidebar-container {
|
|
width: calc(var(--dx-sidebar-width-icon) + 1rem + 2px);
|
|
}
|
|
|
|
.dx-sidebar-inner {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
flex-direction: column;
|
|
background: var(--dx-sidebar-background);
|
|
}
|
|
|
|
[data-variant="floating"] .dx-sidebar-inner {
|
|
border: 1px solid var(--dx-sidebar-border);
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
|
|
}
|
|
|
|
.dx-sidebar-static {
|
|
display: flex;
|
|
width: var(--dx-sidebar-width);
|
|
height: 100%;
|
|
flex-direction: column;
|
|
background: var(--dx-sidebar-background);
|
|
color: var(--dx-sidebar-foreground);
|
|
}
|
|
|
|
.dx-sidebar-sheet {
|
|
width: var(--dx-sidebar-width-mobile) !important;
|
|
padding: 0 !important;
|
|
background: var(--dx-sidebar-background);
|
|
}
|
|
|
|
.dx-sidebar-sheet-close {
|
|
display: none;
|
|
}
|
|
|
|
.dx-sidebar-mobile-inner {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dx-sidebar-trigger {
|
|
display: inline-flex;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 !important;
|
|
line-height: 0;
|
|
}
|
|
|
|
.dx-sidebar-trigger-icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.dx-sidebar-rail {
|
|
position: absolute;
|
|
z-index: 20;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: none;
|
|
width: 1rem;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: ew-resize;
|
|
transform: translateX(-50%);
|
|
transition: all 200ms ease-out;
|
|
}
|
|
|
|
@media (width >=640px) {
|
|
.dx-sidebar-rail {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.dx-sidebar-rail::after {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 2px;
|
|
content: "";
|
|
}
|
|
|
|
.dx-sidebar-rail:hover::after {
|
|
background: var(--dx-sidebar-border);
|
|
}
|
|
|
|
[data-side="left"] .dx-sidebar-rail {
|
|
right: -1rem;
|
|
cursor: w-resize;
|
|
}
|
|
|
|
[data-side="right"] .dx-sidebar-rail {
|
|
left: 0;
|
|
cursor: e-resize;
|
|
}
|
|
|
|
[data-side="left"][data-state="collapsed"] .dx-sidebar-rail {
|
|
cursor: e-resize;
|
|
}
|
|
|
|
[data-side="right"][data-state="collapsed"] .dx-sidebar-rail {
|
|
cursor: w-resize;
|
|
}
|
|
|
|
[data-collapsible="offcanvas"] .dx-sidebar-rail {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
[data-collapsible="offcanvas"] .dx-sidebar-rail::after {
|
|
left: 100%;
|
|
}
|
|
|
|
[data-collapsible="offcanvas"] .dx-sidebar-rail:hover {
|
|
background: var(--dx-sidebar-background);
|
|
}
|
|
|
|
[data-side="left"][data-collapsible="offcanvas"] .dx-sidebar-rail {
|
|
right: -0.5rem;
|
|
}
|
|
|
|
[data-side="right"][data-collapsible="offcanvas"] .dx-sidebar-rail {
|
|
left: -0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-inset {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
flex: 1 1 0%;
|
|
flex-direction: column;
|
|
background: var(--primary-color-1);
|
|
}
|
|
|
|
[data-variant="inset"]~.dx-sidebar-inset {
|
|
border-radius: 0.75rem;
|
|
margin: 0.5rem;
|
|
margin-left: 0;
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
|
|
}
|
|
|
|
[data-variant="inset"][data-state="collapsed"]~.dx-sidebar-inset {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
[data-variant="inset"][data-side="right"]~.dx-sidebar-inset {
|
|
margin-right: 0;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
[data-variant="inset"][data-side="right"][data-state="collapsed"]~.dx-sidebar-inset {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-content {
|
|
display: flex;
|
|
overflow: hidden auto;
|
|
min-height: 0;
|
|
flex: 1 1 0%;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-content {
|
|
overflow: visible;
|
|
}
|
|
|
|
.dx-sidebar-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-separator {
|
|
width: auto;
|
|
margin: 0 0.5rem;
|
|
background: var(--dx-sidebar-border);
|
|
}
|
|
|
|
.dx-sidebar-group {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-group-label {
|
|
display: flex;
|
|
height: 2rem;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
border-radius: 0.375rem;
|
|
color: var(--dx-sidebar-foreground);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
opacity: 0.7;
|
|
outline: none;
|
|
transition: margin 200ms ease-out, opacity 200ms ease-out;
|
|
}
|
|
|
|
.dx-sidebar-group-label svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-group-label {
|
|
margin-top: -2rem;
|
|
opacity: 0;
|
|
}
|
|
|
|
.dx-sidebar-group-action {
|
|
position: absolute;
|
|
top: 0.875rem;
|
|
right: 0.75rem;
|
|
display: flex;
|
|
width: 1.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
aspect-ratio: 1;
|
|
background: transparent;
|
|
color: var(--dx-sidebar-foreground);
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 0ms;
|
|
}
|
|
|
|
.dx-sidebar-group-action:hover {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-group-action svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Increase hit area on mobile */
|
|
.dx-sidebar-group-action::after {
|
|
position: absolute;
|
|
content: "";
|
|
inset: -0.5rem;
|
|
}
|
|
|
|
@media (width >=768px) {
|
|
.dx-sidebar-group-action::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-group-action {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 200ms;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.dx-sidebar-group-content {
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dx-sidebar-menu {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
margin: 0;
|
|
gap: 0.25rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.dx-sidebar-menu .dx-sidebar-dropdown-menu,
|
|
.dx-sidebar-menu .dx-sidebar-tooltip {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.dx-sidebar-dropdown-menu-content .dx-sidebar-dropdown-separator[data-orientation="horizontal"] {
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.dx-sidebar-menu-item {
|
|
position: relative;
|
|
}
|
|
|
|
.dx-sidebar-menu-item > .dx-sidebar-dropdown-menu:has(.dx-sidebar-menu-action) {
|
|
position: static;
|
|
}
|
|
|
|
.dx-sidebar-header .dx-sidebar-menu-button.dx-sidebar-dropdown-menu-trigger:not(:focus-visible),
|
|
.dx-sidebar-footer .dx-sidebar-menu-button.dx-sidebar-dropdown-menu-trigger:not(:focus-visible) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dx-sidebar-sheet .dx-sidebar-header .dx-sidebar-dropdown-menu-content {
|
|
margin-top: 4px;
|
|
margin-bottom: 0;
|
|
inset: 100% auto auto 0;
|
|
}
|
|
|
|
.dx-sidebar-sheet .dx-sidebar-footer .dx-sidebar-dropdown-menu-content {
|
|
margin-top: 0;
|
|
margin-bottom: 4px;
|
|
inset: auto auto 100% 0;
|
|
}
|
|
|
|
.dx-sidebar-menu-button.dx-sidebar-collapsible-trigger:hover {
|
|
text-decoration: none;
|
|
text-decoration-line: none;
|
|
}
|
|
|
|
@media (width >= 768px) {
|
|
.dx-sidebar-desktop[data-side="left"] :is(.dx-sidebar-header, .dx-sidebar-menu-item:has(.dx-sidebar-menu-action)) .dx-sidebar-dropdown-menu-content {
|
|
top: 0;
|
|
left: 100%;
|
|
margin-top: 0;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-side="left"] .dx-sidebar-footer .dx-sidebar-dropdown-menu-content {
|
|
top: auto;
|
|
bottom: 0;
|
|
left: 100%;
|
|
margin-bottom: 0;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-side="right"] :is(.dx-sidebar-header, .dx-sidebar-menu-item:has(.dx-sidebar-menu-action)) .dx-sidebar-dropdown-menu-content {
|
|
top: 0;
|
|
right: 100%;
|
|
left: auto;
|
|
margin-top: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-side="right"] .dx-sidebar-footer .dx-sidebar-dropdown-menu-content {
|
|
margin-right: 0.5rem;
|
|
margin-bottom: 0;
|
|
inset: auto 100% 0 auto;
|
|
}
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"] {
|
|
display: flex;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
background: transparent;
|
|
color: var(--dx-sidebar-foreground);
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
gap: 0.5rem;
|
|
outline: none;
|
|
overflow-wrap: anywhere;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
transition: width 200ms ease-out, padding 200ms ease-out;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"]:hover {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"]:focus-visible {
|
|
box-shadow: 0 0 0 2px var(--dx-sidebar-ring);
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"]:active {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"]:disabled,
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][aria-disabled="true"] {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-active="true"] {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"] svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"]>span:last-child {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: opacity 200ms ease-out;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"]>span:last-child {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Size variants */
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="default"] {
|
|
min-height: 2rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="sm"] {
|
|
min-height: 1.75rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"] {
|
|
min-height: 3rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-variant="outline"] {
|
|
background: var(--primary-color-1);
|
|
box-shadow: 0 0 0 1px var(--dx-sidebar-border);
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-variant="outline"]:hover {
|
|
background: var(--dx-sidebar-accent);
|
|
box-shadow: 0 0 0 1px var(--dx-sidebar-accent);
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"] {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"] {
|
|
padding: 0;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:is(svg, img)),
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:has(svg, img)) {
|
|
justify-content: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:is(svg, img))> :not(:first-child),
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"]:has(> :first-child:has(svg, img))> :not(:first-child) {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
border: 0;
|
|
margin: -1px;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dx-sidebar-desktop[data-collapsible="icon"] .dx-sidebar-menu-button[data-sidebar="menu-button"] svg {
|
|
display: block;
|
|
}
|
|
|
|
.dx-sidebar-menu-item:has(.dx-sidebar-menu-action[data-sidebar="menu-action"]) .dx-sidebar-menu-button[data-sidebar="menu-button"] {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-action[data-sidebar="menu-action"] {
|
|
position: absolute;
|
|
top: 0.375rem;
|
|
right: 0.25rem;
|
|
display: flex;
|
|
width: 1.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
aspect-ratio: 1;
|
|
background: transparent;
|
|
color: var(--dx-sidebar-foreground);
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 0ms;
|
|
}
|
|
|
|
.dx-sidebar-menu-action[data-sidebar="menu-action"]:hover {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-action[data-sidebar="menu-action"] svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dx-sidebar-menu-action[data-sidebar="menu-action"]::after {
|
|
position: absolute;
|
|
content: "";
|
|
inset: -0.5rem;
|
|
}
|
|
|
|
@media (width >=768px) {
|
|
.dx-sidebar-menu-action[data-sidebar="menu-action"]::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="sm"]~.dx-sidebar-menu-action[data-sidebar="menu-action"] {
|
|
top: 0.25rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="default"]~.dx-sidebar-menu-action[data-sidebar="menu-action"] {
|
|
top: 0.375rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-size="lg"]~.dx-sidebar-menu-action[data-sidebar="menu-action"] {
|
|
top: 0.625rem;
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-menu-action[data-sidebar="menu-action"] {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 150ms ease-out, opacity 200ms ease-out, visibility 0ms 200ms;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.dx-sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"] {
|
|
opacity: 0;
|
|
}
|
|
|
|
@media (width >=768px) {
|
|
.dx-sidebar-menu-item:hover .dx-sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"],
|
|
.dx-sidebar-menu-item:focus-within .dx-sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"],
|
|
.dx-sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"][data-state="open"] {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.dx-sidebar-menu-button[data-sidebar="menu-button"][data-active="true"]~.dx-sidebar-menu-action[data-sidebar="menu-action"][data-show-on-hover="true"] {
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-badge {
|
|
position: absolute;
|
|
top: 0.375rem;
|
|
right: 0.25rem;
|
|
display: flex;
|
|
min-width: 1.25rem;
|
|
height: 1.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0.25rem;
|
|
border-radius: 0.375rem;
|
|
color: var(--dx-sidebar-foreground);
|
|
font-size: 0.75rem;
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 500;
|
|
pointer-events: none;
|
|
transition: opacity 200ms ease-out;
|
|
user-select: none;
|
|
}
|
|
|
|
.dx-sidebar-menu-item:hover .dx-sidebar-menu-badge,
|
|
.dx-sidebar-menu-item:has(.dx-sidebar-menu-button[data-active="true"]) .dx-sidebar-menu-badge {
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-item:has(.dx-sidebar-menu-button[data-size="sm"]) .dx-sidebar-menu-badge {
|
|
top: 0.25rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-item:has(.dx-sidebar-menu-button[data-size="lg"]) .dx-sidebar-menu-badge {
|
|
top: 0.625rem;
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-menu-badge {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dx-sidebar-menu-skeleton {
|
|
display: flex;
|
|
height: 2rem;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
border-radius: 0.375rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-skeleton-icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-skeleton-text {
|
|
height: 1rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.dx-sidebar-menu-sub {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.125rem 0.625rem;
|
|
border-left: 1px solid var(--dx-sidebar-border);
|
|
margin: 0 0.875rem;
|
|
gap: 0.25rem;
|
|
list-style: none;
|
|
transform: translateX(1px);
|
|
transition: opacity 200ms ease-out, max-height 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out, visibility 0ms 0ms;
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-menu-sub {
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 200ms ease-out, max-height 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out, visibility 0ms 200ms;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-item {
|
|
position: relative;
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button {
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 1.75rem;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
background: transparent;
|
|
color: var(--dx-sidebar-foreground);
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
gap: 0.5rem;
|
|
outline: none;
|
|
text-decoration: none;
|
|
transform: translateX(-1px);
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button:hover {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button:focus-visible {
|
|
box-shadow: 0 0 0 2px var(--dx-sidebar-ring);
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button:active {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button:disabled,
|
|
.dx-sidebar-menu-sub-button[aria-disabled="true"] {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button[data-active="true"] {
|
|
background: var(--dx-sidebar-accent);
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex-shrink: 0;
|
|
color: var(--dx-sidebar-accent-foreground);
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button>span:last-child {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button[data-size="sm"] {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dx-sidebar-menu-sub-button[data-size="md"] {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
[data-collapsible="icon"] .dx-sidebar-menu-sub-button {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|