🐛 Remove deprecated loading indicator to prevent duplicated CSS (#4652)

* 🐛 Remove deprecated loading indicator to prevent duplicated CSS * 🚚 Move playground loading indicator into playground src
ampproject · Sep 23, 2020 · 498cd80 · 498cd80
1 parent 1bea01d
commit 498cd80
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 25 deletions.
diff --git a/frontend/scss/_mixins.scss b/frontend/scss/_mixins.scss
@@ -156,30 +156,6 @@ box-shadow: 0 25px 50px 0 rgba(0,0,0,0.21);
 	}
 }
 
-@mixin loading-indicator {
-  pointer-events: none;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 45px;
-    height: 45px;
-    margin: 100px auto auto auto;
-    padding: 1px;
-    border: 3px solid color('silver');
-    border-radius: 50%;
-    border-left-color: transparent;
-    animation: rotate 1.5s linear infinite;
-  }
-  @keyframes rotate {
-    to { transform: rotate(360deg); }
-  }
-}
-
-%loading-indicator {
-  @include loading-indicator;
-}
-
 @mixin scrollbar {
   &::-webkit-scrollbar {
     width: 6px;

diff --git a/playground/src/app.critical.scss b/playground/src/app.critical.scss
@@ -5,6 +5,10 @@
 @import 'components/atoms/_icon.scss';
 @import 'components/atoms/anchor';
 
+@keyframes rotate {
+  to { transform: rotate(360deg); }
+}
+
 :root {
   --header-height: 56px;
   --gradient-1: linear-gradient(225deg, rgba(41,50,60,1) 0%, rgba(72,85,99,1) 75%);

diff --git a/playground/src/fly-in/fly-in.scss b/playground/src/fly-in/fly-in.scss
@@ -1,4 +1,5 @@
 @import 'components/atoms/_text.scss';
+@import '../loader/loading-indicator.scss';
 
 .fly-in {
   $headerHeight: 64px;
@@ -66,7 +67,7 @@
     overflow: scroll;
 
     &.loading {
-      @include loading-indicator;
+      @extend %loading-indicator;
     }
   }
 

diff --git a/playground/src/import-url/import-url.scss b/playground/src/import-url/import-url.scss
@@ -1,5 +1,6 @@
 @import 'mixins.scss';
 @import 'components/atoms/_text.scss';
+@import '../loader/loading-indicator.scss';
 
 .import-url {
   &-bar {

diff --git a/playground/src/input-bar/input-bar.scss b/playground/src/input-bar/input-bar.scss
@@ -1,6 +1,7 @@
 @import '_variables.scss';
 @import '_functions.scss';
 @import 'components/atoms/_text.scss';
+@import '../loader/loading-indicator.scss';
 
 .input {
   &-help-text {

diff --git a/playground/src/loader/loader.critical.scss b/playground/src/loader/loader.critical.scss
@@ -1,4 +1,5 @@
 @import 'mixins.scss';
+@import './loading-indicator.scss';
 
 .loader {
   z-index: 10;

diff --git a/playground/src/loader/loading-indicator.scss b/playground/src/loader/loading-indicator.scss
@@ -0,0 +1,16 @@
+%loading-indicator {
+  pointer-events: none;
+
+  &:after {
+    content: '';
+    display: block;
+    width: 45px;
+    height: 45px;
+    margin: 100px auto auto auto;
+    padding: 1px;
+    border: 3px solid color('silver');
+    border-radius: 50%;
+    border-left-color: transparent;
+    animation: rotate 1.5s linear infinite;
+  }
+}