diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index ad5e3b25fb..9cfe75ab35 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -706,34 +706,30 @@ mct-container { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 28, ../sass/tree/_layout.scss */ -.pane.left { - transition: width 0.25s; } - /* line 31, ../sass/tree/_layout.scss */ - .pane.left.inactive { - width: 0 !important; - min-width: 0 !important; } +/* line 30, ../sass/tree/_layout.scss */ +.pane.left.inactive { + width: 0 !important; + min-width: 0 !important; } -/* line 37, ../sass/tree/_layout.scss */ +/* line 39, ../sass/tree/_layout.scss */ .splitter-bar.left { opacity: 1; - transition: left 0.25s, opacity 0.25s, visibility 0.25s; } - /* line 41, ../sass/tree/_layout.scss */ + transition: opacity 0.35s, visibility 0.35s; } + /* line 44, ../sass/tree/_layout.scss */ .splitter-bar.left.inactive { - left: 0 !important; visibility: hidden; opacity: 0; - width: 0; } - /* line 48, ../sass/tree/_layout.scss */ + transition: opacity 0s, visibility 0s; } + /* line 50, ../sass/tree/_layout.scss */ .splitter-bar.left.inactive:before { border-width: 0; } -/* line 55, ../sass/tree/_layout.scss */ +/* line 57, ../sass/tree/_layout.scss */ .create-btn.major { top: 0; left: 0; - transition: all 0.25s; } - /* line 60, ../sass/tree/_layout.scss */ + transition: all 0.35s; } + /* line 62, ../sass/tree/_layout.scss */ .create-btn.major.inactivePane { top: 0; left: 0; @@ -746,21 +742,22 @@ mct-container { line-height: 14px; left: -11px; top: 20px; } - /* line 78, ../sass/tree/_layout.scss */ + /* line 80, ../sass/tree/_layout.scss */ .create-btn.major.inactivePane span { display: none; } -/* line 85, ../sass/tree/_layout.scss */ +/* line 87, ../sass/tree/_layout.scss */ .items.pane { - transition: left 0.25s; } - /* line 88, ../sass/tree/_layout.scss */ + transition: left 0.35s; + transition-timing-function: ease-out; } + /* line 91, ../sass/tree/_layout.scss */ .items.pane.leftInactive { left: 0 !important; } -/* line 94, ../sass/tree/_layout.scss */ +/* line 97, ../sass/tree/_layout.scss */ .object-browse-bar { position: relative; } - /* line 97, ../sass/tree/_layout.scss */ + /* line 100, ../sass/tree/_layout.scss */ .object-browse-bar .left-pane-tabs { position: relative; cursor: pointer; @@ -775,10 +772,10 @@ mct-container { background-color: lightgrey; border: 1px solid grey; border-left-width: 0; } - /* line 116, ../sass/tree/_layout.scss */ + /* line 119, ../sass/tree/_layout.scss */ .object-browse-bar .left-pane-tabs.inactivePane { left: -16px; } - /* line 121, ../sass/tree/_layout.scss */ + /* line 124, ../sass/tree/_layout.scss */ .object-browse-bar .items-select { margin-left: 10px; } diff --git a/platform/commonUI/general/res/sass/tree/_layout.scss b/platform/commonUI/general/res/sass/tree/_layout.scss index 4bb49e23f3..59730c5725 100644 --- a/platform/commonUI/general/res/sass/tree/_layout.scss +++ b/platform/commonUI/general/res/sass/tree/_layout.scss @@ -22,28 +22,30 @@ // Added by shale on 08/19/2015. Styling for the collapsible tree view. -$transitionTime: 0.25s; +$transitionTime: 0.35s; -//.pane.right, +// Set the left pane (which contains the tree) to have no width to close +// (not display:none because we still need to have access to the create button) .pane.left { - transition: width $transitionTime; - &.inactive { width: 0 !important; min-width: 0 !important; } } +// Hide the splitter bar when the left pane is closed +// Fade the splitter bar in when opening menu, but immediately fade +// out when closing menu .splitter-bar.left { opacity: 1; - transition: left $transitionTime, opacity $transitionTime, visibility $transitionTime; + + transition: opacity $transitionTime, visibility $transitionTime; &.inactive { - left: 0 !important; - //display: none; visibility: hidden; opacity: 0; - width: 0; + + transition: opacity 0s, visibility 0s; &:before { border-width: 0; @@ -84,6 +86,7 @@ $transitionTime: 0.25s; // The main view needs to align left when the panes are moving around .items.pane { transition: left $transitionTime; + transition-timing-function: ease-out; &.leftInactive { left: 0 !important;