From 6e172359b45b55f16f03936394da2810993eb719 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 26 Aug 2015 18:15:29 -0700 Subject: [PATCH] [Mobile] IN PROGRESS: Significant re-org of search results styling open #74 Removed all styles for search-result-item in search/_search.scss and significantly re-orged .tree-item in _tree.scss and mobile/_tree.scss to control search-result-item styles; --- .../general/res/css/theme-espresso.css | 67 +--- platform/commonUI/general/res/css/tree.css | 334 ++++++++++-------- .../general/res/sass/mobile/_tree.scss | 56 ++- .../general/res/sass/search/_search.scss | 77 ---- .../commonUI/general/res/sass/tree/_tree.scss | 261 +++++++------- 5 files changed, 349 insertions(+), 446 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 12ed7b12aa..b34ca46897 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -4510,82 +4510,27 @@ input[type="text"] { height: auto; max-height: 100%; position: relative; } - /* line 235, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item { - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - -webkit-transition: background-color 0.25s; - transition: background-color 0.25s; - margin-bottom: 2px; - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; } - /* line 249, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item .label { - margin-left: 6px; } - /* line 253, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - left: 29px; - right: 5px; - font-size: .8em; - line-height: 17px; - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 275, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item.selected { - background: #005177; - color: #fff; } - /* line 279, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item.selected .view-control { - color: #0099cc; } - /* line 282, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item.selected .label .type-icon { - color: #fff; } - /* line 287, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link { - text-shadow: black 0 1px 2px; - z-index: 2; - color: #49dedb; - font-size: 8px; - line-height: 8px; - height: 8px; - width: 8px; - margin-left: -25px; } - /* line 296, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item:not(.selected):hover { - background: #404040; - color: #cccccc; } - /* line 299, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 302, ../sass/search/_search.scss */ - .search .search-scroll .results .search-result-item:not(.selected):hover .icon { - color: #33ccff; } - /* line 310, ../sass/search/_search.scss */ + /* line 233, ../sass/search/_search.scss */ .search .search-scroll .load-icon { position: relative; } - /* line 312, ../sass/search/_search.scss */ + /* line 235, ../sass/search/_search.scss */ .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 316, ../sass/search/_search.scss */ + /* line 239, ../sass/search/_search.scss */ .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 326, ../sass/search/_search.scss */ + /* line 249, ../sass/search/_search.scss */ .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 331, ../sass/search/_search.scss */ + /* line 254, ../sass/search/_search.scss */ .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 336, ../sass/search/_search.scss */ + /* line 259, ../sass/search/_search.scss */ .search .search-scroll .load-more-button { margin-top: 5px 0; font-size: 0.8em; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 701433a525..770338d9f8 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -162,148 +162,175 @@ ul.tree { ul.tree li { display: block; position: relative; } - /* line 28, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - -webkit-transition: background-color 0.25s; - transition: background-color 0.25s; - display: block; - font-size: 0.8em; - height: 1.5rem; - line-height: 1.5rem; - margin-bottom: 3px; - position: relative; } - /* line 40, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .view-control { - display: inline-block; - margin-left: 5px; - font-size: 0.75em; - width: 10px; } - @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 48, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .view-control:hover { - color: #ffc700; } } - /* line 54, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .label { - display: block; - overflow: hidden; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - width: auto; - height: auto; - line-height: 1.5rem; - left: 15px; } - /* line 62, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .label .type-icon { - text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; - font-size: 16px; - color: #0099cc; - left: 5px; - position: absolute; - top: 4px; - bottom: auto; - height: 16px; - line-height: 100%; - right: auto; - width: 16px; } - /* line 75, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { - text-shadow: black 0 1px 2px; - position: absolute; - z-index: 2; } - /* line 81, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { - color: #ff3c00; - font-size: 8px; - line-height: 8px; - height: 8px; - width: 8px; - top: 1px; - right: -2px; } - /* line 87, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .label .type-icon .icon.l-icon-link { - color: #49dedb; - font-size: 8px; - line-height: 8px; - height: 8px; - width: 8px; - left: -3px; - bottom: 0px; } - /* line 95, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .label .title-label { - overflow: hidden; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - width: auto; - height: auto; - display: block; - left: 30px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 106, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item.loading { - pointer-events: none; } - /* line 108, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item.loading .label { - opacity: 0.5; } - /* line 110, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item.loading .label .title-label { - font-style: italic; } - /* line 114, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item.loading .wait-spinner { - margin-left: 14px; } - /* line 119, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item.selected { - background: #005177; - color: #fff; } - /* line 123, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item.selected .view-control { - color: #0099cc; } - /* line 126, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item.selected .label .type-icon { - color: #fff; } - @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 134, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item:not(.selected):hover { - background: rgba(255, 255, 255, 0.1); - color: #cccccc; } - /* line 137, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item:not(.selected):hover .context-trigger { - display: block; } - /* line 140, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item:not(.selected):hover .icon { - color: #33ccff; } } - /* line 147, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item:not(.loading) { - cursor: pointer; } - /* line 151, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .context-trigger { - top: -1px; - position: absolute; - right: 3px; } - /* line 157, ../sass/tree/_tree.scss */ - ul.tree li span.tree-item .context-trigger .invoke-menu { - font-size: 0.75em; - height: 0.9rem; - line-height: 0.9rem; } - /* line 166, ../sass/tree/_tree.scss */ + /* line 29, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } +/* line 34, ../sass/tree/_tree.scss */ +.tree-item, +.search-result-item { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + -moz-transition: background-color 0.25s; + -o-transition: background-color 0.25s; + -webkit-transition: background-color 0.25s; + transition: background-color 0.25s; + display: block; + font-size: 0.8em; + height: 1.5rem; + line-height: 1.5rem; + margin-bottom: 3px; + position: relative; } + /* line 47, ../sass/tree/_tree.scss */ + .tree-item .view-control, + .search-result-item .view-control { + display: inline-block; + margin-left: 5px; + font-size: 0.75em; + width: 10px; } + @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 55, ../sass/tree/_tree.scss */ + .tree-item .view-control:hover, + .search-result-item .view-control:hover { + color: #ffc700; } } + /* line 61, ../sass/tree/_tree.scss */ + .tree-item .label, + .search-result-item .label { + display: block; + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; + line-height: 1.5rem; } + /* line 69, ../sass/tree/_tree.scss */ + .tree-item .label .type-icon, + .search-result-item .label .type-icon { + text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; + font-size: 16px; + color: #0099cc; + left: 5px; + position: absolute; + top: 4px; + bottom: auto; + height: 16px; + line-height: 100%; + right: auto; + width: 16px; } + /* line 82, ../sass/tree/_tree.scss */ + .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert, + .search-result-item .label .type-icon .icon.l-icon-link, + .search-result-item .label .type-icon .icon.l-icon-alert { + text-shadow: black 0 1px 2px; + position: absolute; + z-index: 2; } + /* line 88, ../sass/tree/_tree.scss */ + .tree-item .label .type-icon .icon.l-icon-alert, + .search-result-item .label .type-icon .icon.l-icon-alert { + color: #ff3c00; + font-size: 8px; + line-height: 8px; + height: 8px; + width: 8px; + top: 1px; + right: -2px; } + /* line 94, ../sass/tree/_tree.scss */ + .tree-item .label .type-icon .icon.l-icon-link, + .search-result-item .label .type-icon .icon.l-icon-link { + color: #49dedb; + font-size: 8px; + line-height: 8px; + height: 8px; + width: 8px; + left: -3px; + bottom: 0px; } + /* line 102, ../sass/tree/_tree.scss */ + .tree-item .label .title-label, + .search-result-item .label .title-label { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; + display: block; + left: 30px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 113, ../sass/tree/_tree.scss */ + .tree-item.loading, + .search-result-item.loading { + pointer-events: none; } + /* line 115, ../sass/tree/_tree.scss */ + .tree-item.loading .label, + .search-result-item.loading .label { + opacity: 0.5; } + /* line 117, ../sass/tree/_tree.scss */ + .tree-item.loading .label .title-label, + .search-result-item.loading .label .title-label { + font-style: italic; } + /* line 121, ../sass/tree/_tree.scss */ + .tree-item.loading .wait-spinner, + .search-result-item.loading .wait-spinner { + margin-left: 14px; } + /* line 126, ../sass/tree/_tree.scss */ + .tree-item.selected, + .search-result-item.selected { + background: #005177; + color: #fff; } + /* line 130, ../sass/tree/_tree.scss */ + .tree-item.selected .view-control, + .search-result-item.selected .view-control { + color: #0099cc; } + /* line 133, ../sass/tree/_tree.scss */ + .tree-item.selected .label .type-icon, + .search-result-item.selected .label .type-icon { + color: #fff; } + @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 141, ../sass/tree/_tree.scss */ + .tree-item:not(.selected):hover, + .search-result-item:not(.selected):hover { + background: rgba(255, 255, 255, 0.1); + color: #cccccc; } + /* line 144, ../sass/tree/_tree.scss */ + .tree-item:not(.selected):hover .context-trigger, + .search-result-item:not(.selected):hover .context-trigger { + display: block; } + /* line 147, ../sass/tree/_tree.scss */ + .tree-item:not(.selected):hover .icon, + .search-result-item:not(.selected):hover .icon { + color: #33ccff; } } + /* line 154, ../sass/tree/_tree.scss */ + .tree-item:not(.loading), + .search-result-item:not(.loading) { + cursor: pointer; } + /* line 158, ../sass/tree/_tree.scss */ + .tree-item .context-trigger, + .search-result-item .context-trigger { + top: -1px; + position: absolute; + right: 3px; } + /* line 164, ../sass/tree/_tree.scss */ + .tree-item .context-trigger .invoke-menu, + .search-result-item .context-trigger .invoke-menu { + font-size: 0.75em; + height: 0.9rem; + line-height: 0.9rem; } + +/* line 173, ../sass/tree/_tree.scss */ +.tree-item .label { + left: 15px; } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -326,28 +353,33 @@ ul.tree { * at runtime from the About dialog for additional information. *****************************************************************************/ @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 28, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item { + /* line 27, ../sass/mobile/_tree.scss */ + ul.tree ul.tree { + margin-left: 20px; } + + /* line 31, ../sass/mobile/_tree.scss */ + .tree-item, + .search-result-item { height: 35px; line-height: 35px; margin-bottom: 0px; } - /* line 32, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item .view-control { + /* line 36, ../sass/mobile/_tree.scss */ + .tree-item .view-control, + .search-result-item .view-control { position: absolute; font-size: 1.1em; right: 0px; width: 30px; text-align: center; } - /* line 41, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item .label { + /* line 45, ../sass/mobile/_tree.scss */ + .tree-item .label, + .search-result-item .label { left: 0; right: 35px; line-height: 35px; } - /* line 46, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item .label .type-icon { + /* line 50, ../sass/mobile/_tree.scss */ + .tree-item .label .type-icon, + .search-result-item .label .type-icon { top: 9px; bottom: auto; - height: 16px; } - /* line 57, ../sass/mobile/_tree.scss */ - ul.tree ul.tree { - margin-left: 20px; } } + height: 16px; } } diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 03e8051a14..e6efb4be55 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -22,40 +22,36 @@ @include phoneandtablet { ul.tree { - //@include menuUlReset(); - li { - //border-top: 1px solid $colorInteriorBorder; // TEMP - span.tree-item { - height: $mobileTreeItemH; - line-height: $mobileTreeItemH; - margin-bottom: 0px; - .view-control { - //@include test(red); - position: absolute; - font-size: 1.1em; - right: 0px; - width: $mobileTreeRightArrowW; - text-align: center; - } - - .label { - left: 0; - right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow - line-height: $mobileTreeItemH; - //font-size: 1.1em; // CH CO - .type-icon { - @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH); - } - .title-label { - } - } - } - } - // Sets the margin on the left, which causes the // running indentation after each folder is made ul.tree { margin-left: $mobileTreeItemIndent; } } + .tree-item, + .search-result-item { + height: $mobileTreeItemH; + line-height: $mobileTreeItemH; + margin-bottom: 0px; + .view-control { + //@include test(red); + position: absolute; + font-size: 1.1em; + right: 0px; + width: $mobileTreeRightArrowW; + text-align: center; + } + + .label { + left: 0; + right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow + line-height: $mobileTreeItemH; + //font-size: 1.1em; // CH CO + .type-icon { + @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH); + } + .title-label { + } + } + } } diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 4c225437c1..e48baba95f 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -230,83 +230,6 @@ max-height: 100%; position: relative; - .results { - - .search-result-item { - // Include transitions (for the highlights) - @include single-transition(background-color, 0.25s); - - // Space the results from each other - margin-bottom: 2px; - - // Make the highlights the right color and shape. - // Attempting to match the style in the tree, but - // while having these be compact. - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; - - .label { - // Give some padding away from the left side - margin-left: $leftMargin; - - .title-label { - display: inline-block; - position: absolute; - - // Give some padding away from the left side - left: $leftMargin + 3px + $iconWidth; - // and the right side - right: $rightPadding; - - // Size and position the text - font-size: .8em; - line-height: 17px; - - // Hide overflow text - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - // Change styling when it's selected - &.selected { - $c: #fff; - background: $colorKeySelectedBg; - color: $c; - .view-control { - color: $colorItemTreeIcon; - } - .label .type-icon { - color: #fff; - } - } - - .label .type-icon .l-icon-link { - @include txtShdwSubtle(1); - z-index: 2; - @include ancillaryIcon(8px, $colorIconLink); - margin-left: -25px; - } - - // Change styling when it's being hovered over - &:not(.selected) { - &:hover { - background: lighten($colorBodyBg, 5%); - color: lighten($colorBodyFg, 20%); - .context-trigger { - display: block; - } - .icon { - color: $colorItemTreeIconHover; - } - } - } - } - } - .load-icon { position: relative; &.loading { diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 65ddab2a63..330bdeb5d5 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -25,145 +25,152 @@ ul.tree { li { display: block; position: relative; - span.tree-item { - $runningItemW: 0; - @include box-sizing(border-box); - @include border-radius($basicCr); - @include single-transition(background-color, 0.25s); - display: block; - font-size: 0.8em; - height: $menuLineH; - line-height: $menuLineH; - margin-bottom: $interiorMarginSm; - position: relative; + } + ul.tree { + margin-left: $treeVCW + $interiorMargin; + } +} - .view-control { - display: inline-block; - margin-left: $interiorMargin; - font-size: 0.75em; - width: $treeVCW; - $runningItemW: $interiorMargin + $treeVCW; - // NOTE: [Mobile] Removed Hover on Mobile - @include desktop { - &:hover { - color: $colorItemTreeVCHover; - } - } +.tree-item, +.search-result-item { + $runningItemW: 0; + @include box-sizing(border-box); + @include border-radius($basicCr); + @include single-transition(background-color, 0.25s); + display: block; + font-size: 0.8em; + height: $menuLineH; + line-height: $menuLineH; + margin-bottom: $interiorMarginSm; + position: relative; + + .view-control { + display: inline-block; + margin-left: $interiorMargin; + font-size: 0.75em; + width: $treeVCW; + $runningItemW: $interiorMargin + $treeVCW; + // NOTE: [Mobile] Removed Hover on Mobile + @include desktop { + &:hover { + color: $colorItemTreeVCHover; } + } + } - .label { - display: block; -// @include test(orange); - @include absPosDefault(); - //left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon - line-height: $menuLineH; - left: $runningItemW; + .label { + display: block; + // @include test(orange); + @include absPosDefault(); + //left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon + line-height: $menuLineH; + //left: $runningItemW; - .type-icon { - //@include absPosDefault(0, false); - $d: $treeTypeIconH; // 16px is crisp size - @include txtShdwSubtle(0.6); - font-size: $d; - color: $colorItemTreeIcon; - left: $interiorMargin; + .type-icon { + //@include absPosDefault(0, false); + $d: $treeTypeIconH; // 16px is crisp size + @include txtShdwSubtle(0.6); + font-size: $d; + color: $colorItemTreeIcon; + left: $interiorMargin; + position: absolute; + @include verticalCenterBlock($menuLineHPx, $d); + line-height: 100%; + right: auto; width: $d; + + .icon { + &.l-icon-link, + &.l-icon-alert { + @include txtShdwSubtle(1); position: absolute; - @include verticalCenterBlock($menuLineHPx, $d); - line-height: 100%; - right: auto; width: $d; - - .icon { - &.l-icon-link, - &.l-icon-alert { - @include txtShdwSubtle(1); - position: absolute; - z-index: 2; - } - &.l-icon-alert { - $d: 8px; - @include ancillaryIcon($d, $colorAlert); - top: 1px; - right: -2px; - } - &.l-icon-link { - $d: 8px; - @include ancillaryIcon($d, $colorIconLink); - left: -3px; - bottom: 0px; - } - } + z-index: 2; } - .title-label { - @include absPosDefault(); + &.l-icon-alert { + $d: 8px; + @include ancillaryIcon($d, $colorAlert); + top: 1px; + right: -2px; + } + &.l-icon-link { + $d: 8px; + @include ancillaryIcon($d, $colorIconLink); + left: -3px; + bottom: 0px; + } + } + } + .title-label { + @include absPosDefault(); + display: block; + left: $runningItemW + ($interiorMargin * 3); + //right: $treeContextTriggerW + $interiorMargin; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &.loading { + pointer-events: none; + .label { + opacity: 0.5; + .title-label { + font-style: italic; + } + } + .wait-spinner { + margin-left: 14px; + } + } + + &.selected { + $c: #fff; + background: $colorKeySelectedBg; + color: $c; + .view-control { + color: $colorItemTreeIcon; + } + .label .type-icon { + color: #fff; //$colorItemTreeIconHover; + } + } + + &:not(.selected) { + // NOTE: [Mobile] Removed Hover on Mobile + @include desktop { + &:hover { + background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%); + color: lighten($colorBodyFg, 20%); + .context-trigger { display: block; - left: $runningItemW + ($interiorMargin * 3); - //right: $treeContextTriggerW + $interiorMargin; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - } - - &.loading { - pointer-events: none; - .label { - opacity: 0.5; - .title-label { - font-style: italic; - } - } - .wait-spinner { - margin-left: 14px; - } - } - - &.selected { - $c: #fff; - background: $colorKeySelectedBg; - color: $c; - .view-control { - color: $colorItemTreeIcon; - } - .label .type-icon { - color: #fff; //$colorItemTreeIconHover; - } - } - - &:not(.selected) { - // NOTE: [Mobile] Removed Hover on Mobile - @include desktop { - &:hover { - background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%); - color: lighten($colorBodyFg, 20%); - .context-trigger { - display: block; - } - .icon { - color: $colorItemTreeIconHover; - } - } - } - } - - &:not(.loading) { - cursor: pointer; - } - - .context-trigger { - $h: 0.9rem; - //display: none; - top: -1px; - position: absolute; - right: $interiorMarginSm; - .invoke-menu { - font-size: 0.75em; - height: $h; - line-height: $h; + .icon { + color: $colorItemTreeIconHover; } } } } - ul.tree { - margin-left: $treeVCW + $interiorMargin; + &:not(.loading) { + cursor: pointer; + } + + .context-trigger { + $h: 0.9rem; + //display: none; + top: -1px; + position: absolute; + right: $interiorMarginSm; + .invoke-menu { + font-size: 0.75em; + height: $h; + line-height: $h; + } + } +} + +.tree-item { + .label { + left: $interiorMargin + $treeVCW; } } \ No newline at end of file