fix(@clayui/css): Spinners deprecate Bootstrap 4 component. Enable again by setting $enable-bs4-deprecate: true;.

fix(@clayui/css): Spinners deprecate variables `$spinner-*`

Author: pat270

packages/clay-css/src/scss/components/_spinners.scss

@@ -1,51 +1,53 @@
-// Rotating border
+@if ($enable-bs4-deprecated) {
+	// Rotating border
 
-@keyframes spinner-border {
-	to {
-		transform: rotate(360deg);
+	@keyframes spinner-border {
+		to {
+			transform: rotate(360deg);
+		}
 	}
-}
 
-.spinner-border {
-	animation: spinner-border 0.75s linear infinite;
-	border-radius: 50%;
-	border-right-color: transparent;
-	border: $spinner-border-width solid currentColor;
-	display: inline-block;
-	height: $spinner-height;
-	vertical-align: text-bottom;
-	width: $spinner-width;
-}
+	.spinner-border {
+		animation: spinner-border 0.75s linear infinite;
+		border-radius: 50%;
+		border-right-color: transparent;
+		border: $spinner-border-width solid currentColor;
+		display: inline-block;
+		height: $spinner-height;
+		vertical-align: text-bottom;
+		width: $spinner-width;
+	}
 
-.spinner-border-sm {
-	border-width: $spinner-border-width-sm;
-	height: $spinner-height-sm;
-	width: $spinner-width-sm;
-}
+	.spinner-border-sm {
+		border-width: $spinner-border-width-sm;
+		height: $spinner-height-sm;
+		width: $spinner-width-sm;
+	}
 
-// Growing circle
+	// Growing circle
 
-@keyframes spinner-grow {
-	0% {
-		transform: scale(0);
+	@keyframes spinner-grow {
+		0% {
+			transform: scale(0);
+		}
+		50% {
+			opacity: 1;
+		}
 	}
-	50% {
-		opacity: 1;
-	}
-}
 
-.spinner-grow {
-	animation: spinner-grow 0.75s linear infinite;
-	background-color: currentColor;
-	border-radius: 50%;
-	display: inline-block;
-	height: $spinner-height;
-	opacity: 0;
-	vertical-align: text-bottom;
-	width: $spinner-width;
-}
+	.spinner-grow {
+		animation: spinner-grow 0.75s linear infinite;
+		background-color: currentColor;
+		border-radius: 50%;
+		display: inline-block;
+		height: $spinner-height;
+		opacity: 0;
+		vertical-align: text-bottom;
+		width: $spinner-width;
+	}
 
-.spinner-grow-sm {
-	height: $spinner-height-sm;
-	width: $spinner-width-sm;
+	.spinner-grow-sm {
+		height: $spinner-height-sm;
+		width: $spinner-width-sm;
+	}
 }

packages/clay-css/src/scss/variables/_spinners.scss

@@ -1,11 +1,25 @@
+/// @deprecated as of v3.x with no replacement
+
 $spinner-border-width: 0.25em !default;
+
+/// @deprecated as of v3.x with no replacement
+
 $spinner-width: 2rem !default;
 
+/// @deprecated as of v3.x with no replacement
+
 $spinner-height: $spinner-width !default;
 
 // Spinner Sm
 
+/// @deprecated as of v3.x with no replacement
+
 $spinner-border-width-sm: 0.2em !default;
+
+/// @deprecated as of v3.x with no replacement
+
 $spinner-width-sm: 1rem !default;
 
+/// @deprecated as of v3.x with no replacement
+
 $spinner-height-sm: $spinner-width-sm !default;