Files
openmct/platform/commonUI/general/res/sass/helpers/_splitter.scss
Charles Hacskaylo feda668e18 [Frontend] Applied split pane functionality to edit mode
WTD-1002
SplitPaneController added to edit-object.html;
CSS modded to remove positioning that is now under splitter control;
2015-03-06 08:11:27 -08:00

72 lines
1.5 KiB
SCSS

.split-layout {
$b: lighten($colorBodyBg, 5%);
$splitterD: 5px;
// TEMP VAlS - this will need to be redone when we implement a draggable splitter
$splitL: 85%;
$splitT: 70%;
.splitter {
background-color: $b;
@include box-shadow(rgba(black, 0.4) 0 0 3px);
overflow: hidden;
position: absolute;
z-index: 1;
}
&.horizontal {
// Slides vertically up and down, splitting the element horizontally
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
.pane {
left: 0;
right: 0;
&.top {
bottom: auto;
// height: $splitT;
}
&.bottom {
top: auto;
// height: 100% - $splitT;
}
}
>.splitter {
@include controlGrippy($b, horizontal);
cursor: row-resize;
left: 0; right: 0;
width: auto;
height: $splitterD;
// margin-top: ($splitterD + 2) * -1; // Controlled by splitter
// top: $splitT; // Controlled by splitter
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
top: 0;
bottom: 0;
&.left {
right: auto;
// width: $splitL - 1%; // Controlled by splitter
}
&.right {
left: auto;
// width: 100% - $splitL; // Controlled by splitter
}
}
>.splitter {
@include controlGrippy($b, vertical);
bottom: 0;
cursor: col-resize;
width: $splitterD;
// margin-left: ($splitterD + 2) * -1; // Controlled by splitter
// left: $splitL; // Controlled by splitter
}
}
}
.browse-area .splitter {
top: $ueBrowseViewBarH + $interiorMargin;
}
.edit-area .splitter {
top: 0;
}