mirror of
https://github.com/fleetdm/fleet
synced 2026-05-09 18:20:48 +00:00
0322bbb822
Changes: - Updated the styles of the `<ajax-button>` component to keep the content vertically aligned when the button displays a loading spinner.
63 lines
1.2 KiB
Text
Vendored
63 lines
1.2 KiB
Text
Vendored
|
|
/**
|
|
* <ajax-button>
|
|
*
|
|
* App-wide styles for our ajax buttons.
|
|
*/
|
|
|
|
[parasails-component='ajax-button'] {
|
|
.loading-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 3px solid #EEE;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
.button-loader, .button-loading {
|
|
display: none;
|
|
margin: auto;
|
|
|
|
.loading-dot {
|
|
opacity: 0;
|
|
display: inline;
|
|
.fade-in();
|
|
.animation-duration(1s);
|
|
.animation-iteration-count(infinite);
|
|
.animation-direction(linear);
|
|
&.dot1 {
|
|
.animation-delay(0.25s);
|
|
}
|
|
&.dot2 {
|
|
.animation-delay(0.5s);
|
|
}
|
|
&.dot3 {
|
|
.animation-delay(0.75s);
|
|
}
|
|
&.dot4 {
|
|
.animation-delay(1s);
|
|
}
|
|
}
|
|
}
|
|
&.syncing {
|
|
.button-loader, .button-loading {
|
|
display: inline-block;
|
|
height: 16px;
|
|
}
|
|
.button-text {
|
|
display: none;
|
|
}
|
|
|
|
|
|
}
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|