From ae10ffb7b35487b0d953f2759523d835bd9c505e Mon Sep 17 00:00:00 2001
From: Carol Soliman <17387510+carsoli@users.noreply.github.com>
Date: Thu, 7 Dec 2023 16:14:36 +0100
Subject: [PATCH] fix(_loading.scss): change mixin to template, remove margin

---
 .../kotti-ui/source/kotti-style/_loadings.scss  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-style/_loadings.scss b/packages/kotti-ui/source/kotti-style/_loadings.scss
index bb325db43f..1549f8a68a 100644
--- a/packages/kotti-ui/source/kotti-style/_loadings.scss
+++ b/packages/kotti-ui/source/kotti-style/_loadings.scss
@@ -14,11 +14,10 @@
 	}
 }
 
-@mixin skeleton-style($bg-x, $bg-y) {
+%skeleton-style {
 	box-sizing: border-box;
 	display: block;
 	width: 100%;
-	margin: 0.4rem 0;
 	line-height: 1px;
 	background: linear-gradient(
 		to left,
@@ -26,29 +25,35 @@
 		$lightgray-400 50%,
 		$lightgray-300 100%
 	);
-	background-size: $bg-x $bg-y;
 	border-radius: 2px;
 	animation: 2s ease-out infinite skeleton-loading;
 }
 
+.skeleton + .skeleton {
+	margin-top: 0.4rem;
+}
+
 .skeleton {
 	&.circle {
-		@include skeleton-style(1000px, 1000px);
+		@extend %skeleton-style;
 
 		padding-top: 100%;
+		background-size: 1000px 1000px;
 		border-radius: 100%;
 	}
 
 	&.square {
-		@include skeleton-style(1000px, 1000px);
+		@extend %skeleton-style;
 
 		padding-top: 100%;
+		background-size: 1000px 1000px;
 	}
 
 	&.rectangle {
-		@include skeleton-style(1800px, 1200px);
+		@extend %skeleton-style;
 
 		height: 0.4rem;
+		background-size: 1800px 1200px;
 
 		&.sm {
 			height: 0.4rem;