@lyra/components
Version:
Basic UX components
119 lines (99 loc) • 1.94 kB
CSS
@import 'part:@lyra/base/theme/variables-style';
.root {
@media (--screen-medium) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
}
.vertical {
composes: root;
}
.splitPane {
position: relative;
height: 100%;
}
.splitWrapper {
position: absolute;
height: 100%;
width: 100%;
}
.isCollapsed {
@nest & :global(.Pane1) {
margin-right: 0;
margin-left: 0;
}
}
.singleWrapper {
/*
This is to keep the DOM-tree in the same structure
to avoide a re-render of the dom.
*/
@nest & :global(.Pane1) {
flex: 1 ;
transition: all 0.3s;
}
@nest & :global(.Pane2) {
display: none;
}
}
.doubleWrapper {
/*
This may be needed when we use more panes
@nest & :global(.Pane1) {
flex: initial !important;
transition: all 0.3s;
}
@nest & :global(.Pane2) {
display: block;
}
*/
}
.paneInSplitted {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.paneInSplittedCollapsed {
composes: paneInSplitted;
padding: 0;
}
.Resizer {
background: var(--gray-darker);
opacity: 0.1;
z-index: 10;
box-sizing: border-box;
background-clip: padding-box;
@nest &:hover {
opacity: 0.5;
transition: border 0.2s ease, opacity 0.1s ease;
}
@nest .vertical & {
width: 11px;
margin: 0 -5px;
border-left: 5px solid color(var(--component-border-color) a(0%));
border-right: 5px solid color(var(--component-border-color) a(0%));
cursor: col-resize;
@nest &:hover {
border-left: 5px solid color(var(--component-border-color) a(70%));
border-right: 5px solid color(var(--component-border-color) a(70%));
}
}
@nest .disabled & {
cursor: not-allowed;
@nest &:hover {
border-color: transparent;
}
}
}
.ResizerIsCollapsed {
composes: Resizer;
}