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

[Frontend] Fixes to CSS for Chrome Linux

Browse Source 
open #445
Mods and simplifications to wait-spinner classes;
Simplification and cleanup in plot.html to use loading
class instead of hide/show DOM element;
This commit is contained in:
Charles Hacskaylo
2016-01-13 13:54:00 -08:00
parent 9cc03123b1
commit a7a707595c
5 changed files with 237 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/general/res/sass/_object-label.scss
View File

@@ -44,10 +44,6 @@ mct-representation {
$spinD: 0;
@include spinner($spinBW);
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
padding: 30%;
width: $spinD;
height: $spinD;
@@ -64,6 +60,6 @@ mct-representation {
}
}
.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before {
border-color: rgba($colorItemTreeSelectedFg, 0.25);
border-top-color: rgba($colorItemTreeSelectedFg, 1.0);
border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;
}

86
platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
View File

@@ -20,62 +20,37 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
@include keyframes(rotation) {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
100% { @include transform(rotate(360deg)); }
}
@mixin spinner($b: 5px) {
@include keyframes(rotateCentered) {
0% { @include transform(translateX(-50%) translateY(-50%) rotate(0deg)); }
100% { @include transform(translateX(-50%) translateY(-50%) rotate(359deg)); }
}
@include animation-name(rotateCentered);
@include keyframes(rotation-centered) {
0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
}
@mixin spinner($b: 5px, $c: $colorKey) {
@include transform-origin(center);
@include animation-name(rotation-centered);
@include animation-duration(0.5s);
@include animation-iteration-count(infinite);
@include animation-timing-function(linear);
@include transform-origin(center);
border-style: solid;
border-width: $b;
@include border-radius(100%);
}
@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
@include spinner($b);
@include box-sizing(border-box);
border-color: rgba($c, 0.25);
border-top-color: rgba($c, 1.0);
border-style: solid;
border-width: $b;
display: block;
position: absolute;
height: 0; width: 0;
padding: 7%;
left: 50%; top: 50%;
}
@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
display: block;
position: absolute;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-color: rgba($c, 0.25);
border-top-color: rgba($c, 1.0);
border-style: solid;
border-width: $b;
@include border-radius(100%);
}
.t-wait-spinner,
.wait-spinner {
$d: 5%;
@include wait-spinner(0.5em, $colorKey);
top: 50%; left: 50%;
@include spinner(0.5em, $colorKey);
height: auto; width: auto;
padding: $d; // Will size object based on parent container WIDTH
pointer-events: none;
margin-top: $d / -1;
margin-left: $d / -1;
z-index: 2;
&.inline {
display: inline-block !important;
@@ -85,46 +60,15 @@
}
}
.l-wait-spinner-holder {
pointer-events: none;
position: absolute;
&.align-left {
.t-wait-spinner {
left: 0;
margin-left: 0;
}
}
&.full-size {
display: inline-block;
height: 100%; width: 100%;
.t-wait-spinner {
top: 0;
margin-top: 0;
padding: 30%;
}
}
}
.treeview .wait-spinner {
// Only used in subtree.html, which I don't think this is actually being used
$d: 10px;
@include wait-spinner(0.25em, $colorKey);
height: $d; width: $d;
margin: 0 !important;
padding: 0 !important;
top: 2px; left: 0;
}
.wait-spinner.sm {
$d: 13px;
@include wait-spinner(0.25em, $colorKey);
height: $d; width: $d;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
top: 0; left: 0;
}
.loading {
// Can be applied to any block element with height and width
pointer-events: none;
@@ -133,7 +77,8 @@
content: '';
}
&:before {
@include wait-spinner2(5px, $colorLoadingFg);
@include spinner(5px, $colorLoadingFg);
padding: 5%;
z-index: 10;
}
&:after {
@@ -146,5 +91,4 @@
padding: $menuLineH / 4;
border-width: 2px;
}
}