merge with upstream master

helix/static/css/animation.css

@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

helix/static/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?10976371');
-  src: url('../font/fontello.eot?10976371#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?10976371') format('woff2'),
-       url('../font/fontello.woff?10976371') format('woff'),
-       url('../font/fontello.ttf?10976371') format('truetype'),
-       url('../font/fontello.svg?10976371#fontello') format('svg');
+  src: url('../font/fontello.eot?24283821');
+  src: url('../font/fontello.eot?24283821#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?24283821') format('woff2'),
+       url('../font/fontello.woff?24283821') format('woff'),
+       url('../font/fontello.ttf?24283821') format('truetype'),
+       url('../font/fontello.svg?24283821#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?10976371#fontello') format('svg');
+    src: url('../font/fontello.svg?24283821#fontello') format('svg');
   }
 }
 */
@@ -69,4 +69,5 @@
 .icon-info:before { content: '\e80b'; } /* '' */
 .icon-close:before { content: '\e80c'; } /* '' */
 .icon-sunpower-logo:before { content: '\e80d'; } /* '' */
-.icon-upload-cloud:before { content: '\e80e'; } /* '' */
+.icon-upload-cloud:before { content: '\e80e'; } /* '' */
+.icon-spin6:before { content: '\e839'; } /* '' */

helix/static/css/main.css

@@ -1023,3 +1023,21 @@ table .right_border_cell {
   margin-bottom: 25px;
 }
 
+.spinner-panel {
+  position: fixed;
+  margin: 0 auto;
+  top: 0;
+  left: 0;
+  width: 0; /* It will be updated to 100% in JS. Workaround for Safari issue with display:none; */
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1;
+
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: bold;
+  font-size: 24px;
+}