ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-24 15:26:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] WIP remove keyframe anims

Browse Source 
Fixes #1603
Remove keyframe anims from transition to edit mode
This commit is contained in:
Charles Hacskaylo 2017-06-06 16:18:22 -07:00
parent 35b51d151d
commit c7787aa1f0
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -227,6 +227,11 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
top: $ueTopBarH + $interiorMarginLg; top: $ueTopBarH + $interiorMarginLg;
} }
.l-object-wrapper {
padding: 0;
@include trans-prop-nice(padding, 0.25s);
}
.l-object-wrapper-inner { .l-object-wrapper-inner {
@include trans-prop-nice-resize(0.25s); @include trans-prop-nice-resize(0.25s);
} }
@ -354,37 +359,39 @@ body.desktop {
background-color: $colorEditAreaBg; background-color: $colorEditAreaBg;
border-radius: $controlCr; border-radius: $controlCr;
border: 1px dotted $bC0; border: 1px dotted $bC0;
padding: 5px;
// Transition 1 //// Transition 1
@include keyframes(wrapperIn) { //@include keyframes(wrapperIn) {
from { border: 0px dotted transparent; padding: 0; } // from { border: 0px dotted transparent; padding: 0; }
to { border: 1px dotted $bC0; padding: 5px; } // to { border: 1px dotted $bC0; padding: 5px; }
} //}
//
//// Do last
//@include keyframes(pulseNew) {
// from { border-color: $bC0; }
// to { border-color: $bC100; }
//}
// Do last //@include animation-name(wrapperIn, pulseNew);
@include keyframes(pulseNew) { //@include animation-duration($t1Dur, $pulseDur);
from { border-color: $bC0; } //@include animation-delay(0s, $t1Dur + $t2Dur);
to { border-color: $bC100; } //@include animation-direction(normal, alternate);
} //@include animation-fill-mode(both, none);
//@include animation-iteration-count(1, infinite);
@include animation-name(wrapperIn, pulseNew); //@include animation-timing-function(ease-in-out, linear);
@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 { .l-edit-controls {
height: 0; //height: 0;
height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin;
border-bottom: 1px solid $colorInteriorBorder; border-bottom: 1px solid $colorInteriorBorder;
// Transition 2: reveal edit controls // Transition 2: reveal edit controls
@include keyframes(editIn) { //@include keyframes(editIn) {
from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; } // from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; }
to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; } // to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; }
} //}
@include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur); //@include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur);
.tool-bar { .tool-bar {
right: $interiorMargin; right: $interiorMargin;
} }