/**
* Main Layout Styles
* Responsive layout with integrated context sidebar
*/
.main-layout {
display: flex;
flex-direction: column;
height: 100vh;
background: var(--cds-background);
overflow: hidden;
.layout-content {
display: flex;
flex: 1;
overflow: hidden;
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
transition: margin-left 150ms ease;
background: var(--cds-layer-01);
&.with-sidebar {
margin-left: 0;
}
&.full-width {
margin-left: 0;
}
}
}
// Mobile overlay for sidebar
.mobile-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
backdrop-filter: blur(2px);
}
}
// Responsive adjustments
@media (max-width: 768px) {
.main-layout {
.layout-content {
.main-content {
&.with-sidebar {
margin-left: 0;
}
}
}
}
}
@media (max-width: 480px) {
.main-layout {
.layout-content {
flex-direction: column;
}
}
}
// Dark theme support
[data-carbon-theme="g100"] {
.main-layout {
.mobile-overlay {
background: rgba(0, 0, 0, 0.7);
}
}
}
// Animation states for layout transitions
.layout-transition-enter {
opacity: 0;
transform: translateX(-20px);
}
.layout-transition-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 200ms ease, transform 200ms ease;
}
.layout-transition-exit {
opacity: 1;
transform: translateX(0);
}
.layout-transition-exit-active {
opacity: 0;
transform: translateX(-20px);
transition: opacity 200ms ease, transform 200ms ease;
}
