From 2b92c1619e4210d61e3b6048d72f588f4bb63d98 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 9 Nov 2015 15:10:52 -0800 Subject: [PATCH] [Frontend] Min/max widths on panes adjusted open #250 Fixed min and max widths for panes to prevent weird pane expand/collapse behaviors, like Inspector covering the main view area; Added min-width to .holder-all element; --- .../commonUI/general/res/sass/_constants.scss | 13 +- .../res/sass/user-environ/_layout.scss | 61 ++-------- .../espresso/res/css/theme-espresso.css | 113 +++++++++--------- .../themes/snow/res/css/theme-snow.css | 113 +++++++++--------- 4 files changed, 131 insertions(+), 169 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index e0d9f34bd6..c60767e4ae 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -35,15 +35,13 @@ $ltGamma: 20%; $btnFontSizeToH: 0.45; /************************** LAYOUT */ -$ueTopBarH: 24px; // Change when breadcrumb is enabled +$ueTopBarH: 24px; $ueTopBarEditH: 30px; $ueTopBarBtnH: 35px; $ueFooterH: 25px; $ueColMargin: 1.5%; $ueAppLogoW: 105px; $ueEditToolBarH: 25px; -$ueBrowseLeftPaneTreeW: 25%; -$ueBrowseRightPaneInspectW: 20%; $ueCollapsedPaneEdgeM: 22px; $uePaneMiniTabH: $ueTopBarH; $uePaneMiniTabW: 9px; @@ -51,6 +49,15 @@ $uePaneMiniTabCollapsedW: 11px; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; $ueTimeControlH: (33px, 20px, 20px); +// Panes +$ueBrowseLeftPaneTreeMinW: 150px; +$ueBrowseLeftPaneTreeMaxW: 35%; +$ueBrowseLeftPaneTreeW: 25%; +$ueBrowseRightPaneInspectMinW: 200px; +$ueBrowseRightPaneInspectMaxW: 35%; +$ueBrowseRightPaneInspectW: 20%; +$ueDesktopMinW: 600px; + // Overlay $ovrTopBarH: 45px; $ovrFooterH: 24px; diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index fddff7e00b..a9024334e2 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -46,31 +46,6 @@ } } -// .bar and following commented out as part of refactor to use flex layout for this stuff -//.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; - // text-align: right; - // .icon.major { - // margin-left: $interiorMargin * 3; - // } - //} - //} -//} - .user-environ { .browse-area, .editor { @@ -139,14 +114,13 @@ .split-pane-component.pane { //@include test(green); &.treeview.left { - min-width: 150px; - max-width: 800px; + min-width: $ueBrowseLeftPaneTreeMinW; + max-width: $ueBrowseLeftPaneTreeMaxW; width: $ueBrowseLeftPaneTreeW; } &.t-inspect.right { - min-width: 200px; - max-width: 600px; - //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element + min-width: $ueBrowseRightPaneInspectMinW; + max-width: $ueBrowseRightPaneInspectMaxW; width: $ueBrowseRightPaneInspectW; z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath } @@ -180,30 +154,6 @@ z-index: 2; } - //&.treeview.left { - // Converted to flex layout - - //.create-btn-holder { - // //bottom: auto; - // //top: 0; - // height: $ueTopBarH; - // .wrapper.menu-element { - // position: absolute; - // bottom: $interiorMargin; - // } - //} - //.holder-treeview-elements{ - // - //} - //.search-holder { - // top: $ueTopBarH + $interiorMarginLg; - //} - //.tree-holder { - // overflow: auto; - // top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin; - //} - //} - .mini-tab-icon.toggle-pane { //@include test(blue, 0.3); z-index: 5; @@ -382,6 +332,9 @@ } @include desktop { + .holder-all { + min-width: $ueDesktopMinW; + } .pane.treeview.left .tree-holder { padding-right: $interiorMargin; } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 856b27f249..2327e8c61d 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -4375,37 +4375,34 @@ span.req { bottom: 0px; left: 0px; } -/* .icon.major { - margin-right: $interiorMargin; - }*/ -/* line 75, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 50, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .browse-area, .user-environ .editor { top: 0; left: 0; right: 0; bottom: 25px; } -/* line 82, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 57, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .browse-area > .contents, .user-environ .edit-area > .contents { left: 0; right: 0; } -/* line 88, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 63, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area { top: 45px; left: 10px; right: 10px; bottom: 35px; } - /* line 94, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 69, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area .tool-bar { bottom: auto; height: 30px; line-height: 25px; } - /* line 99, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 74, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area .object-holder.work-area { top: 40px; overflow: auto; } -/* line 106, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 81, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar { overflow: hidden; position: absolute; @@ -4421,7 +4418,7 @@ span.req { background: #000; color: gray; font-size: .7rem; } - /* line 115, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 90, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .status-holder { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -4440,7 +4437,7 @@ span.req { right: 120px; text-transform: uppercase; z-index: 1; } - /* line 124, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 99, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .app-logo { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -4457,80 +4454,80 @@ span.req { left: auto; width: 105px; z-index: 2; } - /* line 131, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 106, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .app-logo.logo-openmctweb { background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; } -/* line 141, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 116, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.treeview.left { min-width: 150px; - max-width: 800px; + max-width: 35%; width: 25%; } -/* line 146, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 121, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.t-inspect.right { min-width: 200px; - max-width: 600px; + max-width: 35%; width: 20%; z-index: 3; } -/* line 158, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 132, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right { width: 15%; } - /* line 160, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 134, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom { min-height: 50px; height: 30%; } -/* line 168, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 142, ../../../../general/res/sass/user-environ/_layout.scss */ .pane { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; } - /* line 172, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 146, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .pane-header { text-transform: uppercase; height: 24px; line-height: 24px; } - /* line 178, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 152, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .primary-pane { z-index: 2; } - /* line 207, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 157, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane { z-index: 5; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 207, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 157, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane { top: 10px; height: 24px; line-height: 24px; } - /* line 216, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 166, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane:after { opacity: 0; } - /* line 221, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 171, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.collapsed:before { opacity: 0; } - /* line 224, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 174, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.collapsed:after { opacity: 1; } - /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 178, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left { left: 0; -moz-transform: translateX(-34px); -ms-transform: translateX(-34px); -webkit-transform: translateX(-34px); transform: translateX(-34px); } - /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 181, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after { content: '\6d'; } - /* line 234, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed { left: 0; -moz-transform: translateX(-17px); -ms-transform: translateX(-17px); -webkit-transform: translateX(-17px); transform: translateX(-17px); } - /* line 238, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 188, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4548,16 +4545,16 @@ span.req { -o-transition-delay: 200ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; } - /* line 242, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 192, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right { right: 10px; } - /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 194, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after { content: '\e615'; } - /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 197, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed { right: 5px; } } - /* line 256, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 206, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, @@ -4571,30 +4568,30 @@ span.req { .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { top: auto; } -/* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 216, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-treeview-elements { top: 10px; right: 0; bottom: 10px; left: 10px; } -/* line 273, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 223, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-object-and-inspector { top: 0; right: 0; bottom: 0; left: 0; } - /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-object-and-inspector .holder-object { top: 10px; bottom: 10px; } - /* line 282, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 232, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-object-and-inspector .holder-inspector-elements { top: 10px; bottom: 10px; left: 10px; right: 10px; } -/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 241, ../../../../general/res/sass/user-environ/_layout.scss */ .object-holder { overflow: auto; position: absolute; @@ -4605,11 +4602,11 @@ span.req { width: auto; height: auto; top: 34px; } - /* line 295, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 245, ../../../../general/res/sass/user-environ/_layout.scss */ .object-holder.l-controls-visible.l-time-controller-visible { bottom: 88px; } -/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 251, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu-btn, @@ -4621,13 +4618,13 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 314, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 264, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } /***************************************************** OBJECT BROWSE BAR */ -/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 270, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { overflow: visible; position: absolute; @@ -4643,20 +4640,20 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 10px; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { margin-right: 10px; } -/* line 342, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .tree-holder, .pane-tree-hidden .splitter-treeview, .pane-tree-hidden .holder-treeview-elements { opacity: 0; } -/* line 352, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .tree-holder, .pane-tree-showing .splitter-treeview { -moz-transition-property: opacity; @@ -4676,7 +4673,7 @@ span.req { -webkit-transition-delay: 250ms; transition-delay: 250ms; opacity: 1; } -/* line 358, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 308, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .holder-treeview-elements { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4695,7 +4692,7 @@ span.req { -webkit-transition-delay: 200ms; transition-delay: 200ms; } -/* line 365, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .splitter-inspect { -moz-transition-property: opacity; @@ -4716,28 +4713,32 @@ span.req { transition-delay: 250ms; opacity: 1; } -/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .t-inspect { z-index: 1 !important; } -/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .splitter-inspect { opacity: 0; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 335, ../../../../general/res/sass/user-environ/_layout.scss */ + .holder-all { + min-width: 600px; } + + /* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { padding-right: 5px; } - /* line 389, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .pane.right.primary-pane { left: 22px !important; } - /* line 392, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 345, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .pane.left { right: 22px !important; } - /* line 394, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 347, ../../../../general/res/sass/user-environ/_layout.scss */ .pane:not(.resizing) { -moz-transition-property: width, left, right; -o-transition-property: width, left, right; @@ -4756,7 +4757,7 @@ span.req { -webkit-transition-delay: 0; transition-delay: 0; } - /* line 397, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 350, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.primary-pane .object-browse-bar { min-width: 200px; } } /***************************************************************************** diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 4e572df8b3..5334dd6124 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -4297,37 +4297,34 @@ span.req { bottom: 0px; left: 0px; } -/* .icon.major { - margin-right: $interiorMargin; - }*/ -/* line 75, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 50, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .browse-area, .user-environ .editor { top: 0; left: 0; right: 0; bottom: 25px; } -/* line 82, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 57, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .browse-area > .contents, .user-environ .edit-area > .contents { left: 0; right: 0; } -/* line 88, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 63, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area { top: 45px; left: 10px; right: 10px; bottom: 35px; } - /* line 94, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 69, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area .tool-bar { bottom: auto; height: 30px; line-height: 25px; } - /* line 99, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 74, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area .object-holder.work-area { top: 40px; overflow: auto; } -/* line 106, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 81, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar { overflow: hidden; position: absolute; @@ -4343,7 +4340,7 @@ span.req { background: #000; color: white; font-size: .7rem; } - /* line 115, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 90, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .status-holder { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -4362,7 +4359,7 @@ span.req { right: 120px; text-transform: uppercase; z-index: 1; } - /* line 124, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 99, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .app-logo { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -4379,80 +4376,80 @@ span.req { left: auto; width: 105px; z-index: 2; } - /* line 131, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 106, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .app-logo.logo-openmctweb { background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; } -/* line 141, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 116, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.treeview.left { min-width: 150px; - max-width: 800px; + max-width: 35%; width: 25%; } -/* line 146, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 121, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.t-inspect.right { min-width: 200px; - max-width: 600px; + max-width: 35%; width: 20%; z-index: 3; } -/* line 158, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 132, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right { width: 15%; } - /* line 160, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 134, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom { min-height: 50px; height: 30%; } -/* line 168, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 142, ../../../../general/res/sass/user-environ/_layout.scss */ .pane { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; } - /* line 172, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 146, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .pane-header { text-transform: uppercase; height: 24px; line-height: 24px; } - /* line 178, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 152, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .primary-pane { z-index: 2; } - /* line 207, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 157, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane { z-index: 5; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 207, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 157, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane { top: 10px; height: 24px; line-height: 24px; } - /* line 216, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 166, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane:after { opacity: 0; } - /* line 221, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 171, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.collapsed:before { opacity: 0; } - /* line 224, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 174, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.collapsed:after { opacity: 1; } - /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 178, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left { left: 0; -moz-transform: translateX(-33px); -ms-transform: translateX(-33px); -webkit-transform: translateX(-33px); transform: translateX(-33px); } - /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 181, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after { content: '\6d'; } - /* line 234, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed { left: 0; -moz-transform: translateX(-17px); -ms-transform: translateX(-17px); -webkit-transform: translateX(-17px); transform: translateX(-17px); } - /* line 238, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 188, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4470,16 +4467,16 @@ span.req { -o-transition-delay: 200ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; } - /* line 242, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 192, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right { right: 10px; } - /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 194, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after { content: '\e615'; } - /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 197, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed { right: 5px; } } - /* line 256, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 206, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, @@ -4493,30 +4490,30 @@ span.req { .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { top: auto; } -/* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 216, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-treeview-elements { top: 10px; right: 0; bottom: 10px; left: 10px; } -/* line 273, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 223, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-object-and-inspector { top: 0; right: 0; bottom: 0; left: 0; } - /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-object-and-inspector .holder-object { top: 10px; bottom: 10px; } - /* line 282, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 232, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .holder.holder-object-and-inspector .holder-inspector-elements { top: 10px; bottom: 10px; left: 10px; right: 10px; } -/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 241, ../../../../general/res/sass/user-environ/_layout.scss */ .object-holder { overflow: auto; position: absolute; @@ -4527,11 +4524,11 @@ span.req { width: auto; height: auto; top: 34px; } - /* line 295, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 245, ../../../../general/res/sass/user-environ/_layout.scss */ .object-holder.l-controls-visible.l-time-controller-visible { bottom: 88px; } -/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 251, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu-btn, @@ -4543,13 +4540,13 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 314, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 264, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } /***************************************************** OBJECT BROWSE BAR */ -/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 270, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { overflow: visible; position: absolute; @@ -4565,20 +4562,20 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 10px; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { margin-right: 10px; } -/* line 342, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .tree-holder, .pane-tree-hidden .splitter-treeview, .pane-tree-hidden .holder-treeview-elements { opacity: 0; } -/* line 352, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .tree-holder, .pane-tree-showing .splitter-treeview { -moz-transition-property: opacity; @@ -4598,7 +4595,7 @@ span.req { -webkit-transition-delay: 250ms; transition-delay: 250ms; opacity: 1; } -/* line 358, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 308, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .holder-treeview-elements { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4617,7 +4614,7 @@ span.req { -webkit-transition-delay: 200ms; transition-delay: 200ms; } -/* line 365, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .splitter-inspect { -moz-transition-property: opacity; @@ -4638,28 +4635,32 @@ span.req { transition-delay: 250ms; opacity: 1; } -/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .t-inspect { z-index: 1 !important; } -/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .splitter-inspect { opacity: 0; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 335, ../../../../general/res/sass/user-environ/_layout.scss */ + .holder-all { + min-width: 600px; } + + /* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { padding-right: 5px; } - /* line 389, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .pane.right.primary-pane { left: 22px !important; } - /* line 392, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 345, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .pane.left { right: 22px !important; } - /* line 394, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 347, ../../../../general/res/sass/user-environ/_layout.scss */ .pane:not(.resizing) { -moz-transition-property: width, left, right; -o-transition-property: width, left, right; @@ -4678,7 +4679,7 @@ span.req { -webkit-transition-delay: 0; transition-delay: 0; } - /* line 397, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 350, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.primary-pane .object-browse-bar { min-width: 200px; } } /*****************************************************************************