Loader and animation

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 33 insertions, 53 deletions

diff --git a/core/css/icons.scss b/core/css/icons.scss
index 9afb5630181..a35f3f25c21 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -13,80 +13,60 @@
 
 .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
 	position: relative;
+	&:after {
+		z-index: 2;
+		content: '';
+		height: 30px;
+		width: 30px;
+		margin: -16px 0 0 -16px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		border-radius: 100%;
+		-webkit-animation: rotate .8s infinite linear;
+		animation: rotate .8s infinite linear;
+		-webkit-transform-origin: center;
+		-ms-transform-origin: center;
+		transform-origin: center;
+		border: 2px solid rgba(150, 150, 150, 0.5);
+		border-top-color: rgb(100, 100, 100);
+	}
 }
 
-.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
-	z-index: 2;
-	content: '';
-	height: 30px;
-	width: 30px;
-	margin: -16px 0 0 -16px;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	border-radius: 100%;
-	-webkit-animation: rotate .8s infinite linear;
-	animation: rotate .8s infinite linear;
-	-webkit-transform-origin: center;
-	-ms-transform-origin: center;
-	transform-origin: center;
-}
-
-.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
-	border: 2px solid rgba(150, 150, 150, 0.5);
-	border-top-color: rgb(100, 100, 100);
-}
-
-.icon-loading-dark:after, .icon-loading-small-dark:after {
+.icon-loading-dark:after,
+.icon-loading-small-dark:after {
 	border: 2px solid rgba(187, 187, 187, 0.5);
 	border-top-color: #bbb;
 }
 
-.icon-loading-small:after, .icon-loading-small-dark:after {
+.icon-loading-small:after,
+.icon-loading-small-dark:after {
 	height: 14px;
 	width: 14px;
 	margin: -8px 0 0 -8px;
 }
 
 /* Css replaced elements don't have ::after nor ::before */
-
-img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading {
-	background-image: url('../img/loading.gif');
-}
-
-img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark {
-	background-image: url('../img/loading-dark.gif');
-}
-
-img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small {
-	background-image: url('../img/loading-small.gif');
-}
-
-img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark {
-	background-image: url('../img/loading-small-dark.gif');
-}
-
-@-webkit-keyframes rotate {
-	from {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
+img, object, video, button, textarea, input, select {
+	.icon-loading {
+		background-image: url('../img/loading.gif');
 	}
-
-	to {
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
+	.icon-loading-dark {
+		background-image: url('../img/loading-dark.gif');
+	}
+	.icon-loading-small {
+		background-image: url('../img/loading-small.gif');
+	}
+	.icon-loading-small-dark {
+		background-image: url('../img/loading-small-dark.gif');
 	}
 }
 
-
 @keyframes rotate {
 	from {
-		-webkit-transform: rotate(0deg);
 		transform: rotate(0deg);
 	}
-
 	to {
-		-webkit-transform: rotate(360deg);
 		transform: rotate(360deg);
 	}
 }