updates on the full ui and followed by astryx
This commit is contained in:
@@ -79,17 +79,17 @@ export default function Sidebar({ isCollapsed, onCollapsedChange }) {
|
||||
height: 18px !important;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item[aria-label]:hover {
|
||||
background-color: rgba(192, 18, 39, 0.08) !important;
|
||||
background-color: rgba(10, 19, 23, 0.08) !important;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item[aria-label]:focus-visible {
|
||||
outline: 2px solid rgba(192, 18, 39, 0.4);
|
||||
outline: 2px solid rgba(10, 19, 23, 0.4);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item[aria-label][data-selected='selected'] {
|
||||
background-color: rgba(192, 18, 39, 0.12) !important;
|
||||
background-color: rgba(10, 19, 23, 0.12) !important;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item[aria-label][data-selected='selected'] .astryx-icon {
|
||||
color: #C01227 !important;
|
||||
color: #0A1317 !important;
|
||||
}
|
||||
|
||||
/* Expanded rows: rounded hover/selected states with a left accent
|
||||
@@ -107,37 +107,37 @@ export default function Sidebar({ isCollapsed, onCollapsedChange }) {
|
||||
position: relative;
|
||||
margin-inline: 2px;
|
||||
height: auto;
|
||||
padding-block: 8px !important;
|
||||
padding-block: 12px !important;
|
||||
transition: background-color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item:not([aria-label])::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
width: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #C01227;
|
||||
background-color: #0A1317;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item:not([aria-label]):hover {
|
||||
background-color: rgba(192, 18, 39, 0.05) !important;
|
||||
background-color: rgba(10, 19, 23, 0.05) !important;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item:not([aria-label]):focus-visible {
|
||||
outline: 2px solid rgba(192, 18, 39, 0.4);
|
||||
outline: 2px solid rgba(10, 19, 23, 0.4);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item:not([aria-label])[data-selected='selected'] {
|
||||
background-color: rgba(192, 18, 39, 0.08) !important;
|
||||
background-color: rgba(10, 19, 23, 0.08) !important;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item:not([aria-label])[data-selected='selected']::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.doormile-side-nav .astryx-side-nav-item:not([aria-label])[data-selected='selected'] .astryx-icon {
|
||||
color: #C01227 !important;
|
||||
color: #0A1317 !important;
|
||||
}
|
||||
|
||||
/* Astryx's sticky-bottom footer wrapper (the toggle button's direct
|
||||
@@ -150,19 +150,18 @@ export default function Sidebar({ isCollapsed, onCollapsedChange }) {
|
||||
padding-block: 8px !important;
|
||||
}
|
||||
|
||||
/* Collapse/expand toggle (the "<" / ">" chevron button). It sits
|
||||
right on the sidebar's edge, so the default square ghost-button
|
||||
hover clips against that border and looks broken. Give it a
|
||||
clean circular hover detached from the edge instead. */
|
||||
/* Collapse/expand toggle (the "<" / ">" chevron button). Give it a
|
||||
clean circular hover, centered on the same axis as the nav icons
|
||||
above it (the rail's own 8px inline padding already keeps it clear
|
||||
of the sidebar's edge, so no extra offset is needed here). */
|
||||
.doormile-side-nav button[aria-label*="sidebar"],
|
||||
.doormile-side-nav button[aria-label*="navigation"] {
|
||||
border-radius: 50% !important;
|
||||
transition: background-color 0.15s ease !important;
|
||||
transform: translateX(-6px) !important;
|
||||
}
|
||||
.doormile-side-nav button[aria-label*="sidebar"]:hover,
|
||||
.doormile-side-nav button[aria-label*="navigation"]:hover {
|
||||
background-color: rgba(192, 18, 39, 0.08) !important;
|
||||
background-color: rgba(10, 19, 23, 0.08) !important;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user