Skip to content

Commit

Permalink
fix(@clayui/css): Spinners deprecate Bootstrap 4 component. Enable ag…
Browse files Browse the repository at this point in the history
…ain by setting `$enable-bs4-deprecate: true;`.

fix(@clayui/css): Spinners deprecate variables `$spinner-*`
  • Loading branch information
pat270 committed Aug 23, 2021
1 parent d2c9027 commit 3f8fe71
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 41 deletions.
84 changes: 43 additions & 41 deletions packages/clay-css/src/scss/components/_spinners.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 14 additions & 0 deletions packages/clay-css/src/scss/variables/_spinners.scss
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 3f8fe71

Please sign in to comment.