From 8cde7ff645e95afcf9407241b6d237472e1380bd Mon Sep 17 00:00:00 2001
From: mko <mko@scireum.de>
Date: Mon, 9 Dec 2024 16:29:14 +0100
Subject: [PATCH 1/3] Adds sci-preloader-small

A sightly smaller version of the preloader which can be used in tighter spaces

Fixes: OX-11681
---
 .../resources/assets/design-system/misc.scss  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/main/resources/assets/design-system/misc.scss b/src/main/resources/assets/design-system/misc.scss
index ea04ad473..1d8c59d9f 100644
--- a/src/main/resources/assets/design-system/misc.scss
+++ b/src/main/resources/assets/design-system/misc.scss
@@ -296,9 +296,12 @@
 }
 
 .sci-preloader {
+  --preloader-size: calc(3 * var(--sci-base-unit)); /* Default size */
+  --preloader-border-width: calc(0.2 * var(--sci-base-unit)); /* Default border width */
+
   position: relative;
-  height: calc(3 * var(--sci-base-unit));
-  width: calc(3 * var(--sci-base-unit));
+  height: var(--preloader-size);
+  width: var(--preloader-size);
 }
 
 .sci-preloader::before {
@@ -307,16 +310,22 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: calc(3 * var(--sci-base-unit));
-  height: calc(3 * var(--sci-base-unit));
-  margin-top: calc(-1.5 * var(--sci-base-unit));
-  margin-left: calc(-1.5 * var(--sci-base-unit));
+  width: var(--preloader-size);
+  height: var(--preloader-size);
+  margin-top: calc(-1 * var(--preloader-size) / 2);
+  margin-left: calc(-1 * var(--preloader-size) / 2);
   border-radius: 50%;
-  border-top: calc(0.2 * var(--sci-base-unit)) solid $sirius-gray;
-  border-right: calc(0.2 * var(--sci-base-unit)) solid transparent;
+  border-top: var(--preloader-border-width) solid $sirius-gray;
+  border-right: var(--preloader-border-width) solid transparent;
   animation: sciPreloader 1s linear infinite;
 }
 
+.sci-preloader-small {
+  --preloader-size: calc(2 * var(--sci-base-unit));
+  --preloader-border-width: calc(0.15 * var(--sci-base-unit));
+}
+
+
 @keyframes sciPreloader {
   to {
     transform: rotate(360deg);

From b954bea7ace1d5d3ad9c36a1800fee392dea01ff Mon Sep 17 00:00:00 2001
From: mko <mko@scireum.de>
Date: Mon, 9 Dec 2024 16:31:37 +0100
Subject: [PATCH 2/3] Removes unnecessary empty line

Fixes: OX-11681
---
 src/main/resources/assets/design-system/misc.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main/resources/assets/design-system/misc.scss b/src/main/resources/assets/design-system/misc.scss
index 1d8c59d9f..f76647224 100644
--- a/src/main/resources/assets/design-system/misc.scss
+++ b/src/main/resources/assets/design-system/misc.scss
@@ -325,7 +325,6 @@
   --preloader-border-width: calc(0.15 * var(--sci-base-unit));
 }
 
-
 @keyframes sciPreloader {
   to {
     transform: rotate(360deg);

From 571f4e55805089ebbf1084efab322ef84e112174 Mon Sep 17 00:00:00 2001
From: mko <mko@scireum.de>
Date: Mon, 9 Dec 2024 16:48:30 +0100
Subject: [PATCH 3/3] Bases the border with on the actual size

Fixes: OX-11681
---
 src/main/resources/assets/design-system/misc.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/assets/design-system/misc.scss b/src/main/resources/assets/design-system/misc.scss
index f76647224..bfc1fad7c 100644
--- a/src/main/resources/assets/design-system/misc.scss
+++ b/src/main/resources/assets/design-system/misc.scss
@@ -297,7 +297,7 @@
 
 .sci-preloader {
   --preloader-size: calc(3 * var(--sci-base-unit)); /* Default size */
-  --preloader-border-width: calc(0.2 * var(--sci-base-unit)); /* Default border width */
+  --preloader-border-width: calc(var(--preloader-size) * (0.2 / 3));
 
   position: relative;
   height: var(--preloader-size);
@@ -321,10 +321,11 @@
 }
 
 .sci-preloader-small {
-  --preloader-size: calc(2 * var(--sci-base-unit));
-  --preloader-border-width: calc(0.15 * var(--sci-base-unit));
+  --preloader-size: calc(2 * var(--sci-base-unit)); /* Smaller size */
+  /* No need to redefine --preloader-border-width; it adjusts automatically */
 }
 
+
 @keyframes sciPreloader {
   to {
     transform: rotate(360deg);