[Frontend] Fixes to CSS for Chrome Linux

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

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;
}

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;
}
}

View File

@ -1245,87 +1245,90 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
* at runtime from the About dialog for additional information.
*****************************************************************************/
@-moz-keyframes rotation {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
-moz-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes rotation {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes rotation {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
/* line 69, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.t-wait-spinner,
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-moz-keyframes rotation-centered {
0% {
-moz-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg); }
100% {
-moz-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg); } }
@-webkit-keyframes rotation-centered {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg); }
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotation-centered {
0% {
-moz-transform: translate(-50%, -50%) rotate(0deg);
-ms-transform: translate(-50%, -50%) rotate(0deg);
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg); }
100% {
-moz-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg); } }
/* line 48, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.wait-spinner {
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;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.5em;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
top: 50%;
display: block;
position: absolute;
left: 50%;
top: 50%;
height: auto;
width: auto;
padding: 5%;
pointer-events: none;
margin-top: -5%;
margin-left: -5%;
z-index: 2; }
/* line 80, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.t-wait-spinner.inline,
/* line 55, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.wait-spinner.inline {
display: inline-block !important;
margin-right: 5px;
position: relative !important;
vertical-align: middle; }
/* line 88, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder {
pointer-events: none;
position: absolute; }
/* line 92, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder.align-left .t-wait-spinner {
left: 0;
margin-left: 0; }
/* line 97, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder.full-size {
display: inline-block;
height: 100%;
width: 100%; }
/* line 100, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder.full-size .t-wait-spinner {
top: 0;
margin-top: 0;
padding: 30%; }
/* line 109, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 63, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.treeview .wait-spinner {
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(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.25em;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
height: 10px;
width: 10px;
margin: 0 !important;
@ -1333,40 +1336,21 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
top: 2px;
left: 0; }
/* line 118, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.wait-spinner.sm {
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(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.25em;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
height: 13px;
width: 13px;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
top: 0;
left: 0; }
/* line 128, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 72, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading {
pointer-events: none; }
/* line 131, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 75, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading:before, .loading:after {
content: ''; }
/* line 135, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 79, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
@ -1376,12 +1360,6 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
border-style: solid;
border-width: 5px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
@ -1390,40 +1368,15 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
box-sizing: border-box;
border-color: rgba(255, 199, 0, 0.25);
border-top-color: #ffc700;
border-style: solid;
border-width: 5px;
display: block;
position: absolute;
height: 0;
width: 0;
padding: 7%;
left: 50%;
top: 50%;
padding: 5%;
z-index: 10; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@-webkit-keyframes rotateCentered {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 139, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 84, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading:after {
overflow: hidden;
position: absolute;
@ -1436,7 +1389,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
background: rgba(153, 153, 153, 0.2);
display: block;
z-index: 9; }
/* line 145, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 90, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading.tree-item:before {
padding: 0.375rem;
border-width: 2px; }
@ -5848,9 +5801,13 @@ ul.tree {
/* line 131, ../../../../general/res/sass/tree/_tree.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
@ -5860,42 +5817,22 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
border-style: solid;
border-width: 4px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 4px;
display: block;
position: absolute;
left: 50%;
top: 50%;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@-webkit-keyframes rotateCentered {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 137, ../../../../general/res/sass/tree/_tree.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; }
@ -5946,9 +5883,13 @@ mct-representation.s-status-pending .t-object-label .t-title-label {
/* line 42, ../../../../general/res/sass/_object-label.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
@ -5958,48 +5899,24 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
border-style: solid;
border-width: 4px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
content: "";
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 4px;
display: block;
position: absolute;
left: 50%;
top: 50%;
content: "";
padding: 30%;
width: 0;
height: 0; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@-webkit-keyframes rotateCentered {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 55, ../../../../general/res/sass/_object-label.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; }

View File

@ -1226,87 +1226,90 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
* at runtime from the About dialog for additional information.
*****************************************************************************/
@-moz-keyframes rotation {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
-moz-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes rotation {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes rotation {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
/* line 69, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.t-wait-spinner,
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-moz-keyframes rotation-centered {
0% {
-moz-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg); }
100% {
-moz-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg); } }
@-webkit-keyframes rotation-centered {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg); }
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotation-centered {
0% {
-moz-transform: translate(-50%, -50%) rotate(0deg);
-ms-transform: translate(-50%, -50%) rotate(0deg);
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg); }
100% {
-moz-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg); } }
/* line 48, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.wait-spinner {
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;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.5em;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
top: 50%;
display: block;
position: absolute;
left: 50%;
top: 50%;
height: auto;
width: auto;
padding: 5%;
pointer-events: none;
margin-top: -5%;
margin-left: -5%;
z-index: 2; }
/* line 80, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.t-wait-spinner.inline,
/* line 55, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.wait-spinner.inline {
display: inline-block !important;
margin-right: 5px;
position: relative !important;
vertical-align: middle; }
/* line 88, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder {
pointer-events: none;
position: absolute; }
/* line 92, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder.align-left .t-wait-spinner {
left: 0;
margin-left: 0; }
/* line 97, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder.full-size {
display: inline-block;
height: 100%;
width: 100%; }
/* line 100, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.l-wait-spinner-holder.full-size .t-wait-spinner {
top: 0;
margin-top: 0;
padding: 30%; }
/* line 109, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 63, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.treeview .wait-spinner {
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(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.25em;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
height: 10px;
width: 10px;
margin: 0 !important;
@ -1314,40 +1317,21 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
top: 2px;
left: 0; }
/* line 118, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.wait-spinner.sm {
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(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 0.25em;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
height: 13px;
width: 13px;
margin-left: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
top: 0;
left: 0; }
/* line 128, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 72, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading {
pointer-events: none; }
/* line 131, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 75, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading:before, .loading:after {
content: ''; }
/* line 135, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 79, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
@ -1357,12 +1341,6 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
border-style: solid;
border-width: 5px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
@ -1371,40 +1349,15 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
box-sizing: border-box;
border-color: rgba(119, 107, 162, 0.25);
border-top-color: #776ba2;
border-style: solid;
border-width: 5px;
display: block;
position: absolute;
height: 0;
width: 0;
padding: 7%;
left: 50%;
top: 50%;
padding: 5%;
z-index: 10; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@-webkit-keyframes rotateCentered {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 139, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 84, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading:after {
overflow: hidden;
position: absolute;
@ -1417,7 +1370,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
background: rgba(119, 107, 162, 0.1);
display: block;
z-index: 9; }
/* line 145, ../../../../general/res/sass/helpers/_wait-spinner.scss */
/* line 90, ../../../../general/res/sass/helpers/_wait-spinner.scss */
.loading.tree-item:before {
padding: 0.375rem;
border-width: 2px; }
@ -5721,9 +5674,13 @@ ul.tree {
/* line 131, ../../../../general/res/sass/tree/_tree.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
@ -5733,42 +5690,22 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
border-style: solid;
border-width: 4px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 4px;
display: block;
position: absolute;
left: 50%;
top: 50%;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@-webkit-keyframes rotateCentered {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 137, ../../../../general/res/sass/tree/_tree.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; }
@ -5819,9 +5756,13 @@ mct-representation.s-status-pending .t-object-label .t-title-label {
/* line 42, ../../../../general/res/sass/_object-label.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-name: rotateCentered;
-webkit-animation-name: rotateCentered;
animation-name: rotateCentered;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
-moz-animation-name: rotation-centered;
-webkit-animation-name: rotation-centered;
animation-name: rotation-centered;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
@ -5831,48 +5772,24 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before {
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-transform-origin: center 50%;
-ms-transform-origin: center 50%;
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
border-style: solid;
border-width: 4px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
content: "";
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc;
border-style: solid;
border-width: 4px;
display: block;
position: absolute;
left: 50%;
top: 50%;
content: "";
padding: 30%;
width: 0;
height: 0; }
@-moz-keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@-webkit-keyframes rotateCentered {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
@keyframes rotateCentered {
0% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(0deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
transform: translateX(-50%) translateY(-50%) rotate(0deg); }
100% {
-moz-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(359deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg);
transform: translateX(-50%) translateY(-50%) rotate(359deg); } }
/* line 55, ../../../../general/res/sass/_object-label.scss */
mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph {
display: none; }

View File

@ -73,7 +73,8 @@
<div class="gl-plot-display-area"
ng-mouseenter="subplot.isHovering(true); representation.showControls = true;"
ng-mouseleave="subplot.isHovering(false)">
ng-mouseleave="subplot.isHovering(false)"
ng-class="{ loading: plot.isRequestPending() }">
<!-- Out-of-bounds data indicators -->
<!-- ng-show is temporarily hard-coded in next element -->
@ -143,9 +144,6 @@
</div>
</div>
<span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
</span>
</div>
<div ng-if="$last" class="gl-plot-axis-area gl-plot-x">