diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index c36a6cb00a..8c216f0151 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -124,6 +124,8 @@ $dirImgs: $dirCommonRes + 'images/'; /************************** TIMINGS */ $controlFadeMs: 100ms; +$browseToEditAnimMs: 400ms; +$editBorderPulseMs: 500ms; /************************** LIMITS */ $glyphLimit: '\e603'; diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss index a048eb75d0..1a13b07d06 100644 --- a/platform/commonUI/general/res/sass/_effects.scss +++ b/platform/commonUI/general/res/sass/_effects.scss @@ -39,15 +39,20 @@ @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7); } -@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) { - @include keyframes(pulseBorder) { - 0% { border-color: rgba($c, $opacity0); } - 100% { border-color: rgba($c, $opacity100); } +@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0) { + @include keyframes($animName) { + from { #{propName}: $propValStart; } + to { #{$propName}: $propValEnd; } } - @include animation-name(pulseBorder); - @include animation-duration($dur); - @include animation-direction(alternate); - @include animation-iteration-count($iteration); - @include animation-timing-function(ease); - @include animation-delay($delay); + @include animToParams($animName, $dur: 500ms, $delay: 0) } + +@mixin animToParams($animName, $dur: 500ms, $delay: 0) { + @include animation-name($animName); + @include animation-duration($dur); + @include animation-delay($delay); + @include animation-fill-mode(both); + @include animation-direction(normal); + @include animation-iteration-count(1); + @include animation-timing-function(ease-in-out); +} \ 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 8537c85520..9ab8e0f65f 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -237,30 +237,10 @@ body.desktop .pane .mini-tab-icon.toggle-pane { top: $ueTopBarH + $interiorMarginLg; } -.l-object-wrapper { - @extend .abs; - - .object-holder-main { - @extend .abs; - } - .l-edit-controls { - //@include trans-prop-nice((opacity, height), 0.25s); - border-bottom: 1px solid $colorInteriorBorder; - line-height: $ueEditToolBarH; - height: 0px; - opacity: 0; - .tool-bar { - right: $interiorMargin; - } - } -} - .l-object-wrapper-inner { @include trans-prop-nice-resize(0.25s); } - - .object-browse-bar .s-btn, .top-bar .buttons-main .s-btn, .top-bar .s-menu-btn, @@ -377,19 +357,50 @@ body.desktop { .s-status-editing { .l-object-wrapper { - @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3); - border-radius: $controlCr; + $t2Dur: $browseToEditAnimMs; + $t1Dur: $t2Dur / 2; + $pulseDur: $editBorderPulseMs; + $bC0: rgba($colorEditAreaFg, 0.5); + $bC100: rgba($colorEditAreaFg, 1); + background-color: $colorEditAreaBg; - border-color: $colorEditAreaFg; - border-width: 2px; - border-style: dotted; - .l-object-wrapper-inner { - @include absPosDefault(3px, hidden); + border-radius: $controlCr; + border: 1px dotted $bC0; + + // Transition 1 + @include keyframes(wrapperIn) { + from { border: 0px dotted transparent; padding: 0; } + to { border: 1px dotted $bC0; padding: 5px; } } + + // Do last + @include keyframes(pulseNew) { + from { border-color: $bC0; } + to { border-color: $bC100; } + } + + @include animation-name(wrapperIn, pulseNew); + @include animation-duration($t1Dur, $pulseDur); + @include animation-delay(0s, $t1Dur + $t2Dur); + @include animation-direction(normal, alternate); + @include animation-fill-mode(both, none); + @include animation-iteration-count(1, infinite); + @include animation-timing-function(ease-in-out, linear); + + .l-edit-controls { - height: $ueEditToolBarH + $interiorMargin; - margin-bottom: $interiorMargin; - opacity: 1; + height: 0; + border-bottom: 1px solid $colorInteriorBorder; + overflow: hidden; + // Transition 2: reveal edit controls + @include keyframes(editIn) { + from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; } + to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; } + } + @include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur); + .tool-bar { + right: $interiorMargin; + } } } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index bb774fb7a8..1ab6d734f3 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -14,7 +14,7 @@ $colorAHov: #fff; $contrastRatioPercent: 7%; $hoverRatioPercent: 10%; $basicCr: 3px; -$controlCr: 3px; +$controlCr: 2px; $smallCr: 2px; // Buttons and Controls