@lyra/components
Version:
Basic UX components
34 lines (30 loc) • 596 B
CSS
.root {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-self: stretch;
height: 100vh;
position: relative;
}
.pane {
flex-grow: 1;
flex-basis: auto;
transition: all 1s linear;
position: relative;
border-right: 1px solid transparent;
padding: 0 1rem;
}
.pane:not(.paneCollapsed) + .paneCollapsed {
border-left: 1px solid #ccc;
}
.paneCollapsed {
composes: pane;
flex-grow: 0.0001;
flex-basis: 2.5rem;
border-right: 1px solid #ccc;
overflow: hidden;
padding: 0 0.5rem;
padding-left: 0;
}