openmct/platform/commonUI/general/res/sass/user-environ/_layout.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.
 *****************************************************************************/
@mixin cols($totalCols, $span) {
    $cw: 100% / $totalCols;
    min-width: (500px / $totalCols) * $span;
    @if ($totalCols != $span) {
        width: ($cw * $span) - $ueColMargin;
    } @else {
        width: $cw;
    }
}

.holder-all {
	$myM: 0; // $interiorMarginSm;
	top: $myM;
	right: $myM;
	bottom: $myM;
	left: $myM;
}

.browse-area,
.edit-area,
.editor {
	position: absolute;
}


.editor {
	@include border-radius($basicCr * 1.5);
}

// style="min-width: 150px; max-width: 800px; width: 25%;"
// NOTE: Added to adjust the browse folder tree list view
//.hider-check {
//    @include phoneandtablet {
//        
//    } 
//}

.browse-manage {
    @include phone {
        width: 100px;
    }
    @include tablet {
        width: 150px;
    }    
    @include desktop {
        min-width: 150px;
        max-width: 800px;
        width: 25%;   
    }   
}

.contents {
    $myM: 0; //$interiorMargin;
    box-sizing: border-box;
    position: absolute;
    top: $myM;
    right: $myM;
    bottom: $myM;
    left: $myM;
    &.nomargin {
        $myM: 0px;
        right: $myM;
        bottom: $myM;
        left: $myM;
    }
}

.bar {
    .icon.major {
        margin-right: $interiorMargin;
    }
    &.abs {
	    text-wrap: none;
	    white-space: nowrap;
    }
    &.left,
    .left {
        width: 45% !important;
        right: auto !important;
    }
    &.right,
    .right {
        width: 45% !important;
        left: auto !important;
        text-align: right;
        .icon.major {
            margin-left: $interiorMargin * 3;
        }
    }
}

.user-environ {
	.browse-area,
	.edit-area,
	.editor {
		top: $bodyMargin + $ueTopBarH + ($interiorMargin);
		right: $bodyMargin;
		bottom: $ueFooterH + $bodyMargin;
		left: $bodyMargin;
	}

	.browse-area,
	.edit-area {
		> .contents {
			left: 0;
			right: 0;
		}
	}

	.edit-area {
		$tbH: $btnToolbarH + $interiorMargin;
		top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
		.tool-bar {
			bottom: auto;
			height: $tbH;
			line-height: $btnToolbarH;
		}
		.work-area {
			top: $tbH + $interiorMargin * 2;
		}
	}

	.bottom-bar {
        //@include absPosDefault($bodyMargin);
		@include absPosDefault(0);// New status bar design
		top: auto;
		height: $ueFooterH;
		.status-holder {
			//right: $ueAppLogoW + $bodyMargin; New status bar design
			z-index: 1;
		}
		.app-logo {
			left: auto;
			width: $ueAppLogoW;
			z-index: 2;
		}
	}
}

.cols {
    @include clearfix;
    .col {
        @include box-sizing(border-box);
        @include clearfix;
        //		background: rgba(#ffcc00, 0.2);
        float: left;
        margin-left: $ueColMargin;
        padding-left: $interiorMargin;
        position: relative;
        &:first-child {
            margin-left: 0;
            padding-left: 0;
        }
    }
    &.cols-2 {
        $nc: 2;
        .col-1 {
            @include cols($nc, 1);
        }
    }
    &.cols-2-ff {
        // 2 columns, first column is fixed, second is fluid
        .col-100px {
            width: 100px;
        }
    }

    &.cols-6 {
        $nc: 6;
        .col-1 {
            @include cols($nc, 1);
        }
    }
    &.cols-16 {
        $nc: 16;
        .col-1 {
            @include cols($nc, 1);
        }
        .col-2 {
            @include cols($nc, 2);
        }
        .col-7 {
            @include cols($nc, 7);
        }
    }
    &.cols-32 {
        $nc: 32;
        .col-2 {
            @include cols($nc, 2);
        }
        .col-15 {
            @include cols($nc, 15);
        }
    }
    .l-row {
        @include clearfix;
        padding: $interiorMargin 0;
    }
}

.pane {
    position: absolute;
    &.treeview {
	    .create-btn-holder {
		    bottom: auto; top: 0;
		    height: $ueTopBarH;
		    .wrapper.menu-element {
			    position: absolute;
			    bottom: $interiorMargin;
		    }
	    }
	    .tree-holder {
		    overflow: auto;
		    top: $ueTopBarH + $interiorMarginLg;
	    }
    }
    &.items {
        .object-browse-bar {
	        .left.abs,
	        .right.abs {
		        top: auto;
	        }
        }
        .object-holder {
            top: $ueTopBarH + $interiorMarginLg;
        }
    }
	&.edit-main {
		.object-holder {
			top: 0;
		}
	}
	&.edit-objects {
	}
	.object-holder {
		overflow: auto;
	}
}

.split-layout {
	&.horizontal {
		// Slides up and down
		>.pane {
//			@include test();
			margin-top: $interiorMargin;
			&:first-child {
				margin-top: 0;
			}
		}
	}
	&.vertical {
		// Slides left and right
		>.pane {
			margin-left: $interiorMargin;
			>.holder {
				left: 0;
				right: 0;
			}
			&:first-child {
				margin-left: 0;
				.holder {
					right: $interiorMargin;
				}
			}
		}

	}
}

.vscroll {
    overflow-y: auto;
}