#7517 refactor spark spinner - move styles from View to .scss file

twosigma · Jun 14, 2018 · 3ad8403 · 3ad8403
1 parent 24bdc2f
commit 3ad8403
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 113 deletions.
diff --git a/js/notebook/src/Spinner.ts b/js/notebook/src/Spinner.ts
@@ -34,119 +34,12 @@ export class SpinnerView extends widgets.DOMWidgetView {
   public render() {
     let title = this.model.get('title');
 
-    this.el.innerHTML = `<div title="${title}" class="lds-css ng-scope">\n` +
-      '<div class="lds-spinner" style="100%;height:100%"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>\n' +
-      '<style type="text/css">@keyframes lds-spinner {\n' +
-      '  0% {\n' +
-      '    opacity: 1;\n' +
-      '  }\n' +
-      '  100% {\n' +
-      '    opacity: 0;\n' +
-      '  }\n' +
-      '}\n' +
-      '@-webkit-keyframes lds-spinner {\n' +
-      '  0% {\n' +
-      '    opacity: 1;\n' +
-      '  }\n' +
-      '  100% {\n' +
-      '    opacity: 0;\n' +
-      '  }\n' +
-      '}\n' +
-      '.lds-spinner {\n' +
-      '  position: relative;\n' +
-      '}\n' +
-      '.lds-spinner div {\n' +
-      '  left: 94px;\n' +
-      '  top: 48px;\n' +
-      '  position: absolute;\n' +
-      '  -webkit-animation: lds-spinner linear 1s infinite;\n' +
-      '  animation: lds-spinner linear 1s infinite;\n' +
-      '  background: #0055a5;\n' +
-      '  width: 12px;\n' +
-      '  height: 24px;\n' +
-      '  border-radius: 40%;\n' +
-      '  -webkit-transform-origin: 6px 52px;\n' +
-      '  transform-origin: 6px 52px;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(1) {\n' +
-      '  -webkit-transform: rotate(0deg);\n' +
-      '  transform: rotate(0deg);\n' +
-      '  -webkit-animation-delay: -0.916666666666667s;\n' +
-      '  animation-delay: -0.916666666666667s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(2) {\n' +
-      '  -webkit-transform: rotate(30deg);\n' +
-      '  transform: rotate(30deg);\n' +
-      '  -webkit-animation-delay: -0.833333333333333s;\n' +
-      '  animation-delay: -0.833333333333333s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(3) {\n' +
-      '  -webkit-transform: rotate(60deg);\n' +
-      '  transform: rotate(60deg);\n' +
-      '  -webkit-animation-delay: -0.75s;\n' +
-      '  animation-delay: -0.75s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(4) {\n' +
-      '  -webkit-transform: rotate(90deg);\n' +
-      '  transform: rotate(90deg);\n' +
-      '  -webkit-animation-delay: -0.666666666666667s;\n' +
-      '  animation-delay: -0.666666666666667s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(5) {\n' +
-      '  -webkit-transform: rotate(120deg);\n' +
-      '  transform: rotate(120deg);\n' +
-      '  -webkit-animation-delay: -0.583333333333333s;\n' +
-      '  animation-delay: -0.583333333333333s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(6) {\n' +
-      '  -webkit-transform: rotate(150deg);\n' +
-      '  transform: rotate(150deg);\n' +
-      '  -webkit-animation-delay: -0.5s;\n' +
-      '  animation-delay: -0.5s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(7) {\n' +
-      '  -webkit-transform: rotate(180deg);\n' +
-      '  transform: rotate(180deg);\n' +
-      '  -webkit-animation-delay: -0.416666666666667s;\n' +
-      '  animation-delay: -0.416666666666667s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(8) {\n' +
-      '  -webkit-transform: rotate(210deg);\n' +
-      '  transform: rotate(210deg);\n' +
-      '  -webkit-animation-delay: -0.333333333333333s;\n' +
-      '  animation-delay: -0.333333333333333s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(9) {\n' +
-      '  -webkit-transform: rotate(240deg);\n' +
-      '  transform: rotate(240deg);\n' +
-      '  -webkit-animation-delay: -0.25s;\n' +
-      '  animation-delay: -0.25s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(10) {\n' +
-      '  -webkit-transform: rotate(270deg);\n' +
-      '  transform: rotate(270deg);\n' +
-      '  -webkit-animation-delay: -0.166666666666667s;\n' +
-      '  animation-delay: -0.166666666666667s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(11) {\n' +
-      '  -webkit-transform: rotate(300deg);\n' +
-      '  transform: rotate(300deg);\n' +
-      '  -webkit-animation-delay: -0.083333333333333s;\n' +
-      '  animation-delay: -0.083333333333333s;\n' +
-      '}\n' +
-      '.lds-spinner div:nth-child(12) {\n' +
-      '  -webkit-transform: rotate(330deg);\n' +
-      '  transform: rotate(330deg);\n' +
-      '  -webkit-animation-delay: 0s;\n' +
-      '  animation-delay: 0s;\n' +
-      '}\n' +
-      '.lds-spinner {\n' +
-      '  width: 30px !important;\n' +
-      '  height: 30px !important;\n' +
-      '  -webkit-transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);\n' +
-      '  transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);\n' +
-      '}\n' +
-      '</style></div>'
+    this.el.innerHTML = `
+<div title="${title}" class="lds-css ng-scope">
+  <div class="lds-spinner" style="100%; height:100%">
+    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+  </div>
+</div>`;
   }
 }
 

diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
@@ -226,3 +226,113 @@
     line-height: 14px;
   }
 }
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.lds-spinner {
+  position: relative;
+  width: 30px !important;
+  height: 30px !important;
+  -webkit-transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);
+  transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);
+
+  div {
+    left: 94px;
+    top: 48px;
+    position: absolute;
+    -webkit-animation: lds-spinner linear 1s infinite;
+    animation: lds-spinner linear 1s infinite;
+    background: #0055a5;
+    width: 12px;
+    height: 24px;
+    border-radius: 40%;
+    -webkit-transform-origin: 6px 52px;
+    transform-origin: 6px 52px;
+    &:nth-child(1) {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+      -webkit-animation-delay: -0.916666666666667s;
+      animation-delay: -0.916666666666667s;
+    }
+    &:nth-child(2) {
+      -webkit-transform: rotate(30deg);
+      transform: rotate(30deg);
+      -webkit-animation-delay: -0.833333333333333s;
+      animation-delay: -0.833333333333333s;
+    }
+    &:nth-child(3) {
+      -webkit-transform: rotate(60deg);
+      transform: rotate(60deg);
+      -webkit-animation-delay: -0.75s;
+      animation-delay: -0.75s;
+    }
+    &:nth-child(4) {
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg);
+      -webkit-animation-delay: -0.666666666666667s;
+      animation-delay: -0.666666666666667s;
+    }
+    &:nth-child(5) {
+      -webkit-transform: rotate(120deg);
+      transform: rotate(120deg);
+      -webkit-animation-delay: -0.583333333333333s;
+      animation-delay: -0.583333333333333s;
+    }
+    &:nth-child(6) {
+      -webkit-transform: rotate(150deg);
+      transform: rotate(150deg);
+      -webkit-animation-delay: -0.5s;
+      animation-delay: -0.5s;
+    }
+    &:nth-child(7) {
+      -webkit-transform: rotate(180deg);
+      transform: rotate(180deg);
+      -webkit-animation-delay: -0.416666666666667s;
+      animation-delay: -0.416666666666667s;
+    }
+    &:nth-child(8) {
+      -webkit-transform: rotate(210deg);
+      transform: rotate(210deg);
+      -webkit-animation-delay: -0.333333333333333s;
+      animation-delay: -0.333333333333333s;
+    }
+    &:nth-child(9) {
+      -webkit-transform: rotate(240deg);
+      transform: rotate(240deg);
+      -webkit-animation-delay: -0.25s;
+      animation-delay: -0.25s;
+    }
+    &:nth-child(10) {
+      -webkit-transform: rotate(270deg);
+      transform: rotate(270deg);
+      -webkit-animation-delay: -0.166666666666667s;
+      animation-delay: -0.166666666666667s;
+    }
+    &:nth-child(11) {
+      -webkit-transform: rotate(300deg);
+      transform: rotate(300deg);
+      -webkit-animation-delay: -0.083333333333333s;
+      animation-delay: -0.083333333333333s;
+    }
+    &:nth-child(12) {
+      -webkit-transform: rotate(330deg);
+      transform: rotate(330deg);
+      -webkit-animation-delay: 0s;
+      animation-delay: 0s;
+    }
+  }
+}