diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss index 0d58c86af6..aa2d477b66 100644 --- a/platform/commonUI/general/res/sass/_effects.scss +++ b/platform/commonUI/general/res/sass/_effects.scss @@ -51,14 +51,11 @@ a.disabled { @include animation-name(pulse, 0.2); } -@include keyframes(pulse) { - 0% { opacity: 0.5; } - 100% { opacity: 1; } -} - - -@mixin pulse($dur: 500ms, $iteration: infinite) { - //@include customKeyframes(pulse, 0.2); +@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) { + @include keyframes(pulse) { + 0% { opacity: $opacity0; } + 100% { opacity: $opacity100; } + } @include animation-name(pulse); @include animation-duration($dur); @include animation-direction(alternate); @@ -66,10 +63,10 @@ a.disabled { @include animation-timing-function(ease-in-out); } -@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) { +@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) { @include keyframes(pulseBorder) { - 0% { border-color: transparent; } - 100% { border-color: $c; } + 0% { border-color: rgba($c, $opacity0); } + 100% { border-color: rgba($c, $opacity100); } } @include animation-name(pulseBorder); @include animation-duration($dur); diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 6a252cd5af..e05dbd9bb7 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -145,15 +145,26 @@ ul.tree { &.active { // The item is being edited - background: rgba($colorItemTreeEditingBg, 0.5) !important; + background: $colorItemTreeEditingBg; //rgba($colorItemTreeSelectedBg, 0.2) !important; pointer-events: none; &:before { // Pencil icon @extend .ui-symbol; - color: $colorItemTreeEditingBg; + @include pulse($dur: 1s, $opacity0: 0.25); + color: $colorItemTreeEditingFg; content: '\70'; margin-left: $interiorMarginSm; } + .t-object-label { + .t-item-icon, + .t-title-label { + color: $colorItemTreeEditingFg; + @include text-shadow(none); + } + .t-title-label { + font-style: italic; + } + } .view-control, + .tree-item-subtree { display: none; } } @@ -174,8 +185,9 @@ ul.tree { } } -.tree-item { +.tree-item, +.search-result-item.active { .t-object-label { left: $interiorMargin + $treeVCW; } -} \ No newline at end of file +} diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 67925f3e44..de4d106b6f 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -235,10 +235,10 @@ } &.active { - @include pulseBorder($colorKey, 150ms, 8, 0.5s); + @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3); @include border-radius($controlCr); background-color: $colorEditAreaBg; - border-color: $colorKey; + border-color: $colorEditAreaFg; border-width: 2px; border-style: dotted; .l-object-wrapper-inner { @@ -252,14 +252,15 @@ } .l-edit-controls { - @include trans-prop-nice-resize(0.25s); - height: 0; + @include trans-prop-nice((opacity, height), 0.25s); + border-bottom: 1px solid $colorInteriorBorder; + line-height: $ueEditToolBarH; + height: 0px; opacity: 0; overflow: hidden; &.active { - border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; - line-height: $ueEditToolBarH; + margin-bottom: $interiorMargin; opacity: 1; } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index fb40d1c63a..e339445dc8 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -6,7 +6,8 @@ $colorFooterBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: #005177; $colorKeyFg: #fff; -$colorEditAreaBg: rgba(#1f4fa2, 0.1); +$colorEditAreaBg: #31363e; +$colorEditAreaFg: #587ab5; $colorInteriorBorder: rgba($colorBodyFg, 0.1); $colorA: #ccc; $colorAHov: #fff; @@ -157,7 +158,8 @@ $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); $colorItemTreeFg: $colorBodyFg; $colorItemTreeSelectedBg: pushBack($colorKey, 15%); $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%); -$colorItemTreeEditingBg: #b2624a; +$colorItemTreeEditingBg: #344154; +$colorItemTreeEditingFg: $colorEditAreaFg; $colorItemTreeVC: rgba(#fff, 0.3); $colorItemTreeSelectedVC: $colorItemTreeVC; $colorItemTreeVCHover: $colorAlt1; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index c9afa5c8da..89aab4e923 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -6,7 +6,8 @@ $colorFooterBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: $colorKey; $colorKeyFg: #fff; -$colorEditAreaBg: rgba($colorKey, 0.075); +$colorEditAreaBg: #eafaff; +$colorEditAreaFg: #4bb1c7; //587ab5; $colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorA: #999; $colorAHov: $colorKey; @@ -156,7 +157,8 @@ $colorItemTreeVCHover: $colorKey; $colorItemTreeFg: $colorBodyFg; $colorItemTreeSelectedBg: pushBack($colorKey, 15%); $colorItemTreeSelectedFg: $colorBodyBg; -$colorItemTreeEditingBg: #b2624a; +$colorItemTreeEditingBg: #caf1ff; //#c6e3ff; +$colorItemTreeEditingFg: $colorEditAreaFg; $colorItemTreeVC: $colorBodyFg; $colorItemTreeSelectedVC: $colorBodyBg; $shdwItemTreeIcon: none;