Files
openmct/platform/commonUI/general/res/sass/user-environ/_layout.scss
Charles Hacskaylo b09ec23617 [Frontend] Renew of ue-frontend
Picks up markup and CSS changes from
open1174 (breadcrumbs)
2015-06-02 16:12:19 -07:00

257 lines
4.3 KiB
SCSS

@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: $interiorMarginSm;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
}
.browse-area,
.edit-area,
.editor {
position: absolute;
}
.editor {
@include border-radius($basicCr * 1.5);
}
.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%;
right: auto;
}
&.right,
.right {
width: 45%;
left: auto;
right: 0;
text-align: right;
.icon.major {
margin-left: $interiorMargin * 3;
}
// .icon.major {
// margin-left: $interiorMargin;
// }
}
}
}
.user-environ {
.browse-area,
.edit-area,
.editor {
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
right: $bodyMargin;
bottom: $bodyMargin + $ueFooterH + $interiorMargin;
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 {
top: auto;
right: $bodyMargin;
bottom: $bodyMargin;
left: $bodyMargin;
height: $ueFooterH;
.status-holder {
right: $ueAppLogoW + $bodyMargin;
}
.app-logo {
left: auto;
width: $ueAppLogoW;
}
}
}
.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 + $interiorMargin;
}
}
&.items {
.object-browse-bar {
// bottom: auto;
.left.abs,
.right.abs {
top: auto;
}
.right.abs {
bottom: $interiorMargin;
}
}
.object-holder {
top: $ueTopBarH + $interiorMargin;
}
}
&.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;
}