alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Generalized markup and CSS for control-bar

Browse Source 
Fixes #1166
New markup and CSS
MIgrated existing tabular views to use
new styles
This commit is contained in:
Charles Hacskaylo
2016-09-01 19:37:36 -07:00
parent e35666bcc6
commit 55603b927f
5 changed files with 49 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
platform/commonUI/general/res/sass/_views.scss
View File

@@ -1,4 +1,12 @@
/* Styles for sub-dividing views generically */
$cbH: 25px;
.l-control-bar {
// Element that can be placed above l-view-section
height: $cbH;
}
.l-view-section {
@include absPosDefault(0);
@@ -15,4 +23,36 @@
.inline-block {
display: inline-block;
}
}
.has-control-bar {
.l-view-section {
top: $cbH + $interiorMargin;
}
}
.child-frame {
.has-control-bar {
$btnExportH: $btnFrameH;
.l-control-bar {
@include trans-prop-nice(opacity, $dur: 50ms);
opacity: 0;
}
.l-view-section {
@include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
top: 0;
}
&:hover {
.l-control-bar {
@include trans-prop-nice(opacity, 150ms, 100ms);
opacity: 1;
}
.l-view-section {
@include trans-prop-nice(top, $dur: 150ms);
top: $btnExportH + $interiorMargin;
}
}
}
}

36
platform/commonUI/general/res/sass/lists/_tabular.scss
View File

@@ -160,39 +160,3 @@ table {
}
}
}
/********************************************************** SPECIFIC TABULAR VIEWS */
.tabular-holder {
&.t-exportable {
$btnExportH: 25px;
.l-view-section {
top: $btnExportH + $interiorMargin;
}
}
}
.child-frame {
.tabular-holder {
&.t-exportable {
$btnExportH: $btnFrameH;
.s-button.t-export {
@include trans-prop-nice(opacity, $dur: 50ms);
opacity: 0;
}
.l-view-section {
@include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
top: 0;
}
&:hover {
.s-button.t-export {
@include trans-prop-nice(opacity, 150ms, 100ms);
opacity: 1;
}
.l-view-section {
@include trans-prop-nice(top, $dur: 150ms);
top: $btnExportH + $interiorMargin;
}
}
}
}
}