Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor spinners SCSS #27655

Closed
wants to merge 1 commit into from
Closed

refactor spinners SCSS #27655

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
53 changes: 28 additions & 25 deletions scss/_spinners.scss
View file
Open in desktop
@@ -1,36 +1,45 @@
//
// Rotating border
// Spinners
//

@keyframes spinner-border {
to { transform: rotate(360deg); }
}

.spinner-border {
%spinner {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Watch out with extends, you idea was probably to generate less code, but with this technique, you've added 2 extra selectors. I would prefer to see a mixin instead, but don't know if @mdo also agrees?

position: relative;
display: inline-block;
width: $spinner-width;
height: $spinner-height;
overflow: hidden;
text-indent: -999em;
vertical-align: text-bottom;
}

//
// Rotating border
//

@keyframes rotate {
to { transform: rotate(360deg); }
}

.spinner-border {
@extend %spinner;
border: $spinner-border-width solid;
border-color: currentColor transparent currentColor currentColor;
border-radius: 50%;
animation: spinner-border .75s linear infinite;
}
animation: rotate .75s linear infinite;

.spinner-border-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
border-width: $spinner-border-width-sm;
&.spinner-sm {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would not use the & here, we don't do that for other modifiers, eg .btn-lg:

bootstrap/scss/_buttons.scss

Line 110 in d96c147

.btn-lg {

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, the class is not correct

width: $spinner-width-sm;
height: $spinner-height-sm;
border-width: $spinner-border-width-sm;
}
}


//
// Growing circle
//

@keyframes spinner-grow {
@keyframes grow {
0% {
opacity: 0;
transform: scale(0);
Expand All @@ -45,19 +54,13 @@
}

.spinner-grow {
position: relative;
display: inline-block;
width: $spinner-width;
height: $spinner-height;
overflow: hidden;
text-indent: -999em;
vertical-align: text-bottom;
@extend %spinner;
background-color: currentColor;
border-radius: 50%;
animation: spinner-grow .75s linear infinite;
}
animation: grow .75s linear infinite;

.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
&.spinner-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}
}