ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-23 09:25:29 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Styling for New Edit Mode

Browse Source 
open #198
Refined CSS classing and animation timing;
This commit is contained in:
Charles Hacskaylo
2015-10-20 14:41:02 -07:00
parent 685dd2114d
commit 15c1bf20ab
5 changed files with 140 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -62,7 +62,7 @@
}
@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
@include transition-property(height, width, top, right, bottom, left);
@include transition-property(height, width, top, right, bottom, left, opacity);
@include transition-duration($t);
@include transition-timing-function($tf);
}

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

@ -288,7 +288,7 @@
}
.object-holder {
@include trans-prop-nice-resize(0.3s);
@include trans-prop-nice-resize(0.25s);
overflow: hidden; // Contained objects need to handle their own overflow now
> ng-include {
@include absPosDefault(0, auto);
@ -318,13 +318,19 @@
.l-object-wrapper-inner {
@extend .abs;
@include display-flex(column nowrap);
@include trans-prop-nice-resize(0.5s);
@include trans-prop-nice-resize(0.25s);
}
.l-edit-controls {
border-bottom: 1px solid $colorInteriorBorder;
height: $ueEditToolBarH + $interiorMargin;
line-height: $ueEditToolBarH;
@include trans-prop-nice-resize(0.25s);
height: 0;
opacity: 0;
&.active {
border-bottom: 1px solid $colorInteriorBorder;
height: $ueEditToolBarH + $interiorMargin;
line-height: $ueEditToolBarH;
opacity: 1;
}
}
.object-browse-bar .s-btn,
@ -367,19 +373,19 @@
@include display-flex;
&.flex-row {
@include flex-flow(row nowrap);
.flex-elem {
margin-left: $interiorMargin;
&:first-child {
margin-left: 0;
.flex-elem.active {
margin-right: $interiorMargin;
&:last-child {
margin-right: 0;
}
}
}
&.flex-col {
@include flex-flow(column nowrap);
.flex-elem {
margin-top: $interiorMarginLg;
&:first-child {
margin-top: 0;
.flex-elem.active {
margin-bottom: $interiorMarginLg;
&:last-child {
margin-bottom: 0;
}
}
}