Files
openmct/platform/commonUI/general/res/sass/helpers/_splitter.scss
2015-06-08 11:14:58 -07:00

93 lines
2.7 KiB
SCSS

/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.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: $ueTopBarH + $interiorMargin;
}
.edit-area .splitter {
top: 0;
}